WordPressテーマ(テンプレート)のカスタマイズ方法【アフィリエイトで稼ぐための】

WordPress(ワードプレス)テーマ(テンプレート)のカスタマイズ方法

はじめに

WordPressの醍醐味は自由にブログのデザインや機能をカスタマイズできることです。ある程度完成度の高いテーマを選んで、あとは記事だけに集中していくというブログ運営をする方もいるかと思いますが、アフィリエイトで売り上げを伸ばしていきたいのであれば、SEO対策やUI向上を行うためにテーマのカスタマイズは欠かせません。また自分のブログのオリジナリティを出すという意味でもテーマのカスタマイズは行っておきたいところです。

今回の記事では、「WordPressテーマ(テンプレート)のカスタマイズの方法やそのポイント」についてご紹介していきます。

ちなみに、アフィリエイトに最適なWordPressテーマについて以前スマアフィにてご紹介しました。まだテーマを決めあぐねている方がいらしたら、ぜひ以下の記事を参考にしていただけらたらと思います。

アフィリエイトに最適なWordPressテーマを紹介 – スマアフィ

WordPressテーマのカスタマイズ方法 – ダッシュボード内からカスタマイズする

WordPressは、ダッシュボードからテーマをカスタマイズ(編集)することが簡単にできるようになっています。自分のブログに最適なテーマを選んで設定したら、ぜひカスタマイズを行ってみましょう。カスタマイズに関して、ダッシュボードから行えることは、主に以下の3点です。

  • テーマのカスタマイザーによるカスタマイズ
  • ウィジェットの設定によるカスタマイズ
  • ダッシュボード内のエディタでのファイル編集によるカスタマイズ

テーマの「カスタマイザー」を使う

WordPressのダッシュボード内には、項目に従ってテーマに設定されている各項目内容を変更できる「カスタマイザー」という機能が設けられています。設定が変更できる項目はテーマによって異なりますが、主に以下のようなさまざまな項目を自由に設定変更することができます。

カスタマイザーでカスタマイズできる項目例

  • ヘッダー画像のカスタマイズ
  • 背景色のカスタマイズ
  • ブログ全体のレイアウトのカスタマイズ
  • SEO対策関連の設定カスタマイズ

カスタマイザーは、ダッシュボードの「左メニュー」の「外観」から「カスタマイズ」をクリックすることで表示されます。

WordPressカスタマイザーの表示

以下が実際のカスタマイザーを表示させたページです。左メニューに変更可能な項目一覧が表示されており、一覧の項目を開いて内容を変更できるようになっています。画面右側には、実際のブログの画面が表示されており、逐次変更した内容が反映されるようになっています。変更内容を確認しながらテーマをカスタマイズしていくことができるようになっています。

WordPressカスタマイザー画面の使い方

カスタマイザーについて参考となるブログ記事を紹介します。
テーマカスタマイザーで出来ること | ブログ用WordPressテーマ マテリアル

「ウィジェット」を設定する

「ウィジェット」は、さまざまな機能が盛り込まれたWordPressの部品となります。WordPressには最初からいくつかのウィジェットが盛り込まれています。プラグインをインストールした際に、新たに追加される場合もあります。ウィジェットをWordPressのブログに追加していくことで、ブログの機能を強化していくことができます。

ウィジェットで実装できる機能例

  • 人気の記事(ランキング)の表示
  • 最新記事の表示
  • 広告枠の設置
  • Twitterのタイムラインの表示

ウィジェットの設定画面は、ダッシュボードの「左メニュー」の「外観」から「ウィジェット」をクリックすることで表示されます。

WordPressウィジェット設定画面の表示

以下がウィジェットの設定画面です。コンテンツ部分の左側に利用可能なウィジェットが表示されており、右側に実際に利用しているウィジェットが表示されています。使い方は簡単で、利用したいウィジェットを左側から右側にドラッグします。表示されているウィジェット名をクリックするとそれぞれのウィジェットの細かい設定を行うことができるようになっています。

WordPressウィジェット設定画面の使い方

ウィジェットについて参考となるブログ記事を紹介します。
WordPress ウィジェットの追加と編集方法 | バズ部

直接ファイルを編集する

直接ファイルを編集する際は、必ず事前にバックアップを取るなど自己責任の元で作業を行ってください。編集の仕方によってはページが表示されなくなるなどリスクを伴います。

WordPressnには、ダッシュボード内にエディターが用意されており、ダッシュボード内でテーマのファイルを直接編集することができます。基本的にすべてのファイルを編集することができるので、細かいカスタマイズやプログラミング言語「PHP」を使っての新たな機能の開発などが可能となります。

テーマの編集画面は、ダッシュボードの「左メニュー」の「外観」から「テーマの編集」をクリックすることで表示されます。

WordPressテーマの編集の表示

以下がテーマの編集画面です。コンテンツ部分の右側にテーマを構成するファイルの一覧が表示されており、左側はファイルの編集用エディタとなっています。右側のファイル一覧から編集したいファイルをクリックすると、左側のエディタにファイル内容が表示されます。ファイル内容を変更し、「ファイルを更新」ボタンを押すと、変更内容がテーマに反映されます。

WordPressテーマの編集の使い方

テーマの編集について参考となるブログ記事を紹介します。
管理画面/外観/テーマ編集 – WordPress Codex 日本語版
デザインの編集方法(phpファイルのカスタマイズ) – WP-TempNate

WordPressテーマの「上書き」問題

ダッシュボードから直接ファイルを編集する際に気をつけなくてはならない点があります。それが「上書き問題」です。WordPressを始めたばかりの頃にやりがちな失敗例としてよく挙げられることですが、使用しているテーマがアップデートされた際に、何も考えずにテーマをバージョンアップしてしまったために、今まで一生懸命カスタマイズした部分が全部消え失せてしまうといったことが起こりえます。

原因としては、テーマのファイルを直接編集してしまっているためです。使用しているテーマをバージョンアップした際に、新しいファイルに置き換えられてしまうので、ここで「上書き問題」が発生してしまいます。

実は、WordPressではテーマのファイルそのものを直接編集してはいけません。もちろん今後一切テーマをバージョンアップしないということであれば話は別ですが。通常は、上で説明した「カスタマイザー」や「ウィジェット」を使うことだけでも十分にカスタマイズすることが可能です。しかし、一歩上を行くテーマを作りたいのであれば、やはりファイルを直接編集する必要です。

そうした問題に対処すべくWordPressにはテーマのファイルそのものを直接編集しなくてもテーマを編集できる方法が用意されています。その方法についてこれから以下に説明していきます。

テーマの「上書き対策」その1: 子テーマを作る

WordPressには「子テーマ」という仕組みが用意されています。「子テーマ」は、実際に使用しているテーマ(ここでは「親テーマ」と呼びます)と紐付けることで親テーマの編集用テーマとして機能するようになります。「子テーマ」を編集することで、「親テーマ」のカスタマイズ(編集)が可能となります。さらに「子テーマ」は「親テーマ」のバージョンアップの影響を受けないため、編集した内容が上書きされてなくなってしまうという心配をする必要がなくなります。

「子テーマ」の導入方法をご紹介します。詳細はWordPressの公式ドキュメントをご参照ください。
子テーマ – WordPress Codex 日本語版

子テーマ導入方法

1. ローカル環境にフォルダを作成します。

お使いのパソコン内に新規でフォルダを作成します。フォルダ名は何でも構いません(半角英数字でフォルダ名をつけるようにしてください)が、フォルダ名の最後に「-child」を付けることが慣例となっています。

WordPress: 子テーマフォルダを作る

2. 作成したフォルダ内にstyle.cssファイルを作成します。

フォルダを作成したら、その中に「function.php」「style.css」というファイルを新規で作成します。「function.php」は機能、「style.css」は見た目(デザイン)をカスタマイズするためのファイルとなります。

子テーマフォルダ: style.cssとfunction.php

3. 作成したstyle.cssファイルに以下を記載します。

子テーマを親テーマに紐付けるために、最低限「子テーマ名」「親テーマのフォルダ名」を作成した「style.css」ファイルに記載します。style.cssを開いて、ファイルの一番上の部分に以下のように記載してください。

/*
Theme Name: child_theme(←「子テーマ名」。名称は任意)
Template: parent_theme(←「親テーマのフォルダ名」。大文字小文字を区別する )
*/

「親テーマ」のフォルダ名は、親テーマのstyle.cssのヘッダー情報(ファイル上部の/* */で囲まれた部分)の「Text Domain」の箇所に記載されています。

4. 作成したfunction.phpファイルに以下を記載します。

次に親テーマのstyle.cssを子テーマのstyle.cssに読み込むようにします。子テーマのstyle.cssに「@import: 親テーマのstyle.cssのパス」と記載する方法でもよいですが、パフォーマンス的にあまりオススメできません。子テーマ用に作成したfunction.phpを使って読み込むようにします。作成したfunction.phpを開いて、以下を記載します。

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

}

5. zipファイルに変換します。

style.cssとfunction.phpの準備が完了したら、子テーマフォルダごと「zipファイル」に変換します。

子テーマフォルダをzipファイルに変換

6. ダッシュボード内に取り込みます。

変換したzipファイルをダッシュボード内に取り込みます。ダッシュボードの左メニューから「外観」「テーマ」とお進みください。zipファイルを取り込むまでの手順は以下の通りです。

1. 「テーマ」画面が表示されたら、「新規追加」ボタンを押します。

WordPressダッシュボード: 子テーマの新規追加

2. 「テーマを追加」画面が表示されるので、続いて「テーマのアップロード」ボタンを押します。

WordPressダッシュボード: 子テーマのアップロード

3. テーマをアップロードする画面が表示されるので、画面の手順に従って子テーマのzipファイルをアップロードします。

WordPressダッシュボード: 子テーマのインストール

7. アップロードしたテーマを「有効化」します。

ダッシュボードの「外観」>「テーマ」に利用可能なテーマとして表示されます。「有効化」ボタンを押して、子テーマを有効化します。

WordPress: 子テーマを有効化

子テーマを「有効化」すると、上で説明したダッシュボードのエディタから直接ファイルを編集することができるようになります。上書きされることを気にせずファイルの編集が可能となります。見た目(デザイン)をカスタマイズしたい場合はstyle.css、機能をカスタマイズしたい場合はfunction.phpを編集してください。その他のテンプレートファイル(header.phpファイルなど)も置くことができます。

基本的に子テーマフォルダに置いた「テンプレートファイル」は親テーマの同名のファイルを上書きするようになっています。ただし、「functions.php」だけは特殊で、上書きせずに親テーマのfunctions.phpに追加されて読み込まれる仕組みとなっています。

詳細は以下をご参照ください。
子テーマ – WordPress Codex 日本語版
CSS – WordPress Codex 日本語版
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜 – SlideShare
[WordPress] functions.phpを編集、修正、管理しやすくする書き方 – MILL KEY WEB

テーマの「上書き対策」その2: プラグインを使う

「子テーマ」の導入方法を説明してきましたが、慣れていないと意外と大変だったりするので、もっと気軽に上書きを気にせずファイルを直接編集する方法をご紹介します。こちらの方法はWordPressのプラグインを使いますので、オススメのプラグインを3つ以下にご紹介します。

Jetpackの「CSS編集」機能

ホスティングサービスのWordPress.comで提供されている30以上の多様な機能をインストール型のWordPressでも使えるようにしてくれるプラグインで、その中に「CSS編集」機能が内包されています。この「CSS編集」機能を使うことで、テーマのアップデート時に上書きされることを気にせずCSSを編集することができるようになります。また、この「CSS編集」機能のすごいところはSassやLessにも対応しているところです。

Jetpack by WordPress.com

導入方法や使い方などは以下をご参照ください。

[WordPress] 出先からでもサクッとCSSを変更出来るJetpackの「CSS編集」が便利 * prasm
WordPressでSass,Lessが使える!Jetpackでブラウザからコンパイル! | Sou-Lablog

Simple Custom CSS

こちらも上のJetpackの「CSS編集」機能と同様、テーマのアップデート時に上書きされることを気にせずダッシュボードからCSSを編集できるようにしてくれるプラグインです。Jetpackより導入が簡単ということで、ご紹介しておきます。機能的にもSassやLessには対応しておらずシンプルです。

Simple Custom CSS

導入方法や使い方などは以下をご参照ください。

Simple Custom CSS – テーマを直接編集せずにCSSをカスタマイズできるWordPressプラグイン – ネタワン

Code Snippets

上記2つのプラグインはどちらもCSSの編集のみに対応しています。こちらはfunction.phpの編集に対応したプラグインとなります。テーマのアップデート時に上書きされることを気にせずダッシュボードからfunction.phpを編集できるようにしてくれます。

Code Snippets

導入方法や使い方などは以下をご参照ください。

Code Snippets – functions.phpのPHPコードを管理できるWordPressプラグイン – ネタワン

ローカル環境でカスタマイズに挑戦!

本格的にWordPressのテーマをカスタマイズしたり、新たにテーマを開発している方は、自分のパソコン上にWordPressの環境を作って、そこで日夜テーマを好きなようにいじっていたりします。この場合、自分の納得がいったタイミングで本番のWordPressに反映できるので、余裕のある方はぜひローカル環境でのWordPressテーマの開発にもチャレンジしてみてはいかがでしょうか。

以下の記事がとても参考になると思うので、最後に紹介しておきます。

WordPressのローカル環境を作る方法を知れる記事20選 | NESTonline Blog

まとめ

アフィリエイターとして、ブログをカスタマイズする際に抑えておきたい点としては、「如何に記事を読みやすくするか」ということだと思います。文章をしっかりと読んでもらわない限りは、紹介しているアフィリエイト商材について伝えたいことが伝わらず、結局成約されないということになりかねません。まずは、しっかり「読みやすいブログ」「伝わるブログ」となることを心がけてカスタマイズしてみてください。

それが済んだら次は集客のためのSEO対策であったり、ブログ内の回遊率を高くするための内部施策としてのカスタマイズに取り組んでみてください。

今回さまざまなカスタマイズ方法を紹介しました。基本的にはダッシュボード内である程度のことができるようになっていますので、気になったところからぜひブログのカスタマイズに挑戦していただければと思います。ブログをカスタマイズしてアフィリエイトの収益をどんどん増やしていきましょう!

この記事を書いた人

Takanori Maeda
エンジニアやデザイナーだった経験を活かして、スマアフィではアフィリエイトを絡めた技術系の記事をメインに書いています。価格比較サイトでのディレクター経験もあり、アフィリエイトにはなんだかんだで10年以上関わっています。現代音楽の作品で受賞歴もある元ニート作曲家。
スポンサーリンク