質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • WordPress

    7654questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 234

hatsutoray

score 5

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/07/11 16:55

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

    キャンセル

  • hatsutoray

    2018/07/12 11:12

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

    キャンセル

回答 1

check解決した方法

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • WordPress

    7654questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。