アイキャッチ画像がない場合に記事内はじめの画像をアイキャッチにする方法とリンク先画像取得-WordPress

アイキャッチ画像がない場合に記事内はじめの画像をアイキャッチにする方法とリンク先画像取得-WordPress

  • 2018-11-10  最終更新日:2018-11-10

今回はワードプレスのアイキャッチです。記事内はじめの画像を取ってくる方法は結構出回っているので、リンク先の画像を撮ってくる方法をプラスしたやり方になります。

記事内はじめの画像を取得する方法は結構ありますが、よくよく探したらあったかもしれませんがリンク先の画像を取ってくる方法がなかったので自作しました。とはいっても単純に条件をつけただけなのです。

一応1番目じゃなくて2番目の画像を表示させたい場合などにも設定できるようにしてあります。


記事内画像を取得

ワードプレスアイキャッチ

単純にfunctions.phpに以下の関数をいれます。取得したい画像の位置に2とすれば2番目の画像を撮ってくれます。

functions.php

function get_the_image() {
    global $post;
    $get_img = '';
    // 取得したい画像の位置
    $number = 1;
    $pattern1 ='/<a href=[\'"]([^\'"]+.(jpg|jpeg|gif|png|svg))[\'"]>/i';
    $pattern2 ='/<img.*src=[\'"]([^\'"]+)[\'"].*>/i';
    // リンク先画像があるかどうか
    $match_num = preg_match_all($pattern1, $post->post_content, $matches);
    if($match_num === 0){
    // リンク先画像がない場合は最初の画像を取得
        preg_match_all($pattern2, $post->post_content, $matches);
    }
     $get_img = $matches[1][$number - 1];

    if(empty($get_img)){
        // 記事内に画像がない場合のデフォルト画像を設定
        // デフォルト画像を非表示にしたい場合は下にある$get_img = false;の左側の//を消したらよいです。
        $get_img  = get_template_directory_uri()."/img/default.jpg";
        // $get_img  = false;
    }
    if($get_img === false){
        return false;
    } else{
        // 画像表示設定
        $alt = get_the_title();
        $img = '<img src="'.$get_img.'" alt="'.$alt.'" class="attachment-post-thumbnail size-post-thumbnail wp-post-image">';
        return $img;
    }
}

あとはアイキャッチを表示させたい場所にて以下の通り記載するだけです。

<?php if (has_post_thumbnail()) : ?>
    <?php the_post_thumbnail(); ?>
<?php else : ?>
    <?php echo get_the_image(); ?>
<?php endif ; ?>

ワードプレスアイキャッチ

参考になれば幸いです。


∞Tadashi Suyama∞

wordpress wp アイキャッチ eyecatch img image
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

フッターイメージ