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

これまでに WordPress テーマをカスタマイズしたことがない場合は、複雑に聞こえるかもしれません。しかし、これ以上真実からかけ離れたものはありません。高度なテーマオプションを備えた幅広い WordPress テーマのおかげで、WordPress サイトの外観や機能の変更がこれまでより簡単になりました。

Total などの多くのテーマにはページビルダーとカスタマイズオプションが組み込まれているため、コードを使用せずに独自の Web サイトを作成できます。テーマに対応していない場合でも、デザイン設定を簡単に追加できるプラグインがたくさんあります。または、いくつかの非常に具体的なスタイルの調整が必要な場合、またはコーディング能力に自信がある場合は、子テーマを作成してサイトに編集をハードコードすることもできます。

組み込みオプションを使用してテーマをカスタマイズする

まず、テーマに組み込みのスタイルオプションが含まれているかどうかを確認してください。多くのテーマ開発者は、特にプレミアムテーマを使用している場合、いくつかのスタイルを含めます。これらは、設定、テンプレート、または拡張機能である場合もあります。

テーマパネル

多くのプレミアムテーマには、デザイン関連の設定が含まれるテーマパネルが備わっています。これには、背景オプション、カラーオプション、フォント設定、メディアオプションなどが含まれます。利用可能なオプションはテーマによって異なります。

たとえば、Total WordPress テーマには、カラーパレット、ヘッダーおよびフッタービルダー、フォントマネージャーなどのカスタマイズを見つけることができるテーマパネルが含まれています。

ライブカスタマイザー

もともと WordPress 3.4 で導入されたカスタマイザーには、テーマの外観に関連するさまざまな設定が含まれています。これには、ロゴのアップロードまたはメニューの管理のためのデフォルトのオプションが含まれます。ただし、テーマ開発者はここに多くのスタイル設定を追加することもできます。

カスタマイザーにアクセスするには、[外観] > [カスタマイズ]に移動するだけです。ここから、カスタマイザーがセクションに編成されていることがわかります。デフォルトでは、これらはサイト ID (タイトルとサイトアイコン)、メニュー、ウィジェット、ホームページ (ホームページをブログまたはページとして設定するため)、そして最後の 1 つはカスタム CSS を追加できるものです。

ただし、カスタマイザーで利用できる追加オプションは、アクティブなテーマとプラグインによって追加されたオプションによって異なります。ただし、最も一般的なものには、カラーピッカー、レイアウトオプション、カスタム投稿タイプ設定などが含まれます。

通常、カスタマイズで選択したオプションはグローバルに、つまりサイト全体に適用されます。したがって、ロゴとメニューを中央に配置するなど、別のヘッダーメニューレイアウトを選択すると、サイトのすべてのページでそのように表示されます (テーマでページごとのカスタマイズが提供されていない場合)。

Total テーマを例として再度使用すると、Total のカスタマイザーでは、ページヘッダー、検索結果、ページネーション、トップへのスクロール、フォント、ブログ投稿構造、カスタム投稿タイプ構造、ソーシャルリンク、トップバー、フッター吹き出しのスタイルを見つけることができます。、サイトの応答性設定など。

注: カスタマイザーは通常、クラシックテーマで使用できますが、ブロックテーマではデフォルトで非表示になります。ブロックテーマを使用している場合、サイトのスタイルを設定するために必要なほとんどのオプションは Gutenberg 内にあります。

バンドルされたプラグイン

最後に、一部のプレミアムテーマには、スタイルを提供するプレミアムプラグインが含まれている場合があります。この場合、必要なのは、付属または「バンドル」されたプラグインを必ず有効にすることだけです。これらは多くの場合、プレミアムページビルダーまたは次に説明する CSS エディターです。

ページビルダーまたはCSSエディターを使用してサイトデザインをカスタマイズする

テーマのデザインをカスタマイズする最も簡単な方法の 1 つは、ページビルダーまたは CSS エディターを使用することです。これらは、さまざまなデザインのカスタマイズオプションを追加するサードパーティのプラグインです (1 つを除く)。

最も人気のあるオプションをいくつか紹介する前に、ページビルダーや CSS エディターをバンドルしたり含めたりする必要はないことを知っておくことが重要です。テーマを使用するオプションを提供します。多くのテーマでは、サードパーティのプラグインとの互換性やサポートが宣伝されています。したがって、テーマのランディングページを確認するか、テーマとプラグインの開発者に問い合わせて、好みのビルダーがテーマで動作するかどうかを確認してください。または、無料オプションの場合は、実際に試してみて、結果を確認してください。

ページビルダー

ページビルダーは、挿入、並べ替え、編集できるブロックや要素を使用して、サイトデザインのレイアウトを作成する簡単で視覚的な方法です。ビルダーは引き続きテーマのコアスタイルに依存しますが、必要に応じてレイアウトをデザインしたり、要素を組み合わせたりする自由があります。これらは、見出し、アイコンボックス、画像グリッド、ボタン、グラフなど、考えられるほとんどすべてのコンテンツに適用できます。また、ブロックや要素ごとに、色、フォント、パディング、オーバーレイ、アニメーションの読み込みなどをカスタマイズするためのデザイン設定があります。

ページビルダーは非常に柔軟性があり、コーディングの知識が必要ないため、初心者にとって素晴らしいオプションです。

グーテンベルク（無料）

グーテンベルクについて学ぶ

WordPress コアには、Gutenberg ページビルダーが組み込まれています。これは、投稿コンテンツやページの作成に使用できるブロックベースのエディターです。また、フルサイト編集 (FSE) テーマを使用している場合は、Gutenberg を使用してヘッダー、フッター、テンプレートパーツをデザインすることもできます。 Gutenberg は、サイトのデザインに使用できる無料のレイアウトが満載のブロックパターンライブラリと、使用できるブロックオプションを追加するためのサードパーティの拡張機能も提供します。

エレメンター (無料およびプレミアム)

エレメンターを入手

もう 1 つの人気のあるオプションは、無料バージョンとプロバージョンを提供する Elementor です。無料版では、強化されたスタイル機能を備えた 40 以上の標準ビルダー要素が提供されます。一方、Pro では、90 以上の要素に加えて、すぐに使用できるテンプレート、キット、モーションエフェクト、WooCommerce ビルダー、ポップアップビルダー、ロールマネージャー、スライダーなどが提供されます。無料版はプロに比べて多少制限がありますが、特に予算が限られていて、Gutenberg のインターフェイスよりも Elementor のインターフェイスを好む場合には、それでも非常に優れたビルダーオプションです。

WPベーカリー（プレミアム）

WPベーカリーを入手

最後に紹介したいビルダーは WPBakery です。これは、プレミアムテーマにバンドルされていることが多いプレミアムページビルダーです。このビルダーが少し異なるのは、WPBakery と組み合わせた多くのテーマが拡張機能を提供することです。これは多くの場合、追加のビルダーブロックまたは機能の最適化です。たとえば、Total には、SEO に最適化されたスリムモード用のテーマ固有のビルダー設定とともに WPBakery が含まれています。

CSSエディター

CSS エディターは、サイトのデザインをカスタマイズするために使用できる別のタイプのプラグインです。具体的には、最初から作成するオプションを有効にするページビルダーとは対照的に、既存のサイトレイアウトやデザイン機能のスタイルを変更できます。たとえば、ホームページの見出しで使用されるフォントの色を変更したいが、自分でカスタムコードを追加することに抵抗がある場合は、CSS エディターを使用できます。

CSS ヒーロー (プレミアム)

CSS ヒーローを取得する

最高のポイントアンドクリック CSS エディターの 1 つは CSS Hero です。このプレミアムオプションを使用すると、WordPress サイト全体で CSS スタイルオプションが有効になるため、テーマで特定の色や間隔のオプションが提供されない場合でも、サイト全体のレイアウトとデザインを編集できます。その他の機能には、すぐに使用できるスニペットのライブラリ、コードインスペクター、ライブプレビュー、ブランドカラーのサポート、ワークフロー履歴 (セーブポイントあり) などがあります。

ビジュアルCSSスタイルエディター（無料）

ビジュアルCSSスタイルエディターをインストールする

もう 1 つの CSS エディターオプションは、無料の Visual CSS スタイルエディターです。これは、色、フォント、文字間隔、パディング、境界線の半径、不透明度などの 60 以上の CSS プロパティを対象とします。プレミアムバージョンもありますが、主に無料のプラグインをお勧めします。

子テーマを作成してカスタムコードを追加する

最後に、コーディングに慣れている場合は、子テーマを使用することも WordPress テーマをカスタマイズするもう 1 つの方法です。テーマのファイルを直接カスタマイズしないでください。2 つの大きな理由があります。1 つはテーマを更新するたびにすべての変更が失われないようにするため、2 つはセキュリティのためにテーマを最新の状態に保つためです。子テーマを使用すると、親テーマを直接編集することなく、夢のサイトを構築できます。

子テーマのスタイルシートファイル (style.css) を使用すると、数行のコードで Web サイト全体の外観を変更できます。 function.php として知られる特別な PHP ファイルを使用すると、機能を追加したり、サイトの構造を変更したりできます。さらに一歩進んで、子テーマのテンプレートファイルを作成すると、テーマのデザインと構造を完全に制御できるようになります。

子テーマを設定したら、テーマを好きなように変更できます。実際に制限されるのは、CSS、HTML、JavaScript、PHP、WordPress の機能の理解だけです。

<p>これらのツールの準備ができたら、WordPress テーマとサイトデザインのカスタマイズを開始する準備が整います。ほとんどのユーザーには、テーマに組み込まれているデザイン設定、またはサードパーティのページビルダーまたは CSS エディターを使用することをお勧めします。これらは学習曲線が非常に短く、デザインを変更するために必要なすべてのオプションを提供します。