トップページに特定のカテゴリーの新着記事を表示するSANGO用のhome.phpを作ってみた

2019年6月7日2019年6月8日

タイトルの通り、SANGOの固定ページに特定のカテゴリーの新着記事を表示するテンプレートファイルhome.phpを作ってみました。

home.phpとは？

home.phpとは

home.phpはトップページ用に優先的に読まれるテンプレートです。home.phpはindex.phpより優先的に表示されます。

SANGOのデフォルトのトップページ用テンプレートではサイドバーありで投稿全体の新着記事が並ぶ形になっています。

トップページをオリジナルで作るとき、おすすめのカテゴリーの新着記事を並べて表示したいこともあると思います。手動で固定ページの投稿エリアやウィジェットにHTMLを書いておすすめカテゴリーとおすすめ記事を書く方法や記事末尾にあるもありますが、それだとページネーション付きの最新記事は表示されません。

トップページの出来上がりイメージ

出来上がりはこんな感じになります。表示したカテゴリーの新着記事は横長のカード型、全体の最新記事は縦長のカード型にしました。

home.phpを作る

ではhome.phpを作っていきます。

既存のindex.phpを複製してhome.phpを子テーマ内に作成

SANGOの既存のindex.phpを複製して別名(home.php)で保存します。

FTPソフトでhome.phpを子テーマのディレクトリにアップロード

FTPソフトの使い方はこちら。

index.phpファイルを複製して改変

SANGO既存のindex.phpをベースに利用します。

コード


<?php
          if(is_active_sidebar( 'home_top' )) dynamic_sidebar( 'home_top' );
          if(get_option('activate_tab')) {
            //タブありの記事一覧
            get_template_part('parts/home/post-tab');
          } else {
            //タブなしの記事一覧
            get_template_part('parts/post-grid');
          }
          if(is_active_sidebar( 'home_bottom' )) dynamic_sidebar( 'home_bottom' );
        ?>

この部分は全体の投稿の最新記事一覧を表示しています。この記述の上に特定カテゴリーの最新記事のサブループを追記していきます。

サブループ

特定のカテゴリー2つの新着記事表示をします。表示したいカテゴリーのスラッグは各自変更して下さい。

home.php


<!-- カテゴリー1新着記事一覧ここから-->
<div class="sidelong cf">
<h3 class="center strong top-title"><i class="fa fa-thumb-tack fa-fw"></i>表示したいカテゴリー1</h3>

<?php
$args = array(
             'posts_per_page' => 4, // 表示する投稿数
             'orderby' => 'date',
             'order' => 'DESC',
             'category_name' => 'gutenberg' // 表示したいカテゴリーのスラッグ
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
	while ( $the_query->have_posts() ) : $the_query->the_post();
?>

                <article class="sidelong__article">
                        <a class="sidelong__link" href="<?php the_permalink() ?>">
                            <p class="sidelong__img">
                                <img src="<?php echo featured_image_src('thumb-160'); ?>" alt="<?php the_title(); ?>">
                            </p>
                            <div class="sidelong__article-info">
                                <?php if(!get_option('remove_pubdate')):?>
                                <time class="updated entry-time dfont" datetime="<?php the_time('Y-m-d'); ?>"><?php echo get_post_time('Y.m.d D');?></time>
                                <?php endif; ?>
                                <h2><?php the_title(); ?></h2>
                                <?php if(function_exists('scc_get_share_total') && get_option('snscount')) echo ' <span class="count-btn yokonaga">' . scc_get_share_total() . 'shares</span>';?>
                            </div>
                        </a>
                        <?php 
                newmark();
                 if(!is_archive()) output_catogry_link();  
        ?>
                </article>
<?php endwhile; endif; ?>
</div>
<?php wp_reset_postdata(); ?>
<!-- カテゴリー1新着記事一覧ここまで -->
<!-- カテゴリー2新着記事一覧ここから-->
<div class="sidelong cf">
<h3 class="center strong top-title"><i class="fa fa-thumb-tack fa-fw"></i>表示したいカテゴリー2</h3>
<?php
$args2 = array(
             'posts_per_page' => 4, // 表示する投稿数
             'orderby' => 'date',
             'order' => 'DESC',
             'category_name' => 'ameblo-custom' // 表示したいカテゴリーのスラッグ
         );
$the_query2 = new WP_Query($args2);
if ( $the_query2->have_posts() ) :
	while ( $the_query2->have_posts() ) : $the_query2->the_post();
?>

<article class="sidelong__article">
                        <a class="sidelong__link" href="<?php the_permalink() ?>">
                            <p class="sidelong__img">
                                <img src="<?php echo featured_image_src('thumb-160'); ?>" alt="<?php the_title(); ?>">
                            </p>
                            <div class="sidelong__article-info">
                                <?php if(!get_option('remove_pubdate')):?>
                                <time class="updated entry-time dfont" datetime="<?php the_time('Y-m-d'); ?>"><?php echo get_post_time('Y.m.d D');?></time>
                                <?php endif; ?>
                                <h2><?php the_title(); ?></h2>
                                <?php if(function_exists('scc_get_share_total') && get_option('snscount')) echo ' <span class="count-btn yokonaga">' . scc_get_share_total() . 'shares</span>';?>
                            </div>
                        </a>
                        <?php 
                newmark();
                 if(!is_archive()) output_catogry_link();  
        ?>
</article>
<?php endwhile; endif; ?>
</div>
<?php wp_reset_postdata(); ?>
<!-- カテゴリー2新着記事一覧ここまで -->

CSSで調整

表示の調整のためstyleタグでcssを追記します。

home.php


<style>
 .sidelong__img {
    width: 100px;
    height: 100px;
}
.sidelong__article .cat-name {
    top: 0;
    right: 0;
    left: auto;
    padding: 0 5px;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
    border-radius: 0;
}
.top-title {
    margin: 0 6% 1.5em 0;
    width: 94%;      
}
@media only screen and (min-width: 1030px) {
#divheader.maximg,.maximg {
    width: 92%;
    max-width: 1180px;
}
 .page .d-5of7 {
     padding-right: 0.75em;
}
}
</style>