WordPressのカスタムヘッダーで画像にリンクをつける方法-『LION MEDIA』

Question

Wordpress、PHP初心者です。
テーマ：「LION MEDIA」
WPバージョン4.9.7

すでに解決済みの質問で「WordPressのカスタムヘッダーで画像にリンクをつける方法」がありましたが、
解決するまでのやり取りが、私には高度過ぎてついて行けませんでした。
現状、カスタムヘッダーの設置と表示はできていて、ダッシュボード／外観／ヘッダーも無事動作しています。
（「メディア」でも「現在のヘッダー画像」となっているのが確認できます）
こののち、どうしたら良いでしょうか。どなたかご教示いただけると助かります。

function.phpに下記コード記入

add_theme_support( 'custom-header' );

$sidebars = array(1, 2, 3);
foreach($sidebars as $number) {
     register_sidebar(array(
          'name' => 'Header ' . $number,
          'id' => 'header ' . $number,
          'before_widget' => '<div class="widget">',
          'after_widget' => '</div>',
          'before_title' => '<h3>',
          'after_title' => '</h3>'
     ));
}

//ヘッダー画像のIDを取得
function custom_header_get_attachment_id_by_url( $url ) {
$parse_url  = explode( parse_url( WP_CONTENT_URL, PHP_URL_PATH ), $url );
$this_host = str_ireplace( 'www.', '', parse_url( home_url(), PHP_URL_HOST ) );
$file_host = str_ireplace( 'www.', '', parse_url( $url, PHP_URL_HOST ) );
if ( ! isset( $parse_url[1] ) || empty( $parse_url[1] ) || ( $this_host != $file_host ) ) {
return;
}
global $wpdb;
$attachment = $wpdb->get_col( $wpdb->prepare( "SELECT ID FROM {$wpdb->prefix}posts WHERE guid RLIKE %s;", $parse_url[1] ) );
return $attachment[0];
}

header.phpに下記コード記入

<?php $header_image = get_header_image();
          if ( ! empty( $header_image ) ) : ?>
 <div id="header_img">
  <a href="<?php echo home_url(); ?>"><img src="<?php header_image(); ?>" alt="<?php bloginfo('name'); ?>"  /></a>
 </div>
<?php endif;?>

どうかよろしくお願いいたします。

Comments

[kei344]

「解決済みの質問」とはどの質問かを質問文内で提示されてはいかがでしょうか。その上で、どの部分がわからないかを具体的にされてはいかがでしょうか。

[hatsutoray]

ご指摘ありがとうございます。確かにそうですね、茫洋としていました。ですが、参考にさせていただいたサイトの管理者の方からご教示をいただき解決いたしましたので、後ほどそれを記載しておきたいと思います。次回質問の際は、不明点が明瞭になるようにします。ありがとうございました。

Answer 1

こちらのサイトを参考に、運営の方から不明点をご教示いただき解決いたしました。

https://dainashiyesterday.com/post-4610/

まず、上記サイトではスライダー機能を用いて設置する方法でしたが、私は1枚の画像を配置したかったため、この手段では違うかと思っていましたが「スライダー機能でも問題なし」との回答で、提示されている方法で見よう見まねで下記の1〜4まで記述を進めました。

1 jQueryプラグイン『slick.js』の設置

2 カスタムヘッダー機能の有効化
3 ヘッダー画像のURLからIDを取得する
4 画像IDから値を取得してスライダーを表示
5 slick.jsを動かすスクリプトを記述

で、5のスクリプトを記述で、header.php に記述しましたがコードがそのままサイトに表示されてしまい挫折しかけましたが、単に<script></script>が抜けていたという超初歩的なエラーでしたので、次のように記述したところ無事に設定がすみました。

<script>
jQuery(window).load(function(){
jQuery('#hero .slider').slick({});
});
</script>

また、補足でリンク先を新規ウインドウで表示する処理を教えていただきました。

■修正前
<a href="<?php echo esc_html($img_meta->post_content); ?>">
 
■修正後
<a href="<?php echo esc_html($img_meta->post_content); ?>" target="_blank">

加えて、ヘッダー画像の前にlistの「●」が表示されてしまっていたので下記CSSで消しました。

/* カスタムヘッダーの「・」を消す */
ul {
  list-style: none;
}

どなたかのご参考になれば。
みなさまありがとうございました。