WordPress

アフリエイトブログの作成と運営を考える

WordPressテーマの選択インストール「第3回」

スポンサーリンク

テーマは別に決まりはないので使いやすいのを選択する。

親テーマをインストール

WordPress ダッシューボード >> 外観 >> テーマ >> 新規追加

main_cap-0071

 

 

カスタマイズする際は「子テーマ」と呼ばれるテーマを別途作成します。

利用したい既存のWordPressテーマをインストールたら、カスタマイズしていきます。カスタマイズする際は「子テーマ」と呼ばれるテーマを別途作成します。

1. 子テーマのフォルダーを作成

childtheme-folder
親テーマ(既存のテーマ)と同じ階層である /wp-content/themes に新しいフォルダーを作成します。フォルダーの名前は「親テーマ名-child」などにしておくとわかりやすいです。

2. style.css

作成した子テーマフォルダー内に「style.css」という名前でCSSファイルを作成します。作成した style.css に以下のコードを記述します。

01
02
03
04
05
06
07
08
09
10
11
12
13
/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

これらは子テーマの情報として認識されます。各項目はサイトに合わせて書き換えてください。特に必要なのは以下の2つ:

  • Theme Name … 子テーマの名前(例:Twenty Fifteen Child)
  • Template … 親テーマのフォルダ名(例:twentyfifteen)

スペルミスでもうまく認識されないので、きちんと確認して記述します。これらの2つ以外はなくても認識されます。

3. functions.php

続いて子テーマフォルダー内に functions.php というPHPファイルを作成します。functions.php に以下のコードを記述して、子テーマを認識させます。

1
2
3
4
5
6
7
8
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

4. 子テーマを有効化する

dashboard-childtheme
これだけで子テーマが利用できるようになりました!管理画面から 外観 > テーマ に進むと、子テーマが表示されています。有効化すれば子テーマの設定完了です!

しかし、この流れだと何も変更していないので、本当に子テーマが利用できているのかわかりませんね…。試しに style.cssコメントアウトしたテーマ情報の下に body { background: pink; } と記述してCSSファイルを更新してみてください。

1
2
3
4
5
/*
 Theme Name:   Twenty Fifteen Child
 Template:     twentyfifteen
*/
body { background: pink; }

サイトを更新すると背景色がピンク色になっているはずです。子テーマが有効化されていることが確認できたら、このコードは削除しておいてください。

子テーマ商品登録前に済ませておく設定

1.ダッシューボード >> 外観 >> カスタマイズ を表示

 

2.レイアウト >> 関連記事の関連付け の設定はタグに関連付けに、表示数は24に

main_cap-0083

 

3.その下のナビの表示も設定

main_cap-0084  

 

 4.画像 >> アイキャッチを自動設定 にチェックを入れる

main_cap-0085

チェックを入れておくと商品登録した時点で自動的に商品のメイン画像をアイキャッチ画像として登録してくれます。

 

5.画像 >> 画像リンク拡大効果のタイプ の変更

main_cap-0086

サブ画像の拡大表示の時に役にたちます。