【画像があるのかないのか】WordPressのアイキャッチ画像との上手な付き合い方
納品後のHPをみたらブログの画像があったりなかったりで見た目が悲惨な事になってしまっている、なんてよくある事ですよね。
（そもそもちゃんと更新してくれる人は質問してくるので更新されないのがほとんど）
アイキャッチアイキャッチ・・・アイキャッチってなんなの？というのが更新を任された人の本音でしょうね。
function.phpでアイキャッチを有効にして、的なことも必要だし。
なら投稿画面の「アイキャッチ画像」って部分なくしてしまおう。そして記事の画像を自動で取得してアーカイブページにアイキャッチ画像として表示しよう！というのが1段階目。
続いて「画像がなかったらどうしよう・・・何もないのは見た目が悪いから記事に画像がない場合はあらかじめ用意した画像を表示しよう！」というのが2段階目。
いや、でも「アイキャッチ画像」は残しておいて、記事の一番最初の画像というのがアイキャッチにふさわしくない場合もあるのでアイキャッチ画像は「アイキャッチ画像」としてちゃんと使いたい！「アイキャッチ画像」がない場合は記事の最初の画像を！それもなければあらかじめ・・・というのが3段階目。
いきなり結果です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?php $myQuery = new WP_Query(); $param = array( 'post_type' => array('投稿タイプ') ); $myQuery->query($param); ?> <?php if($myQuery->have_posts()): while($myQuery->have_posts()) : $myQuery->the_post();?> <section> <div> <div class="thumb"> <?php if ( has_post_thumbnail() ) { $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id, true); echo '<a href="'.get_the_permalink().'"><img src="'.$image_url[0].'" alt="'; the_title(); echo '"></a>'; } else{ ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); if(empty($matches [1] [0])){ echo '<a href="'.get_the_permalink().'"><img src="デフォルト画像のパス" alt="'; the_title(); echo '"></a>'; }else{ echo '<a href="'.get_the_permalink().'"><img src="'.$matches [1] [0].'" alt="'; the_title(); echo '"></a>'; } } ?> </div> </div> </section> <?php endwhile;else:?> <?php wp_reset_query();endif;?> |
なんか書き方がごっちゃになてますが、アイキャッチ画像がある場合とない場合のphpと記事の中の画像をアイキャッチ画像として扱うという動作を組み合わせてます。
最初のif ( has_post_thumbnail() ) {周辺は「アイキャッチ画像」に画像が設定されている場合の動作。
else{ob_start();周辺は「アイキャッチ画像」に画像がなかった場合に記事の中のimgタグを探す動作。
if(empty($matches [1] [0])){周辺は記事の中にimgタグがなかった場合の動作。
最後の}else{周辺は記事の中に画像があった場合の動作です。
前回書いたアイキャッチ画像のサイズの制御を組み合わせるのであれば、それぞれの動作ないのimgをechoしている部分にstyle=”background-image:画像のパス”を追加してください。
記事の最初の画像を・・・というので検索すると、いろんなブログなどがヒットしますが、それを使うとデバッグモードにするとエラー出ます。
よくあるのは
$first_img = ”;
・・・
$first_img = $matches [1] [0];
if(empty($first_img)){
なんですけど、これだとデバッグモードにするとエラー出ました。多分emptyの中身が変数うんぬんかんぬんです。
デバッグモードを切ると何事もなかったかのように動作するので不思議。
まぁどんな状態でもエラーが出ないのが当然だと思うので
if(empty($matches [1] [0])){
このようにしています。