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

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

ただいまの
回答率

89.95%

WordPress Popular Postsのサムネイルの出力についての質問です。

受付中

回答 1

投稿 編集

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

JP_Shiba_Inu

score 6

長くなりますが宜しくお願い致します。

前提・実現したいこと

Wordpressのサイドバーに人気記事を表示する為、WordPress Popular Postsというプラグインを使用しております。
その上でサムネイルを表示させる方法を以下の方法でカスタマイズしております。
表示させたい順番としてはアイキャッチに指定したサムネイル > Youtubeが本文に埋め込まれている場合はYoutubeを表紙にした画像 > キャラリー画像が埋め込まれている場合はギャラリー最初の画像 >なければコンテンツ本文内の最初の画像 > なければAdvanced Custom Fieldsで設定したカテゴリー画像 > なければAdvanced Custom Fieldsで設定したBlogデフォルト画像 > 最後にそれもなければNo image画像を表示。
この順番で画像を表示させたいのですがコンテンツ本文内の最初の画像とギャラリーの最初の画像、Youtubeの画像を表示する事が出来ません。


試したこと

以下のコードをfunctions.phpに記述しております。

function my_custom_single_popular_post( $post_html, $p, $instance ){
$size = 'wpp-thumbnail';
$blog_cover_image = get_field('blog_cover_image','option');//カスタムフィールド
$title = get_the_title( $post->ID );
//最初の画像を取得してIDを取得
    $first_list = '';
    ob_start();
    ob_end_clean();

    preg_match_all("/<img[^>]+src=[\"'](s?https?:\/\/[\-_\.!~\*'()a-z0-9;\/\?:@&=\+\$,%#]+\.(jpg|jpeg|png|gif))[\"'][^>]+>/i", $post->post_content, $matches);

//カテゴリのデフォルト画像を探す
$taxonomy_names = get_post_taxonomies($p->id);
if(!empty($taxonomy_names[0]))  {
$cats = get_the_terms($p->id, $taxonomy_names[0]);
    foreach((array)$cats as $cat) {
        if(!empty($cats[0]))  {
    $cat_id = $cat->term_id;
    $attachment_id = get_field('category-image', 'category_' . $cat_id);
        if(!empty($attachment_id)) break;//カテゴリ画像見つけたらループ終了
    }
    }
    }

//Youtubeの画像を探す
$youtubePost = $post->post_content;
preg_match('/www.youtube.[-_\/A-Za-z0-9]*/', $youtubePost, $youtubeUrl);
preg_match('/www.youtube.[-_?=\/A-Za-z0-9]*/', $youtubePost, $pasteUrl);
preg_match('/youtu.be.[-_?=\/A-Za-z0-9]*/', $youtubePost, $beUrl);

//ギャラリーショートコードの最初の画像を探す
 $pattern = get_shortcode_regex();
    $id      = absint( $p->id );
    if ( empty( $id ) ) {
        $id      = absint( $post->ID );
        $text    = $post->post_content;
    } else {
        $text    = get_post( $id );
        $text    = $text->post_content;
    }

if (has_post_thumbnail($p->id)){//投稿にサムネイルがある場合の処理
$thumb_id = get_post_thumbnail_id($p->id);
$thumb_array = wp_get_attachment_image_src( $thumb_id, $size);
$thumb = '<img src="'.$thumb_array[0].'" alt="'.$p->title.'">';
} else if (isset($youtubeUrl[0])){//Youtube画像がある場合の処理
if (preg_match('/embed/', $youtubeUrl[0])) {
$youtubeId = str_replace("www.youtube.com/embed/","",$youtubeUrl[0]);
$thumb = '<img src="//img.youtube.com/vi/'.$youtubeId.'/0.jpg" class="image-trimming">';
} else if (preg_match('/watch/', $pasteUrl[0])) {
$pasteId = str_replace("www.youtube.com/watch?v=","",$pasteUrl[0]);
$thumb = "<img src='//img.youtube.com/vi/$pasteId/0.jpg' class='image-trimming'>";
}
} else if (isset($beUrl[0])){
if (preg_match('/youtu.be/',$beUrl[0])) {
$beId = str_replace("youtu.be/","",$beUrl[0]);
$thumb = "<img src='//img.youtube.com/vi/$beId/0.jpg' class='image-trimming'>";
}
} else//ギャラリーの画像があれば分岐
    if ( preg_match( '/' . $pattern . '/s', $text, $matches ) && 'gallery' == $matches[ 2 ] ) {
        if ( preg_match( '!ids=(\'|")([0-9,]+)(\'|")!', $matches[ 3 ], $regs ) ) {
            $thumb_array = wp_get_attachment_image( $regs[ 2 ] ,$size);
            $thumb = '<img src="'.$thumb_array[0].'" alt="'.$p->title.'">';
        }
} else if(!empty($first_list)) {//本文に最初の画像があれば分岐
//最初の画像IDからサムネイルのパスを取得してセット
if(isset($matches[1][0])){
    $first_list = ($matches[1][0]);
    $thumb_array = wp_get_attachment_image_src( $first_list,$size ,false);
    $thumb = '<img src="'.$thumb_array[0].'" alt="'.$p->$title.'">';
    }
} else if(!empty($attachment_id)) {//サムネイルがないのでデフォルトカテゴリ画像を表示
$thumb = wp_get_attachment_image($attachment_id,$size,false);
$thumb = preg_replace( '/(width|height|srcset|sizes)="(.*?)"\s/', '', $thumb );
} else if( !empty($blog_cover_image)){
$thumb_array = wp_get_attachment_image_src( $blog_cover_image ,$size ,false);
$thumb = '<img src="'.$thumb_array[0].'" alt="'.$p->$title.'">';
} else if(empty($img_id)){//上記条件の画像がない場合はデフォルト画像を表示
        $default = get_field('default_image','option');//カスタムフィールド
        $img_id = $default;
        $thumb_array = wp_get_attachment_image_src( $default ,$size ,false);
        $thumb = '<img src="'.$thumb_array[0].'" alt="'.$p->title.'">';
    }
    $output = '<li><div class="wpp-img"><a href="' . get_the_permalink($p->id) . '">' . $thumb . '</a><p class="wpp-post-title"><a href="' . get_the_permalink($p->id) . '">' . $p->title . '</a></p></div></li>';
    return $output;
}
if ( !is_admin() ) add_filter( 'wpp_post', 'my_custom_single_popular_post', 10, 3 );//管理画面では除外

使用環境とカスタマイズ箇所

[使用環境]
Wordpress Version:v5.2.3
WordPress Popular Posts:v4.2.2
Advanced Custom Fields PRO:v5.8.2
PHP version:v7.2.17

サーバー:エックスサーバー


参考にしたサイト : https://www.doe.co.jp/hp-tips/wordpress/wpp-customize/


大変長くなりましたが以上、ご教授宜しくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

アイキャッチに指定したサムネイル > Youtubeが本文に埋め込まれている場合はYoutubeを表紙にした画像 > キャラリー画像が埋め込まれている場合はギャラリー最初の画像 >なければコンテンツ本文内の最初の画像

ここまでやりたい事が決まってるなら乱雑なことしないで投稿の時点でそのようにした方が良いように思いますけど。
YoutubeなりWordPressなりの仕様が変わったらコードの変更も必要だと思いますし。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/09/15 20:20 編集

    私の家族のサイトを作成したのでずがアイキャチさえ設定すれば良いのですが母がサイトでアイキャチの設定忘れが多いので、このゴードが、完成されれば便利かなと思い質問してみました。

    キャンセル

  • 2019/09/16 18:19

    サイドバーに人気記事が表示される状況下なら常にこのコードが動くことになって非常に無駄だと思いませんか?
    記事保存時にアイキャッチが未設定ならアラートを出す、アイキャッチ画像が無い又は記事に画像が無い記事ならチェックボックスなどを使ってアラートを回避しつつBlogデフォルト画像を設定または出力するような仕組みにした方が良いと思いますけど。
    または同様のコードを記事保存時に動かして描写するのではなく強制的にアイキャッチ画像を設定した方が余計な負荷が減ると思いますけど。

    コードに関しては$postや$pが未定義なのでNotice: Undefined indexになっていると思われます。
    あと、記事に使用する画像がその記事だけなのか、既にアップロード済で他の記事で使用したことのある画像を使う事もあるのかによって方法も若干変わってくるのかなぁと思いますけど。

    とりあえず仕様を見直した方が良いように思いますけど強制はしません。

    キャンセル

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

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