WordPress記事下などによくある関連記事をプラグインを使用しないで表示する方法です。
こんな感じで表示されます。
左にサムネイル、右に記事タイトルと、内容の抜粋が表示されます。
目次
functions.phpの編集
functions.phpを編集する前は必ずバックアップを取ってください。
アイキャッチを有効にする
functions.phpに以下の記述があるか確認してください。
add_theme_support('post-thumbnails');
大抵のテーマはあると思いますが、あればそのまま。なかったらfunctions.phpに追記してください。
これは、アイキャッチ画像を有効化する記述です。これがないと、投稿画面でアイキャッチが設定できません。
作成するサムネイルの大きさを指定する
次に、functions.php内に以下の記述があるか確認してください。
add_image_size('thumb100',100,100,true);
これは、簡単に言えば、作りたい大きさのサムネイルをWordpress側に作ってもらう関数です。
上のコードでは、100×100pxの大きさで画像の真ん中をくりぬいたサムネイルが作成されます。数値を変更すれば、自由に大きさを変更できます。
上記のコードがfunctions.php内になかったら追記してください。(既にあるサムネイルの大きさを使っても良いです。けど、今回のサンプルでは100×100pxのサムネイルを使用します。)
参考 関数リファレンス/add image size – WordPress Codex 日本語版
サムネイルの再生成
もしサムネイルを新たに作成するのであれば(add_image_sizeを追記した場合)、Regenerate Thumbnailsプラグインをインストールして、Wordpressダッシュボードの「ツール→Regenerate Thumbnailsを選択してください。
そして、「Regenerate All Thumbnails」ボタンを押してください。
WordPressのメディアに登録されている画像すべてに新しいサイズのサムネイルが作成されます。画像が多くある場合は、数十分~数時間かかります。
related-entries.phpファイルの作成と編集
single.phpに関連記事を表示するPHPコードを挿入しても良いのですが、コード量が多いためsingle.phpの可読性が下がるため、今回は別にテンプレートファイルを作成します。
カスタマイズするテーマ内にrelated-entries.phpというファイルを作成してください。
そのファイルに以下のように記入します。
<?php //カテゴリ情報から関連記事を10個ランダムに呼び出す $categories = get_the_category($post->ID); $category_ID = array(); foreach($categories as $category): array_push( $category_ID, $category -> cat_ID); endforeach ; $args = array( 'post__not_in' => array($post -> ID), 'posts_per_page'=> 10, 'category__in' => $category_ID, 'orderby' => 'rand', ); $query = new WP_Query($args); ?> <?php if( $query -> have_posts() ): ?> <?php while ($query -> have_posts()) : $query -> the_post(); ?> <div class="related-entry"> <div class="related-entry-thumb"> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"> <?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.png" alt="NO IMAGE" title="NO IMAGE" width="100px" /> <?php endif; ?> </a> </div><!-- /.related-entry-thumb --> <div class="related-entry-content"> <h4 class="related-entry-title"> <a href="<?php the_permalink(); ?>"> <?php the_title(); //記事のタイトル?> </a></h4> <p class="related-entry-snippet"> <?php echo mb_substr( strip_tags( $post->post_content ), 0, 70 ) . ''; //記事本文の抜粋を70文字だけ取り出す?></p> <p class="related-entry-read"><a href="<?php the_permalink(); ?>">記事を読む</a></p> </div><!-- /.related-entry-content --> </div><!-- /.new-entry --> <?php endwhile;?> <?php else:?> <p>記事はありませんでした</p> <?php endif; wp_reset_postdata(); ?> <br style="clear:both;">
同カテゴリの記事からランダムに10個取り出し、関連記事とします。
参考 関数リファレンス/WP Query – WordPress Codex 日本語版&Stinger3コード
single.phpの編集
single.phpの記事下などで、作成したテンプレートを呼び出します。
挿入したい場所に、以下のコードを記入してください。
<div id="related-entries"> <h3>関連記事</h3> <?php include( TEMPLATEPATH . '/related-entries.php' ); ?> </div><!-- #related-entries -->
style.cssの編集
最後に、スタイルを整えて終わりです。
/**************************************** 関連記事(Relation) *****************************************/ #related-entries h3{ font-size:24px; } #related-entries .related-entry{ line-height:150%; margin-bottom:20px; clear: both; } #related-entries .related-entry-thumb { float: left; margin-bottom: 5px; padding-bottom: 5px; } #related-entries .related-entry-content { margin-left: 120px; } .related-entry-title{ margin-bottom:5px; } .related-entry-snippet{ margin:0 0 5px 0; } .related-entry-read{ margin:0; font-size:12px; }
HTMLタグや、スタイルなどはサイトに合わせて変更してください。
まとめ
WordPressには、Yet Another Related Posts Plugin (YARPP)なんていう優れたプラグインもあります。
けれど、「なるべくプラグインを使いたくない」「少しでもサイトを軽くしたい」なんて時には、有効かと思います。
お世話になります。上記通りおこなったのですが、
サムネイルの画像の横の本文抜粋が下に落ちてしまいます。
何がいけないのでしょうか?
画像 タイトル
ここに余白が出てしまいます。
抜粋文字
続きを読む・・・
お手数ですが教えてください。