関連フォーラムトピック

Lightning G3 にプラグイン Lighting G3 Pro Unit をインストールすると、投稿のページヘッダーになにを表示するかを以下の3つの中から選べるようになっています。

Lighting G3 Pro Unit は投稿のページヘッダーになにを表示するかを3つの中から選べるようになっています。

そして、ここで選んだ表示要素によってページヘッダーの背景画像が以下の表に示すように変わる仕様になっています。

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

投稿によってはアイキャッチ画像がページヘッダーの画像として適していない場合もありますので、表示要素として「投稿タイトル」と「投稿タイトルとメタ情報」を選んだときにデフォルト画像(Lightning ページヘッダー設定で指定した画像)を表示する以下のやり方を VWS フォーラムで回答させていただきました。

2022.10.31 追記 投稿のページヘッダーの背景画像指定の機能が追加されています。

Lighting G3 Pro Unit のその後のアップデートにより、個別ページでの背景画像としてアイキャッチ画像を使わない設定ができるようになっていますので、以下の CSS を書く必要はなくなりました。

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 サイトにしたいなら G3 Pro Unit がおすすめ

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

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

Lightning G3 Pro Unit は Lightning G3 Pro Pack というパッケージで VK Blocks Pro とセットで販売されています(単体販売はされていません)。このパッケージを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひこのパッケージをお使いになることをおすすめします。