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

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

ただいまの
回答率

90.75%

  • PHP

    19207questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • HTML

    8322questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • WordPress

    6668questions

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

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

解決済

回答 3

投稿 編集

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

zuki

score 4

wordpressでオリジナルのテンプレートを作成しています。
https://dainashiyesterday.com/post-4610/
こちらのサイトを参考にカスタムヘッダーを作成しています。

スライダーのヘッダー画像にリンクをつけたいと思っています。

参考サイト通りに進め、ましたが、aタグ(リンクが表示されません。)
aタグ(リンクが表示されるにはどうしたら良いでしょうか?)

 コード

function.phpに下記コード記入

/* カスタムヘッダー
---------------------------------------------------------- */
$custom_header_defaults = array(
'width'         => 1500, //ヘッダー画像の幅
'height'        => 825, //ヘッダー画像の高さ
);
add_theme_support( 'custom-header', $custom_header_defaults );
//ヘッダー画像の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];
}

index.phpに下記コードを記入

<ul class="slides">
                <?php $header_images = get_uploaded_header_images(); ?>
                <?php foreach ($header_images as $key => $value): ?>
                <?php $img_id = custom_header_get_attachment_id_by_url($value['url']); ?>
                <?php $img_meta = get_post($img_id); ?>
                <li>
                <?php if($img_meta->post_content): ?>
                <a href="<?php echo esc_html($img_meta->post_content); ?>">
                <?php endif; ?>
                <img src="<?php echo $value['url']; ?>" alt="<?php echo esc_html($img_meta->post_title); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" />
                <?php if($img_meta->post_content): ?>
                </a>
                <?php endif; ?>
                </li>
                <?php endforeach; ?>
</ul>

実際に表示されているhtmlは下記です。

<ul class="slides">
<li>
<img src="画像url" alt="" width="1500" height="825" />
</li>
<li>
<img src="画像url" alt="" width="1500" height="825" />
</li>
</ul>

何卒よろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • zuki

    2018/05/14 13:43

    写真を追加させていただきました。

    キャンセル

  • kei344

    2018/05/15 01:59

    回答へのコメントで「cropped」と付いたファイル名になっていますが、メディアライブラリにクロップ前の画像があったりしませんか?

    キャンセル

  • zuki

    2018/05/15 07:40 編集

    カスタムヘッダーを選択する際に切り抜きしていたんですが「切り抜きしない」を選択するとリンクが表示されました!

    キャンセル

回答 3

checkベストアンサー

+2

custom_header_get_attachment_id_by_urlって関数の情報を見つけられなかったのだけど Advanced Custom Fieldの関数か何かなのかしら?
普通に定義してましたねすいません
まあでも、やっぱり

$img_id = custom_header_get_attachment_id_by_url($value['url']);


これって多分

$img_id = $value['attachment_id'];


でいけるんじゃないかな

どっちにしろエラーが起きてるのにスルーされている可能性もあるので
wp-config.phpでデバッグモードの指定のところが
define('WP_DEBUG', false);のままなら
define('WP_DEBUG', true);にしときましょう

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/14 14:13

    To: KazuhiroHatanoさん
    > custom_header_get_attachment_id_by_url
    https://dainashiyesterday.com/post-4610/

    参考にされている記事に記載があります。

    キャンセル

  • 2018/05/14 14:30

    普通に質問文にも書いてますね、すいません
    修正します

    キャンセル

  • 2018/05/14 14:41

    回答ありがとうございます。define('WP_DEBUG', true);にしました。エラーはおきていませんでした。

    キャンセル

  • 2018/05/14 14:42

    $img_id = custom_header_get_attachment_id_by_url($value['url']);

    $img_id = $value['attachment_id'];
    に変更して見ましたが変化はありませんでした..

    キャンセル

  • 2018/05/14 14:48

    とりあえず、$img_metaをvar_dumpしてみて、post_contentが本当に入ってるのか確認しますか

    キャンセル

  • 2018/05/14 20:01 編集

    以下が出てきました。

    object(WP_Post)#3565 (24) {
    ["ID"]=>
    int(65)
    ["post_author"]=>
    string(1) "1"
    ["post_date"]=>
    string(19) "2018-05-14 15:52:54"
    ["post_date_gmt"]=>
    string(19) "2018-05-14 06:52:54"
    ["post_content"]=>
    string(0) ""
    ["post_title"]=>
    string(18) "cropped-j-01-5.jpg"
    ["post_excerpt"]=>
    string(0) ""
    ["post_status"]=>
    string(7) "inherit"
    ["comment_status"]=>
    string(4) "open"
    ["ping_status"]=>
    string(6) "closed"
    ["post_password"]=>
    string(0) ""
    ["post_name"]=>
    string(18) "cropped-j-01-5-jpg"
    ["to_ping"]=>
    string(0) ""
    ["pinged"]=>
    string(0) ""
    ["post_modified"]=>
    string(19) "2018-05-14 15:52:54"
    ["post_modified_gmt"]=>
    string(19) "2018-05-14 06:52:54"
    ["post_content_filtered"]=>
    string(0) ""
    ["post_parent"]=>
    int(0)
    ["guid"]=>
    string(66) "http://qq/wp-content/uploads/2018/05/cropped-j-01-5.jpg"
    ["menu_order"]=>
    int(0)
    ["post_type"]=>
    string(10) "attachment"
    ["post_mime_type"]=>
    string(10) "image/jpeg"
    ["comment_count"]=>
    string(1) "0"
    ["filter"]=>
    string(3) "raw"
    }

    キャンセル

  • 2018/05/14 20:09

    post_content入ってないですねぇ
    サイズ違いの画像の方とかに入れちゃってんですかね

    キャンセル

  • 2018/05/14 20:41

    とりあえずそのcustom_header_get_attachment_id_by_urlって関数ダメですね

    試してみたけどやっぱりguidは画像編集によるファイル名の変化を追跡しないですね
    guidってあてにならないんですよ、信用しちゃダメです

    正しい画像のURLはpost_metaの_wp_attached_fileの方ですね

    post_contentが入ってないのは違う原因でしょうけど

    キャンセル

  • 2018/05/14 23:27

    そうなんですね。もう完全にお手上げ状態です..

    キャンセル

  • 2018/05/15 10:32

    とりあえず本当に目的の画像に説明つけれてるのか確認
    IDは65の様ですね、管理画面のメディアから画像の編集画面開いた時
    URLの最後は?item=65になってるでしょうか?

    キャンセル

  • 2018/05/15 11:27

    メディアライブラリで、グリッド表示(田の字のアイコン)ではなくリスト表示(左側のアイコン)にするとカスタムヘッダー用にクリップされた画像があるかと思いますがいかがでしょうか?
    元の切抜きされていない画像ではなく、そちら(現在のヘッダー画像 とか表示があると思います)の編集→説明にURLを入力すれば提示のコードで行けそうなのですが。

    キャンセル

  • 2018/05/15 11:45

    切り抜きが原因でした。ご協力ありがとうございます!!

    キャンセル

  • 2018/05/15 11:50

    KazuhiroHatanoさんの「URLの最後は?item=65になってるでしょうか?」の言葉で気が付きました。気になっておりテストしていたので私もすっきりしました。ありがとうございます。

    キャンセル

0

これはどのような処理だと思われているのでしょうか。「説明」に値が入っていたらその値をリンク先に指定しているようですが、これでは表示されません。

<a href="<?php echo esc_html($img_meta->post_content); ?>">


表示するように書かないと表示されません。それとも「表示」は「リンク先に飛ばない」と言う意味でしょうか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/14 14:32

    phpはほとんど分からないので、<a href="<?php echo esc_html($img_meta->post_content); ?>">これで、画像のリンクが表示されると思っていました。

    キャンセル

  • 2018/05/14 14:36

    「画像のリンク」とは?PHPはブラウザにHTMLを返し、それをブラウザが解釈して「表示」します。「表示」可能なHTMLが出力されているのかをまず確認してください。

    キャンセル

  • 2018/05/14 18:41

    画像のリンクとは「説明」に記入したurlのことをさしていました。あまり知識がなく分かりにくくなってしまい申し訳ありません。

    キャンセル

0

原因は画像を切り抜きしたことにありました。
切り抜き前の画像にurlを入れていたので表示されなかったようです。
切り抜いた画像にurlを入れることで表示されました。

ご協力い頂いた皆さまありがとうございます。
ベストアンサーは大変迷ったので、最初に回答してくださった方
にしました。ありがとうございます。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • PHP

    19207questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • HTML

    8322questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • WordPress

    6668questions

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