WordPressテーマをインストールしたものの、しっくりこない。そんなイライラを抱えているでしょうか？WordPressテーマをカスタマイズする機能は多数あります。
カスタマイズを正しく行う道筋さえ、見つけてしまえばいいのです。
今回の記事では、WordPressテーマをカスタマイズするためのオプション、自分に合ったテーマ探しの方法、そして、それらを安全かつ効率的に行う方法をご紹介します。
WordPressテーマをカスタマイズする方法について、動画での解説もご用意しています。
テーマをカスタマイズするためのオプション
さまざまな状況ごとに適切なメソッドが異なるため、テーマをいきなりカスタマイズする前に、利用すべき手段が何であるかを理解することが重要です。
ここで検討するオプションの概要は次のとおりです。
- テーマに機能を追加したい場合は、プラグインをインストールしましょう。
- テーマに応じて、WordPress管理画面のカスタマイザーを使用して、フォント、色、およびレイアウトをカスタマイズする
- ページビルダーテーマを使用している場合：その機能を使って、サイトのデザインをカスタマイズ
- フレームワークのテーマをインストールしている場合：利用できる子テーマのいずれかを使用してサイトをカスタマイズし、カスタマイズ可能なオプションを管理画面から実行する
- テーマが、あなたのサイトに固有であり、直接テーマのコードを編集することができる場合：テーマのコードを直接編集する
- サードパーティのテーマのコードを編集したい場合：子テーマを作成してそれを編集する
コードを編集したい場合には、ブロックエディタから、カスタマイザー、ファイルの編集まで、やり方は豊富にあります。今回の記事では、その全てを扱いますが…先ずは、最もシンプルな方法、プラグインから見てみましょう。
実際にテーマをカスタマイズする必要があるのか
テーマをまったくカスタマイズする必要がない場合もあります。プラグインをインストールするだけで、事足りるケースです。
テーマは、サイトのデザインやコンテンツの表示方法を決める重要な要素です（他のサイトが使用しているテーマが気になるなら、テーマ検出ツールが便利です）。そして、プラグインは、これに追加の機能を補完してくれます。
変更内容がサイトの設計そのものではなく、特定の機能に焦点を当てる場合には、プラグインのインストールが便利です。自分で作成することも、プラグインディレクトリからダウンロードすることも、購入することもできます。
テーマのfunctions.phpファイルを編集したい場合には、次のことを自問してみましょう。
今後テーマを切り替えた後でも、この機能は保持すべき？
答えが「YES」の場合、テーマではなく、プラグインにコードを記述すべきです。
テーマの代わりにプラグインを使用する良い例として、ウィジェットの追加、カスタム投稿タイプとタクソノミーの登録、カスタムフィールドの作成、ストアやSEOなどの機能の強化があります。
WordPressの管理画面からWordPressのテーマをカスタマイズする
実施したい変更がデザイン中心で比較的単純な場合は、管理画面から操作できることも。カスタマイザーには、テーマを微調整するさまざまなオプションがあります。実際に利用できるものはテーマによって異なります。また、外観メニューに「テーマの編集」が表示される場合があります。これの編集は避けて（理由については後述）ください。
カスタマイザーを使用してテーマをカスタマイズする
WordPressのテーマをカスタマイズする最も簡単な方法は、WordPressに標準搭載されているカスタマイザーを使用すること。
次のいずれかの方法でこれにアクセスしましょう。
- （ログインしている状態で）サイトを閲覧し、画面上部にある管理バー内の「カスタマイズ」をクリックします。
- 管理画面で、「外観」 > 「カスタマイズ」をクリックします。
これでカスタマイズ画面に移動できます。
上のスクリーンショットでは、ColorMagという無料のテーマをインストールしました。これには、カスタマイズオプションがたくさんあります。ヘッダー画像、ソーシャルメディア、カテゴリの色に加えて、デザインオプションタブがあり、ここから、サイトのレイアウトやデザインを変更するためのさらに多くのタブへと移動できます。
テーマごとにカスタマイズオプションが異なりますが、新しいテーマの方が多くの機能が追加されている傾向にあります。好きなテーマを見つけたものの、機能が不十分である、という場合は、カスタマイズすることで、必要なデザインとレイアウトが正確に実現できるかもしれません。
「テーマの編集」とは（…とこれを使用すべきでない理由）
管理画面で「テーマの編集」というオプションが表示されることがあります。この画面には「外観」> 「テーマの編集」からアクセスできます。
ここから、テーマ内のファイルにアクセスできます。つまり、直接編集できるようになる、ということです。
注意：絶対に、ここからの編集は避けてください。
CSSやPHPを作成することに慣れていようとも、テーマのファイルをこのように編集することは、次の2つの理由から非常に危険だと言えます。
- サードパーティのテーマを購入またはダウンロードした場合、テーマを更新すると、その変更は失われてしまいます（そして、セキュリティ上の理由からテーマを常に更新する必要あり）。
- さらに重要なこととして、編集の結果、サイトが壊れてしまった時、以前の状態を復元できません。つまり、サイトを回復することができなくなる可能性があります。
テーマのコードを編集したい場合には、コードエディタ（おすすめの無料HTMLエディタをご紹介中です）を使うようにしましょう。さらに、WordPressステージングサイトで確認する前に、本番環境でサイトのファイルを編集しないことをおすすめします。サードパーティのテーマを編集する必要がある場合は、子テーマを使用して編集してください。この両方について、記事の後半で詳しく扱うことにします。
WordPressは、「テーマの編集」を使用することの危険性を認識しており、これにアクセスしようとすると、警告が表示されます。
WordPressからの忠告に従いましょう。「テーマの編集」は是非とも使用しないでください！
ページビルダーやフレームワークを使用してWordPressのテーマをカスタマイズする
WordPressテーマの多くにはカスタマイズオプションがあり、カスタマイザーを使用してデザインとレイアウトを変更できます。
一部のテーマはさらに先を行き、大幅にカスタマイズできるように設計されています。そのようなテーマはテーマフレームワークと呼ばれます。
別のオプションとしては、ユーザーフレンドリーなインターフェースを使用してサイトを設計できるプラグインもあります。つまり、ページビルダーです。
ページビルダーでWordPressのテーマをカスタマイズする
ページビルダープラグインは、結果をその場で確認できるインターフェースを採用し、サイトのデザインを簡単に設定できるように設計されています。
互換性のあるテーマとあわせてページビルダープラグインをインストールし、それを使用して、サイトを希望どおりに設計することができます。
ページビルダーの中でも、有名なのがElementorですが、こちらのページビルダーのまとめでは、いくつかの代替案をご紹介しています。
ページビルダーを使用すると、ドラッグアンドドロップのインターフェースを使用して、投稿やページを編集できます。コンテンツの外観を確認しながら各ページを調整でき、便利です。
以下では、Elementorページビルダーと互換性のあるテーマである「Hello Elementor」を使用しています。
ページビルダーを使えば、ページのレイアウトやデザインを柔軟に調整することができます。Wixといったウェブサイトを使っている場合には、WordPressへの移管は簡単です。WordPressでコンテンツを作成する際にWYSIWYG（画面の通りに出力されるシステム）が好みであれば、ページを素早くデザインできます。
テーマフレームワークでWordPressのテーマをカスタマイズする
ページビルダーの代わりに、テーマフレームワークを使うこともできます。これは、言うなれば、連携し動作するよう設計された一連のテーマ。フレームワークである親テーマが1つあり、子テーマを選択、メインテーマをカスタマイズし、希望どおりにデザインします。
テーマフレームワークの一例が、Diviです。これには、ページビルダーと同様のドラッグアンドドロップインターフェースなど、子テーマのデザインをさらに微調整するためのカスタマイズオプションが搭載されています。
WordPressのページビルダープラグインDiviとElementorの比較はこちらをご覧ください。
WordPressのテーマのコードを編集する
CSSやPHPの編集に慣れているならば、テーマのコードを編集してカスタマイズするのもいいでしょう。
これででできることの範囲は、膨大です。
あなたのサイトに固有の特別のテーマ（そのサイト専用に開発されたもの）を編集する場合、テーマを直接編集して問題ありません。ただし、サードパーティのテーマを使用し編集する時には、子テーマを作成して、テーマの更新に際して変更内容が失われないように注意しましょう。
テーマファイルの編集
WordPressテーマを編集する最初のステップは、どのテーマファイルが何を制御し、どのテーマファイルを編集する必要があるのかを理解すること。
スタイルシート
すべてのWordPressテーマには、style.cssと呼ばれるスタイルシートがあります。サイトのスタイルを決めるコード（レイアウト、フォント、色など）が含まれています。
例えば、テーマの色を変更するには、スタイルシートを編集します。新しいフォントを追加する場合は、スタイルシートを使用して本文や見出しなどの要素に適用します。
スタイルシートを編集するときは注意してください。具体性が重要です。要素のコードが、どこに起因しているのか、常に考えるようにしましょう。下位の要素に固有のスタイルを設定しない限り、上の階層にある他の要素からスタイルを継承することになります。
ページ上のどの要素にどのCSSが影響しているかを調べるには、ブラウザのインスペクター（この例ではChrome DevTools）を使用してCSSを表示するのが便利です。
その後、ここでの確認をもとに、ページ上の個々の要素、または要素やクラスのまとまりを対象とする、新しいCSSを作成しましょう。
要素、クラス、具体性などに関する話が初耳だという人は、テーマのCSSを直接編集するのは避けた方がいいかもしれません。少なくとも、先に、CSSの基本とその仕組みについて学習することをお勧めします。
関数ファイル
ほとんどすべてのテーマに含まれるファイルとして、関数ファイル（functions.php）も忘れてはなりません。これにより、テーマのあらゆる部位が実際に動くことになります。具体的には、アイキャッチ画像、ウィジェットなどのテーマの機能を登録するコードが記述されています。
関数コードをテーマに追加するには、これを編集してください。ただし、注意が必要です。ほとんどの場合、実際にプラグインを作成する必要性が生じます。次の質問を自分に投げかけてみましょう。
今後テーマを切り替えた後でも、この機能は保持すべき？
答えが「YES」ならば、関数ファイルにコードを追加する代わりに、プラグインを作成しましょう。プラグインと言っても、たくさんの機能は必要ありません。数行のコードのプラグインでも、全然OKです。
ちなみに関数ファイルはすべてPHPで記述されるため、これに精通している必要があります。Googleで検索して見つけたコードをやみくもにコピー＆ペーストしないでください。そのコードの機能を読み解き、理解することに時間を割いてください。ちょっとした手間をかけるだけで、望ましくないコードを追加する可能性が低くなります。
テーマのテンプレートファイル
テーマ内のファイルのほとんどはテーマテンプレートファイルとなります。これが、WordPressが特定のページに出力するコンテンツを決定し、テンプレートの階層に従って選択されます。
特定の投稿タイプ、ページ、またはアーカイブでのコンテンツの出力方法を変更するには、このファイルのいずれかを編集するか、新しいファイルを作成する必要があります。
たとえば、テーマに、カテゴリとタグのアーカイブページを出力するために使用されるarchive.phpファイルがあり、そして、タグの出力方法を変更したいとします。そこで、「tag.php」というファイルを作成します。これは、archive.phpに基づき、微調整を加えたものです。
繰り返しますが、ファイルの編集には注意してください。本番サイトに適用する前に、DevKinstaやWordPressステージングサイトのような環境を使用して、必ずテストを行ってください。
これらのファイルタイプのどちらを編集するにしても、慎重に行いましょう。以下の推奨事項を読んで、サイトを破壊することも、セキュリティの問題を引き起こすこともなく、コードを編集する方法をご確認ください。
子テーマを使用したサードパーティのテーマのカスタマイズ
サイトでサードパーティのテーマを使用しており、それのコードを編集する、という場合には、必ず子テーマを作成しましょう。
これは、テーマを直接編集し、その後にテーマを更新すると（定期的な更新は必須です）、適用した変更がすべて失われてしまうからです。
子テーマの作成は以下の手順で実行します。
- wp-content/themes に新しいフォルダを作成する
- そのフォルダ内に、スタイルシートを作成し、スタイルシート内で、WordPressに対して、これが既存のテーマの子テーマであることを伝える
- 編集したいファイルのコピーを子テーマに追加し、 そこでテーマの編集を行う
- サイト内で子テーマを有効化する
WordPressは、親テーマの階層の上位にファイルがない限り、常に子テーマのファイルを使用してコンテンツを出力します。同じファイルのバージョンが2つある場合は、子テーマのバージョンを使用します。つまり、子テーマの新しいファイルが親テーマのファイルを上書きするということです。
WordPressのテーマをカスタマイズする際の推奨事項
テーマのカスタマイズを今すぐにでも始めたいところですが、修正を加える前に、安全に操作し、サイトを壊したり攻撃に対する脆弱性を高めたりしないように、以下の手順に従ってください。
可能であれば、コードを編集せずにカスタマイズする
カスタマイザーや、管理画面のその他の場所で済むならば、コードを直接編集するよりも安全です。
CSS（スタイルシート）、PHP（他のテーマファイル）に精通しており、安全に行う方法を知っている場合にのみ、コードを編集してください。
ローカル開発環境を使って変更を加える
テーマのコードを編集するか、子テーマを作成して変更する際には、テーマをインストールし、コンテンツをライブサイトからコピーして、ローカル環境のWordPressで作業を行いましょう。
このようにして、変更をテストするための本番サイトのミラーが出来上がります。ローカルサイトでの作業は、本番サイトに影響を与えず、かつ迅速に処理できます。
カスタマイザーを使用している場合でも、変更を公開して本番サイトに影響を与えずにテストできるので、サイトのローカルバージョンをテストに使用するのが便利です。
テーマの変更内容をテストしたら、本番サイトにアップロードするか、ステージングサイトでテストしてから本番環境に適用することができます。
バージョン管理を活用する
テーマを変更するときは、バージョン管理を使用することで、変更を追跡する必要があります。
最も簡単なのは、テーマのバージョン番号を変更し、両方のバージョンのデータを保持することです。ただし、バージョン管理をより適切に行うには、GitHubなどのサービスを使用して変更を追跡するようにしましょう。
これにより、変更で問題が発生した場合であっても、手動で編集することなく簡単にロールバックできます。
チームの一員として作業するケースでは、他のメンバーが何をしているかを確認できるため、バージョン管理はさらに大きな意味を持ちます。gitとGithubの比較ガイドもご用意しています。
ステージングサイトで変更をテストする
ステージングサイト（Kinstaではすべてのプランに無料のステージングが付帯します）が利用できるなら、ライブサイトでテーマの新しいバージョン（または新しい子テーマ）を有効化する前に、これをテストするのが最も安全です。
というのも、ローカルサイトは実際のサイトとは多少の違いがあるためです。別のサーバー（ローカルマシンで作成されたもの）にあり、さらに、異なるバージョンのPHPまたは、サイトを実行するための他のツールを使用している可能性があります。
ステージングサーバーでライブサイトのコピーを作成し、新しいテーマをアップロードして有効にします。サイトを徹底的にテストして、すべてが機能することを確認してから、ライブサイトに変更を適用しましょう。
テーマをレスポンシブにする
テーマに加える変更は、当然、デスクトップだけでなくモバイルでも機能する必要があります。
スマートフォンを介してインターネットを利用する人の数は増加の一途をたどり、Googleのモバイルファーストインデックスを考慮しても、デスクトップよりもモバイルでテーマを機能させることが重要になります。したがって、テーマに変更を加える場合、モバイルフレンドリーにするか、可能であればモバイルファーストを意識しましょう。
これは主に、スタイルやレイアウトに加える変更について言えることです。新しいレイアウトがモバイルで機能していること、メディアクエリを追加して、レイアウトがそれぞれの画面サイズに調整されていることを確認してください。
テーマがレスポンシブでないと、検索エンジンのランキングとコンバージョン率に悪影響を及ぼします。
テストのために様々なモバイルデバイスを利用したいものですが、それが手元にない場合には、BrowserStackのようなツールを使用して、それぞれのデバイスでサイトがどのように表示されるか確認できます。ブラウザで開発者ツールを使用し、カスタマイザでレスポンシブビューを表示することもできます。
カスタマイズがアクセシビリティに影響を与えないように注意しよう
テーマに対する変更が、障がいのあるユーザーによるアクセスを邪魔しないようにしましょう。
サイトでスクリーンリーダーが機能するようにし、これに加えて、配色やフォントサイズなどにも配慮が必要です。
テーマの修正の結果、色が明るくなったり、テキストが小さくなったりする場合には、もう一度、その判断を検討しましょう。これにより、サイトを読んだり、操作したりすることが難しくなる可能性があります。
変更を公開する前に、アクセシビリティチェッカーを使用してサイトをテストし、特定のユーザーによる利便性が損なわれていないか、確認してください。
WordPressのコーディング標準に準拠する
テーマのコードを編集、または子テーマを作成するとき、コードがWordPressのコーディング標準に準拠するように気をつけましょう。
この標準は、コードの一貫性と品質を保証し、混乱を招くコードを回避するためにあります。PHP、CSS、JavaScriptに標準があるので、時間をかけて該当するものをチェックし、それに準拠できるように、意識してください。
既存のWordPressテーマが適切にコーディングされており、それと一貫性のある方法で新しいコードを記述すれば、たらしいやり方で先に進めていることになります。テーマに加えた変更には必ずコメントを追加してください。そうすることで、あなた自身、そして、他の人が今後、コードをチェックした時に「何が意図されているのか」知ることができます。「大丈夫、忘れないから」と思うかもしれませんが、数か月経過するだけで、コードの特定の行を編集した理由を驚くほど簡単に忘れてしまうものです。
まとめ
WordPressテーマの編集は、それほど難易度は高くありません。フォントや色、ファビコンの変更は、カスタマイザーを使って簡単に実現可能です（WordPressサイトのフォントについてはこちら）。はたまた、テーマに新しいテンプレートファイルを追加するには、新しい子テーマを作成する必要があります。
テーマをカスタマイズするためのオプションとして、プラグイン、カスタマイザーの使用、WordPressテーマコードの直接編集、または子テーマの作成が考えられます。
この中から適切な選択肢を選び、サイトを破壊することなく安全にカスタマイズを行いましょう。
2010年からWordPressサイトの構築をサポート。自己ホスティング型のWordPressをこよなく愛し、できるだけ多くの人がWordPressを利用して優れたウェブサイトを作成する手助けをしたいと日夜奮闘。
コメントを残す