[WP]Simplicityの「トップへ戻るボタン」・「メニューボタン」にテキストを入れる方法

最近、ひとさまのWordpressのテーマを作っています、えむ氏（@mlog_xyz）です。

自分のブログのテーマをカスタマイズしようとしていた矢先、友達のホームページデザインをお願いされ、自分のブログそっちのけで、そればっかりやっていました。

僕のブログのテーマはわいひらさんのSimplicityを使っていまして、それに慣れているので、そちらでもSimplicityを使ってカスタマイズをしました。

友達がWordpressでサイトを作ると言ったとき、有料テーマを買おうとしていたんだけど、高い金出して有料テーマ買わなくてもいいんじゃないか、Simplicityでも良いサイト作れるよ、何なら僕が作るよと、ということになりました。

Simplicityは商用でも使えますし、無料で利用できるし、SEOも考慮してるし、カスタマイズしやすいし、レスポンシブなので、言うことなしのテーマです。

「トップへ戻るボタン」のカスタマイズ

Simplicityでは、Wordpress管理画面から「トップへ戻るボタン」の色、背景色を変えたり、アイコンをFont Awesomeから選択できたりアイコンを画像に差し替えたり、簡単に変更できます。

だけど一つ簡単にできないことが、それがテキスト（文字）を入れること。「トップへ戻るボタン」ってアイコンだけじゃなく、「TOP」とか「PAGE TOP」とか「TOPへ戻る」とかのテキストも入ってたりするでしょ。友達のサイトにはぜひ入れてあげたくなったので、やってみました。

「トップへ戻るボタン」は「button-go-to-top.php」の中に

まず、「トップへ戻るボタン」を表示するためのテンプレートは「button-go-to-top.php」になります。ですので、テーマの編集から「button-go-to-top.php」をいじるのですが、直接いじっていしまうと元に戻せなくなるので、子テーマをインストールして、その中に「button-go-to-top.php」をFTPクライアントソフト等でコピーして、そちらをいじるといいと思います。

「button-go-to-top.php」の中身

テーマの編集から「button-go-to-top.php」を見てみると、以下の箇所があります。ここら辺にテキストをいれます。もう少し上は「トップへ戻るボタンに画像が指定されている場合」なので、いじりません。

<a id="move-page-top"><span class="fa <?php echo get_go_to_top_button_icon_font(); //Font Awesomeアイコンフォントの取得 ?> fa-2x"></span></a>

「トップへ戻るボタン」にテキストを入れる方法

アイコンの下にテキストを入れる

まずはアイコンの下に「TOP」というテキストを入れてみます。こんな感じになります。

コードは下記のように書き換えました。アイコンの後ろで改行して、「TOP」というテキストを入れただけです。

<a id="move-page-top"><span class="fa <?php echo get_go_to_top_button_icon_font(); //Font Awesomeアイコンフォントの取得 ?> fa-2x"></span><br />TOP</a>

アイコンの右にテキストを入れる

他のパターンとして、アイコンの右に「PAGE TOP」というテキストを入れてみます。こんな感じになります。

コードは下記のように書き換えました。アイコンの前にテキストを入れて、アイコンは以前より小さくしました。

<a id="move-page-top">PAGE TOP <span class="fa <?php echo get_go_to_top_button_icon_font(); //Font Awesomeアイコンフォントの取得 ?> fa-1x"></span></a>

「トップへ戻るボタン」を丸くする

ついでにボタンを丸くする方法も紹介します。こんな感じのボタンにします。

これはスタイルシート（CSS）をいじって変えます。

ちなみにデフォルトの「トップへ戻るボタン」のCSSは以下の通りです。

/************************************
** TOPへ戻るボタン（Go to top）
************************************/
#page-top{
  position:fixed;
  display:none;
  right: 10px;
  bottom: 10px;
}

#page-top a{
  color:#fff;
  padding:7px;
  text-decoration:none;
  display:block;
  cursor:pointer;
  text-align:center;
  background-color: #aaa;
  line-height:100%;
  border-radius: 4px;
  font-size:11px;
}

このCSSがSimplicityの親テーマのスタイルシート（style.css）に記述されています。ここを書き換えてもいいですが、「button-go-to-top.php」のテンプレートと同じように、子テーマに記述したほうがいいでしょう。

記述する場所は子テーマ内のスタイルシート（style.css）、完全レスポンシブな人は「responsive.css」に記述します。

スタイルシート内に下記を書き加えます。子テーマに記述したものは親テーマより優先されます。

#page-top{
    right: 20px;
}

#page-top a{
    width:100%;
    border-radius: 50%;

}

「メニューボタン」にテキストを入れる方法

モバイル画面のメニューボタンにもテキストを入れてみます。こんな感じです。

「メニューボタン」を表示するためのテンプレートは「button-menu.php」ですので、「button-go-to-top.php」のときのように、親テーマから子テーマにコピーして、それをいじります。

<a id="<?php echo $button_id; ?>" href="<?php echo $href_val; ?>"><span class="fa <?php echo get_menu_button_icon_font(); //Font Awesomeアイコンフォントの取得 ?> fa-2x"></span></a>

「button-menu.php」の中に上記の箇所があります。この箇所を下記のように書き換えました。アイコンの前に「MENU」というテキストを入れてその後ろで改行しだけです。

<a id="<?php echo $button_id; ?>" href="<?php echo $href_val; ?>">MENU<br /><span class="fa <?php echo get_menu_button_icon_font(); //Font Awesomeアイコンフォントの取得 ?> fa-2x"></span></a>

このままでもいいいんですが、「トップへ戻るボタン」とボタンの大きさが違ったり、余白が違ったりするので、スタイルシートで「トップへ戻るボタン」に合わせてみました。

こんな感じのボタンになります。

ちなみにデフォルトの「メニューボタン」のCSSは以下の通りです。

/************************************
** モバイルメニュー
************************************/
#mobile-menu{
  display:none;
}

#mobile-menu a{
  color:#333;
  padding: 4px 8px;
  text-decoration:none;
  display:block;
  cursor:pointer;
  text-align:center;
  line-height:100%;
  border-radius: 3px;
  position:absolute;
  right: 7px;
  font-size: 15px;
  margin-top: 3px;
}

#mobile-menu a:hover,
#page-top a:hover{
  opacity: 0.7;
}

このCSSがSimplicityの親テーマのスタイルシート（style.css）に記述されていますが、前回と同じように子テーマのスタイルシートに下記を追加記述します。

#mobile-menu a{
    padding:7px;
    border-radius: 4px;
    font-size:11px;
}

まとめ

ちょっとしたカスタマイズですが、Simplicityっぽさから脱却できるかもしれませんよ。