このブログはワードプレスのテーマstinger7を使っていますが、ヘッダー画像をクリックしてトップページに戻るべくテーマカスタマイズに挑みました！
ヘッダー画像にトップページのリンクを追加
当ブログはヘッダー画像にサイト名をぶち込んでいるため、テキストとしては表示していません。
stinger7はサイト名をクリックすればトップページに戻る仕様になっているようですが、当サイトではそれができないという事になります。
ですのでヘッダーメニューの中に（①の赤枠部分の）”ホーム”というボタンを追加してカバーしていましたが、やはりもっとわかりやすくトップページに戻りたい！ということで（②の赤枠部分の）ヘッダー画像をクリックしてトップページに戻れるようにテーマカスタマイズすることを決心しました！
テーマカスタマイズ
ワードプレスの管理画面の外観メニューの中のテーマ編集を選びます。
すると様々なシートを編集できる画面へと変わります。
そこで
サイドバーにある「st-header-image.php」を選択します。
するとヘッダー画像についての設定ができる画面になります。
今回編集するのはこの部分です。
<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>
こんな感じになります。
間違って違うコードを巻き込まないよう、注意ですよ。
最後に「ファイルを更新」をクリックして完了です。
実際にサイトに行ってみて確認してみましょう。
バックアップを忘れずに
データが消えた場合、もちろんですが当ブログでは責任は取りませんので自己責任でお願いします。
怖い事言うようですが、ちゃんとやればできますので安心して下さい。
ただ、間違った操作をしてしまった場合は元に戻らなくなる可能性すらありますので、必ずバックアップを取ってから作業を開始しましょう。（「st-header-image.php」のシートの内容をメモ帳等にコピーしておくだけでよいです。）
コメント