今回の記事では、無料WordPressテーマ:Stinger7のヘッダー画像に、特定のページへのリンクを追加する方法を紹介したいと思います。

ヘッダー画像をクリックすると、トップページに移動するサイトってよく見かけると思います。ヘッダー画像がリンクになっているとクリックしやすいので、個人的にはあるとうれしいリンクです。

たまに知り合いからトップページ以外へのリンクに変更したいという相談をされるので、今回は半分知り合いへの説明用に

  1. ヘッダー画像にトップページへのリンクを追加
  2. ヘッダー画像に特定のページヘのリンクを追加

という2つのカスタマイズを書いていきたいと思います。

カスタマイズ後

↓ マウスオーバーしていない状態

stinger7-header-image-top-page-link-before

↓ マウスオーバーすると、画像が白く透過

stinger7-header-image-top-page-link-hover

※ 今回はPHPファイルを編集していきます。管理画面に入れなくなることもあるので、PHPコードは注意して編集して下さい。

はじめに

今回のカスタマイズでは、親テーマ(Stinger7本体)を編集していきます。

(※ 子テーマから編集すると、ファイルの読み込みなどの関係でかなりややこしい編集になってしまうので、ここでは子テーマではなく親テーマをカスタマイズしていきます)

子テーマはカスタマイズ前と同じように使うことが出来ます。

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

まずはヘッダー画像にトップページへのリンクを追加する方法です。

親テーマ(Stinger7本体)の st-header-image.php 68行目付近に、

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

というコードがあるので、これを下のコードで置き換えます。

<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>

保存・更新すると、ヘッダー画像にトップページへのリンクが追加されました。

stinger7-header-image-top-page-link-after-code

コード編集後、st-header-image.php の41行目から74行目
// スライドショー というコメントから <!-- /gazou --> というコメントまでは、下のようになりました。

<?php if ( $show_as_slides ) : // スライドショー ?>
    <div id="gazou-wide">
        <?php if ( isset($GLOBALS['stdata35']) && $GLOBALS['stdata35'] === 'on' ) {
            get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー 
        } ?>

        <div id="header-slides"<?php echo $dir; ?> data-slick='<?php echo json_encode( $options, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ); ?>'>
            <?php foreach ($header_images as $header) : ?>
                <div class="header-slides-slide">
                    <img src="<?php echo esc_url($header['url']); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" >
                </div>
            <?php endforeach; ?>
        </div>

        <?php if ( trim($GLOBALS['stdata35']) === '' ) {
            get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー 
        } ?>
    </div>

<?php else : // 通常のヘッダー画像 ?>

    <div id="gazou-wide">
        <?php if ( isset($GLOBALS['stdata35']) && $GLOBALS['stdata35'] === 'on' ) {
            get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー 
        } ?>

        <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>

        <?php if ( trim($GLOBALS['stdata35']) === '' ) {
            get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー 
        } ?>
    </div>
<?php endif; ?>
<!-- /gazou -->

2. ヘッダー画像に特定のページヘのリンクを追加

次はヘッダー画像に特定のページヘのリンクを追加する方法です(カスタマイズ2)。

2-1. カテゴリ一覧ページへのリンクを追加する場合

これもトップページへのリンクの場合と同じように、st-header-image.php 68行目付近にあるコードを編集してきます。

どこのページにリンクさせたいかというのは人によって違うと思いますが、下のような感じでリンクを作ることができます。

<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>

上のコードの①部分にはスラッグなどを書き込みます。

例えばうちのサイトなら「https://webcraftlog.net/」に続く部分のことで、「https://webcraftlog.net/category/stinger/」というアドレスのうち「category/stinger/」の部分を①に書き込みます。

これをコードにすると、下のようになります(st-header-image.php 68行目付近)。トップページへのリンクを追加する場合と同じように、<img ...> 部分を <a ...></a> で包んで下さい。

<a href="<?php echo home_url('/') . 'category/stinger7/'; ?>">
    <img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" >
</a>

2-2. 固定ページへのリンクを追加する場合

カテゴリー一覧ページではなく特定の固定ページに移動させたいときには、下のようになります(st-header-image.php 68行目付近)。

<a href="<?php echo home_url('/') . 'keni7-customize-list/'; ?>">
    <img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" >
</a>

2-3. 外部サイトへのリンクを追加する場合

下のようなコードで外部サイトにリンクさせることもできます(st-header-image.php 68行目付近)。

<a href="https://google.com/">
    <img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" >
</a>