blueroll

読者です 読者をやめる 読者になる 読者になる

【実録】WordPressをはじめよう [カスタマイズ編]その3 〜子テーマを設定する〜

WordPress

f:id:blueroll:20160413151325j:plain

前回の記事ではナビゲーションメニューの設定をしました。その際にサブメニューの文字が白いので見にくいことが分かりました。今回はこの部分の設定をしていきます。

 

 

f:id:blueroll:20160413091337p:plain

この部分ですね。ここの文字の色を変えて見えるようにしたいと思います。

 

文字色のカスタマイズ

f:id:blueroll:20160413140018p:plain

「外観」「カスタマイズ」を選択。

 

f:id:blueroll:20160413140044p:plain

カラーのカスタマイズ画面で文字色を…

 

f:id:blueroll:20160413140118p:plain

とりあえず黒に変更してみます。すると…

 

f:id:blueroll:20160413140146p:plain

はい。これで見えるようになりました!

 

f:id:blueroll:20160413140208p:plain

しかしメニューの文字も黒くなってしまいました。これでも良いのですが、ここは変更前の白にしたい…と思っていじってみましたが、どうやら「カスタマイズ」では細かく設定できないようで、テーマのCSS(スタイルシート)をいじるしか無さそうです。

 

親テーマと子テーマ

ここでテーマのCSSをいじろうと色々調べてみたところ、テーマのCSSを編集するのは子テーマで編集した方が良いということが分かりました。こちらの記事を参考にさせていただきました。

nelog.jp

 

要するに親テーマ自体を編集してしまうと、テーマが更新された時に、編集した部分がごっそり無くなる可能性があるということらしいです…怖い。なので子テーマの方で外観等のデザインを編集して、その編集した子テーマを親テーマに紐づけ(リンク)してやれば良いということになります。

 

子テーマのインストール

STINGERのダウンロードページにアクセスします。

 

ダウンロード及び規約 - 無料WordPressテーマ STINGER

 

f:id:blueroll:20160413142452p:plain

「STINGER7子テーマ」をダウンロードします。

 

f:id:blueroll:20160413142453p:plain

「外観」「テーマ」を選択。

 

f:id:blueroll:20160413142454p:plain

「新規追加」を選択。

 

f:id:blueroll:20160413142455p:plain

「テーマのアップロード」を選択。

 

f:id:blueroll:20160413142456p:plain

ファイル選択画面に移ります。「ファイルを選択」をクリック。

 

f:id:blueroll:20160413142457p:plain

先ほどダウンロードした子テーマのファイル「stinger7child.zip」を選択して開きます。

 

f:id:blueroll:20160413142458p:plain

「今すぐインストール」をクリック。

 

f:id:blueroll:20160413142459p:plain

テーマのインストールが完了したら「有効化」をクリック。

 

f:id:blueroll:20160413142500p:plain

「stnger7child」という子テーマが有効化されました。

 

f:id:blueroll:20160413142501p:plain

その状態でサイトを確認してみると…おや。色がデフォルトの色になっている。どうやら以前設定したカラーはテーマごとの設定のようです。再度カラー設定して色を戻します。

 

f:id:blueroll:20160413140018p:plain

「外観」「カスタマイズ」から…

 

f:id:blueroll:20160413142502p:plain

現在のテーマが子テーマになっていることを確認して、この部分をいじってカラー設定をします。

 

f:id:blueroll:20160413142503p:plain

ついでに、なぜかヘッダー部分に画像が設定されているようなので「画像を非表示」にしておきます。

 

f:id:blueroll:20160413142504p:plain

これで元通りの見た目に戻りました!

 

子テーマの初期設定

子テーマのインストールと有効化が完了しましたが、もういっちょ設定が必要なようです。

f:id:blueroll:20160413142506p:plain

「外観」「テーマの編集」をクリック。

 

f:id:blueroll:20160413142511p:plain

子テーマのスタイルシートが出てきます。ここに記述していけばサイトのデザインを変えられるはずです。四角で囲った部分は、親テーマへの紐付け(リンク)の記述なんですが、この記述方法が古いらしいので、新しい方法で紐付け(リンク)します。

 

まずは下記の記述をコピーします。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

子テーマ - WordPress Codex 日本語版より

 

f:id:blueroll:20160413142507p:plain

「テーマのための関数(functions.php)」をクリックします。

 

f:id:blueroll:20160413142508p:plain

この一番下に…

 

f:id:blueroll:20160413142509p:plain

先ほどコピーした記述をペーストします。

 

f:id:blueroll:20160413142510p:plain

ペーストしたら「ファイルを更新」します。

 

f:id:blueroll:20160413142511p:plain

再度「スタイルシート」を表示します。四角で囲った部分を削除します。

 

f:id:blueroll:20160413142512p:plain

削除したら「ファイルを更新」します。これにて子テーマの設定が終了しました。

 

おわりに

この時点で子テーマの存在に気付けて良かったです…。親テーマをいじると前述の通り、テーマが更新されたときにサイトが崩れてしまうリスクがあります。子テーマは親テーマと一緒にダウンロード、インストールするのが良さそうです。失敗から学んでいきますなぁ…。