WordPressテーマStinger7でヘッダー画像にトップページのリンクを追加する方法

Word Pressカスタマイズ

このブログはワードプレスのテーマstinger7を使っていますが、ヘッダー画像をクリックしてトップページに戻るべくテーマカスタマイズに挑みました!

ヘッダー画像にトップページのリンクを追加

ヘッダ画像 トップリンク

当ブログはヘッダー画像にサイト名をぶち込んでいるため、テキストとしては表示していません。

stinger7はサイト名をクリックすればトップページに戻る仕様になっているようですが、当サイトではそれができないという事になります。

ですのでヘッダーメニューの中に(①の赤枠部分の)”ホーム”というボタンを追加してカバーしていましたが、やはりもっとわかりやすくトップページに戻りたい!ということで(②の赤枠部分の)ヘッダー画像をクリックしてトップページに戻れるようにテーマカスタマイズすることを決心しました!

テーマカスタマイズ

ワードプレスの管理画面の外観メニューの中のテーマ編集を選びます。

テーマ編集

すると様々なシートを編集できる画面へと変わります。

そこでヘッダー画像のphp

サイドバーにある「st-header-image.php」を選択します。

するとヘッダー画像についての設定ができる画面になります。

ヘッダー画像のphpを編集1

今回編集するのはこの部分です。

<img src=”<?php header_image(); ?>” alt=”*” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” >

と書いてありますが、「これはヘッダー画像を配置します」という指令だと思ってください。

トップページのリンクを付けるコードが以下のようになります。

<a href=”<?php echo home_url(‘/’); ?>”> ~~~~~~~~~~~~~~~~   </a>

<a href=”<?php echo home_url(‘/’); ?>”>と</a>でヘッダー画像のコードを挟む感じです。

こいつを追加していきます。(~~~の部分がヘッダー画像のコードになる様にします。)

<a href=”<?php echo home_url(‘/’); ?>”>

<img src=”<?php header_image(); ?>” alt=”*” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” >

</a>

こんな感じになります。

2ヘッダー画像のphpを編集

間違って違うコードを巻き込まないよう、注意ですよ。

ファイルを更新

最後に「ファイルを更新」をクリックして完了です。

実際にサイトに行ってみて確認してみましょう。

バックアップを忘れずに

データが消えた場合、もちろんですが当ブログでは責任は取りませんので自己責任でお願いします。

怖い事言うようですが、ちゃんとやればできますので安心して下さい。

ただ、間違った操作をしてしまった場合は元に戻らなくなる可能性すらありますので、必ずバックアップを取ってから作業を開始しましょう。(「st-header-image.php」のシートの内容をメモ帳等にコピーしておくだけでよいです。)

コメント