アイキャッチ画像の下にキャプションを表示する方法。

Simplicityの特徴 フォーラム Simplicityについての質問 アイキャッチ画像の下にキャプションを表示する方法。

9件の返信スレッドを表示中
  • 投稿者
    投稿
    • #33981
      Ryo-KA
      ゲスト

      いつもお世話になっております。元Bow(ぼー)です。

      知らない間に、わいひらさんも、お父さんも大変なことになっていた様で…。
      今は、わいひらさん、お父さん共に調子はいかがですか?

      ————
      で、すみません。ちょっとお伺いしたいのですが、タイトル通り、
      「アイキャッチ画像の下にキャプションを表示する方法。」
      です。

      自分なりに、entry-body.phpの46行目あたりの、

      <div class="eye-catch"><?php the_post_thumbnail('large'); ?></div>

      WordPressでアイキャッチ画像を表示する際、キャプションも合わせて表示するのサイトを参考に。

        <?php if ( has_post_thumbnail() && is_eye_catch_visible() ): // サムネイルを持っているときの処理 ?>
        <div class="eye-catch"><?php the_post_thumbnail(large);
      	if(get_post(get_post_thumbnail_id())->post_excerpt) {
      		echo '<span>' . get_post(get_post_thumbnail_id())->post_excerpt . '</span>'; } ?>
        </div>
        <?php endif; ?>

      と試してみたんですが、どうしても上手くいかず質問させて頂きました。

      キャプションを表示したい理由なんですが。
      記事内画像にはキャプションが表示されるのでいいんです。
      しかし、アイキャッチには表示されない。

      キャプション表示の「有/無」なんて、CC0の画像を使えば問題ないと思います。
      しかし、やはりCC0じゃない画像の方が良い場合もありまして、そんな時に「著作者にせめてもの敬意」として前々から表示させたいと思っていたんです。

      なので、お体やご家庭のが色々大変だと思います
      急ぎではないので、よろしくお願いします。

      また、わいひらさん以外の方でも解決するヒントを教えていただければ助かります。

      by Ryo-KA

    • #33982
      Ryo-KA
      ゲスト

      スミマセン…。なんか変な表示になってしまってますね。

      <?php if ( has_post_thumbnail() && is_eye_catch_visible() ): // サムネイルを持っているときの処理 ?>
      <div class="eye-catch"><?php the_post_thumbnail(large);
      	if(get_post(get_post_thumbnail_id())->post_excerpt) {
      		echo '<span>' . get_post(get_post_thumbnail_id())->post_excerpt . '</span>'; } ?>
      </div>
      <?php endif; ?>

      うまくいくか不明ですが、もう一回コード張ります。

    • #33983
      がちょぴん
      ゲスト

      Ryo-KAさん

      <div class=”eye-catch”><?php the_post_thumbnail(‘large’); ?></div>

      参考サイトのコードをこちらのコードに上書きしたのか分からないのですし、
      自分の発言が間違っていましたら大変申し訳ございませんが、クラス名が違うから表示されないのでは?

      参考サイトのクラス名は「wp-caption-text」Ryo-KAさんは「eye-catch」だから表示されないのかなと思います。
      文字化けのようなコードは後からわいひらさんが修正してくれるので心配しないでいいと思いますよ。

    • #33984
      がちょぴん
      ゲスト

      参考サイトのコードをこちらのコードに上書きしたのか分からないのですし、

      「参考サイトのコードをこちらのコードに上書きしたのか分からないのですが」←一部日本語おかしいので修正失礼します。

    • #33985
      Hidekichi
      ゲスト

      アイキャッチの設定時に、画像を選択する画面ありますよね?
      そこで例えばキャプションの所に何かしら入れると、eyecatchの中のimgにalt=”(キャプションの中身)”みたいな感じで入ると思うんですよ(定かではない)。

      ダッシュボード→メディアあたりから設定すればいけるんじゃなかろうかとも思います。

      PHPでやると、このaltが拾えないかも知れないんですが、jQueryだったら余裕で拾えます。
      PHPでも拾えなくはないかも知れないんですけどね。

      サンプル: imgのaltを表示する | jsFiddle

    • #33986
      Ryo-KA
      ゲスト

      がちょぴんさん>>
      Hidekichiさん>>

      すみません。サイト見せちゃったほうが早そうですね。
      言葉だと上手く伝えきれないので…。

      [叫]「歌った/愛をとりもどせ」再アップ。ミックスボイスのヒントは、妖怪ウォッチの「ウィスパー」にある!?

      このページのアイキャッチ画像なんですが、すでにキャプションの入力はしてあります。

      キャプション入力済み

      で、ページの下に行くと、同じ画像があるんですが、そこにはキャプションがちゃんと表示されてるんですよね。

      記事内画像キャプション有り

      こんな感じで、アイキャッチ画像、記事内画像と共にキャプションを表示させたいんです。
      Stinger5 を使ってた時に、アイキャッチ画像にキャプションを表示させた事があったんですが。
      ・・・
      ・・・
      ・・・
      やり方を忘れてしまって…。しかも、そのファイルも削除してしまって、参考にするものが全く無い状態で(T_T)

      過去、参考にしたサイトも忘れちゃった感じです…。

      何とかなりそうですかね・・・

    • #33987
      Ryo-KA
      ゲスト

      2枚目の画像間違えました…。

      キャプションが表示されている

      こっちが、正しい方の枚目です。

    • #33988
      Hidekichi
      ゲスト

      ちなみに、貼り付けてあるコードは、だいたいそれでイケると思いますよ。
      適用先: entry-body.php内。

      サンプル: 多分こんな感じのが書いてあるかと思われる | jsFiddle
      ※ 動作はしません。ソースを貼り付けるためだけに利用しています。

      spanで囲ってあるので、cssでスタイルするだけなんですけどね。

      さっきのjQueryのサンプルは代替テキストの部分を拾う感じですな。画像作者の名前だけで良かったら代替テキストでやる方がさっくりといける気もするんですが、リンクを入れたいとかならやはりキャプションなのかなぁと思ったりも。

    • #33994
      Ryo-KA
      ゲスト

      Hidekichiさん>>

      サンプルソースをそのまま貼り付けたら理想通りにアイキャッチ画像にキャプション入りました!!
      ありがとうございます\(^o^)/

      いやー、ホント助かりました~!!

      がちょぴんさんもありがとうございます!!

      P.S.
      わいひらさん、これから更に寒くなってきますので、お体に気をつけて下さいね!!

      では、みなさん。
      ありがとうございました!!(^^)b

    • #34002
      わいひらわいひら
      キーマスター

      僕の体調は、まあまあといった感じです。
      父は、ようやく食事をとれる状態まで回復しました。

      みなさんありがとうございます。
      #33988
      この方法いいですね。使わせてもらいます。

9件の返信スレッドを表示中
  • トピック「アイキャッチ画像の下にキャプションを表示する方法。」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)