WordPressテーマをカスタマイズする方法

公開: 2021-07-12

WordPressテーマをインストールすることもありますが、うまく機能しません。 幸いなことに、WordPressは非常にカスタマイズ可能です。 あなたはそれをする正しい方法を選ぶ必要があるでしょう。 この記事では、WordPressテーマを安全かつ効率的にカスタマイズする方法をいくつか説明します。

ワードプレスのテーマをカスタマイズする

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

状況に応じて、WordPressサイトのテーマをカスタマイズする方法にはさまざまなオプションがあります。 オプションの概要は次のとおりです。

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

WordPressテーマをカスタマイズする必要があるかどうかを知る方法

場合によっては、実際にはテーマをカスタマイズする必要はありません。 代わりに、プラグインをインストールできます。 テーマは、Webサイトのデザイン、コンテンツの外観と表示方法を決定します。 プラグインは単に機能を追加するだけです。 必要な変更がデザインよりも機能に基づいている場合は、テーマをカスタマイズするのではなく、プラグインのインストールを検討することをお勧めします。 プラグインを作成するか、プラグインディレクトリからダウンロードするか、購入することができます。

テーマのfunctions.phpファイルを編集する場合は、「将来テーマを切り替えた場合でも、この機能を維持しますか？」と自問してください。 はいと答えた場合、そのコードはテーマではなくプラグインに含める必要があります。 ウィジェットを追加したり、カスタム投稿タイプと分類法を登録したり、カスタムフィールドを作成したり、ストアやSEO拡張機能などの機能を追加したりする場合は、テーマではなくプラグインを使用できます。

ワードプレスのテーマをカスタマイズする方法

WordPress管理画面を介してWordPressテーマをカスタマイズする方法

別のオプションは、WordPress管理画面を介してWordPressテーマをカスタマイズすることです。 これは、加えたい変更がかなり単純でデザインに重点を置いている場合に機能します。 カスタマイザーには、テーマを調整するためのいくつかの選択肢があります。 利用可能な選択肢は、テーマによって異なります。 [外観]メニューにエディターが表示されている場合は、それを避けてください。

カスタマイザーを介してWordPressテーマをカスタマイズする

WordPressテーマをカスタマイズする最も簡単な方法は、WordPressカスタマイザーを使用することです。 これは、次の2つの方法のいずれかで実行できます。

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

どちらの方法でも、カスタマイザーに移動します。

WordPressテーマエディター

WordPress Webサイトの管理画面を見ると、「テーマエディター」と呼ばれる選択肢が表示される場合があります。これは、[外観]> [テーマエディター]で確認できます。 これにより、テーマ内のファイルを表示して直接編集できます。 ただし、これは悪い考えです。 CSSまたはPHPの記述方法を知っている場合でも、テーマ内のファイルを編集することはお勧めできません。 まず、サードパーティのテーマを購入またはダウンロードした場合、次に更新したときに行った変更はすべて失われます。 第二に、あなたがあなたのウェブサイトを壊すような変更を加えた場合、それは追跡されず、ファイルの以前のバージョンは変更されません。 あなたが永久にあなたのウェブサイトを壊す可能性があります。

WordPressでさえ、テーマエディターを使用することがどれほど危険であるかを知っており、アクセスしようとすると警告が表示されます。 したがって、WordPressのアドバイスに従い、テーマエディターを使用しないでください。

WordPressテーマのコードを編集したい場合は、コードエディターを使用して編集できます。 また、ステージングサイトでテストするまで、ライブWebサイトのファイルを編集しないでください。 サードパーティのテーマを編集する必要がある場合は、子テーマを介して編集できます。

WordPressのテーマをカスタマイズできますか

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

多くのWordPressテーマにはカスタマイズオプションがあります。つまり、カスタマイザーを使用してデザインとレイアウトを変更できます。 ただし、一部のテーマは、実際には大幅に拡張およびカスタマイズすることを目的としています。 これらのテーマは実際にはフレームワークと呼ばれます。 または、ページビルダーと呼ばれるユーザーフレンドリーなインターフェイスでWebサイトを設計するのに役立つプラグインを使用できます。

ページビルダーを使用してWordPressテーマをカスタマイズする

Page Builderプラグインのポイントは、Webサイトのデザインを簡単に設定できるようにすることです。 インターフェースを使用すると、事前に何を取得するかを確認できます。 まず、互換性のあるテーマでページビルダープラグインをインストールし、次にオプションを使用してサイトを好きなようにデザインします。 最も人気のあるページビルダーの1つはElementorです。 ただし、いくつかのオプションがあります。 ページビルダーの利点の1つは、ドラッグアンドドロップインターフェイスを使用して投稿やページを編集できることです。 これにより、独自のWebページを作成し、コンテンツがどのように表示されるかを確認できます。 また、レイアウトとデザインに関しても十分な柔軟性があります。

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

ページビルダーを使用したくない場合は、フレームワークを使用してWordPressテーマをカスタマイズすることもできます。 テーマフレームワークは、連携して機能するように設計された一連のテーマです。 フレームワークである1つの親テーマと、メインテーマをカスタマイズして好みの外観にするために使用できるさまざまな子テーマがあります。 Diviはテーマフレームワークの一例です。 ページビルダーのようなドラッグアンドドロップインターフェイスと同様に、子テーマのデザインをさらに調整できるカスタマイズオプションがあります。

wpテーマをカスタマイズする方法

WordPressテーマのコードを編集する方法

CSSやPHPの編集方法を知っている場合は、テーマのコードを編集してカスタマイズできます。 これにより、最大限の制御が可能になりますが、最も技術的な知識も必要になります。 あなたがあなた自身のウェブサイトのために特別に開発されたあなた自身のテーマを編集しているなら、あなたはそれを直接編集することができます。 ただし、サードパーティのテーマを使用している場合は、次に更新するときに変更が失われないように、子テーマを作成する必要があります。

テーマファイルを編集する方法

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

スタイルシート

各WordPressテーマには、style.cssと呼ばれるスタイルシートがあります。 これには、レイアウト、フォント、配色など、Webサイトのスタイルを設定するためのすべてのコードが含まれています。 たとえば、Webサイトのテーマの色を変更する場合は、スタイルシートを編集できます。 また、新しいフォントを追加する場合は、スタイルシートを使用して、本文や見出しなどのさまざまな要素に目的のフォントを適用できます。

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

ページの各要素に影響を与えるCSSを確認するには、ブラウザーのインスペクターを使用してCSSを表示します。 次に、これを使用して、変更するページ上の個々の要素または要素またはクラスの範囲を対象とする新しいCSSを作成できます。

このCSSと特異性の話が新しくて混乱する場合は、テーマのCSSを自分で編集するのではなく、別のオプションを試してWordPressテーマをカスタマイズするか、SEO DesignChicagoの専門家に支援を依頼することをお勧めします。

関数ファイル

ほとんどのテーマには、functions.phpと呼ばれる関数ファイルもあります。 関数ファイルは完全にPHPで書かれています。 このファイルは、テーマの多くのものを機能させます。 このファイルには、注目の画像やウィジェットなどのテーマ機能を登録するためのコードが含まれています。 関数ファイルのテーマに関数コードを追加することもできます。 ただし、関数ファイルにコードを追加する代わりに、プラグインの作成を検討することをお勧めします。

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

テーマ内のファイルの大部分はテーマテンプレートファイルです。 これらのファイルは、WordPressが特定のページに出力するコンテンツを決定し、テンプレート階層に従って選択されます。 特定の投稿タイプ、ページ、またはアーカイブでのコンテンツの出力方法を変更するために、これらのファイルを編集したり、新しいファイルを作成したりできます。

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

繰り返しになりますが、ファイルを編集するときは、サイトを壊す可能性があるので注意してください。 常に最初にステージングサイトを使用してください！

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

Webサイトでサードパーティのテーマを実行していて、そのコードを編集する場合は、子テーマを作成する必要があります。 テーマを直接編集してから更新すると、すべての変更が失われます。

子テーマを作成する方法

  1. wp-content / themesで、新しいフォルダーを作成します。
  2. このフォルダに、スタイルシートを作成します。 新しいスタイルシートで、これが既存のテーマの子テーマであることをWordPressに伝えます。
  3. 次に、編集するファイルのコピーを子テーマに追加します。 このフォルダ内のファイルを編集します。
  4. 最後に、Webサイトで子テーマをアクティブにします。

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

ワードプレスのテーマ

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

これらは、WordPressテーマをカスタマイズするときに従うべきいくつかのベストプラクティスです。

可能な限りコードを追加せずにカスタマイズする

カスタマイザーを介して、または管理画面の他の場所でカスタマイズを行うことができるときはいつでも、これはコードを編集するよりもはるかに優れたオプションです。 CSSとPHPに精通していて、安全に行う方法を知っている場合にのみ、コードを編集してください。

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

テーマのコードを編集する場合、または変更を加えるために子テーマを作成する場合は、テーマをインストールし、コンテンツをライブサイトからコピーして、WordPressのローカルインストールで開発作業を常に行ってください。 このようにして、ミラーサイトで更新をライブテストできます。 これはライブサイトには影響せず、はるかに高速です。

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

WordPressテーマに変更を加えるときはいつでも、バージョン管理を使用して変更を追跡する必要があります。 少なくとも、テーマのバージョン番号を変更し、両方のバージョンのコピーを保持する必要があります。 ただし、バージョン管理を正しく行うには、サービス（GitHubなど）を使用して変更を追跡する必要があります。 変更によって問題が発生した場合は、手動で編集せずに簡単にロールバックできます。 チームで作業している場合、これは特に重要なステップです。

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

ステージングサイトにアクセスできる場合は、ライブサイトで新しいテーマをアクティブ化する前に、必ずこのサイトでテストしてください。 ローカルサイトは、別のサーバー上にあり、別のバージョンのPHPで実行される可能性があるため、ライブサイトとは若干の違いがあります。 ステージングサーバーにライブサイトのコピーを作成し、新しいテーマをアップロードしてアクティブ化します。 最初にサイトをテストしてすべてが正しく機能することを確認してから、変更をライブサイトにプッシュします。

テーマをモバイルレスポンシブにする

新しいテーマがデスクトップだけでなくモバイルにも対応できるようにすることが重要です。 2021年には、モバイルがWebトラフィックの半分を占めています。 そのため、新しいWordPressテーマがモバイルフレンドリーであることが重要です。そうしないと、トラフィックの最大半分を失う可能性があります。 BrowserStackなどのツールをいつでも使用して、さまざまなデバイスでWebサイトがどのように表示されるかを確認できます。

カスタマイズに誰もがアクセスできることを確認する

Webサイトに加えたカスタマイズは、障害や感覚障害のあるユーザーを含むすべての人がアクセスできる必要があります。 色を明るくしたり、テキストを小さくしたりするなどの変更を検討し、ADAに準拠していることを確認してください。

WordPressのコーディング標準に固執する

WordPressテーマのコードを編集したり、子テーマを作成したりするときはいつでも、コードがWordPressのコーディング標準に準拠していることを確認する必要があります。 これらの標準は、コードの一貫性と高品質を保証することを目的としています。

ワードプレスのテーマを編集する方法

SEOデザインシカゴでWordPressテーマをカスタマイズする

WordPressがウェブサイト構築に最適なプラットフォームである理由の1つは、非常にカスタマイズ可能であるためです。 ただし、サイトをカスタマイズするのは難しい場合があります。 SEO Design ChicagoのWeb開発者はWordPressの専門家であり、テーマをカスタマイズできるため、必要なWebサイトを正確に入手できます。 今日お問い合わせください！

よくある質問：

  • WordPressテーマをカスタマイズする必要がありますか？
  • WordPressテーマエディターを使用すべきではないのはなぜですか？
  • WordPressでカスタマイザーを見つけるにはどうすればよいですか？
  • WordPressテーマのレイアウト、フォント、色を編集するにはどうすればよいですか？
  • WordPressテーマをカスタマイズするためのいくつかのベストプラクティスは何ですか？