Gush – カスタマイズ備忘録〈その二〉 ～シンプルな構造で初心者でもカスタマイズしやすいWordPressテーマ（しかも無料！）～
■ Gush（公式サイト）
そろそろ設定忘れそうなのでメモしときます。前回のカスタマイズはこちら ▼
◆Gush – カスタマイズ備忘録〈その一〉 ～シンプルな構造で初心者でもカスタマイズしやすいWordPressテーマ（しかも無料！）～
▼ 前回のカスタマイズ項目 ▼
- ヘッダーのブログタイトル部分をテキストからロゴ画像に変更
- 記事下のSNSボタンを削除・Twitterフォローボタンの設置
- コメント欄の削除
- blockquote（引用タグ）の装飾・編集
- フッター装飾・編集
- Googleカスタム検索の導入
- Twitter・Google+・Facebookページ
- 人気の記事を表示（Jetpackプラグイン）
- スクロール追尾型サイドバーウィジェットの設置
- YouTube埋め込み動画をレスポンシブに対応（デフォルトで導入済み）
今回の内容はこちら ▼
プラグインの導入
Gushのカスタマイズとは直接関係ありませんが、それに合わせてテーマファイルも編集しているので。
Yet Another Related Posts Plugin ：関連記事表示
関連記事を表示するプラグイン「Yet Another Related Posts Plugin（YARPP）」を導入しました。公式サイトからダウンロードするか、「新規プラグイン」から検索してインストールしましょう。
公式サイト：YARPP recommendation engine
Gushはデフォルトでも記事下に関連記事を表示してくれますが、同じカテゴリ内の記事しか表示できません。かと言って自分でコードなど書けないのでプラグインを利用しました。YARPPは関連させる項目や見た目など細かく設定できるので便利です。参考にさせていただいた記事はこちら ▼
参考：超簡単にYARPP(関連記事プラグイン)をカスタマイズする方法 – SiteMiru（してみる）
参考：WordPress関連記事プラグイン【Yet Another Related Posts Plugin（YARPP）】～デフォルトのサムネイル表示をキレイ＆簡単カスタマイズ♪～ | 初めてのWordPressカスタマイズ
プラグインの編集から見た目を変更します。変更するプラグインファイルは「yet-another-related-posts-plugin/includes/styles_thumbnails.css.php」です。最終的に下のようになりました。変更箇所には「/* 変更箇所① */」のように注釈を入れてあります。
<?php
/**
* Dynamic styles for YARPP's built-in thumbnails template
* @since 4.0
*/
$height = (isset($_GET['height'])) ? (int) $_GET['height'] : 120;
$width = (isset($_GET['width'])) ? (int) $_GET['width'] : 120;
$margin = 5;
$width_with_margins = $width + 4 * $margin; /* ← 変更箇所① */
$height_with_text = $height + 250; /* ← 変更箇所② */
$extra_margin = 7;
header('Content-Type: text/css');
?>
.yarpp-thumbnails-horizontal .yarpp-thumbnail, .yarpp-thumbnail-default, .yarpp-thumbnail-title {
display: inline-block;
*display: inline;
}
.yarpp-thumbnails-horizontal .yarpp-thumbnail {
border: 1px solid rgba(127,127,127,0.4); /* ← 変更箇所③ */
width: <?php echo $width_with_margins; ?>px;
height: <?php echo $height_with_text; ?>px;
margin: <?php echo $margin; ?>px;
margin-left: 0px; /* ← 変更箇所④ */
vertical-align: top;
}
.yarpp-thumbnail > img, .yarpp-thumbnail-default {
width: <?php echo $width; ?>px;
height: <?php echo $height; ?>px;
margin: <?php echo $margin; ?>px;
}
.yarpp-thumbnails-horizontal .yarpp-thumbnail > img, .yarpp-thumbnails-horizontal .yarpp-thumbnail-default {
display: block;
}
.yarpp-thumbnails-horizontal .yarpp-thumbnail-title {
font-size: 12px; /* ← 変更箇所⑤ */
/* max-height: 2.8em; */ /* ← 変更箇所⑥ ※コメントアウトのみ） */
line-height: 1.4em;
margin: <?php echo $extra_margin; ?>px;
margin-top: 0px;
width: <?php echo $width; ?>px;
text-decoration: inherit;
overflow: hidden;
}
.yarpp-thumbnail-default {
overflow: hidden;
}
.yarpp-thumbnail-default > img {
min-height: <?php echo $height; ?>px;
min-width: <?php echo $width; ?>px;
}
基本的には上述の参考記事と同様です。PCの画面サイズ（解像度）が横幅768px以上のとき、関連記事が4×2で8つ表示するよう文字サイズや余白を変更（変更箇所①③④⑤）、また長い記事タイトルでも全文表示できるように設定しました（変更箇所②⑥）。
デフォルトだと記事本文下に表示されますが、これだと記事本文として含まれてしまいます。当ブログでは「Table of Contents Plus」というプラグインで目次を表示させていますが、ここに「関連記事」も入ってしまい邪魔です。YARPPではコードで表示させることができるので、Gushのテーマファイル「single.php」に以下のコードを挿入しました。
<?php if(function_exists('related_posts')): ?>
<?php related_posts(); ?>
<?php endif; ?>
併せてGushデフォルトの関連記事を表示させる以下のコードは削除しました。
<div id="relations"> <h3>関連記事-こちらもどうぞ</h3> ・・・中略 ・・・ </div><!--//relations-->
Newpost Catch：最近の投稿（新着記事）をサムネイル付きで表示
公式サイト：Newpost Catch | 今村だけがよくわかるブログ（※画像もここから）
ウィジェットとしてももちろん、ショートコードを使うことでどこでも表示でき、細かい設定も可能です。使い方などは公式サイトをご覧下さい。サイドバーにある「新着記事」はデフォルトのままで良いのですが、フッターにウィジェットとして表示させたかったので導入しました。
FeedlyボタンとRSSボタンを表示（サイドバー用）
参考：WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法 | dmgadget(ディーエムガジェット)
参考記事のままです。サイドバーにある「これ書いてる人（自己紹介）」に表示させました。
理由はニュースやブログを読むのにfeedlyを使うようになって、その利便性に気づいたからです。登録者数は微増ですが取りこぼし防止ですね。
ちなみにFeedlyの登録者数を記録・解析する「Feedly Insight」というプラグインもあります。グラフが上がっているのを見ると励みになりますね。
Twitter 検索ウィジェット（エゴサーチ用）
Twitter で「mogi2fruits.net -from:tomohiro_mogi」と検索した結果 ▼
Twitter / 検索 – mogi2fruits.net -from:tomohiro_mogi
これは自分（@tomohiro_mogi）を除く、このブログのURL（mogi2fruits.net）を含んだツイートを検索しています。Bufferなどで短縮されたURLでも検索されます。Twitter の感想を見るのもまた励みになりますし、記事内容に誤りがあったときにご指摘いただくこともあるので大変助かります。もしかすると本人は検索されているとは思っていないかもしれませんが。
検索ウィジェットの作り方
作り方は簡単です。Twitter の「設定 → ウィジェット」から「新規作成」。タイムラインソースの選択で「検索」。「検索クエリ」に検索したいもの（ここでは「mogi2fruits.net -from:tomohiro_mogi」）を入力します。その他設定はお好みで。作成後、下に出てくるコードをサイトにコピペすれば完成です。
ヘッダー：ナビゲーションボタン
作者様に教えていただき、前回の記事ではPC表示で横幅1024px以上でも開閉式になるように変更しました。カテゴリーを表示させていますが当ブログではカテゴリ名も長く、3階層まであるため開きっぱなしでは邪魔になるからです（上の画像）。
細かい点ですが、ナビゲーションのタイトルもデフォルトの「MENU ▼」から「カテゴリーリスト [ Open ▼ / Close ▲]」に変更し中央配置にしました。header.php の該当箇所を編集しています。
（変更前） <div class="menubtn">MENU ▼</div> ↓ （変更後） <div class="menubtn"><p style="text-align: center;">カテゴリーリスト [ Open ▼ / Close ▲] </p></div>
よくよく考えてみると「カテゴリーの表示なのに『MENU』 ってなんだ？」、「見た人がクリックしようとは思わないのではないか？」、そもそも「『クリックできるとは思っていない』のではないか？」と疑問に思ったからです。知識があればマウスオーバーで色を変えたりするのですができないので・・・ これならテキストだけでもここが開閉できることは分かるんじゃないかなと。[ Open ▼ / Close ▲] となっていますが、ドコをクリックしても開閉します。
フッター：文字サイズ・横幅
Gushのフッターは3箇所。フッター左（footer_l）、フッター中（footer_c）、フッター右（footer_r）。左と中に「新着記事」と「人気記事」を入れたい。「新着記事」は前述の「Newpost Catch」で、「人気記事」は「Jetpack for WordPress」で実装しました。前回も弄りましたが、左と中で文字サイズが異なりバランスが悪かったのでもうちょっと調整します。さらにそれぞれの幅も調整します。style.php の「1024px のフッター」部分を編集。
▼ 元のコード ▼
/*--------------------------------------
1024px フッター
--------------------------------------*/
#footer {
width: 100%;
margin: 0 auto;
clear: both;
}
#footer-in {
width: 1040px;
margin: 0 auto 24px auto;
}
#footer-in p {
margin-bottom: 5%;
}
#footer-in h2 {
border-left: 5px solid #c2082b;
font-size: 20px;
padding: 5px 0 5px 8px;
}
#footer-in h3 {
border-left: 5px solid #ffd700;
font-size: 20px;
padding: 5px 0 5px 8px;
}
.footer_l {
float: left;
width: 336px;
font-size: 90%;
}
.footer_c, .footer_r {
width: 320px;
}
.footer_l, .footer_c {
margin: 0 32px 0 0;
}
}/*1024end*/
▼ 変更後 ▼
/*--------------------------------------
1024px フッター
--------------------------------------*/
#footer {
width: 100%;
margin: 0 auto;
clear: both;
}
#footer-in {
width: 1040px;
margin: 0 auto auto auto;
}
#footer-in p {
margin-bottom: 5%;
}
#footer-in h2 {
font-size: 20px;
padding: 1px 0 1px 8px;
}
#footer-in h3 {
font-size: 20px;
padding: 1px 0 1px 8px;
}
.footer_l {
float: left;
width: 320px;
font-size: 90%;
}
.footer_c {
width:320px;
font-size: 90%;
}
.footer_r {
width: 336px;
font-size: 90%;
}
.footer_l, .footer_c {
margin: 0 32px 0 0;
}
}/*1024end*/
オリジナルだとそれぞれの幅が左から 336px・320px・320px （中と右はまとめて定義）となっていますがこれを 320px・320px・336px としました。フォントサイズも左と中を合わせました（「font-size: 90%;」の部分）。フッター右を 336px としたのは336×280 のアドセンス広告に合わせるためと、Twitterウィジェットを広く表示させるためです。
※320px のままでも表示されましたがなんとなく気持ち悪いので・・・
サイドバー：表示項目・配置順
上から順に「広告・これ書いてる人・新着記事・サイドバーウィジェット」としました。ウィジェット以外は sidebar.php を直接編集しています。前回の記事では一番上に「Googleカスタム検索」を入れていましたが、検索結果がおかしくなったので削除しました。てか標準の検索で十分です。
ウィジェットは「Standard Widget Extensions」でスクロール追尾するようになっています。広告はともかく、回遊性を上げるために今回は「検索・カテゴリー・アーカイブ」を入れました。「人気記事」を入れたこともありましたが、それほど頻繁に順位が変わるわけでもなく、何度も同じ記事を紹介されてもつまらないかと思ったからです。自分の確認のためも含め「人気記事」はフッターに移しました。ここは直帰率の変化を見て色々試した方が良さそうです。「関連記事」を表示させてもいいかも。
あとがき
今回のカスタマイズは以上です。
前回から引き続き、子テーマは作らずオリジナルをコピーして編集しているので備忘録書いておかないと自分が忘れちゃいますね。後でプラグインのまとめ記事も書こうかな。