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

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

ただいまの
回答率

90.48%

  • PHP

    24450questions

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

  • WordPress

    9098questions

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

Wordpress カスタム投稿での動的な画像リンクの取得

解決済

回答 2

投稿 編集

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

web

score 16

WordPressのsingle-aaa.phpファイルに以下を書き込んでいます。

やりたいことしては、カスタム投稿(aaa)の画像を取得して
15枚表示させ、その画像それぞれに画像URLリンクを貼りたいです。

画像のフィールド名はimg_02~img_15で設定してあります。

<?php                 
    // アイキャッチ画像のIDを取得
    $thumbnail_id = get_post_thumbnail_id();  
    $img_full = wp_get_attachment_image_src( $thumbnail_id , 'full' );
    echo '<img  class="img-responsive" src="'.$img_full[0].'">';
?>    
              </a>

<?php    
    $e = 1;
    for ($i = 2 ; $i < 16 ; $i++) {
        $ctm = get_post_meta($post->ID, 'img_0'.$i, true);
        if($ctm):
        echo '<a data-slide-index="'.$e.'" href="">' ;
        echo '<img  class="img-responsive" src=" ' ;
        echo wp_get_attachment_url(get_post_meta($post->ID, 'img_0'.$i,true));
        echo ' "></a>' ;  
        $e++ ;
         endif;
    }    
?>

これだと画像はきちんと取得して表示されるのですが、リンクが動作しません。
echo '<a data-slide-index="'.$e.'" href="">' ;
の部分を
        echo '<a data-slide-index="'.$e.'" href=" ' ;
        echo wp_get_attachment_url(get_post_meta($post->ID, 'img_0'.$i,true));
        echo ' ">
としてみましたが、何も変わりませんでした。
どのように修正すべきか教えて頂けないでしょうか?

宜しくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+1

こんにちわ。

phpの出力に関しては解決されているようですが、ちょっとだけ、画像のフィールド名が気になります。
このfor文だと$iが10より大きい数字なった時に
'img_010' となってしまうと思います

get_post_meta関数を使用する箇所の記述を

get_post_meta($post->ID, 'img_'.str_pad($i,2,'0',STR_PAD_LEFT),true)


としておいたほうが良さそうです。

あとリンク機能の動きの件ですが、とりあえず

<?php                 
    // アイキャッチ画像のIDを取得
    $thumbnail_id = get_post_thumbnail_id();  
    $img_full = wp_get_attachment_image_src( $thumbnail_id , 'full' );
    echo '<img  class="img-responsive" src="'.$img_full[0].'">';
?>    
              </a>


上記の閉じ</a>タグは、対となる開始タグ<a>は存在していますか?
あとはCSSやJsの問題と思われます。imgのclass属性にimg-responsiveとあるので、画面幅によって何かしらの実装が施してありそうですが...

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/01/07 13:32 編集

    akira888様、回答ありがとうございます。

    確かにそうです!なので、フィールドは010と指定してましたが、そのように記述すると解決できるのですね!
    とても勉強になりました。ありがとうございます。

    <a>開始タグはちゃんとあります。
    私のコードの載せ漏れでした・・すみません。
    bootstrapを使用しているので、それが何か原因なのでしょうか・・。

    キャンセル

checkベストアンサー

0

forの部分を下記のようにしても動きませんか?
    for ($i = 2 ; $i < 16 ; $i++) {
        $ctm = get_post_meta($post->ID, 'img_0'.$i, true);
        if($ctm):
        echo '<a data-slide-index="'.$e.'" href="';
        echo wp_get_attachment_url(get_post_meta($post->ID, 'img_0'.$i,true));
        echo '"><img class="img-responsive" src="';
        echo wp_get_attachment_url(get_post_meta($post->ID, 'img_0'.$i,true));
        echo '"></a>' ;  
        $e++ ;
         endif;
    }

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/01/07 11:12


    narakener様
    昨日に引き続き、ありがとうございます!

    それで動きました!が、画面幅を縮めた場合のみ動作します。。
    画面が広いと動作しません。。これは一体なぜでしょうか。。
    画像をdisplay:inline-blockで並べて、それをクリックでリンク動作したいだけなんですが・・・。

    キャンセル

  • 2016/01/07 14:48

    昨日も私が回答していたんですね。今気づきました。。

    動作しないという状況を確認したいのですが、今aタグの範囲はどうなっていますか?

    確認方法として、Google Chromeの場合なら、F12キーでデベロッパーツールを立ち上げ、Elementsタブで問題が出ているaタグのソースにマウスオーバーすれば、範囲が画面上でハイライトすると思います。

    もしimgタグより小さくなっているのでしたら、aタグにdisplay:block;を適用すれば直るかもしれません。

    キャンセル

  • 2016/01/07 16:41

    narakener様
    そうです。毎回助けて頂いてありがとうございます。

    Firefoxで確認してみたら、<a>で指定されているのはちゃんと画像の範囲でした。
    bootstrapの何かが原因なのでしょうか。。

    キャンセル

  • 2016/01/07 17:23 編集

    そうですか。。実際の表示されているページを見てみたいところですが難しいとのことですので…

    回答ではありませんが参考までに、下記サイトにbootstrapのテンプレートがありました。
    .img-responsiveも使っていますので、実現されたい内容に近いのではないかと思っています。
    http://ironsummitmedia.github.io/startbootstrap-creative/
    このサイトのhtml、cssの構成を参考にすれば解決の糸口がつかめるかもしれません。

    また、あまりteratailのルールには慣れていませんが、
    当初の質問と内容が変わってきていますので、質問を新しくしなおして頂いたほうが良いかもしれません。
    そのほうが有志の方の手助けもあるかと思います。
    うまく解決しない場合はご検討ください。

    キャンセル

  • 2016/01/07 19:46

    いろいろとありがとうございます。
    そちら参考にして少し自分で調べてみます。
    それでも分からなかったら、再度質問致します。
    どうもありがとうございました!

    キャンセル

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

  • PHP

    24450questions

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

  • WordPress

    9098questions

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