目的
こんな感じで、2列でいい感じに表示させたい。
方法
1. テンプレートの作成
下記のコードを、themes > simplicity2-child配下に配置。
page-home.php
<?php
/*
Template Name: カテゴリ別新着記事一覧
*/
?>
<?php get_header(); ?>
<div id="list" class="pain">
<!-- 記事一覧 -->
<?php
// 取得したいカテゴリ名を指定
$show_category_name = array("日記", "開発", "勉強");
foreach ($show_category_name as $cat_name) {
$cat_id = get_cat_ID($cat_name);
if(!$cat_id) continue;
$cat = get_category($cat_id);
echo "<div class=\"entry-card-2pain\">";
$args = array(
'posts_per_page' => 5, //表示したい記事数
'offset' => 0,
'category' => $cat_id,
'category_name' => '',
'orderby' => 'date',
'order' => 'DESC',
'include' => '',
'exclude' => '',
'meta_key' => '',
'meta_value' => '',
'post_type' => 'post',
'post_mime_type' => '',
'post_parent' => '',
'author' => '',
'post_status' => 'publish',
'suppress_filters' => true
);
$posts_array = get_posts( $args );
echo "<h1 class=\"{$cat->slug}\"><a href=\"https://blog.kuromusubi.com/{$cat->slug}/\">{$cat_name}</a></h1>";
foreach ( $posts_array as $post ) : setup_postdata( $post );
get_template_part_card('entry-card-2pane');
endforeach;
wp_reset_postdata();
echo "<a href=\"https://blog.kuromusubi.com/{$cat->slug}/\" class=\"btn\">more</a>";
echo "</div>";
}
?>
</div>
<a href="https://blog.kuromusubi.com/all" class="btn">すべての記事 一覧</a>
<?php get_footer(); ?>
取得したいカテゴリを配列で指定して、ループでクルクル回すだけの簡単な処理です。
カテゴリ数があんまりに多いと時間かかるかもしれないけど、一般的には大丈夫でしょう。
カテゴリIDの指定は面倒なので、文字列でカテゴリ名を指定できるようにした。
カテゴリ名はリンクできるようにして、カテゴリの新着記事を一通り出力したら、そのカテゴリの一覧表示へのリンクも表示。
さらに最下部には、全体の新着記事の一覧表示(=初期設定のトップページ)へのリンクを表示。
2. 固定ページを作成
固定ページ > 新規追加 で固定ページを作成する。
- ページ名
任意 - 固定ページの属性 > テンプレート
「カテゴリ別新着記事一覧」
3. フロントページに設定
設定 > 表示ページ を開く
- ホームページの表示
「固定ページ」をチェック - ホームページ
「カテゴリ別新着記事一覧」
5.エントリーカード部分のコードを編集entry-card-content-2pane.php を新規作成
親テンプレートのentry-card.phpの内容をコピーして、
子テーマのフォルダ内にentry-card-content-2pane.phpを新規作成。
私の場合はカテゴリごとにちょっと色を変えたかったので、下のようにしました。
<?php //エントリーカードのコンテンツ部分のテンプレート
//通常のエントリーカードクラス
$entry_class = 'entry-card-content';
//通常のエントリーカードの場合以外
if ( is_list_style_large_cards() ||
//最初だけ大きなエントリーカードの最初のエントリーだけ
( is_list_style_large_card_just_for_first() && is_list_index_first() )
)
$entry_class = 'entry-card-large-content';
?>
<div class="<?php echo $entry_class; ?>">
<header>
<h2><a href="<?php the_permalink(); ?>" class="entry-title entry-title-link" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p class="post-meta <?php $cat = getMainCat(get_the_id()); echo $cat["slug"];?>">
<?php if ( is_create_date_visible() ): //投稿日を表示する場合?>
<span class="post-date"><span class="fa fa-clock-o fa-fw"></span><span class="published"><?php the_time( get_theme_text_date_format() ) ;?></span></span>
<?php endif; //is_create_date_visible?>
<?php get_template_part('category-link');//カテゴリーリンク?>
<?php //インデクスにタグを表示したい場合コメントアウト
//the_tags( '<span class="tag"><span class="fa fa-tags fa-fw"></span>', ', ', '</span>'); ?>
<?php //コメント数を表示するか
//var_dump(get_comment_open());
if ( is_comments_visible() && is_list_comment_count_visible() && is_comment_open() ):
$comment_count_anchor = ( get_comments_number() > 0 ) ? '#comments' : '#reply-title'; ?>
<span class="comments">
<span class="fa fa-comment"></span>
<span class="comment-count">
<a href="<?php echo get_the_permalink() . $comment_count_anchor; ?>" class="comment-count-link"><?php echo get_comments_number(); ?></a>
</span>
</span>
<?php endif ?>
</p><!-- /.post-meta -->
<?php get_template_part('admin-pv');//管理者のみにPV表示?>
</header>
<?php if ( get_theme_text_read_entry() ): //「記事を読む」のようなテキストが設定されている時 ?>
<footer>
<p class="entry-read"><a href="<?php the_permalink(); ?>" class="entry-read-link"><?php echo get_theme_text_read_entry(); //記事を読む ?></a></p>
</footer>
<?php endif; ?>
</div><!-- /.entry-card-content -->
<p class="entry-snippet"><?php echo get_the_custom_excerpt( get_the_content(''), get_excerpt_length() ); //カスタマイズで指定した文字の長さだけ本文抜粋?></p>
14行目で、その記事が属するカテゴリーを取得してクラスに設定。
(getMainCat関数は別なときに作成した関数)
レイアウトの関係で、本文の位置も47行目に移動。
entry-card-2pane.php を新規作成
親テンプレートのentry-card.phpの内容をコピーしてきて
ファイル名をentry-card-2pane.phpにして、
24行目でentry-card-content-2paneを読み込むように書き換え。
<?php //投稿一覧リストのループ内で呼び出されるエントリーカード ?>
<?php
<article id="post-<?php the_ID(); ?>" <?php post_class('entry cf'.(is_list_style_large_thumb_cards() ? ' entry-large-thumbnail' : '').(is_list_style_tile_thumb_cards() ? ' entry-tile' : '').( is_entry_card_style() ? ' entry-card' : '')) ?>>
<figure class="entry-thumb">
<?php if ( is_entry_card_style() ): //デフォルトのエントリーカード表示の場合?>
<?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
<a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'thumb100', array('class' => 'entry-thumnail', 'alt' => '') ); ?></a>
<?php else: // サムネイルを持っていない ?>
<a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" class="entry-thumnail no-image list-no-image" /></a>
<?php endif; ?>
<?php else: //大きなサムネイルカードの場合?>
<?php if ( has_post_thumbnail() ): // サムネイルを持っているとき
//サムネイル画像の縦横比を保存するかどうかで取得するサムネイルを変化
$thumb = ( is_list_style_tile_thumb_cards_raw() ? 'thumb320_raw' : 'thumb320') ?>
<a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail($thumb , array('class' => 'entry-thumnail', 'alt' => '') ); ?></a>
<?php else: // サムネイルを持っていないとき ?>
<a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image-320.png" alt="NO IMAGE" class="entry-thumnail no-image list-no-image" /></a>
<?php endif; ?>
<?php endif; ?>
</figure><!-- /.entry-thumb -->
<?php //エントリーカードのコンテンツ部分を呼び出す
get_template_part('entry-card-content-2pane') ?>
</article>
4.CSSを設定
いい感じにCSSを設定。
(※ ↓lessです)
/* トップメニューの記事の詳細の文字サイズ */
p.entry-snippet {
font-size: 90%;
}
/* トップページ 2ペイン用 */
@entry-card-imagesize: 50px;
div.pain, #sidebar-widget .widget_new_entries {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
div.entry-card-2pain {
width : 45% ; /* IE8以下とAndroid4.3以下用フォールバック */
width : -webkit-calc(~'50% - 20px') ;
width : calc(~'50% - 20px') ;
margin: 10px;
}
h1{
position: relative;
margin-bottom: 1em;
text-align: center;
background-color: none;
&:after {
content: '';
position: absolute;
bottom: -15px;
display: inline-block;
width: 100%;
height: 5px;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: black;
border-radius: 2px;
}
&.diary:after{
background-color: @diary;
}
&.development:after{
background-color: @development;
}
&.study:after{
background-color: @study;
}
}
.entry {
margin-bottom: 1rem;
}
.entry-thumb img {
width: @entry-card-imagesize;
height: @entry-card-imagesize;
}
.entry-card-content {
margin-left: @entry-card-imagesize + 5px;
header {
font-size: 0.6em !important;
.post-meta {
font-size: 1.2em;
}
}
}
.entry-snippet {
clear: both;
}
}
@media screen and (max-width: 800px) {
div.pain div.entry-card-2pain {
width : 90% ; /* IE8以下とAndroid4.3以下用フォールバック */
width : -webkit-calc(~'100% - 20px') ;
width : calc(~'100% - 20px') ;
}
}
9-19行目で、幅を計算して2ペイン表示にして、
74-80行目で、スマホサイズの時に1ペイン表示にするように設定。
PHP側で自動でカテゴリslugをクラスに追加しているので、
CSSでそれぞれの色を指定。
かんせーーい。
コメント