WordPressの醍醐味は自由にブログのデザインや機能をカスタマイズできることです。ある程度完成度の高いテーマを選んで、あとは記事だけに集中していくというブログ運営をする方もいるかと思います。しかしより多くの人たちに訪れてもらって記事を読んでもらうにはSEO対策やUI向上が大事で、そのためのテーマのカスタマイズが欠かせません。自分のブログのオリジナリティを出すという意味でもテーマのカスタマイズは絶対に行っておきたいところです。今回の記事では、「WordPressテーマ（テンプレート）のカスタマイズの方法やそのポイント」についてご紹介したいと思います。
目次
はじめに
WordPressのテーマのカスタマイズと言っても、ガシガシphpファイルを編集しまくる本格的なものや、cssファイルをいじって見た目を変更するだけのものなど、その定義は人それぞれだと思います。当ブログはすべて最初からテーマを作っていますが、これもカスタマイズの一種と言えるでしょう。ただ今回の記事では、そういった本格的なテーマの開発というよりは、気軽に既存のテーマの見た目を変更する方法ということで紹介していきます。ぜひ、これからテーマのカスタマイズを行ってみたいという方は参考にしてもらえればと思います。
従って、まずはこれから自分のブログの顔として長く付き合っていけるWordPressのテーマを探すことから始めてください。
WordPressテーマのカスタマイズ方法 – ダッシュボード内からカスタマイズする
WordPressは、ダッシュボードからテーマをカスタマイズ（編集）することが簡単にできるようになっています。自分のブログに最適なテーマを選んで設定したら、ぜひカスタマイズを行ってみましょう。カスタマイズに関して、ダッシュボードから行えることは、主に以下の3点です。
- テーマのカスタマイザーによるカスタマイズ
- ウィジェットの設定によるカスタマイズ
- ダッシュボード内のエディタでのファイル編集によるカスタマイズ
テーマの「カスタマイザー」を使う
WordPressのダッシュボード内には、項目に従ってテーマに設定されている各項目内容を変更できる「カスタマイザー」という機能が設けられています。設定が変更できる項目はテーマによって異なりますが、主に以下のようなさまざまな項目を自由に設定変更することができます。
カスタマイザーでカスタマイズできる項目例
- ヘッダー画像のカスタマイズ
- 背景色のカスタマイズ
- ブログ全体のレイアウトのカスタマイズ
- SEO対策関連の設定カスタマイズ
カスタマイザーは、ダッシュボードの「左メニュー」の「外観」から「カスタマイズ」をクリックすることで表示されます。
以下が実際のカスタマイザーを表示させたページです。左メニューに変更可能な項目一覧が表示されており、一覧の項目を開いて内容を変更できるようになっています。画面右側には、実際のブログの画面が表示され、逐次変更した内容が反映されるようになっています。変更内容を確認しながらテーマをカスタマイズしていくことができるようになっています。
カスタマイザーについて参考となるブログ記事を紹介します。
「ウィジェット」を設定する
「ウィジェット」は、さまざまな機能が盛り込まれたWordPressの部品です。WordPressには最初からいくつかのウィジェットが盛り込まれています。プラグインをインストールした際に、新たに追加される場合もあります。ウィジェットをWordPressのブログに追加していくことで、ブログの機能を強化していくことができます。
ウィジェットで実装できる機能例
- 人気の記事（ランキング）の表示
- 最新記事の表示
- 広告枠の設置
- Twitterのタイムラインの表示
ウィジェットの設定画面は、ダッシュボードの「左メニュー」の「外観」から「ウィジェット」をクリックすることで表示されます。
以下がウィジェットの設定画面です。コンテンツ部分の左側に利用可能なウィジェットが表示されていて、右側に実際に利用しているウィジェットが表示されています。使い方は簡単で、利用したいウィジェットを左側から右側にドラッグします。表示されているウィジェット名をクリックするとそれぞれのウィジェットの細かい設定を行うことができるようになっています。
ウィジェットについて参考となるブログ記事を紹介します。
直接ファイルを編集する
直接ファイルを編集する際は、必ず事前にバックアップを取るなど自己責任の元で作業を行ってください。編集の仕方によってはページが表示されなくなるなどリスクを伴います。
WordPressには、ダッシュボード内にエディターが用意されていて、ダッシュボード内でテーマのファイルを直接編集することができます。基本的にすべてのファイルを編集することができるので、細かいカスタマイズやプログラミング言語「PHP」を使って新たな機能の開発が可能となります。
テーマの編集画面は、ダッシュボードの「左メニュー」の「外観」から「テーマの編集」をクリックすることで表示されます。
以下がテーマの編集画面です。コンテンツ部分の右側にテーマを構成するファイルの一覧が表示されており、左側はファイルの編集用エディタとなっています。右側のファイル一覧から編集したいファイルをクリックすると、左側のエディタにファイル内容が表示されます。ファイル内容を変更し、「ファイルを更新」ボタンを押すと、変更内容がテーマに反映されます。
テーマの編集について参考となるブログ記事を紹介します。
WordPressテーマの「上書き」問題
ダッシュボードから直接ファイルを編集する際に気をつけなくてはならない点があります。それが「上書き問題」です。WordPressを始めたばかりの頃にやりがちな失敗例としてよく挙げられることですが、使用しているテーマがアップデートされた際に、何も考えずにテーマをバージョンアップしてしまったために、今まで一生懸命カスタマイズした部分が全部消え失せてしまうといったことが起こりえます。
原因としては、テーマのファイルを直接編集してしまっているためです。使用しているテーマをバージョンアップした際に、新しいファイルに置き換えられてしまうので、ここで「上書き問題」が発生してしまいます。
実は、WordPressではテーマのファイルそのものを直接編集してはいけません。もちろん今後一切テーマをバージョンアップしないということであれば話は別ですが。通常は、上で説明した「カスタマイザー」や「ウィジェット」を使うことだけでも十分にカスタマイズすることが可能です。しかし、一歩上を行くテーマを作りたいのであれば、やはりファイルを直接編集する必要があります。
そうした問題に対処すべくWordPressにはテーマのファイルそのものを直接編集しなくてもテーマを編集できる方法が用意されています。その方法についてこれから以下に説明していきます。
テーマの「上書き対策」その1: 子テーマを作る
WordPressには「子テーマ」という仕組みが用意されています。「子テーマ」は、実際に使用しているテーマ（ここでは「親テーマ」と呼びます）と紐付けることで親テーマの編集用テーマとして機能するようになります。「子テーマ」を編集することで、「親テーマ」のカスタマイズ（編集）が可能となります。さらに「子テーマ」は「親テーマ」のバージョンアップの影響を受けないため、編集した内容が上書きされてしまうという心配をする必要がなくなります。
「子テーマ」の導入方法をご紹介します。詳細はWordPressの公式ドキュメントをご参照ください。
子テーマ導入方法
1. ローカル環境にフォルダを作成します。
お使いのパソコン内に新規でフォルダを作成します。フォルダ名は何でも構いません（半角英数字でフォルダ名をつけるようにしてください）が、フォルダ名の最後に「-child」を付けることが慣例となっています。
2. 作成したフォルダ内にstyle.cssファイルを作成します。
フォルダを作成したら、その中にfunctions.phpとstyle.cssというファイルを新規で作成します。functions.phpは機能、style.cssは見た目（デザイン）をカスタマイズするためのファイルとなります。
3. 作成したstyle.cssファイルに以下を記載します。
子テーマを親テーマに紐付けるために、最低限「子テーマ名」と「親テーマのフォルダ名」をstyle.cssファイルに記載します。style.cssを開いて、ファイルの一番上の部分に以下のように記載してください。
/*
Theme Name: child_theme（←「子テーマ名」。名称は任意）
Template: parent_theme（←「親テーマのフォルダ名」。大文字小文字を区別する ）
*/
「親テーマ」のフォルダ名は、親テーマのstyle.cssのヘッダー情報（ファイル上部の/* */で囲まれた部分）の「Text Domain」の箇所に記載されています。
4. 作成したfunctions.phpファイルに以下を記載します。
次に親テーマのstyle.cssを子テーマのstyle.cssに読み込むようにします。子テーマのstyle.cssに「@import: 親テーマのstyle.cssのパス」と記載する方法でもよいですが、パフォーマンス的にあまりオススメできません。子テーマ用に作成したfunctions.phpを使って読み込むようにします。作成したfunctions.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とfunctions.phpの準備が完了したら、子テーマフォルダごと「zipファイル」に変換します。
6. ダッシュボード内に取り込みます。
変換したzipファイルをダッシュボード内に取り込みます。ダッシュボードの左メニューから「外観」＞「テーマ」とお進みください。zipファイルを取り込むまでの手順は以下の通りです。
1. 「テーマ」画面が表示されたら、「新規追加」ボタンを押します。
2. 「テーマを追加」画面が表示されるので、続いて「テーマのアップロード」ボタンを押します。
3. テーマをアップロードする画面が表示されるので、画面の手順に従って子テーマのzipファイルをアップロードします。
7. アップロードしたテーマを「有効化」します。
ダッシュボードの「外観」＞「テーマ」に利用可能なテーマとして表示されます。「有効化」ボタンを押して、子テーマを有効化します。
子テーマを「有効化」すると、上で説明したダッシュボードのエディタから直接ファイルを編集することができるようになります。上書きされることを気にせずファイルの編集が可能となります。見た目（デザイン）をカスタマイズしたい場合はstyle.css、機能をカスタマイズしたい場合はfunctions.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にも対応しているところです。
導入方法や使い方などは以下をご参照ください。
- [WordPress] 出先からでもサクッとCSSを変更出来るJetpackの「CSS編集」が便利 * prasm
- WordPressでSass,Lessが使える！Jetpackでブラウザからコンパイル！ | Sou-Lablog
Simple Custom CSS
こちらも上のJetpackの「CSS編集」機能と同様、テーマのアップデート時に上書きされることを気にせずダッシュボードからCSSを編集できるようにしてくれるプラグインです。Jetpackより導入が簡単ということで、ご紹介しておきます。機能的にもSassやLessには対応しておらずシンプルです。
導入方法や使い方などは以下をご参照ください。
Code Snippets
上記2つのプラグインはどちらもCSSの編集のみに対応しています。こちらはfunctions.phpの編集に対応したプラグインとなります。テーマのアップデート時に上書きされることを気にせずダッシュボードからfunctions.phpを編集できるようにしてくれます。
導入方法や使い方などは以下をご参照ください。
ローカル環境でカスタマイズに挑戦！
本格的にWordPressのテーマをカスタマイズしたり、新たにテーマを開発している方は、自分のパソコン上にWordPressの環境を作って、そこで日夜テーマを好きなようにいじっていたりします。この場合、自分の納得がいったタイミングで本番のWordPressに反映できるので、余裕のある方はぜひローカル環境でのWordPressテーマの開発にもチャレンジしてみてはいかがでしょうか。
当ブログの以下の記事を最後に紹介しておきます。
まとめ
ブロガーとして、ブログをカスタマイズする際に抑えておきたい点としては、「如何に記事を読みやすくするか」ということです。まずは、しっかり「読みやすいブログ」、「伝わるブログ」となることを心がけてカスタマイズしてみてください。
それが済んだら次は集客のためのSEO対策であったり、ブログ内の回遊率を高くするための内部施策としてのカスタマイズに取り組んでみてください。
今回さまざまなカスタマイズ方法を紹介しました。基本的にはダッシュボード内である程度のことができるようになっていますので、気になったところからぜひブログのカスタマイズに挑戦していただければと思います。
コメント