ヘッダーロゴ画像のリンク先を変更するやり方

2022年2月21日(月)2022年11月20日(日) 対馬俊彦

対馬俊彦

既存サイトに WordPress サイトの最新記事を表示する案件

静的 HTML で作られた既存のメインサイトがあり、別途 WordPress で制作したサイトの最新記事を新着情報として組み込む、以下のような案件をお引き受けしました。

WordPress のサイトのヘッダーロゴ画像のリンク先は WordPress サイト自身のトップページなのですが、今回の案件ではリンク先をメインサイトに変更したくなります。

そこで、カスタマイズのやり方を調べたのですが...

フックが豊富な Lightning G3 でも、ここにはフックが用意されていませんでした。

たしかに、需要は少ない気が…

jQuery でカスタマイズ

そこで、今回のカスタマイズでは jQuery を使いました。

作業手順としては、JavaScript ファイルがあれば、以下の1行を追加するだけです。

Lightning G3 の場合

$("#site-header-container > .site-header-logo > a").attr("href", "リンク先 URL");

Lightning Pro の場合

$(".siteHeadContainer > .navbar-header > .siteHeader_logo > a").attr("href", "リンク先 URL");

この記事のヘッダーロゴ画像のリンク先をこのやり方で書き換えてあります。

JavaScript ファイルがない場合

以下の記事を参考にどうぞ。

JavaScript を追加するやり方 | Lightning G3 / G3 Pro Unit のカスタマイズ、TIPS

jQuery の書き方については、以下の記事の「JavaScript に以下の行を追加する」のあたりが参考になります。

パララックスを Lightning G3 で実装するには | Lightning G3 / G3 Pro Unit のカスタマイズ、TIPS

ヘッダーにコーポレートサイトのロゴ画像を追加したカスタマイズ例 | Lightning G3 / G3 Pro Unit のカスタマイズ、TIPS

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

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

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

メールでのお問い合わせはこちら