トップページ(特定のページ)だけヘッダーロゴ画像を変更するやり方

2021年8月25日(水)2022年4月14日(木) 対馬俊彦

対馬俊彦

このサイトに設定されているデフォルトのヘッダーロゴ画像はこれ ↓ です。

トップページのデザインをこんなかんじ ↓ にしたかったので、トップページだけヘッダーロゴ画像の Lightning の文字を黒から白にしたものに差し替えるやり方を調べてみました。

ということで、トップページのヘッダーロゴ画像を別のものに差し替えるやり方を紹介します。

手順フィルターフックを使う

子テーマの functions.php に以下のフィルターフックを追加すればOKです。

add_filter( 'lightning_head_logo_image_url', function( $options ){

    if ( is_front_page() ){
      $options = 'ヘッダー画像のURL';
    }

    return $options;

} );

2022.2.18 文面変更このフィルターフックは Lightning G3 無料版で問題なく動作しますが、Lightning G3 Pro Unit ではこのままだと期待通りの動作をしないことがあります。具体的には、ヘッダー透過時のロゴ画像およびスクロール時のロゴ画像には反映されませんので、追加のカスタマイズが必要です。
条件の is_front_page() を変えれば、トップページ以外の特定のページや投稿でも画像の差し替えができます。

以下の投稿のヘッダーロゴ画像も白文字のものに差し替えてあります。

さらに... お遊びでいくつかのページに以下のヘッダーロゴ画像を表示しています (^^♪

補足 Lightning G3 Pro Unit を使うと楽できます

有料版プラグインの Lightning G3 Pro Unit には以下の機能がありますので、この記事で紹介したフィルターフックや CSS によるデザインのカスタマイズを時間と手間をかけて行わなくても似たようなことがかんたんにできます。

ページごとにヘッダー透過を有効にできて、透過時ヘッダーロゴ画像を別に指定できる。
スクロール時のヘッダーロゴ画像を別に指定できる。

Lightning G3 Pro Unit の購入はこちら

投稿者プロフィール

対馬俊彦魚沼情報サービス代表

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

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

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

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

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

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

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

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

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

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

Lightning G3 Pro Pack の購入はこちら