こんな条件で記事一覧を作りました。
記事の登録条件
- 記事一覧の抽出条件：投稿タイプとターム
（カスタム分類を条件に記事一覧を取得） - 一覧の表示場所：今年の一覧、年別アーカイブ
（一覧は年別表示） - 表示方法：ターム別タブ切り替え
（年別対応※アーカイブも） - 記事一覧では新着7日間はNewマークを表示（サイト内すべて）
- カスタムフィールドテンプレートで「TEXT」を作成し、TEXTに記述が無ければタイトルに記事へのリンクを付け、記述があればタイトルからはリンクせず要素内から手動でリンクを貼る。
文字に書くとよくわからないので画像にするとだいたいこうです。
ごちゃごちゃしていますね。
念のためコメントの無い画像もアップしてみました。（こちら）
まぁ、ごちゃごちゃしていますね。
準備
プラグインをインストール
- Custom Post Type UI
カスタム投稿タイプ用のプラグインです。 - Custom Field Template
カスタムフィールドテンプレート用のプラグインです。 - Shortcodes Ultimate
ショートコードでタブ等の装飾をあっという間に実装できるプラグインです。
色んなパーツをゴリゴリ書くのが面倒な時はスパパッと入れてしまうと良いと思います。 - WP-PageNavi
ページングが簡単に使えるプラグインです。
カスタムフィールドテンプレートに以下登録
テンプレートタイトル：記事抜粋（※ここはなんでもいい）
カスタムポストタイプ：information
テンプレートコンテンツ：
type = textarea rows = 4 cols = 40 tinyMCE = true htmlEditor = true mediaButton = true
カスタム投稿タイプに登録 ※（）内はスラッグ
投稿タイプ（post_type）：お知らせ（information）
└カスタム分類（taxonomy）：記事の分類（tax_group)
└ターム：猫の成長期（cats）、その他（other）
上記が設定出来たら動作確認の為、それぞれのタームに適当に記事を登録します。
「TEXT」に記入したりしなかったりしておけば、条件分岐の結果も確認しやすいです。
ここから記事一覧の取得
まず今年の記事だけを表示するページを作ります。
archive.phpだけで全部賄う方法を考える時間が無かったので固定ページ「お知らせ」を作ります。
functions.phpに記事の取得条件を書いたショートコードを登録します。
タームは「cats」と「other」があるので２つ登録が必要です。
まず一つ目「猫の成長期（cats）」用の内容をfunctions.phpに書き込みます。
非推奨なquery_postsで書いていてすみません。
function getList() {
global $post;
$oldpost = $post;
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$current_year = date('Y');
$current_month = date('m');
$myposts = query_posts(
array(
'posts_per_page' => '10',
'post_type' => 'information',
'paged' => $paged,
'year' => $current_year,
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'tax_group',
'terms' => 'cats',
'field' => 'slug',
'operator' => 'IN',
))));
if(have_posts()):
$retHtml='';
foreach($myposts as $post) :
setup_postdata($post);
$ctm = get_post_meta($post->ID, 'TEXT', true);
if(empty($ctm)):
$retHtml.='<h3 class="tit_info"><span class="info_date">'.get_post_time('Y/m/d').'</span><a href="'.get_permalink().'">'.the_title("","",false).'</a>';
$retHtml.=do_shortcode('[New]');
$retHtml.='</h3>';
else:
$retHtml.='<h3 class="tit_info"><span class="info_date">'.get_post_time('Y/m/d').'</span> '.the_title("","",false).'';
$retHtml.=do_shortcode('[New]');
$retHtml.='</h3><div class="entry-meta">'.post_custom('TEXT').'</div>';
endif;
endforeach;
if(function_exists('wp_pagenavi')) {
ob_start();
wp_pagenavi();
$retHtml.= ob_get_clean(); }
wp_reset_query();
$post = $oldpost;
return $retHtml;
endif;
}
add_shortcode("catList", "getList");
２つ目の「その他」の記事用は上記の内容を流用します。
今年の記事だけ表示させる為にWordPress Codexの「テンプレートタグ/query posts」で見つけたこの書き方↓を使うと、現在の年・月を表示し、query_posts で公開日が現在の年・月に該当する投稿を表示します。便利。
$current_year = date('Y');
$current_month = date('m');
query_posts( "year=$current_year&amp;amp;monthnum=$current_month" );
記事一覧でのカスタムフィールドへの記載の有無は26行目から35行目
この部分で判断して切り替えます。
前にこのページに書いたやり方ですね。
カスタムフィールドテンプレートで表示切替
$ctm = get_post_meta($post->ID, 'TEXT', true);
if(empty($ctm)):
$retHtml.='<h3 class="tit_announce"><span class="announce_date">'.get_post_time('Y/m/d').'</span><a href="'.get_permalink().'">'.the_title("","",false).'</a>';
$retHtml.=do_shortcode('[New]');
$retHtml.='</h3>';
else:
$retHtml.='<h3 class="tit_announce"><span class="announce_date">'.get_post_time('Y/m/d').'</span> '.the_title("","",false).'';
$retHtml.=do_shortcode('[New]');
$retHtml.='</h3><div class="entry-meta">'.post_custom('TEXT').'</div>';
endif;
記事投稿から14日間はタイトルの横にNew!マークを表示しようと思うので、4行目にショートコードを読み込む様にしておきました。
その為のショートコードはこれです。$daysの所の数字を変えれば日数が変更できます。
function getNew() {
$days=14;
$today=date('U');
$entry=get_the_time('U');$diff1=date('U',($today - $entry))/86400;
if ($days > $diff1) {return "\n" . '<span class="ico_new">New</span>' . "\n";}
}
add_shortcode('New', 'getNew');
次にアーカイブページ
archive.phpをコピーしてarchive-information.phpを作ればカスタム投稿タイプ「information」に投稿した記事のアーカイブはこのファイルを読み込んで表示してくれます。
タブ切り替えとか記事取得のコードはショートコードを使わずファイルに直接書き込みます。
この時、タブ切り替えのショートコードがうまく動かないので悩みましたが、先にダミーを動かしておけばhtmlに要素を直書きしても動いたので、こうしました。
<div style="display: none;"><?php echo do_shortcode('[su_tabs][/su_tabs]'); ?><!--ダミー--></div>
<div class="su-tabs su-tabs-style-default" data-active="1">
<div class="su-tabs-nav">
<span class="su-tabs-current" data-url="" data-target="blank">猫の成長期</span>
<span class="" data-url="" data-target="blank">その他</span>
</div>
<div class="su-tabs-panes">
<div class="su-tabs-pane su-clearfix" style="display: block;">
<!--猫の成長期-->
<?php global $wp_query;
$args1 = array_merge( $wp_query->query, array(
'showposts' => '-1',
'post_type' => 'information',
'tax_query' => array(
array(
'taxonomy' => 'tax_group',
'field' => 'slug',
'terms' => 'cats')
)));
query_posts($args1);
while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php $custom_fields = get_post_meta( $post->ID , 'TEXT' , true );
if(empty( $custom_fields ) === false){ ?>
<h3 class="tit_info"><span class="info_date"><?php echo get_post_time('Y/m/d'); ?>
<?php the_title( '</span>', '' );echo do_shortcode('[New]'); ?></h3>
<div class="entry-meta">
<?php echo get_post_meta($post->ID , 'TEXT' ,true); ?>
<!-- .entry-meta --></div>
<?php } else { ?>
<h3 class="tit_info"><span class="info_date"><?php echo get_post_time('Y/m/d'); ?></span><a href="<?php the_permalink(); ?>"><?php the_title( '', '</a>' );echo do_shortcode('[New]'); ?></h3>
<?php } ?>
<!-- #post-## --></article>
<?php endwhile; ?>
<!--.su-tab-pane--></div>
<div class="su-tabs-pane su-clearfix" style="display: none;">
<!--その他-->
※「その他」の方の記述をここに書く
<!--.su-tab-pane--></div>
<!--.su-tab-panes--></div>
<!--.su-tabs--></div>
1行目はダミー。これが無いとプラグインがうまく動かない。
うまくまとまっていない様に思いますが、これでやりたかった事は出来ました。
タブ切り替えや条件分岐なんていらなければarchive.phpにたった３行書くだけで終わったのに、考えるのしんどかった～～～
たった3行↓
<h3 class="tit_info"><span class="info_date"><?php echo get_post_time('Y/m/d'); ?></span>
<?php the_title(); ?></h3>
<div><?php echo post_custom('TEXT'); ?></div>
コメントを残す