WordPressテーマをカスタマイズする方法（5つのステップバイステップの方法）

WordPressテーマをインストールしたが、それが適切ではない場合は、イライラするかもしれません。 WordPressのテーマをカスタマイズするために利用できるオプションはたくさんあります。

課題は、それを行う正しい方法を見つけることです。

この投稿では、 WordPressテーマをカスタマイズするためのオプション、どちらが適切かを判断し、安全かつ効率的に行う方法を示します。

ビデオバージョンをご覧になりたいですか？下の[再生]をクリックしてください。

テーマをカスタマイズするためのオプション

テーマに飛び込んで変更を加える前に、さまざまな状況に適しているため、オプションが何であるかを理解しておくことが重要です。

使用できるオプションの概要は次のとおりです。

• テーマに機能を追加する場合は、プラグインをインストールします。
• WordPress管理画面のカスタマイザーを使用して、テーマに応じてフォント、色、場合によってはレイアウトもカスタマイズします。
• ページビルダーテーマを使用している場合は、その機能を使用してサイトのデザインをカスタマイズします。
• フレームワークテーマをインストールした場合は、利用可能な子テーマの1つを使用して、管理画面で実行可能なカスタマイズオプションとともにサイトをカスタマイズします。
• テーマがサイトに固有であり、快適に実行できる場合は、テーマのコードを直接編集します。
• サードパーティのテーマのコードを編集する場合は、子テーマを作成します。

コードを編集する場合、ブロックエディタの使用からカスタマイザ、ファイルの編集まで、さまざまなオプションを利用できます。この投稿ではそれらすべてを見ていきますが、最も簡単なオプションであるプラグインのインストールから始めましょう。

本当にテーマをカスタマイズする必要がありますか？

時々そうしません。テーマをまったくカスタマイズする必要はありません。代わりに、プラグインをインストールする必要があります。

テーマによって、サイトのデザイン（外観とコンテンツの表示方法）が決まります。プラグインは機能を追加します。

変更をデザインではなく機能に集中させる場合は、プラグインを自分でインストールすることを検討してください。これは、作成する必要のあるプラグイン、プラグインディレクトリからダウンロードしたプラグイン、または購入したプラグインである可能性があります。

テーマ内のfunctions.phpファイルを編集したい場合は、次のことを自問してください。

将来テーマを切り替えた場合、この機能を維持しますか？

答えが「はい」の場合、そのコードはテーマではなくプラグインに入れる必要があります。

ウィジェットの追加、カスタム投稿タイプの登録、分類など、テーマの代わりにプラグインを使用する良い例、カスタムフィールドを作成し、ストアやSEO拡張機能などの機能を追加します。

WordPress管理画面を使用してWordPressテーマをカスタマイズする

必要な変更がデザインに重点を置いている場合、比較的単純で、管理画面から作成できる場合があります。カスタマイザーには、テーマを微調整するためのさまざまなオプションがあります。使用できるものは、テーマによって異なります。また、[外観]メニューに[エディター]と呼ばれるものが表示される場合があります。後で説明する理由から、これは避けてください。

カスタマイザーを使用してテーマをカスタマイズする

WordPressテーマをカスタマイズする最も簡単な方法は、WordPressカスタマイザーを使用することです。

これには、次の2つの方法のいずれかでアクセスします。

• サイトを表示しているとき（ログインしているとき）、画面上部の管理バーにある[カスタマイズ]リンクをクリックします。
• 管理画面で、[外観] > [カスタマイズ]をクリックします。

これにより、カスタマイザーに移動します。

上のスクリーンショットでは、多くのカスタマイズオプションがあるColorMagと呼ばれる無料のテーマをインストールしました。ヘッダー画像、ソーシャルメディア、カテゴリの色、サイトのレイアウトやデザインを変更できるさらに多くのタブに移動する[デザインオプション]タブなど、デザイン機能のセクションがカスタマイザーに追加されました。

テーマごとにカスタマイズオプションは異なりますが、新しいテーマでは常にそれらがどんどん追加されているようです。気に入ったテーマを見つけても、それが適切ではない場合は、テーマをカスタマイズすると、必要なデザインとレイアウトが正確に得られることがあります。

テーマエディタ（および使用しない理由） it）

管理画面に、テーマエディタと呼ばれるオプションが表示される場合があります。このオプションは、外観>テーマエディタを介して表示されます。

これにより、テーマ内のファイルにアクセスできます、つまり、直接編集できます。

しないでください。

CSSやPHPの作成に慣れている場合でも、次の2つの理由から、このようにテーマ内のファイルを編集することは非常に悪い考えです。

• サードパーティのテーマを購入またはダウンロードした場合、次にテーマを更新するときに行った変更はすべて失われます（セキュリティ上の理由から、テーマを更新しておく必要があります）。
• さらに重要なのは、サイトを壊すような変更は追跡されず、ファイルの以前のバージョンは変更されません。取り返しのつかないほどサイトを壊す可能性があります。

テーマのコードを編集する場合は、コードエディターを使用して編集する必要があります（最高の無料のHTMLエディターを確認してください）。ステージングサイトでテストするまで、ライブサイトのファイルを編集しないでください。サードパーティのテーマを編集する必要がある場合は、子テーマを介して編集する必要があります。これらの両方については、この投稿の後半で詳しく説明します。

WordPressは、テーマエディターを使用することがいかに安全でないかを知っています。アクセスしようとすると、警告も表示されます。

WordPressのアドバイスを参考にしてください。テーマエディターを使用してください！

ページビルダーとフレームワークを使用してWordPressテーマをカスタマイズする

WordPressテーマの大部分にはカスタマイズオプションがあります。つまり、次の方法でデザインとレイアウトを変更できます。カスタマイザー。

ただし、一部のテーマはこれをさらに発展させ、拡張して大幅にカスタマイズするように設計されています。これらのテーマはテーマフレームワークと呼ばれます。

もう1つのオプションは、ユーザーフレンドリーなインターフェースを使用してサイトを設計できるプラグインを使用することです。これらはページビルダーと呼ばれます。

ページの使用テーマをカスタマイズするBuilder

Page Builderプラグインは、取得しているものを確認できるインターフェースを使用して、サイトのデザインを簡単に設定できるように設計されています。

互換性のあるテーマでページビルダープラグインをインストールし、それが提供するオプションを使用して、サイトを希望どおりに設計します。

最も有名なページビルダーの1つは、Elementorです。ただし、ページビルダーのまとめでいくつかの代替案を見つけることができます。

ページビルダーを使用すると、ドラッグアンドドロップインターフェイスを使用して投稿やページを編集できます。つまり、コンテンツがどのように表示されるかを確認できます。各ページを一意にすることができます。

以下では、HelloElementorテーマと互換性のあるElementorページビルダーを使用しています。

ページビルダーを使用すると、ページのレイアウトとデザインに多くの柔軟性がもたらされます。 Wixのようなウェブサイトビルダーに慣れている場合は、WordPressへの移行を容易にするのに役立ちます。また、WordPressコンテンツにWYSIWYGインターフェースを使用したい場合は、ページをすばやくデザインするのに役立ちます。

テーマフレームワークを使用してテーマをカスタマイズする

ページビルダーの代わりにテーマを使用するフレームワーク。これらは、連携して機能するように設計された一連のテーマです。フレームワークである親テーマが1つあり、メインテーマをカスタマイズして希望どおりに表示するために使用できる子テーマの選択肢があります。

テーマフレームワークの例は、Diviです。ページビルダーと同様のドラッグアンドドロップインターフェイスなど、子テーマのデザインをさらに微調整できるカスタマイズオプション。

WordPressテーマのコードの編集

CSSやPHPの編集に慣れている場合は、次のことができます。テーマのコードを編集して、テーマをカスタマイズします。

これにより、最大限の制御が可能になります。

サイトに固有の独自のテーマを編集している場合は、そのために特別に開発されたので、テーマを直接編集できます。ただし、サードパーティのテーマを使用していて、それを編集する場合は、次にテーマを更新するときに変更が失われないように、子テーマを作成する必要があります。

テーマファイルの編集

WordPressテーマを編集するための最初のステップは、どのテーマファイルが何を制御し、どのテーマファイルを編集する必要があるかを理解することです。

スタイルシート

すべてのWordPressテーマにはstyle.cssと呼ばれるスタイルシート。レイアウト、フォント、色など、サイトのスタイルを設定するためのすべてのコードが含まれています。

たとえば、テーマの色を変更する場合は、スタイルシートを編集します。新しいフォントを追加する場合は、スタイルシートを使用して、本文や見出しなどのさまざまな要素に適用します。

スタイルシートを編集するときは注意してください。特異性とは、要素のコードが常にあなたの場所から来ているとは限らないことを意味しますそうだと思います。下位の要素に固有のスタイルを追加しない限り、要素はページの階層で上位にある他の要素からスタイルを継承します。

ページのどの要素に影響を与えているCSSを見つけるには、次のことができます。ブラウザのインスペクターを使用してCSS（この例ではChrome DevTools）を表示します：

これを使用して、ページ上の個々の要素または要素やクラスの範囲を対象とする新しいCSSを作成できます。

要素、クラス、および特異性に関するこのすべての話が初めての場合は、テーマのCSSを直接編集することを避けたいと思うかもしれません。少なくともCSSとその仕組みについてさらに学ぶまでは。

関数ファイル

ほとんどすべてのテーマに含まれるもう1つのファイルは、関数ファイル（functions.php）です。 。これはあなたのテーマでたくさんのものを機能させるファイルです。その中には、注目の画像やウィジェットなどのテーマ機能を登録するためのコードがあります。

テーマに関数型コードを追加したい場合は、ここに追加します。ただし、注意してください。ほとんどの場合、実際にはプラグインを作成する必要があります。自問してみてください：

今後テーマを切り替えた場合でも、この機能を維持しますか？

答えが「はい」の場合、関数ファイルにコードを追加する代わりにプラグインを記述します。プラグインは大きくする必要はありません。数行のコードでプラグインを作成することを妨げるものは何もありません。

関数ファイルはすべてPHPで記述されているため、プラグインに精通している必要があります。それ。 Google検索で見つけたコードを盲目的にコピーしないでください。時間をかけてそのコードの機能を理解し、理解してください。そうすれば、本来あるべきほど良くないコードを追加する可能性が低くなります。

テーマテンプレートファイル

テーマ内のほとんどのファイルはテーマテンプレートファイルです。 。これらは、WordPressが特定のページに出力するコンテンツを決定するファイルであり、テンプレート階層に従って選択されます。

特定の投稿タイプ、ページ、またはアーカイブでのコンテンツの出力方法を変更する場合、これらのファイルの1つを編集するか、新しいファイルを作成する必要があります。

たとえば、テーマに、カテゴリとタグのアーカイブページを出力するために使用されているarchive.phpファイルがあるとします。タグの出力方法を変更したい。そのため、「tag.php」というファイルを作成します。このファイルは、archive.phpに基づいて調整されています。

ここでも、ファイルの編集には注意が必要です。サイトが破損する可能性があります。常にローカルでテストしてください。最初にDevKinstaやステージングサイトなどのツールを使用してインストールします。

編集する必要があるこれらのファイルタイプはどれでも、適切に行う必要があります。以下のベストプラクティスのセクションを読んで、編集方法を確認してください。サイトを壊さず、セキュリティ上の問題を引き起こさない方法でコードを作成します。

子テーマを使用してサードパーティのテーマをカスタマイズする

テーマがサイトで実行されているのはサードパーティのものであり、コードを編集する場合は、子テーマを作成する必要があります。

これは、テーマを直接編集してから更新する場合（

子テーマの作成は、次の4つの手順で構成されます。

1. wp-content /に新しいフォルダを作成します。テーマ。
2. そのフォルダにスタイルシートを作成します。そのスタイルシートに、tel lこれが既存のテーマの子テーマであることをWordPressで確認します。
3. 編集するファイルのコピーを子テーマに追加し、そこで編集します。
4. で子テーマをアクティブ化します。

WordPressは、親テーマの階層の上位にファイルがない限り、常に子テーマのファイルを使用してコンテンツを出力します。同じファイルのバージョンが2つある場合は、子テーマのバージョンが使用されます。これは、子テーマの新しいファイルが親テーマのファイルを上書きすることを意味します。

WordPressテーマをカスタマイズするためのベストプラクティス

つまり、テーマのカスタマイズを計画しています。先に進んで変更を加える前に、次のヒントに従って、安全に実行し、サイトを壊したり、攻撃に対して脆弱にしたり、コードを紛失したりしないようにしてください。

可能であれば、コードを編集せずにカスタマイズ

カスタマイザーまたは管理画面の他の場所からカスタマイズできる場合は、コードを編集するよりも安全です。

必要な場合にのみコードを編集してください。 CSS（スタイルシート用）とPHP（他のテーマファイル用）に精通しており、安全に行う方法を知っています。

ローカル開発サイトを使用して変更を加える

テーマのコードを編集する場合、または子テーマを作成して変更を加える場合は、で開発作業を行う必要があります。テーマがインストールされ、コンテンツがライブサイトからコピーされたWordPressのローカルインストール。

このようにして、ライブサイトのミラーを作成して変更をテストできます。ローカルサイトでの作業はライブサイトに影響を与えず、より速くなる可能性があります。

カスタマイザーを使用している場合でも、テストにローカルバージョンのサイトを使用すると便利な場合があります。ライブサイトに影響を与えることなく、変更を公開してテストできます。

テーマへの変更をテストしたら、ライブサイトにアップロードできます。さらに良いことに、でテストすることもできます。ステージングサイトを公開してから公開します。

バージョン管理を使用する

テーマに変更を加える場合は、バージョン管理を使用して変更を追跡する必要があります。

最も単純なことは、テーマのバージョン番号を変更し、両方のバージョンのコピーを保持することを意味します。ただし、バージョン管理を適切に行うには、GitHubなどのサービスを使用して変更を追跡する必要があります。

このように、変更によって問題が発生した場合は、手動で作成しなくても簡単にロールバックできます。編集。

チームの一員として作業している場合は、他のメンバーが何をしているかを確認できるため、バージョン管理がさらに役立ちます。 git vsGithubガイドを必ずお読みください。

ステージングサイトを使用して変更をテストする

ステージングサイトにアクセスできる場合（すべてに付属しているKinstaの無料ステージングなど）計画）、ライブサイトでテーマの新しいバージョン（または新しい子テーマ）をアクティブ化する前にこれをテストするのが最も安全な方法です。

これは、ローカルサイトがライブサイトとは異なるためです。サーバーは別のサーバー上にあります。ローカルマシン）、異なるバージョンのPHPまたはサイトを実行する他のツールを実行している可能性があります。

ステージングサーバーにライブサイトのコピーを作成してから、新しいサイトをアップロードしてアクティブ化します。テーマ。サイトを徹底的にテストしてすべてが機能することを確認してから、変更をライブサイトにプッシュできます。

テーマをレスポンシブにする

テーマに加える必要のある変更はすべてデスクトップだけでなくモバイルでも機能します。

携帯電話を介してインターネットにアクセスする人が増え、Googleのモバイルファーストインデックスが登場したことで、テーマがモバイルで機能することが今ではおそらく重要になっています。デスクトップで行います。そのため、テーマに加える変更は、モバイルフレンドリーであるか、必要に応じてモバイルファーストである必要があります。

これは主に、スタイルやレイアウトに加える変更に適用されます。新しいレイアウトが機能することを確認してください。モバイルでは、レイアウトがさまざまな画面サイズに調整されるようにメディアクエリを追加しました。

テーマがレスポンシブでない場合、検索エンジンのランキングとコンバージョン率に悪影響を及ぼします。

テストするさまざまなモバイルデバイスにアクセスできない場合は、BrowserStackなどのツールを使用して、さまざまなデバイスでサイトがどのように表示されるかを確認できます。ブラウザの開発者ツールとカスタマイザーのレスポンシブビューを使用することもできます。

カスタマイズがアクセシビリティに影響を与えないようにする

テーマへの変更は、障害や感覚障害のあるユーザーもアクセスできる必要があります。

これは、サイトがスクリーンリーダーで機能することを保証するだけではありません。カラースキームやフォントサイズなどの他の考慮事項は、多くの人にとって重要です。

変更があった場合テーマを作成するのは、色を明るくしたり、テキストを小さくしたりすることです。考え直してください。これにより、他のユーザーがサイトを読んだり操作したりするのが難しくなる可能性があります。

変更をライブで行う前に、アクセシビリティチェッカーを使用してサイトをテストし、人が除外されていないことを確認します。

WordPressコーディング標準に準拠

テーマのコードを編集している場合、または作成している場合カイldテーマでは、コードがWordPressコーディング標準に準拠していることを確認する必要があります。

これらの標準は、コードの一貫性と品質を確保し、混乱するコードを回避するために存在します。 PHP、CSS、JavaScriptには標準がありますので、時間をかけて自分に関連するものを確認し、それらに従っていることを確認してください。

既存のWordPressテーマが適切にコーディングされていて、新しいテーマを作成した場合それと一致する方法でコードを作成することで、コードが準拠していることを確認できます。テーマに加えた変更には必ずコメントを追加して、将来コードの作業に戻ったときに自分が何をしたかを他の人に知らせてください。忘れないと思うかもしれませんが、数か月が経過すると、コード行を編集した理由を驚くほど簡単に忘れてしまいます。

#WordPressテーマをカスタマイズして、独自のものにする必要がありますか？たくさんのオプションがあります！詳細ガイドであなたにぴったりのものを選んでください！ 👚👔クリックしてツイート

概要

WordPressテーマのカスタマイズはそれほど難しくありません。カスタマイザーを使用してフォントや色を変更するという単純なケースの場合もあります（WordPressフォントに関する詳細なガイドを必ずお読みください）。また、新しい子テーマを作成して、新しいテンプレートファイルをテーマに追加する必要がある場合もあります。

テーマをカスタマイズするためのオプションには、プラグインまたはカスタマイザーの使用、WordPressテーマのコードの直接編集などがあります。 、または子テーマを作成します。

サイトを壊すことなく、適切なオプションを特定し、安全にカスタマイズします。