【WordPress】テーマGush2への変更と基本設定

   2018/07/09   icon-clock-o読了時間:約1分11秒

WordPressを使い始めた2年ほど前、なんとなく(お寺が好きだからというただそれだけで)Mantraを選び
楽しくカスタマイズしながら長らくお世話になってきました。
しかし海外の方が作っているだけあって、ところどころ私の英語力とコード記述力では
使いこなせない部分もあり、特に日本語フォントへの変更なんかは
何をどうしたものか分からないまま月日が流れてしまいました。

しかし最近サイトをスマホ対応させたついでにブログも改装しようと決意し、
前々から綺麗で使いやすそうなテーマだなと思っていたGushの新バージョンであるGush2に変更してみました。
そこで基本設定の変更方法から私がいじってみた部分までをご説明してみたいと思います。
Mantraの作者であるCryout CreationsのKay様とZed様、今までありがとうございました!
そしてGush2の作者であるEllora様、テーマの提供ありがとうございます!
icon-starダウンロードと使用方法などはこちら
  Gush2 ダウンロードページ
  Gush2 使用方法など

 目次 

テーマをダウンロード&アップロード
 ∟テーマ変更の事前準備
 ∟Gush2をダウンロード
カスタマイズで基本の設定
ウィジェットでサイドバーやフッターを設定
ページ最上部のトップメニューを設定
CSSの編集
 ∟まずはカラーや見出しを変更
 ∟各種画像を変更する
   ∟リスト用の画像を変更
   ∟アイキャッチ画像を変更
   ∟404エラーページ内容の変更
   ∟ファビコンの変更
編集が反映されない時は

テーマをダウンロード&アップロード

テーマ変更の事前準備

なんかおかしくなっちゃった時や、過去のファイルを確認したい時のために
現在のテーマのファイルをダウンロードしてバックアップを取っておくと安心です。
また、ウイジェットの内容が自分で記述したコードやテキストなら
コピーを取っておくとテーマ変更後も楽に編集できます。
また、使用しているプラグインに影響が出ないように一旦全てのプラグインを停止しておいて、
Gush2を稼動後にまたプラグインを有効化してください。

Gush2をダウンロード

バックアップも万全!プラグインも停止した!となったら
まず最初に Gush2 からテーマのファイルをダウンロードしましょう。
ダウンロードフォルダから解凍したら、自分のブログを置いているフォルダの中の
テーマのフォルダ(themes)にアップロードします。
ディレクトリはこんな感じになっているはず⇒ \blog\wp-content\themes

アップロード後にはWordPressのメニュー内の【 外観 】⇒【 テーマ 】に
Gush2が存在しているはずなので、【 有効化 】をクリックして有効にすれば
テーマがGush2に切り替わります。
テーマ有効化

カスタマイズで基本の設定

まずは【 外観 】⇒【 カスタマイズ 】から基本的な項目を編集しましょう。
カスタマイズ
サイトタイトルとキャッチフレーズ
ブログやサイトの名前(このブログなら 『 パソコン修理のエヌシステムBLOG 』 )
内容の簡単な紹介やサブタイトル( 『 U。・ェ・。Uノ PC修理~ 』 の部分)


背景色の設定。このブログなら薄い水色の部分です。

背景画像
壁紙的な画像を設定したい場合はここで。

ウィジェット
サイドバーやフッターの設定。
次でご説明するウィジェットの項目で設定したほうが分かりやすいかも。

固定フロントページ
ブログのトップページの変更。
最新の投稿記事をトップにするか、任意の固定ページをトップにするかを選択できます。

ウィジェットでサイドバーやフッターを設定

左の項目からドラッグ&ドロップで設置できます。
ウィジェット
サイドバー、フッター以外の部分は広告などを置きたい方用のスペースだと思います。

ページ最上部のトップメニューを設定

このブログの一番上、ブルーグリーンのメニュー項目部分です。
ブログトップメニュー
任意のURL、もしくはカテゴリでメニューを作ることができます。
トップメニューの設定方法 に詳しい解説があるのでご参考ください。

CSSの編集

作者さんが記事に使いそうな装飾なども最初からCSSに入れてくれているので、
そのままの状態で使っても充分見栄えのするブログになります。
見出し、引用、文字装飾、リスト、動画像等のCSS初期設定とサンプル からデフォルトの状態を確認できます。

また、レスポンシブWebデザイン用CSSの基本構成と条件分岐タグ にもあるように、
Gush2はスマホやタブレットの画面幅に対応できるレスポンシブWebデザインで作られているので
スマホ・タブレット・PCの3種類がスタイルシート (style.css)に記述されています。

 レスポンシブWebデザインについて詳しくは当ブログの記事icon-arrow-downをご覧ください。
 スマホ最適化 【 1 】 モバイル ユーザビリティの問題って?

CSSを自分で編集する時は、スマホ用やPC用といった記述箇所を間違えないようにご注意ください。

まずはカラーや見出しを変更

自分の好みのサイトやブログに改装したい!という時はまず大きな部分、
ヘッダーカラーや見出しなどから変更していくと良いと思います。

デフォルトの状態ではヘッダーとフッターにグレーの背景画像が設定されているので
背景画像の削除と設定方法を参考に画像を外してカラーを変えましょう。

各種画像を変更する

引用(blockquote)、リストアイコン、アイキャッチのサムネイルが未設定時の画像、
エラーページ用の画像など、デフォルトで設定されている画像は
\themes\gush2\images のフォルダ内にあります。

それぞれの元の画像と私が変更した後の画像はこんな感じです。
変更した画像
ヒヨコ可愛いのでそのまま使わせていただこうかとも思ったのですが、
サイト用に作ったエラーページ用の4コマがあったので変更してみました。

画像を差し替えるには、用意した画像をimagesフォルダ内にアップロードしてから
対応するファイルの画像URLを編集します。

リスト用の画像を変更

記事一覧などのリストアイコンを変える場合、スタイルシート (style.css)を編集します。

コード
#article_body ul {
list-style: url(images/★ここ★.jpg) inside;
margin-bottom: 24px;
}
引用符を変えたい場合も同様にCSSを書き換えます。

アイキャッチ画像を変更

単一記事の投稿 (single.php)ファイル内のサムネイル画像に関する部分を編集します。

コード
<?php else: // サムネイルを持っていないときの処理 ?>
<img src=”<?php echo get_template_directory_uri(); ?>/images/★ここ★.gif” alt=”no image” title=”no image” width=”110″ /><?php endif; ?></a></li>
404エラーページ内容の変更

404 テンプレート (404.php)ファイルを編集します。
画像だけでなく見出しやテキストの追加などもご自由に変更可能です。

コード
<img src=”<?php echo get_template_directory_uri(); ?>/images/★ここ★.gif” alt=”404″ style=”margin-bottom: 36px” />
ファビコンの変更

下記のどちらかで変更することができます。
・ファビコン画像を『 favicon.ico 』として保存、imagesフォルダ内にアップロードする
 (元のfavicon.icoに上書きする)
・ヘッダー (header.php)ファイル内の 『 favicon.ico 』 を自分のファビコン名に書き換える

編集が反映されない時は

CSSでカラーを変えたのに変わってない、というような時は、
間違えてスマホやタブレット用のCSSを編集してしまって
パソコン用のCSSは何も変わっていない状態なのかもしれません。
上から
————————–
 全般設定
 スマホ用
 タブレット用
 パソコン用
————————–
の順番になっているので、編集箇所を間違えないようにご注意を。

また、キャッシュが残っているせいでプレビューに反映されていない可能性もあります。
キャッシュクリアのプラグインを活用してみましょう。
キャッシュクリアのプラグイン 『 W3 Total Cache 』 についてはこちらをご覧ください。
【WordPress】 高速化プラグイン おすすめ3つ 【ページ表示速度アップ】

そんなこんなでGush2にお世話になり始めて2週間ほどですが、
すっきり綺麗なテーマで見やすく使いやすいのでとても気に入っています。
まだまだ改装できそうなところもあるので頑張って工夫していきたいです(*^▽^)

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket