ウェブサイト検索

WordPress の投稿とページにさまざまな背景を追加する方法

WordPress はブログ プラットフォームであり、コンテンツ管理システム (CMS) でもあります。これは間違いなく、このプラットフォームが学習、使用、カスタマイズが簡単だからです。つまり、あまり頑張らなくてもウェブサイトを好きな方向に変えることができるのです。 WordPress の投稿やページにさまざまな背景を追加することもできます。これがこのガイドの主題です。

WordPress の投稿やページに色やスタイルを追加したい場合、このガイドでは 2 つの側面からのアプローチを使用してトピックを詳しく説明します。まず、CSS と単純な PHP 関数を使用して、WordPress の投稿またはページにさまざまな背景を追加します。ただし、これが苦手な場合 (あなたが完全な初心者で、コードが怖くて日が当たらないとしましょう)、このプロセスを支援するいくつかの WordPress バックグラウンド プラグインを提供します。

いずれにしても、これは比較的簡単なプロジェクトなので、楽しい時間を過ごせるはずです。準備ができて？思い切って、WordPress の投稿やページにカスタム背景を追加する 5 つの方法を見てみましょう。

Gutenberg を使用したカスタム背景

よく知らない方のために説明すると、Gutenberg は WordPress のデフォルトのコンテンツビルダーで、投稿、ページ、そしてヘッダー/フッターのレイアウトをデザインするために使用できます。したがって、背景にも組み込みのオプションがあることは当然のことです。

Gutenberg でカスタム背景を追加するには、編集したいブロックをクリックするだけです。次に、3 つの点が重なったアイコンをクリックし、「さらに設定を表示」オプションを選択します。

これにより、ブロックの多数の書式設定オプションを含むサイドバーが開きます。 「色」セクションに「背景」色のオプションが表示されます。クリックし、カラーピッカーを使用して、使用する背景を選択します。または、テーマの色や組み込みのグラデーションと調和するプリセットを使用します。

ここで、背景画像を探している場合は、特に「カバー」ブロックを使用する必要があります。

したがって、新しいブログの追加に移動し、「Cover」を検索してこのブロックを選択します。

次に、画像をアップロードするか、メディア ライブラリから画像を選択するよう求められます。画像を選択し、「カバー」ブロック内にさらにブロックを追加してセクションを完成します。

Gutenberg に組み込まれている優れた機能は、色に基づくアクセシビリティ テストです。上の画像からわかるように、ボタンに選択した色は背景画像と十分なコントラストを持たない可能性があるため、Gutenberg は別の組み合わせを試してみると警告しています。これは、サイトを訪問者全員にとって読みやすいものにするための優れた方法です。

テーマオプションを使用してカスタム背景を追加する

テーマにはカスタム背景を追加するオプションが組み込まれており、このプロセスが簡単になる可能性があります。

たとえば、Total WordPress テーマには、投稿とページに独自の背景を選択するオプションを備えた組み込みのテーマ設定メタ ボックスがあります。

投稿またはページを作成するときは、一番下までスクロールして「テーマ設定」を見つけ、「背景」タブを選択します。オプションには、単色が必要な場合のカラーピッカー、またはメディア ライブラリから画像をアップロードまたは選択できる背景画像オプション (ストレッチ、カバー、リピートなどの画像背景のスタイル設定とともに) が含まれています。

しかし、それだけではありません。Total には、ライブ カスタマイザーからアクセスできるサイト全体のバックグラウンド設定もあります。オプションを見つけるには、WordPress のメインダッシュボードから開始し、クリックして外観 > カスタマイズ > 一般テーマオプション > サイトの背景に移動します。

ここには、ウェブサイト全体の背景色または画像を設定するオプションがあります。注 – これは、ページ/投稿ごとにカスタム背景を設定することで上書きできます。

WordPress ページビルダーの背景

ただし、Gutenberg のファンではなく、テーマに背景オプションが用意されていない場合、次に探すべき場所はページ ビルダーでしょう。最新のページ ビルダーには、行の背景を含むカスタマイズ可能な設定が大量にあります。このオプションの場所はビルダーによって異なる場合がありますが、最も人気のある 2 つのオプションを見てみましょう。

エレメンターの背景

Elementor は最も人気のあるページ ビルダー プラグインの 1 つで、無料版では Elementor Pro よりも機能が劣っていますが、それでも WordPress サイトを構築するための素晴らしいオプションです。このプラグインは使いやすく、オプションは非常に直感的であるため、WordPress を初めて使用する人でもカスタムの外観のサイトを作成できます。

Elementor を使用すると、行を挿入するときに 6 つの点のアイコン (ウィンドウ ペインのようなもの) をクリックし、[スタイル] タブを選択してカスタム背景を追加できます。最初のクラシックな背景設定には、色または画像のオプションがあります。しかし、待ってください – それだけではありません!

グラデーション (上記を参照)、ビデオ、スライドショー用の追加の背景オプションがあります。さらに、下には背景オーバーレイのセクションがあり、背景選択の上にグラデーションや色を追加するために使用できます。

WPベーカリーの背景

WPBakery ビルダーは多くのプレミアム WordPress テーマに含まれていますが、それには十分な理由があります。フロントエンドのビジュアル編集を使用するか、従来の WordPress エディターで従来のバックエンド編集を使用するかを選択できるだけでなく、優れたオプションが多数提供されます。

行に背景を追加するには、まず行モジュールを挿入し、鉛筆アイコンをクリックして行設定を開きます。ここから「デザインオプション」タブに移動します。ここには、行の背景または行の画像を選択するための WPBakery のコア設定があります。主に行で背景を使用することになりますが、多くの WPBakery 要素 (列、アイコンなど) のデザイン オプションにあります。

さらに、テーマ開発者がビルダーをどのように拡張したか、またはサードパーティの拡張機能 (Ultimate Addons など) がインストールされているかどうかに応じて、他の設定を使用できる場合があります。上のスクリーンショットでは、投稿/ページのアイキャッチ画像を背景として使用するための行オプションと、Total に固有のビデオ、視差、オーバーレイの背景用の追加タブがあることがわかります。

コードを使用して WordPress に背景を追加する方法

先に進みます – 現在のテーマとビルダーなしのサイト設定が気に入っている場合は、サイトにコードを少し追加して背景を変更するという方法もあります。ここで提供されているコード スニペットをコピーして貼り付けることもできますが、PHP、HTML、CSS に関する知識があると非常に役に立ちます。前置きはこのくらいにして、編集を始めましょう。

CSS を使用して WordPress の投稿とページにさまざまな背景を追加する

WordPress の投稿とページ (およびサイト全体) に適用されるスタイルの多くは、スタイルシートと呼ばれるファイルによって制御されます。 WordPress のスタイルシート ファイルには通常、style.css というラベルが付けられます。 style.css にアクセスするには、WordPress 管理ダッシュボードの外観 > テーマ ファイル エディターに移動します。

style.css で WordPress の投稿/ページに背景 (およびその他のスタイル) を追加するので、それを別のタブにロードすることが重要です。

[外観] > [エディター] に移動すると、画面の右側にすべてのテーマ テンプレートのリストも表示されます。子テーマを使用している場合（そうすべきです）、親テーマのテンプレート ファイルを読み込む必要があります。

header.php ファイルに注目する必要があります。なぜ header.php なのか?このファイルは、WordPress が Web サイトを構成するファイルをまとめるときに、他のすべてのテンプレート、つまりページや投稿に追加されるためです。つまり、header.php 内のコードは、作成するすべてのページまたは投稿に表示されます。

次のコード スニペットを探してください。

<body <?php body_class(); ?>>

この関数には 1 つの目的があります。投稿やページのスタイルを変更するために使用できる CSS クラスを分割します。必要なのは、カスタマイズしたいページまたは投稿に固有の CSS クラスをターゲットにし、背景とスタイルを追加し、変更を保存するだけです。

たとえば、ホームページのソース コードを表示した場合、上記の関数は次のような出力を出力します。

<body class="home blog logged-in admin-bar no-customize-support hfeed">

それは、<?php body_class(); ?> コード スニペットの一部では、すべてのクラスが提供されます。 .home、.blog、.logged-in などを CSS で使用して、ホームページのさまざまな要素のスタイルを設定できます。

余談: 投稿やページのソース コードを表示するのは簡単です。 Chrome を使用している場合は、ページ/投稿を右クリックして [ページのソースを表示] を選択します。 Mozilla では、投稿/ページを右クリックし、「ページのソースを表示」を選択します。 Microsoft Edge (Internet Explorer) を使用している場合は、ページ/投稿を右クリックして [ソースの表示] を選択します。

WordPress ページのソース コードを表示すると、これと同じ関数が次のように出力します。

<body class="page page-id-2 page-template-default logged-in admin-bar no-customize-support">

単一の投稿のソース コードを表示すると、body_class 関数は次のような出力を出力します。

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-customize-support">

ご覧のとおり、簡単にターゲットにできるいくつかの CSS クラスが得られます。

  • すべてのページの .page
  • .page-id-2 を使用すると、特定のページ、つまり ID 番号のページをターゲットにすることができます。 2
  • すべての単一投稿の場合は .single。このクラスに適用するすべての CSS スタイルがすべての投稿に適用されることを意味します。
  • id=1 の投稿の .postid-1。適用するすべての CSS スタイルがその投稿にのみ影響することを意味します
  • .single-format-standard – これにより、標準の投稿フォーマットを持つすべての投稿に CSS スタイルを適用できます。
  • .logged-in – この CSS クラスを使用して適用するスタイルは、ログインしているユーザーにのみ適用されます

class= ” ” に含まれるすべての項目は、任意の投稿またはページをターゲットにするために使用できる CSS フックを提供します。しかし、なぜ各クラスの前にピリオド (.) を追加するのでしょうか?これは従来の CSS 構文であり、すべてのクラスをピリオド (.) を使用して呼び出し、すべての div をハッシュ (#) を使用して呼び出す必要があることを示します。話はまた別の日に。

たとえば、すべての投稿に黒の背景を適用するには、次のスニペットを style.css に追加します。

.single { background-color: #000; }

PHP を使用して WordPress の投稿とページに背景を追加する (カスタムフィールド経由)

カスタム フィールドを使用してサイトの背景を変更するための組み込みの手動メソッドを追加する場合も、これは非常に簡単です。次のコードをテーマの function.php ファイルに貼り付けるだけです (サードパーティのテーマを使用している場合は、子テーマを介して行うのが最適です)。 「myprefix」と表示されている部分を必ず一意の識別子に変更してください（これはテーマやプラグインとの競合を防ぐためです）。すべての準備が完了したら、カスタム フィールド「myprefix_background_image」を使用して画像への URL を入力できるようになります。背景を変更したいページまたは投稿。

<?php
// Add inline style to set body background via "myprefix_background_image" custom field
function myprefix_custom_field_background() {
	if ( $background = get_post_meta( get_the_ID(), 'myprefix_background_image', true ) ) { ?>
		<style type="text/css">
			body { background-image: url( "<?php echo esc_url( $background ); ?>" ); }
		</style>
	<?php }
add_action( 'wp_head', 'myprefix_custom_field_background' );

この関数が「wp_head」アクションにどのようにフックされているかに注目してください。つまり、カスタム フィールドを使用するたびに、カスタム フィールドの値に応じて背景を変更するコードとともにインライン CSS がサイトのヘッダー タグに追加されます。

プラグインを使用して WordPress に背景を追加する

これまでに示したように、WordPress の投稿とページをターゲットにし、PHP と CSS を使用してそれぞれを思う存分スタイル設定できます。ただし、コードを書く時間がない場合、または何らかの理由で上記の手順が機能しない場合は、無料で起動できる WordPress バックグラウンド プラグインをいくつか紹介します。

高度な WordPress 背景

その名の通り、このプラグインには、色、画像、パターン、視差、ビデオで背景をカスタマイズするためのオプションが豊富にあります。このプラグインはクラシック エディターでうまく機能しますが、Gutenberg や WPBakery とも互換性があるため、コンテンツ ビルダーでもより優れた背景オプションを使用できます。

ページ、投稿、ウィジェットの背景色を変更する

サイトや個々の投稿やページにシンプルな色のオプションが必要なだけですか?この無料のプラグインが解決策です。このプラグインをインストールし、「背景色」セクション (WordPress のメイン ダッシュボード メニューに追加) を使用して、ページ、投稿、ウィジェット領域のデフォルトの背景を選択します。または、クラシック エディターに追加された「背景色」オプションを使用して、投稿/ページごとに背景をカスタマイズします。

テーマ設定を使用するか、コードを詳しく調べるか、プラグインを使用するかにかかわらず、WordPress の投稿やページにさまざまな背景を追加すると、ブランド認知度やサイトのビジュアル デザインに大きく貢献できます。 WordPress の投稿やページの背景を変更するにはどうすればよいですか?ご質問、ご提案、ご意見がございましたら、以下のコメントセクションからお知らせください。