Simplicityの記事の下に最新記事を掲載する方法

WordPressテーマ「Simplicity」では記事の下に関連記事を掲載する機能が標準搭載されています。
当サイトではさらに最新記事も表示できるように改造しましたのでその方法を紹介します。

2017年8月28日: アイコンが定義されていない時の例外エラーを修正しました。

概要

このサイトでも使用しているWordPressテーマ「Simplicity」で記事の下に最新記事を掲載する方法を紹介します。記事の最後まで行った読者に最新記事を伝えられることで直帰率の減少が期待できます

CSSの設定

style.cssに次の記述をします。小テーマの使用をおすすめします。

#new-entries-buttons h3{ font-size:23px; border-bottom:5px solid #e7e7e7; padding:10px 0; }

新しいテンプレートファイルの追加

テンプレートフォルダに「new-entries-buttons.php」を追加し、下記のコードを保存します。小テーマの使用をおすすめします。このコードはSimplicityの「related-entries.php」と「related-entries-thumbnail.php」を加工して統合したものです。

<?php //Simplicityの記事の下に最新記事を掲載する方法 //https://masshiro.blog/simplicity-latest/ //タイトル設定(「新着記事」から変更したい場合のみ入力) // →例: '最新記事' $title_new = ''; //表示数設定(関連記事の設定から変更したい場合のみ入力) // →例: '2' $entry_count = ''; //表示タイプ設定(関連記事の設定から変更したい場合のみ入力) // →例: 'default'   デフォルト(推奨表示数3-10) // →例: 'thumbnail'  サムネイル3列(推奨表示数3, 6, 9)または、4列(推奨表示数4, 8, 12) //  →3列か4列かはテーマカスタマイズ設定に依存(CSS依存のため)。 $entry_type = ''; ?> <?php if(!$title_new)$title_new='新着記事'; if(!$entry_count)$entry_count=get_related_entry_count(); if(!$entry_type)$entry_type=is_related_entry_type_default(); ?> <div id="new-entries-buttons"> <h3><?php echo $title_new; ?></h3> <?php query_posts('posts_per_page='.$entry_count); //表示数クエリの作成?> <?php if ( have_posts() ): ?> <?php if ( $entry_type == 'default' ) : //デフォルトの場合 ?> <?php while ( have_posts() ) : the_post(); ?> <div class="related-entry"> <div class="related-entry-thumb"> <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"> <?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail( 'thumb100', array('class' => 'related-entry-thumb-image', 'alt' => get_the_title()) ); ?> <?php else: ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" class="no-image related-entry-no-image" /> <?php endif; ?> </a> </div><!-- /.related-entry-thumb --> <div class="related-entry-content"> <h4 class="related-entry-title"><a href="<?php the_permalink(); ?>" class="related-entry-title-link" title="<?php the_title(); ?>"><?php the_title();?></a></h4> <p class="related-entry-snippet"> <?php echo get_the_custom_excerpt( $post->post_content, get_excerpt_length() ) . ''; ?></p> <?php if ( get_theme_text_read_entry() ): ?> <p class="related-entry-read"><a href="<?php the_permalink(); ?>"><?php echo get_theme_text_read_entry(); ?></a></p> <?php endif; ?> </div><!-- /.related-entry-content --> </div><!-- /.elated-entry --> <?php endwhile;?> <?php else : // サムネイルの場合 ?> <?php while ( have_posts() ) : the_post(); ?> <div class="related-entry-thumbnail"> <div class="related-entry-thumb"> <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"> <?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail( 'thumb150', array('class' => 'related-entry-thumb-image', 'alt' => get_the_title()) ); ?> <?php else: ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" class="no-image related-entry-no-image" /> <?php endif; ?> </a> </div><!-- /.related-entry-thumb --> <div class="related-entry-content"> <h4 class="related-entry-title"><a href="<?php the_permalink(); ?>" class="related-entry-title-link" title="<?php the_title(); ?>"><?php the_title();?></a></h4> </div><!-- /.related-entry-content --> </div><!-- /.elated-entry-thumbnail --> <?php endwhile; ?> <?php endif; ?> <?php //記事が存在しない時 else : echo '<p>'.get_theme_text_not_found_message().'</p>';//記事は見つかりませんでした endif; ?> <?php wp_reset_query(); //クエリを戻す ?> </div><!-- /#related-entries-buttons -->

テーマファイルの編集

投稿記事に挿入する場合

テーマファイル「single.php」に下記のコードを追加します。小テーマの使用をおすすめします。

<?php get_template_part('new-entries-buttons'); //最新記事を表示 ?>

場所は24行目「<?php if ( is_ads_under_relations_enable() ){」の真上がおすすめです。

固定ページに挿入する場合

テーマファイル「page.php」に下記のコードを追加します。小テーマの使用をおすすめします。

<?php if ( is_page() )://固定ページのときのみ表示 ?> <section id="under-entry-body"> <?php get_template_part('new-entries-buttons'); //最新記事を表示 ?> </section> <?php endif;//is_page ?>

場所は44行目「</div><!– .page –>」の真下がおすすめです。

カスタマイズ

カスタマイザーの設定

「new-entries-buttons.php」で何も設定しなければ、カスタマイザーの「レイアウト(投稿・固定ページ)」の「関連記事表示タイプ」、「関連記事数」通りに設定されます。

カスタマイザーの設定

new-entries-buttons.phpの設定

「new-entries-buttons.php」の4-14行目にある設定項目を変更すれば関連記事設定と異なる設定が出来ます。

実行結果

下記の通り関連記事の下に新着記事が表示されます。当サイトはサイドバーを設けていませんが、新着記事への誘導が可能になりました。

デフォルト

デフォルト

サムネイルのみ

サムネイルのみ

コメント