Gush – カスタマイズ備忘録〈その一〉 ~シンプルな構造で初心者でもカスタマイズしやすいWordPressテーマ(しかも無料!)~

公開日:  最終更新日:2014/04/08

LINEで送る
Pocket

gush
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」としました。
style.php他、ローカルで編集した設定ファイルをサーバーにいちいちアップするのも手間なので、今回のカスタマイズは全てWPの「テーマの編集」から行っています。

ヘッダーのブログタイトル部分をテキストからロゴ画像に変更

デフォルトだとh1でブログタイトルが青字のテキストで表示されています。味気ないのもありますし、スマホで見たときに変なトコで改行されてしまうので美しくありません。これを変更するにはheader.phpを編集します。52行目あたりにあるこの部分です。

これを以下のように編集します。

予めロゴ画像、ここではtitle_logo.pngとなっていますが、コレをサーバーにアップしておきます。場所は

./wp-content/themes/Gush-Custom01/images

になります。サイズはスマホの表示に合わせて300×60としました。

記事下のSNSボタンを削除・Twitterフォローボタンの設置

SNSボタンはプラグインの「WP Social Bookmarking Light」を使うので標準のSNSボックスを削除しました。できればプラグインは使わない方向で考えているのですがどうも上手くいかないので・・・

single.phpの49行目付近のコレを削除します。

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行目あたりのコレを削除します。

後で戻せるように <!–コメント–> <!–//コメント–> は残しておいた方がいいでしょう。

blockquote(引用タグ)の装飾・編集

blockquoteのデザインを変更。しばらくStinger3を使っていたので、それと比べると違和感があったので。

画像の準備

Stinger3のテーマ内の「images」フォルダからquote.pngという画像をお借りして、Gush-Custom01の「images」にコピーします。

style.php の編集

148行目あたりにあるコレを編集します。

これを次のように編集しました。

背景色を「quote.png」に合わせて、画像を指定。paddingで上の余白を70pxにしないと引用文が画像にかぶります。

フッター装飾・編集

弄るのはstyle.phpの843行目からの「フッター」部分です。Gushは画面の幅によってレイアウトを変更しているため、必要であればそれぞれ指定している箇所も編集しましょう。コメントで「768px ヘッダー」とか「1024px コンテンツ」とか書いてある箇所です。

フッター上部の余白を詰める

847行目からのこの部分を編集します。

変更したのは「padding」だけです。標準では上の余白が24pxとなっています。フッターにウィジェットを置かなかったときに空間が空いてしまうのでこれを0にしました。

背景色を変えたい場合はここにある「background-color」で色を指定しましょう。色は「WEB色見本 原色大辞典 – HTML Color Names」などを参考にして下さい。

フッターウィジェットのタイトル部分

標準では、フッター左はh2、フッター中央とフッター右はh3となっており左に縦線が入ります。
866行目からのこの部分です。

縦線の装飾は必要ないと思ったので「border-left」の行をともに削除しました。

フッターウィジェットの余白を詰める

883行目からのこの部分、

次のように変更しました。「margin-bottom」の値です。

フッターウィジェットが何も無いときに表示される画像を非表示にする

footer.php を編集します。12行目からのこの部分。

ウィジェット有無による分岐コードを削除します。変更後はこちら。

サイドバーの編集

標準だと上から順に「広告」「NEW エントリー」「サイドバーウィジェット」と並びます。コレを「Googleカスタム検索」「広告」「自己紹介」「Facebookページ」「新着記事(※名前変更)」「サイドバーウィジェット」に変更しました。

Stinger3で標準搭載されていた「追尾式自動広告」機能をプラグイン「Standard Widget Extensions」で代用し、広告ではなく「人気の記事」と「カテゴリー」を追尾するようにしました。のちのち追尾させるウィジェットを変更できるように、それ以外の項目は全てコードを追記しました。

編集後のsidebar.phpはこのようになりました。<!– ここにコードを追記 –> の部分が追記・または取得したコードだと考えて下さい。

「NEW エントリー」の名前を「新着記事」に変更。表示させる記事数は ‘posts_per_page’ => 5, の数字で指定できます。

Googleカスタム検索の導入

Googleカスタム検索のコードはこちらから取得できます。使い方は割愛します。
Google カスタム検索

で、ここで取得したコードを使ってみたのですが、変な枠線が表示されてしまいました。デザインなども色々変更したのですが・・・

結局、次のようなコードを使用しました。「検索エンジンID」の部分をご自身のIDと入れ替えてお使い下さい。

ちなみに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)」が追加されているのでこれを設置します。タイトルの編集、記事数や表示形式を選択できます。

人気の投稿とページ (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の最後に以下を追記します。

記事中に挿入したいYouTube動画の埋め込みコードをiframeで取得します。動画上で右クリック → 埋め込みコードをコピー で取得できます。取得できたら記事中に次のように記述します。

同じ動画で比較してみます。
まずYouTubeのURLをそのまま記述した場合が以下。

次にレスポンシブに対応させた場合。

スマホから見た場合でもきちんと枠内に収まっているはずです。PCで表示させた場合も枠いっぱいまで幅があるので見やすいですね。

ヘッダーナビゲーションメニューをPCでも開閉式に変更

【2014年3月22日】
これは作者様に教えていただきましたm(_ _)m

デフォルトだと横幅1024px以上のPCで閲覧した場合、ヘッダーのナビゲーションメニューは一度開いたら開きっぱなしになるので、コレを開閉式になるよう修正しました。
弄るのはstyle.phpの1161行目あたりにあるこの部分。

ここの.menubtn と.togmenu を削除すれば完了です。

あとがき

以上で今回のカスタマイズは終了です。お疲れ様でしたm(_ _)m

気になるSEO効果は導入したばかりなのでまだ分かりませんが、クロールが巡回しやすい設計になっているようなので期待しています。とは言え小手先の対策よりコンテンツを充実させる方が大事ですが。

冒頭でも述べましたが、何と言っても構造がシンプルなところが一番のお気に入りです。僕のような初心者でもコードを辿っていけば、「そのコードが何処で何をしているか?」が分かるのでカスタマイズの勉強にも最適です。

作者様にはあらためて感謝申し上げます。

LINEで送る
Pocket

サイト内検索

スポンサードリンク

これ書いてる人

こんな記事書いてますが本業は ラーメン屋 です。 詳細はコチラ



follow us in feedly

PAGE TOP ↑