関連フォーラムトピック

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

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

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

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

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

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・Lightning・Katawara を使ったウェブサイトで上記のようなカスタマイズを承ることができます。サイトの運用・更新などでお困りの方はお気軽にご相談ください。

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

対馬 俊彦
対馬 俊彦魚沼情報サービス 代表
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

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

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

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

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

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