Gush – カスタマイズ備忘録〈その一〉 ～シンプルな構造で初心者でもカスタマイズしやすいWordPressテーマ（しかも無料！）～
■ Gush（公式サイト）
はじめに
「Gush」は「Naifix-起業バカ」というブログを運営されているElloraさんが作成された、無料のWordPress（以下WP）テーマです。
公式サイトをご覧いただければこのWPテーマがどういうものかは分かるかと思いますが、こんな方に向いています。以下引用です。
- 自分の思いどおりのデザインを実現したい
- レスポンシブデザインにしてみたい
- 複雑なものは不要
- HTML5にしてみたい
- できれば無料で
僕はWPテーマのカスタマイズ記事も多少書いていますが、実はPHPもHTMLもよく分かっていません。その都度調べながらテーマを弄っています。デフォルトの「Twenty Fourteen」でも僕には複雑過ぎます・・・ そんな初心者でもこの「Gush」は構造がシンプルなのでカスタマイズしやすいですね。
「Gush」の中身は極限までシンプルです。おそらく、拍子抜けするんじゃないかというぐらい何も複雑な設定をしていません。
このコンセプトが一番気に入っています。パソコンやスマホなんかでもある程度分かってくると、元からあるアプリやサービスが煩わしく感じてくるでしょう。” 素 ” の状態から自分好みにカスタマイズしていく工程は楽しいものです。
今回は僕が行った「Gush」のカスタマイズを紹介したいと思います。
参考になれば幸いです。
また、このような素晴らしいWPテーマを作成して下さった作者様に心より感謝申し上げます。
準備：カスタマイズ用にテーマを複製
通常WPテーマのカスタマイズをするときは「子テーマ」を作るのが定石です。
参考：Stinger3 – カスタマイズ備忘録〈その三〉 ～標準でSEOに強いWordPressテーマ（無料）～
ですが僕のやり方が悪いのかうまく反映されない場合があります。
参考：WordPress Bootstrapの子テーマ作成時、子テーマのスタイルシートが反映されない | doop
参考：【注意】子テーマをつくってのカスタマイズ方法 -functoins.php篇-｜ThePresentNote
何やら色々注意点が多いようですが、そもそもこの「Gush」というテーマはシンプルがウリです。ならば子テーマなど作らず複製したものを直接編集した方が手っ取り早いと考えました。
公式サイトからダウンロードした「gush.zip」をコピペして名前を変更します。今回は「Gush-Custom01.zip」としました。元のテーマと区別しやすいように「style.php」を編集してテーマ名を変えます。WPでインストールしてから「テーマの編集」をするか、7zipなどで .zipを解凍 → style.phpの編集 → .zipに再圧縮 → WPにインストール でも良いでしょう。
/* Theme Name: Gush-Custom01 Theme URI: https://gush.naifix.com/ Description: レスポンシブデザイン無料テーマ Version: 1.0.2 Author: Ellora Author URI: https://naifix.com/ */
「Theme Name」でテーマ名を変更できます。「Gush-Custom01」としました。
style.php他、ローカルで編集した設定ファイルをサーバーにいちいちアップするのも手間なので、今回のカスタマイズは全てWPの「テーマの編集」から行っています。
ヘッダーのブログタイトル部分をテキストからロゴ画像に変更
デフォルトだとh1でブログタイトルが青字のテキストで表示されています。味気ないのもありますし、スマホで見たときに変なトコで改行されてしまうので美しくありません。これを変更するにはheader.phpを編集します。52行目あたりにあるこの部分です。
<hgroup>
<h1 class="top_title"><a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2 class="caption"><?php bloginfo('description'); ?></h2>
</hgroup>
これを以下のように編集します。
<hgroup>
<h1 class="top_title"><a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/title_logo.png" /> </a></h1>
<h2 class="caption"><?php bloginfo('description'); ?></h2>
</hgroup>
予めロゴ画像、ここではtitle_logo.pngとなっていますが、コレをサーバーにアップしておきます。場所は
./wp-content/themes/Gush-Custom01/images
になります。サイズはスマホの表示に合わせて300×60としました。
記事下のSNSボタンを削除・Twitterフォローボタンの設置
SNSボタンはプラグインの「WP Social Bookmarking Light」を使うので標準のSNSボックスを削除しました。できればプラグインは使わない方向で考えているのですがどうも上手くいかないので・・・
single.phpの49行目付近のコレを削除します。
<footer>
<?php get_template_part('sns');?>
</footer>
Twitterフォローボタンのコードはコチラから取得して下さい。
Twitterボタン | About
「WP Social Bookmarking Light」の設定で記事下にSNSボタンを配置すると「タグの並び」の前に表示されるようです。間隔は <p style="margin-top:2em"> などで調整しました。記事上も同様です。
記事下のSNSのボックスの上にフォローボタンを配置するには、38行目の <?php wp_link_pages(); ?> と40行目の <div id="cat_tag"><span><?php the_category(‘ ‘) ?></span><span><?php the_tags(‘ ‘, ‘ ‘, ‘ ‘); ?></span></div> の間に取得したコードを貼り付けるといい具合にまとまります。
コメント欄の削除
元々コメント欄にはDisqusなんかも導入していたのですが読み込み速度もかかりますし、そもそもコメントする人など滅多にいないので削除。何かあればtwitterにでもコメント下さい・・・
弄るのはsingle.phpです。95行目あたりのコレを削除します。
<!--コメント--> <div id="comment_box"> <?php comments_template(); ?> </div> <!--//コメント-->
後で戻せるように <!–コメント–> <!–//コメント–> は残しておいた方がいいでしょう。
blockquote（引用タグ）の装飾・編集
blockquoteのデザインを変更。しばらくStinger3を使っていたので、それと比べると違和感があったので。
画像の準備
Stinger3のテーマ内の「images」フォルダからquote.pngという画像をお借りして、Gush-Custom01の「images」にコピーします。
style.php の編集
148行目あたりにあるコレを編集します。
blockquote {
width: 85%;
background: url(images/bq24.png) left top no-repeat;
margin: 1em auto 1em auto;
padding: 30px 5% 1% 3%;
border-left: 3px solid #777777;
border-top: 1px solid #777777;
border-right: 1px solid #777777;
border-bottom: 1px solid #777777;
}
これを次のように編集しました。
blockquote {
background-color: #f3f3f3;
background-image: url(images/quote.png);
background-repeat: no-repeat;
background-position: left top;
margin: 1em auto 1em auto;
padding: 70px 5% 1% 3%;
}
背景色を「quote.png」に合わせて、画像を指定。paddingで上の余白を70pxにしないと引用文が画像にかぶります。
フッター装飾・編集
弄るのはstyle.phpの843行目からの「フッター」部分です。Gushは画面の幅によってレイアウトを変更しているため、必要であればそれぞれ指定している箇所も編集しましょう。コメントで「768px ヘッダー」とか「1024px コンテンツ」とか書いてある箇所です。
フッター上部の余白を詰める
847行目からのこの部分を編集します。
#footer {
padding: 0 0;
color: #fff;
text-align: center;
background-color : #444;
overflow: hidden;
}
変更したのは「padding」だけです。標準では上の余白が24pxとなっています。フッターにウィジェットを置かなかったときに空間が空いてしまうのでこれを0にしました。
背景色を変えたい場合はここにある「background-color」で色を指定しましょう。色は「WEB色見本 原色大辞典 – HTML Color Names」などを参考にして下さい。
フッターウィジェットのタイトル部分
標準では、フッター左はh2、フッター中央とフッター右はh3となっており左に縦線が入ります。
866行目からのこの部分です。
#footer-in h2 {
border-left: 3px solid #c2082b;
font-size: 20px;
padding: 3px 0 3px 5px;
}
#footer-in h3 {
border-left: 3px solid #ffd700;
font-size: 20px;
padding: 3px 0 3px 5px;
}
縦線の装飾は必要ないと思ったので「border-left」の行をともに削除しました。
フッターウィジェットの余白を詰める
883行目からのこの部分、
#footer-in ul {
margin-bottom: 24px;
}
#footer-in ul li ul {
margin-bottom: 0;
}
.footer_l, .footer_c, .footer_r {
margin-bottom: 24px;
}
次のように変更しました。「margin-bottom」の値です。
#footer-in ul {
margin-bottom: 1px;
}
#footer-in ul li ul {
margin-bottom: 0;
}
.footer_l, .footer_c, .footer_r {
margin-bottom: 1px;
}
フッターウィジェットが何も無いときに表示される画像を非表示にする
footer.php を編集します。12行目からのこの部分。
<!--フッター左-->
<div class="footer_l">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar( 'footer_left' ) ) : else : ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/gush336280.jpg" alt="" width="336" height="280" />
<?php endif; ?>
</div><!--//footer_l-->
ウィジェット有無による分岐コードを削除します。変更後はこちら。
<!--フッター左--> <div class="footer_l"> <?php dynamic_sidebar( 'footer_left' ); ?> </div><!--//footer_l-->
サイドバーの編集
標準だと上から順に「広告」「NEW エントリー」「サイドバーウィジェット」と並びます。コレを「Googleカスタム検索」「広告」「自己紹介」「Facebookページ」「新着記事（※名前変更）」「サイドバーウィジェット」に変更しました。
Stinger3で標準搭載されていた「追尾式自動広告」機能をプラグイン「Standard Widget Extensions」で代用し、広告ではなく「人気の記事」と「カテゴリー」を追尾するようにしました。のちのち追尾させるウィジェットを変更できるように、それ以外の項目は全てコードを追記しました。
編集後のsidebar.phpはこのようになりました。<!– ここにコードを追記 –> の部分が追記・または取得したコードだと考えて下さい。
<!--sub-->
<div id="sub">
<!--Googleカスタム検索-->
<h4>サイト内検索</h4>
<Div Align="left">
<!-- ここにコードを追記 -->
</Div>
<p style="margin-top:2em">
<!-- AD -->
<h4>スポンサードリンク</h4>
<div class="side_ad">
<aside>
<?php dynamic_sidebar( 'side-ad' ); ?>
</aside>
</div>
<!-- 自己紹介-->
<h4>これ書いてる人</h4>
<Div Align="left">
<!-- ここにコードを追記 -->
</Div>
<p style="margin-top:2em">
<!-- FB Like Box -->
<h4>ふぇいすぶっく版</h4>
<Div Align="left">
<!-- ここにコードを追記 -->
</Div>
<div class="side_contents">
<p style="margin-top:2em">
<h4>新着記事</h4>
<div class="side_new clearfix">
<?php
$args = array(
'posts_per_page' => 5,
);
$st_query = new WP_Query($args);
?>
<?php if( $st_query->have_posts() ): ?>
<?php while ($st_query->have_posts()) : $st_query->the_post(); ?>
<dl><dt><span><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( 'thumb100' ); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
<?php endif; ?>
</a></span></dt><dd><span class="date"><?php echo get_post_time('Y.m.d D'); ?></span><br /><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</dd>
</dl>
<br class="clear" />
<?php endwhile; ?>
<?php else: ?>
<p>記事はありませんでした</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div><!--//side_new-->
</div><!--//side_contents-->
<div class="side_contents">
<ul>
<?php dynamic_sidebar( 'side-widget' ); ?>
</ul>
</div><!--//side_contents-->
</div><!--//sub-->
「NEW エントリー」の名前を「新着記事」に変更。表示させる記事数は ‘posts_per_page’ => 5, の数字で指定できます。
Googleカスタム検索の導入
Googleカスタム検索のコードはこちらから取得できます。使い方は割愛します。
Google カスタム検索
で、ここで取得したコードを使ってみたのですが、変な枠線が表示されてしまいました。デザインなども色々変更したのですが・・・
結局、次のようなコードを使用しました。「検索エンジンID」の部分をご自身のIDと入れ替えてお使い下さい。
<div id="search-box"> <form action="https://www.google.co.jp/cse" id="cse-search-box"> <div> <input type="hidden" name="cx" value="検索エンジンID" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" /> <input type="submit" name="sa" value="検索" /> </div> </form> </div> <script type="text/javascript" src="https://www.google.com/coop/cse/brand?form=cse-search-box&lang=ja"></script>
ちなみにIDは数字だけではなく「partner-pub-xxxxxxx:xxxxx」のようになります。
Twitter・Google+・Facebookページ
各SNSのソーシャルボタンやタイムラインを表示するコードは以下から取得できます。
◆Twitterボタン | About
◆Google+ バッジ – Google+ Platform — Google Developers
◆Facebook – Like Box
自己紹介やFacebookページの紹介に使用しました。
人気の記事を表示
プラグイン「Jetpack for WordPress」を使用しました。人気の記事表示以外にも「統計情報」や「Jetpack コメント」など様々な機能（今数えたら32個もあった）が付いてくるので大変便利です。
プラグインをインストールすると「利用できるウィジェット」に「人気の投稿とページ (Jetpack)」が追加されているのでこれを設置します。タイトルの編集、記事数や表示形式を選択できます。
スクロール追尾型サイドバーウィジェットの設置
上でも触れていますが、これはプラグイン「Standard Widget Extensions」を使用します。日本語公式サイト（？）があるので使い方などはそちらを参考にして下さい。
◆Standard Widget Extensions [日本語公式] | ヘタレな趣味の道
「Gush」の場合、指定する基本要素のパラメータは次のようになります。
メインカラムの ID：contents
サイドバーの ID：sub
ウィジェットのクラス名：widget
YouTube埋め込み動画をレスポンシブに対応
【2014年3月29日追記】
下記のコードは「Gush」標準で対応済みでした・・・
style.cssの168行目あたりの「動画レスポンシブ化」というトコロです。
テーマ標準で対応していない場合は参考にして下さい。
【2014年3月19日追記】
コチラの記事を参考にさせていただきましたm(_ _)m
◆ワードプレス投稿に埋め込んだYouTube動画を簡単なCSSで、たった2分でレスポンシブ対応！ | studioDoghands
単純にYouTubeのURLを記述した場合、PCで表示する分には問題ありませんが、スマホで見ると本文からはみ出してしまうのでこれを修正します。
style.phpの最後に以下を追記します。
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
記事中に挿入したいYouTube動画の埋め込みコードをiframeで取得します。動画上で右クリック → 埋め込みコードをコピー で取得できます。取得できたら記事中に次のように記述します。
<div class="video-container"> <iframe src="YouTubeなどの埋め込みコード"></iframe> </div>
同じ動画で比較してみます。
まずYouTubeのURLをそのまま記述した場合が以下。
次にレスポンシブに対応させた場合。
スマホから見た場合でもきちんと枠内に収まっているはずです。PCで表示させた場合も枠いっぱいまで幅があるので見やすいですね。
ヘッダーナビゲーションメニューをPCでも開閉式に変更
【2014年3月22日】
これは作者様に教えていただきましたm(_ _)m
@tomohiro_mogi 1024pxを境に「MENU▼」表示・非表示を切り替えています。常に「MENU▼」を表示して開閉式にする場合は、CSS（1024px）「.menubtn」と「.togmenu」を消してください。 pic.twitter.com/ew3rfOd7SM
— エローラ (@uszero800) 2014, 3月 18
デフォルトだと横幅1024px以上のPCで閲覧した場合、ヘッダーのナビゲーションメニューは一度開いたら開きっぱなしになるので、コレを開閉式になるよう修正しました。
弄るのはstyle.phpの1161行目あたりにあるこの部分。
/*--------------------------------------
1024px ナビゲーション
--------------------------------------*/
nav#menu ul {
width: 100%;
margin: 0 auto;
max-width: 1040px;
}
.menubtn {
display:none;
}
.togmenu {
display:block;
}
ここの.menubtn と.togmenu を削除すれば完了です。
あとがき
以上で今回のカスタマイズは終了です。お疲れ様でしたm(_ _)m
気になるSEO効果は導入したばかりなのでまだ分かりませんが、クロールが巡回しやすい設計になっているようなので期待しています。とは言え小手先の対策よりコンテンツを充実させる方が大事ですが。
冒頭でも述べましたが、何と言っても構造がシンプルなところが一番のお気に入りです。僕のような初心者でもコードを辿っていけば、「そのコードが何処で何をしているか？」が分かるのでカスタマイズの勉強にも最適です。
作者様にはあらためて感謝申し上げます。