サポート » 使い方全般 » 投稿内のリンク付きの画像のみを表示したい

投稿内のリンク付きの画像のみを表示したい

  • 解決済 takechi05

    (@takechi05)


    1ヶ月、 2週前

    オリジナルのテーマで、現在投稿ページには一枚の画像に別サイトへのリンクをつけて投稿し、投稿一覧ページで<?php the_content(); ?>で各投稿内容を表示しております。

    ただ、投稿によって今まで通り外部サイトへ飛ばすものと、single.phpで内容を表示するものとに分ける必要が出てきてしまい、色々調べたのですが自力ではわからずこちらに書かせていただきました。投稿内容からリンクと画像のみを抽出して一覧ページで表示させることは可能でしょうか？

    <div class="voi_box">

<?php
query_posts('&posts_per_page=999');
if (have_posts()):
while(have_posts()): the_post();
?>

<div class="voi_area">
<div class="voi_img"><?php the_content(); ?></div>
<div class="voi_tag">
<?php
$categories = get_the_category();
echo $categories[0]->name;
?>
</div>
<div class="voi_tit"><?php the_title(); ?></div>
</div>
<?php endwhile; endif; ?>


</div>

    現在は上記のように表示しているのですが、画像以外にテキストを投稿するようになった場合、<?php the_content(); ?>部分に画像と画像に付けたaタグのみを抽出し表示する方法はありますでしょうか？

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • childsview

    (@childsview)

    1ヶ月、 2週前

    @takechi05 さん　こんにちは

    具体的なコードは検証が必要なので避けますが、アイデアとしては以下のようなものになると思います。

    • カスタムフィールドを設定して、外部URL入力が出来るようにする
    • 条件分岐でカスタムフィールドに入力があればリンク表示、なければ詳細ページへリンクさせる

    また query_posts は避けて pre_get_posts を利用した方が良いかと思います。

    テンプレートタグ/query posts

    https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/query_posts

    上記マニュアルでも触れられているように、弊害を発生させる事が多いため、使用を避けた方が良いかと思います。

    トピック投稿者 takechi05

    (@takechi05)

    1ヶ月、 2週前

    @childsview さん

    ご返信いただきありがとうございます。昨日投稿してからもしばらく一人で作業していたところ、<?php the_content(); ?>を使わずに画像とリンクを抽出できました。
    以下、<?php the_content(); ?>部分に代入したコードになります。

    <?php
$content = get_the_content();
preg_match_all('/<img[^>]+src=([\'"])(.+?)\1[^>]*>/i', $content, $matches);
if (!empty($matches[2][0])) {
    $img_url = $matches[2][0];
    preg_match_all('/<a[^>]+href=([\'"])(.+?)\1[^>]*>/i', $content, $matches);
    if (!empty($matches[2][0])) {
        $a_url = $matches[2][0];
        echo '<a href="'.$a_url.'"><img src="'.$img_url.'" /></a>';
    } else {
        echo '<a href="'.get_permalink().'"><img src="'.$img_url.'" /></a>';
    }
}
?>

    上記のコードを作ってみました。
    このコードで今のところ画像に<a>タグがあればそのURLを抽出して1枚目の画像に付与し、なければ投稿ページのURLを付与。
    今のところこのコードでエラーなく動いているので大丈夫だと思います；

    childsview

    (@childsview)

    1ヶ月、 2週前

    @takechi05 さん

    解決されたようで良かったです。

    解決しましたら、チケットを「解決済み」に変更お願いいたします。

    https://ja.wordpress.org/support/topic/%e7%ae%a1%e7%90%86%e8%80%85%e3%81%8b%e3%82%89%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b%e3%81%a8%e6%96%b0%e3%83%88%e3%83%94%e3%83%83%e3%82%af%e4%bd%9c%e6%88%90%e6%99%82%e3%81%ae%e3%81%8a%e9%a1%98/

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。

表示