WordPressの本文内に入っている画像を全て抽出してリストアップする

WordPress

記事本文内(WYSIWYGエディタ)に入っている画像のみを取り出して別で表示したいというときに使えるかもしれない内容になります。
使いどころが限られますが、参考になればと思います。

スポンサーリンク

ポイント

  • 本文に入っている画像が、オリジナル画像だったり、サムネイルサイズになっていたりする。
  • オリジナル画像のみ取得したい。
  • 1記事内の投稿で同じ画像が何度も使用されていて重複している。

データ整形処理

<?php
  //投稿本文を取得
  $content = $post->post_content;
  
  //本文内で使用しているショートコードを除去(念のため)
  $content = strip_shortcodes($content);
  
  //ルートパスを絶対パスに変換(元々、絶対パスになっている場合には不要)
  $content = preg_replace(
      array('/src="\/')
    , array('src="https://'. $_SERVER["HTTP_HOST"] .'/')
    , $content
  );
  
  //本文内に入っている画像を全て抽出
  preg_match_all('/<img(?:.*?)src=[\"\'](.*?)[\"\'](?:.*?)>/e', $content, $all_imgs);

preg_match_all で抽出した $all_imgs を var_dump すると下記のような配列となっています。

array(2) {
  [0]=>
  array(2) {
    [0]=>
    string(137) "<img src="https://example.com/2018/11/sample-300x300.jpg" alt="" width="300" height="300" class="alignnone size-medium wp-image-12345" />"
    [1]=>
    string(136) "<img src="https://example.com/2018/11/sample-770x770.jpg" alt="" width="770" height="770" class="alignnone size-large wp-image-12345" />"
  }
  [1]=>
  array(2) {
    [0]=>
    string(46) "https://example.com/2018/11/sample-300x300.jpg"
    [1]=>
    string(46) "https://example.com/2018/11/sample-770x770.jpg"
  }
}

返り値の[1]がパスのみになりますので、こちらを使用します。

<?php
  //初期化
  $complete_imgs = [];
  
  if($all_imgs[1]){
    foreach($all_imgs[1] as $tmp){
      $original_img = '';
      $images = [];
      
      //サムネイル記述を削除して、オリジナルの画像パスに変換
      $original_img = preg_replace("/(.+)(-[0-9]+x[0-9]+)(\.[^.]+$)/", "$1$3", $tmp);
      
      //オリジナル画像が存在しているか画像URLからアタッチメントIDを検索
      if(get_attachment_id_from_src($original_img)){
        //オリジナル画像があれば、オリジナル画像を設定
        $images[] = $original_img;
      } else {
        //オリジナル画像からIDを取得できなければ、サムネイルのまま設定
        $images[] = $tmp;
      }
    }
    
    //重複している画像を除去する
    $complete_imgs = array_unique($images);
  }

※サムネイルサイズの生成ファイル名を変換している場合は、正規表現部分の調整が必要です。

画像URLからattachmentIDを取得する処理は、別途 functions.php などに追記してください。

<?php
  //画像URLからアタッチメントIDを取得する関数
  function get_attachment_id_from_src($image_src){
    global $wpdb;
    $query = "SELECT ID FROM {$wpdb->posts} WHERE guid='$image_src'";
    $id = $wpdb->get_var($query);
    
    return $id;
  }

出力処理

画像を表示したいところに出力コードを配置します。

<?php
  //本文中の画像リストがあれば、画像URLを出力
  if($complete_imgs){
    echo "<ul>";
    foreach($complete_imgs as $img){
      echo "<li>" . $img . "</li>\n";
    }
    echo "</ul>";
  }

入力された本文内容次第ではイレギュラーな内容も出てくると思いますが、最低限の実装は出来ているかと思います。
今回は、リストアップされたURLをそのまま出力していますが、オリジナル画像からアタッチメントIDを取得しているので、特定サイズの画像を一覧化することも可能だと思います。

コメント

スポンサーリンク
タイトルとURLをコピーしました