【WordPress】WP To Top のカスタマイズ

2012.07.15 WordPress
【WordPress】WP To Top のカスタマイズ

ページ右下部もしくは左下部に「Back to top」というページ上部に戻るボタンを追加してくれるプラグイン『WP To Top』をカスタマイズしたのでメモ。

インストールして有効化しただけだとピンクの四角に「Back to top」の文字だけというちょっと味気ない感じなので、矢印の画像を用意して差し替えることにしました。

今回はサイズ縦横ともに40pxの画像を用意し、FTPソフトを使って「wp-content」フォルダ→「plugins」フォルダ→「wp-to-top」フォルダと進んだところにある「css」フォルダにアップロードしました。

プラグインのページで「WP To Top」の「編集」をクリックするとwp-to-top/wp-to-top.phpっていうファイルのソースが見れるので、それをずーっと下に見ていくと68行目あたり(そんなに下の方じゃないのですぐ見つかるはず)に

	/**
* For the footer. It contains the HTML markup for the floating area
*/
function footerWpToTop(){
if(get_option('wpToTopShowPost')){
if(is_single()){
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>';
}
}
else{
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」が二箇所あって、そのそれぞれの後ろで「takeMeUpContainer」っていうID名を付けたdiv要素と「takeMeUp」というID名を付けたspan要素を作りたいようです。

この「takeMeUpContainer」というdiv要素と「takeMeUp」というspan要素に「WP To Top」の設定画面で設定した内容が反映されます。

「takeMeUpContainer」にBackground color(背景色)とPosition(表示位置)、「takeMeUp」にText to show(最初に「Back to top」となっている文字)とForeground color(文字色)という感じです。

「Back to top」の文字を矢印画像に差し替えたいので、「takeMeUpContainer」の背景色をなくして、画像のサイズに合わせてwidthとheightを指定。「takeMeUp」には画像を挿入します。

	/**
* For the footer. It contains the HTML markup for the floating area
*/
function footerWpToTop(){
if(get_option('wpToTopShowPost')){
if(is_single()){
echo '<div id="takeMeUpContainer" style="display:none;'.get_option('wpToTopPosition').':5px;background-color:none;width:40px;height:40px;"><span id="takeMeUp"><img src="ホームページURL/wp-content/plugins/wp-to-top/css/画像ファイル名" /></span></div>';
}
}
else{
echo '<div id="takeMeUpContainer" style="display:none;'.get_option('wpToTopPosition').':5px;background-color:none;width:40px;height:40px;"><span id="takeMeUp"><img src="ホームページURL/wp-content/plugins/wp-to-top/css/画像ファイル名" /></span></div>';
}
}

ちなみにWordPressをサブディレクトリにインストールしている場合は、画像のパスはこうなります↓(WordPressを「wp」フォルダにインストールしている場合)

<img src="ホームページURL/wp/wp-content/plugins/wp-to-top/css/画像ファイル名" />

以上、お役に立てれば幸いです。では!

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら