表示要素	ページヘッダーの背景画像
投稿タイプ名	Lightning ページヘッダー設定で指定した画像
投稿タイトル	投稿のアイキャッチ画像
投稿タイトルとメタ情報	投稿のアイキャッチ画像

Lightning ページヘッダー設定で指定した画像を常に表示するための設定

以下の CSS を書けば OK です。

.single-post .page-header {
    background: url(********************) no-repeat 50% center;
}

@media (max-width: 575.98px) {
.single-post .page-header {
    background: url(xxxxxxxxxxxxxxxxxxxx) no-repeat 50% center;
}
}

******************** は背景画像（PC）の URL、xxxxxxxxxxxxxxxxxxxx は背景画像（モバイル）の URL です。

上記のやり方はお手軽なのですが、以下の点でちょっと使いづらいです。

Lightning ページヘッダー設定で背景画像を変更しても投稿のページヘッダーの画像に反映されない。
これは CSS を書き換えることで対応可能ですが、できればカスタマイズ画面と連動させたいですよね。
個々の投稿ごとにアイキャッチ画像を使うかデフォルトの Lightning ページヘッダー設定の画像を使うかを選べるようにしたい。
投稿によってはアイキャッチ画像をページヘッダー画像に使いたくなりますよね。

カスタマイズによって、上記のご要望にお応えすることができます。

アイキャッチ画像にするかデフォルト画像にするかを個々に選べるカスタマイズ

カスタムフィールドを作成

カスタムフィールドを作成して、投稿のエディター画面に以下の入力欄を表示します。

入力値を body タグのクラスに反映

入力されたカスタムフィールドの値を投稿ページの body タグのクラスに以下のように反映させます。

選択	body タグのクラス
Lightning ページヘッダー設定の画像	phs_default
アイキャッチ画像	phs_eyecatch

クラスにあった CSS を出力

WordPress の MySQL データベースの wp_options テーブルから Lightning ページヘッダー設定の画像の URL を取得して、body タグのクラスにあった CSS を <head>～</head> 内に出力します。

例えば、この投稿では以下の CSS を出力しています。

<style>body.phs_default .page-header { background: url(https://lightning-g3.hp1.work/wp-content/uploads/2021/04/top_slide-01.webp) no-repeat 50% center; }</style>
<style>@media (max-width: 575.98px) { body.phs_default .page-header { background: url(https://lightning-g3.hp1.work/wp-content/uploads/2021/04/top_slide-01-sp.webp) no-repeat 50% center; }}</style>

プラグインで実装

サイト制作させていただいたお客様からのご要望により、上記の仕様を実装したプラグインを制作して納品させていただきました。

Page Header Switcher for Lighting G3 Pro Unit

弊社 (魚沼情報サービス) ではこのようなカスタマイズのお仕事をお引き受けしています。
デザイン・仕様について、お客様のご要望に合わせてカスタマイズいたします。
無料で費用見積りいたしますので、お気軽にお問い合わせください。

魚沼情報サービスへのお問い合わせ

サイト運営者プロフィール

対馬俊彦魚沼情報サービス (新潟県南魚沼市)

WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・PHP・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

デザイナー様・制作業者様のお手伝いも数多く行っております。難しい部分のコーディングをやってほしい、いま人手が足りない、等々... お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ

今よりもっといい WordPress サイトにしたいなら Vektor Passport がおすすめ

ベクトルから発売されている有料プラグイン Lightning G3 Pro Unit / VK Blocks Pro を使えば、このサイトで紹介しているようなコードを書かずにかんたんにカスタマイズできることがたくさんあります。

名前に Pro がついているので「制作のプロ向け製品」という印象を受けるかもしれませんが、
*もっといいサイトにしたい
* 効率よく作成・運用・管理をしたい
と考えているコーポレートサイトの担当者にこそ使っていただく価値がある製品です。

Lightning G3 Pro Unit / VK Blocks Pro は Vektor Passport というライセンス製品で販売されています（個々の単体販売はされていません）。これらのプラグインを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひお使いになることをおすすめします。

ライセンス購入はこちら

カテゴリー: Lightning G3 / カスタマイズ

タグ: Page Header Switcher for Lighting G3 Pro Unit ページヘッダーカスタマイズ

個々の投稿のページヘッダーの画像をアイキャッチ画像にするかデフォルト画像にするかを選べるカスタマイズ

関連フォーラムトピック