先日ローカルにこのブログのコピーを作りましたが、関連記事のコードを入れてみました。
プラグインを入れすぎると重たくなるしメインテナンスも大変になるので、コードの勉強がてらやってみました。
コードそのものは難しいものでなく、タグが同じ記事を指定した数だけ表示するというものです。
基本的には以下のコードをsingle.phpのメイン記事が表示された後に挿入しました。
ただサムネイル画像で苦労しました。
１．単純に呼び出して表示する。
２．背景として表示する。
１．単純に呼び出して表示する。
has_post_thumbnailをIfで聞いてもしあれば、get_the_post_thumbnailでサムネイルを呼び出しています。サムネイルがなかったら、No-Imageの画像を呼び出してます。
|
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<div class="relatedposts"> <h4>関連記事</h4> <?php $orig_post = $post; global $post; $tags = wp_get_post_tags($post->ID); if ($tags) { $tag_ids = array(); foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id; $args = array( 'tag__in' => $tag_ids, 'post__not_in' => array($post->ID), 'posts_per_page'=>6, // 表示する関連記事の数 'caller_get_posts'=>1, 'orderby' => 'rand', // 過去記事に内部リンクできる ); $my_query = new wp_query( $args ); ?> <div class="row"> <?php while( $my_query->have_posts() ) { $my_query->the_post(); ?> <div class="col-xs-6 inner"> <h5> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?> <?php echo get_the_post_thumbnail($post->ID, 'thumb100'); //サムネイルを呼び出す?> <?php else: // サムネイルを持っていないとき ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="NO IMAGE" title="NO IMAGE"/> <?php endif; ?> <?php if (strlen($post->post_title) > 50) { echo mb_substr(the_title($before = '', $after = '', FALSE), 0, 50, 'UTF-8') . '...'; } else { the_title(); } ?> </a> </h5> <p> <?php $cat = get_the_category(); $cat = $cat[0]; echo '<a href="' . get_bloginfo('url') . '/category/' . $cat->category_nicename . '">'; echo $cat->cat_name; echo '</a>'; ?> </p> </div><!--col-xs-6 inner--> <?php } // while ?> </div><!--row--> <?php } // IF $post = $orig_post; wp_reset_query(); ?> </div><!--relatedposts--> |
このやり方は簡単でしたが、画像の高さが揃いませんでした。
Googleで調べましたが、このやり方をすると高さを揃えるのが難しいとのことです。
というのもアイキャッチ画像をアップロードする際色々なサイズで保存されているのでそれが一定のサイズでない為です。以下はサイズが揃ってない画像です。
２．背景として表示する。
このやり方もそう大変ではないです。wp_get_attachment_image_srcでサムネイル画像が保存されているディレクトリ画像を見つけ、background-image:url()のカッコ内に入れてあげるだけです。
以下が変更した部分のコードですが、Whileループとinner div classの部分だけ変えただけです。
|
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 34 35 36 37 38 39 40 |
<div class="row"> <?php while( $my_query->have_posts() ) { $my_query->the_post(); $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail_size' ); //$image_id = get_post_thumbnail_id (); //$thumb = wp_get_attachment_image_src ($image_id, true); if ( !empty($thumb['0']) ) { $url = $thumb['0']; } else { $url = get_template_directory_uri()."/images/no-image.gif"; } ?> <div class="col-xs-6 inner"> <div itemscope itemtype='http://schema.org/ImageObject' class="thumbnail"> <a style="background-image:url(<?=$url?>);" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" itemprop="url" class="thumbnail-img"></a> </div> <h5> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <?php if (strlen($post->post_title) > 50) { echo mb_substr(the_title($before = '', $after = '', FALSE), 0, 30, 'UTF-8') . '...'; } else { the_title(); } ?> </a> </h5> <p> <?php $cat = get_the_category(); $cat = $cat[0]; echo '<a href="' . get_bloginfo('url') . '/category/' . $cat->category_nicename . '">'; echo $cat->cat_name; echo '</a>'; ?> </p> </div><!--col-xs-6 inner--> <?php } // while ?> </div><!--row--> |
ただ、これも画像が表示されないという現象があって苦労しました。
以下がcssですが、サムネイル画像が背景となってるa タグの設定が問題でした。
display:blockを入れてあげただけで、画像がちゃんと表示されました。
ここまで来るのに1.5日ほど費やしました。Display:blockがキーポイントです。
高さは問題なくあるのにどうしても画像が出てこずあれやこれややってやっと分かりました。
|
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
.relatedposts { margin-top: 30px; } .relatedposts .inner { border: 1px solid #F1F2F4; margin-bottom: 5%; margin-right: 2%; width: 46%; margin-left: 2%; padding-bottom: 20px; min-height: 340px } .relatedposts .inner .thumbnail { margin-bottom: 20px } .relatedposts .inner .thumbnail a { height: 200px; display:block; background-position: center; } .relatedposts .inner h5 { text-align: left; color: #4DAED4; letter-spacing: 0px; line-height: 25px; font-size: 16px } .relatedposts .inner p { float: right; margin: 3%; padding: 2px 10px 2px; background: #E8EBEC } .relatedposts .inner p a { font-size: 12px; color: #838C91 } @media only screen and (max-width: 479px) { .relatedposts .inner { width: 96%; min-height: 250px } .relatedposts .inner .thumbnail a { height: 150px } .relatedposts .inner h5 { font-size: 13px } .relatedposts .inner p a { font-size: 9px } } |
最終的に以下のようになりました。
まとめると、
プラグインを使うと多分もっと簡単だと思いますが、コードでやってみると時間はかかりますが、いい勉強になります。
それにしてもphpはhtmlの中に入り込んでいるのでコードを見ると分かりづらいです。
また今後も何かあればプラグインでなくコード変更でやっていきたいです。