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

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

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

既存サイトに 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

Lightning G3 の子テーマに JavaScript ファイルを追加するやり方を紹介します。このやり方は Lightning Pro も同じです。

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

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

関連フォーラムトピックOuterブロックでのパララックスにつきましてLightning G3 で Outer ブロックのパララックスが動作しなくなったLightning G3 で Outer ブロックの背…

投稿者プロフィール

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

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

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

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

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

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

わからないところ、オンラインでお手伝いします

こんにちは、魚沼情報サービスの対馬です。

Lightning およびベクトルのプラグイン VK Blocks、VK Filter Search の設定・カスタマイズでお困りの方のお手伝いを得意としています。

Zoom オンラインレッスン形式でサポートしてお力になります。

* 近くに頼りになるところがない
* わからないところを手伝ってもらいたい
という方はぜひご利用ください。
404 ページをカスタマイズしてみた
カテゴリー
Lightning G3カスタマイズ

大事な見込み客を逃してしまうことにならないように、アクションフックとフィルターフックで 404 ページをカスタマイズしてみました。

CSS グリッドレイアウトを使った画像のレイアウト例
カテゴリー
その他

CSS グリッドレイアウトを使うと、柔軟で複雑なコンテンツの配置が可能になります。フレックスボックスと使い分けて活用したいですね。