2017年9月15日
【WordPress】優先度付きのサムネイル画像の表示方法(アイキャッチ・記事の最初の画像)
WordPressで記事のサムネイル画像を表示したいとき、アイキャッチがあれば、アイキャッチを表示、なければ記事の最初の画像(自動リサイズ・絵文字を除外)、それもなければあらかじめ設定した画像を表示する方法をメモメモ。
【優先度】
[1] アイキャッチ
[2] 記事の最初の画像
・画像サイズが大きい場合でも自動的にリサイズ
・画像より先に絵文字(GIF)を使用した場合でも、絵文字をサムネイルとして表示しない
[3] あらかじめ設定した画像
▼function.phpに記載
function outputThumbnail() { global $post; $noimage = '*******/noimage.jpg'; //アイキャッチ、記事中画像がない場合、表示する画像のパス設定 // アイキャッチが設定されている場合 if ( has_post_thumbnail() ) { $thumbnail_id = get_post_thumbnail_id(); $eye_img = wp_get_attachment_image_src( $thumbnail_id , 'medium' );//ミディアムサイズ echo '<img src="'.$eye_img[0].'">'; } else { //記事中の最初の画像を取得(絵文字[gif]を除く) if ( preg_match_all( '/<img[^>]+src=[\'"]([\-_\.\!\~\*\'\(\)a-z0-9\;\/\?\:@&=\+\$\,\%\#ぁ-んァ-ヶー一-龠]+(jpg|jpeg|png))/iu', $post->post_content, $matches) ) { //最初の画像があれば分岐 if(isset($matches [1][0])){ $first_url = $matches [1][0]; //最初の画像の画像IDを取得 $first_id = my_get_image_id($first_url); //最初の画像IDからサムネイルのパスを取得してセット $first_img = my_wp_get_attachment_medium_url($first_id); //最初の画像の画像IDからサムネイルのパスが取得できず、かつ、最初の画像のファイル名にサイズを表す文字列(e.g. -300x300)があった場合 if(empty($img_url) && preg_match_all('/(-.[0-9].+?x[0-9].+?).(jpg|jpeg|png)$/iu', $first_url , $matches2) ) { //サイズを表す文字列を削除 $first_url = str_replace($matches2[1][0], '' , $first_url); //最初の画像の画像IDを再取得 $first_id = my_get_image_id($first_url); //再取得した画像IDからサムネイルのパスを取得してセット $first_img = my_wp_get_attachment_medium_url($first_id); } } //取得した画像のダウンロードサイズがない場合等 if (empty($first_img)) { $first_img = $matches[1][0]; } echo '<img src="'.$first_img.'">'; } else { echo '<img src="'.$noimage.'">'; } } } //記事に挿入された最初の画像のURLから画像のIDを取得する関数 function my_get_image_id($image_url) { global $wpdb; $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url )); if(isset($attachment[0])){ return $attachment[0]; } } //画像のIDから、記事に挿入された最初の画像のサムネイルのサイズのURLを取得する関数 function my_wp_get_attachment_medium_url( $id ) { $medium_array = image_downsize( $id, 'medium' );//ミディアムサイズ $medium_path = $medium_array[0]; return $medium_path; }
▼サムネイルを表示したい部分に下記を追加
<?php outputThumbnail();?>
関連記事
-
【WordPress】プラグインなしでFacebook、TwitterのOGPを設定する方法
【WordPress】プラグインなしでFacebook、TwitterのOGPを設定する方法
今やSNSでの拡散等を考慮すると、必須設定事項のOGP(Open Graph Protocol)ですが、WordPres・・・ -
【WordPress】記事の位置判定(最初、最後、奇数、偶数)
【WordPress】記事の位置判定(最初、最後、奇数、偶数)
最初の記事や最後の記事等の判定をするための方法をメモメモ ▼記事位置の判定(functions.phpに記載) [php・・・ -
【WordPressプラグイン】「WordPress Popular Posts」をカスタマイズして出力する方法
【WordPressプラグイン】「WordPress Popular Posts」をカスタマイズして出力する方法
人気記事を表示できるプラグイン「Wordpress Popular Posts」。 固定ページやシングルページにソースを・・・ -
【WordPress】メディアの最大アップロードファイルサイズを変更する方法(レンタルサーバ・マルチサイトの場合も)
【WordPress】メディアの最大アップロードファイルサイズを変更する方法(レンタルサーバ・マルチサイトの場合も)
WordPressのメディアでファイルをアップロードする際に、最大アップロードファイルサイズがアップロードするファイルサ・・・ -
【WordPressプラグイン】「EWWW Image Optimizer」で使用する画像を自動で圧縮・リサイズ
【WordPressプラグイン】「EWWW Image Optimizer」で使用する画像を自動で圧縮・リサイズ
WordPressで画像を登録する際に毎回リサイズが面倒だったり、必要以上の画像サイズで登録されてしまったりとするケース・・・ -
【WordPressプラグイン】「Smart Custom Fields」で繰り返し設定した項目や画像を出力する方法
【WordPressプラグイン】「Smart Custom Fields」で繰り返し設定した項目や画像を出力する方法
カスタムフィールドで繰り返し登録したい項目があるとき等に便利なプラグイン「Smart Custom Fields」 繰り・・・