WP to TOP → ページトップにジャンプ

WP to TOP

ページ右下に「ページトップにジャンプする」ボタンを設置するものです。
デフォルトだとデザインがとてもしょぼいので、手作りのイメージを使ってカスタマイズしました。

まず設定で「Show only in posts, not all pages」のチェックを外します。

幅35ピクセル、高さ64ピクセルで矢印のイメージを作り、プラグインの適当なディレクトリにFTPでアップ。

phpファイルの変更

「wp-to-top.php」をローカルに落とし

74行目と78行目の

  • バックグラウンドカラーを無しに
  • ブロック要素のボックスをイメージと同じサイズに指定
  • イメージにリンク

させました。

echo '<div id="takeMeUpContainer" style="display:none;'.get_option('wpToTopPosition').':5px;background-color:'.get_option('wpToTopBgColor').'">
<span id="takeMeUp" style="color:'.get_option('wpToTopFgColor').';">'.get_option('wpToTopText').'</span>
</div>';

echo '<div id="takeMeUpContainer" style="display:none;'.get_option('wpToTopPosition').':5px;background-color:none;width:35px;height:64px;">
<span id="takeMeUp"><img src="http://mocamoca.com/wordpress/wp-content/plugins/wp-to-top/css/goto_top.gif" /></span>
</div>

CSSの変更

さらに「wp-to-top.css」のpaddingをコメントアウトしました。

#takeMeUpContainer {
	bottom:5px;
	display:block;
	font-family:tahoma;
	font-size:11px;
	font-weight:bold;
	/* padding:7px 7px 7px 10px;  */
	position:fixed;
	text-decoration:none;
	cursor: pointer;
	width:70px;
}

(参照元:【WordPress】WP To Top のカスタマイズ)(別ウインドー)