【WordPress】テーマを「Gush」から「Gush2」に変更しました！

バイクオフシーズンにつき、ちょっと普段のジャンルとは違うトピックで記事をあげております。

今回はWordpressのテーマを「Gush2」に変更したので、そのことについてです。特に深い理由はありません。以前より「Gush」を使用させていただいていたので、「Gush2」なるアップグレード版と思われるテーマに興味があったのが一点。

あとは、気分転換とか、綺麗なサイトを見て羨ましくなったりとか、そんな感じで、「思い立ったが吉日」と言うことで「Gush2」にしてみました。

カスタマイズ前提のWordpress用軽量テーマ「Gushシリーズ」が好きだ！

初代「Gush」を使ってみて

私はcssやhtmlの知識があるわけではありません。要は初心者なので、簡単にカスタマイズできるテーマで、かつ軽いテーマが良いわけです。（以前にも少し書きましたが）

簡単にカスタマイズできる=シンプルな構造=軽い、と多分相関していると思います。

そんなわけで、無料で軽量かつカスタマイズしやすいという「Gush」を使用していました。

実際、軽さもカスタマイズのしやすさも申し分なしで、暇があればちょくちょく弄っては失敗したりしながら、楽しませていただきました。自分なりのアレンジによってちょっとは個性出せたように思え、満足もしていました。ま、まあ初心者なので大したことはしていないんですけど。

でも私、飽き性なんですよね。

「Gush2」にしたい！

或る日突然、Gush2にしたいという想いが私の中に芽生えました。

Gush2はGushより、デフォルトのデザインが美しく、大したカスタマイズが出来ずともより洗練されたテーマとして仕上がりそうだと思ったのと、好奇心。

ブログなんて自分が自己満足でやっているものだし、誰に断る必要もない。

やりたいと思った時がやりどきなのだ！

そうして私はGush2をダウンロードし、インストールすることにしました。

「Gush2」ダウンロードページへ

開発者：Elloraさん

ただ単に好奇心というわけでもなく、一応目当ての新機能がありました。

それは、プルダウンメニューです。

メニューにカーソルを乗せると、プルダウン表示でさ細かいカテゴリなどのメニューを表示できます。Gush無印ではこの機能はなく、実装するにはプラグインを用いるか、自分でメニューを作る必要があり、ちょっと面倒でした。

今回Gush2にて実装されていていて本当に嬉しい。

こんな感じで変化しました

私のWordpressテーマのカスタマイズ手順

Gush2のカスタマイズの前に、私がまずテーマをカスタマイズする前に行うことをご紹介します。

メインブログとは別のテスト用Wordpressでカスタマイズをテストする

私がいつもWordpressテーマやプラグインをカスタマイズするときには、今ご覧いただいているブログとは別のテスト用Wordpressを利用することが多いです。

理由は何かトラブルがあって「ぶっ壊れても大丈夫」なようにです。

バックアップを取っておけば良い話かもしれませんが・・

テンプレート確認用 WordPressを中心としたWeb制作をちょっとずつ勉強してみます

こんなページ。幾つか適当な文章の羅列と、記事のコピペがあるだけです。

そういうわけで、初めにサーバー上に１つ別ディレクトリを作って、そこにインストールしたテスト 用Wordpressにカスタマイズのベースとするテーマをインストールして、それからカスタマイズを始めます。

「Gush2」でカスタマイズした部分

では、私が実際にGush2カスタマイズした部分と、幾つかわかる範囲でその方法をご紹介します。私も大して理解していないので悪しからず。

ヘッダーのタイトルとグレー部分の削除

ヘッダー部分のグレーの部分及び、サイトタイトルと紹介文を削除しました。その代わりにサイドバーにタイトルロゴを表示。

ヘッダーのタイトルとブログ紹介文、グレー部分の削除方法

ヘッダーのファイル「header.php」内の以下の部分をごっそり削除します。

<div class="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>
</div>

「＜h1＞＜/h1＞」のタグ間はブログタイトルを取得して表示しています。
「＜h2＞＜/h2＞」のタグ間はブログ紹介文を取得して表示しています。これらを全部削除することで、ヘッダーのタイトルとブログ紹介文、グレー部分を削除できます。ただ、これだけだと、グレーのテクスチャ部分がちょこっとだけ残ってしまいます。
これも消したければ、「style.css」を少し書き換えます。

具体的には、「style.css」ファイルの中の「ヘッダ見出し」と書かれているところを探してください。余白が指定されている部分を編集します。

/*--------------------------------------
  ヘッダ見出し
--------------------------------------*/
#header {
	text-align: center;
	background: #666;
	padding: 0 0 12px;
	border-bottom: 1px solid #fff;
}

上の一部を削除して下のようにします。

/*--------------------------------------
  ヘッダ見出し
--------------------------------------*/
#header {
	text-align: center;
	background: #666;
}

すると、Gush2のヘッダ部分はヘッダのメニュー以外全て見えなくなります。「background: #666;」も消してしまっても問題ありません。

ヘッダーのタイトルを画像にする

また、タイトルや紹介文をロゴ画像に変えたい場合も「header.php」の上で示した場所をいじります。

文字の部分を画像に置き換えます。例えばこんな感じ↓

<div class="hgroup">
<h1 class="top_title"><a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><img src="タイトル画像URL"></a></h1>
<h2 class="caption"><img src="紹介文画像URL"></h2>
</div>
</header>

画像に置き換えるのであれば「＜h1 class=”top_title”＞」などのクラス指定を消してしまっても問題ありません。まあその辺りは臨機応変に。

ただし、タイトルや紹介文は「＜h1＞」や「＜h2＞」で見出しとして指定されており、むやみに消すとせっかくのGush2のアウトラインが崩れてしまいます。このあたりは自身の判断でご自由に。

サムネイルの大きさ変更と抜粋文の追加などレイアウト変更

やはりアイキャッチを大きめにしました。また、今回は抜粋文と続きを読むボタンも付けてみました。

さらに、要素全体にリンクを反映させてみました。トップページで記事のどの場所をクリックしても本文ページにリンクしています。（続きを読むボタンいらなくね？）

Gush2の記事アイキャッチサムネイル画像の大きさ変更方法

サムネイルの大きさを変更するためには、変更箇所がいくつかあります。

二つ目については、Gush2はレスポンシブデザインなので、携帯表示の時（モニターサイズ・解像度が768pxより小さいとき）とPC表示（モニターサイズが768pxより大きいとき）でサムネイルの大きさを指定している場所が２ヶ所あるのでそれぞれ変更します。

まずはサムネイルのサイズを決めましょう。デフォルトではPCやタブレットでは縦150px、横150pxです。スマホでは横幅のみ100pxで指定されています。

今回はPCやタブレットで見た場合、縦300px、横300pxのサムネイル。スマホでは縦150px、横150pxとなるように変更してみます。

先ずは「function.php」（テーマのための関数）内に、300px　× 300pxのサムネイルを生成をさせるために次の場所に追記します。

「function.php」内に以下のような記述があります。

//アイキャッチサムネイル生成
add_theme_support('post-thumbnails');
add_image_size('thumb100',100,100,true);
add_image_size('thumb110',110,110,true);

ここに、次のように追記します。

//アイキャッチサムネイル生成
add_theme_support('post-thumbnails');
add_image_size('thumb100',100,100,true);
add_image_size('thumb110',110,110,true);
add_image_size('thumb300',300,300,true);

一番下に一行、縦横300pxのサムネイル生成用の指定を追記しました。

つぎに「home.php」内のサムネイル指定箇所を変更します。下記の記載を変更します。

<?php
$title= get_the_title();
the_post_thumbnail(array( 150,150 ),
array( 'alt' =>$title, 'title' => $title)); ?>

上記を次のように変更します。

<?php
$title= get_the_title();
the_post_thumbnail('thumb300',
array( 'alt' =>$title, 'title' => $title)); ?>

最後に、「style.css」内のサムネイルサイズの指定箇所、２箇所を変更します。

⚫︎先ずはPCやタブレット表示用のアイキャッチサムネイルサイズ指定場所です。以下の場所を変更します。

#contents #main .home_area .thumb_box {
	float: left;
	margin: 0 10px 0 0;
	width: 150px;
	height: 150px;
}

次のように変更します

#contents #main .home_area .thumb_box {
	float: left;
	margin: 0 10px 0 0;
	width: 300px;
	height: 300px;
}

⚫︎次に、スマホ表示のアイキャッチサムネイルサイズを変更します。以下の場所を変更します。

#contents #main .home_area .thumb_box {
	float: left;
	width: 100px;
	margin: 0 8px 0 0;
}

次のように変更・追記します。

#contents #main .home_area .thumb_box {
	float: left;
	width: 150px;
	height: 150px;
	margin: 0 8px 0 0;
}

これで、ホーム画面での記事のアイキャッチサムネイルの表示サイズが、PCやタブレットで見た場合、縦300px、横300pxのサムネイル。スマホでは縦150px、横150px（画像を縮小して表示）で表示されるようになっているはずです。

自分の表示したいサムネイルのサイズに数字を変更すれば、好きなサイズでサムネイル表示ができます。

また、カテゴリー個別ページのサムネイルも同様の方法で変更できます。

ちなみに、サムネイルの表示サイズを変更しても変に余白ができたりして、綺麗に表示されないことがあります。

これは、サムネイルのサイズは画像のアップロード時にのみ指定されたサイズで生成されるためです。なので、サムネイルの表示サイズを変更した場合（特に大きくした場合）は、サムネイル再生成プラグイン「Regenerate Thumbnails」を使うと綺麗に表示されるようになります。

使い方の参考ページ

Regenerate Thumbnails – アップロード済みのサムネイル画像を再生成できるWordPressプラグイン – ネタワン

全体の横サイズを広げた

初期の横幅は狭いと感じたため、PCで見たときの横幅をかなり広げました。写真など掲載することが多いので、横に２つ並べたりしやすいように。

変更するには「style.css」ファイルの次の箇所を書き換えます。

/*--------------------------------------
  1024px コンテンツ
--------------------------------------*/
/*
全体で1060px
    メイン728px
    サイド300px
    余白28px
    ボーダー2px
    2pxぶん余裕あり
*/

#contents {
	overflow: hidden;
	width: 1060px;
	margin: 24px auto;
}

#contents #main {
	float: left;
	margin: 0 28px 0 0;
	max-width: 728px;
	padding: 20px 62px;
	border-radius: 0;
}

#entry_body {
	width: 604px;
	margin: 0;
	padding: 0;
}

ただ、Gushシリーズは「レスポンシブ」デザインで、画面の表示幅に合わせてサイトのレイアウトが変化します。このため、幅を指定する一箇所だけを変更して、PCではきちんと見えていても、他のレイアウトが崩れている場合があるので、確認しながらカスタマイズすることをお勧めしたいです。

実は私も上の画像のように、表示サイズを変更するとサイドバー部分が右に飛び出してしまう問題が解決できずに困っています。

普通のPCで見てもこのようにはならず、携帯で見ても問題がないのですが、ブラウザのサイズを小さくしたり、ipadなどのタブレットサイズのモニターで見ると起こります。

よくわからないので諦めていますが。

トップナビゲーションメニューを任意のメニューにする

デフォルトでは自分の任意のメニューに設定できず、「header.php」中の一部を書き換えることで、可能になります。

<?php wp_nav_menu(); ?>

上記が「header.php」内のデフォルトのメニュー呼び出し設定。これを以下のように書き換えます。

<?php wp_nav_menu( array("menu" => "nav")); ?>

「’nav’」の「nav」の部分を任意のメニュー名に変更することで変更できます。

カテゴリーを折りたたむプラグイン「Enhanced category」がぐちゃぐちゃになる

これもどこを触ればなおるのかわからず、ぐちゃぐちゃに成るままです・・・仕様です。

サイドバーのカテゴリーの「+」の部分を押してみてください、なんだかよくわからないところにこカテゴリーが出てきちゃいます。

Gushからの流用も多用できる

「Gush」と構造が似ているため、多くのカスタマイズや、その方法は共通しています。一部流用も可能です。ただ、classの名前などの変更に注意してください。

さいごに

「Gush」シリーズ開発者のElloraさんに感謝するとともに、しっかり勉強して自分でもテンプレートを作成することを夢見るのでした。

最近色々な人のブログを見てデザインやら書き方やらを勉強したり、感心したりしています。世の中には、色々なセンスを持った人々がいること思い知らされます。

私も何か読んでくださる方の役に立てるようになれれば、と思う次第です。

そういうわけで今回Gush2についてまとめてみようと思ったのですが、結局自分の思ったようにカスタマイズできていない現状もあって、こんな中途半端な記事になってしまいました。

また追記できればしていきます。