ワードプレス、Stinger3のテンプレをカスタマイズしたので、メモ。
特定の固定ページを作って、その固定ページの下にプラグインなしで、特定のカテゴリの記事一覧を表示させるカスタマイズです。
順を追ってメモしてありますが、結局やらなくていい作業もあったりするので、一応最後まで全部読んでから作業にとりかかってください。
また、わたしも自分のstinger3のテンプレですでにカスタマイズしてある部分をカスタマイズしてあったり、バージョンが違うと、いろいろ違う部分もあるかもしれないので、あらかじめご了承ください。
そして、あくまで自分のための覚え書きなので、質問されてもよくわからんところ多数だと思うので、おかしくなっても大丈夫なように、必ずバックアップとって、自己責任でお願いします。おかしくなったから、直してって言われても無理ですよ！！
記事のうち特定のカテゴリの一覧を表示させるカスタマイズ
まず、投稿一覧の中から特定のカテゴリに属する一覧を表示させるカスタマイズをしました。参考にさせていただいたのは、こちらの記事。
▶ [WP]WordPress で固定ページに記事一覧を出力する方法のまとめ
この中で、2番目に書かれている、「固定ページに特定のカテゴリの記事を10件表示」のタグを利用します。
<?php $paged = get_query_var('paged'); ?>
<?php query_posts("cat=1&posts_per_page=10&paged=$paged"); ?>
<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
…
<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
子テンプレで固定ページテンプレート (page．php)を作成
わたしは、子テンプレを作ってカスタマイズしているので、まず、固定ページの子テンプレがなかったので、作成します。
作成した子テンプレを確認すると、一番下が、
<div class="blog_info contentsbox"> ・・・・ <?php endwhile; else: ?> <p>記事がありません</p> <?php endif; ?> <!--ループ終了--> </div> <!-- END div.post --> <?php get_footer(); ?>
となっています。
タグの貼り付けとカテゴリID修正
6行目のループ終了と、8行目の＜／div＞の間に、先ほどの「「固定ページに特定のカテゴリの記事を10件表示」のタグ」を貼り付けます。
<div class="blog_info contentsbox">
・・・・
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
<!--ループ終了-->
<?php $paged = get_query_var('paged'); ?>
<?php query_posts("cat=1&posts_per_page=10&paged=$paged"); ?>
<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
…
<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
</div>
<!-- END div.post -->
<?php get_footer(); ?>
その際、2行目のcat=1の部分の1というのがカテゴリIDで、どのカテゴリを表示させるかというのを制御しています。ここを表示させたいカテゴリの番号に修正します。
カテゴリIDは、管理画面で該当カテゴリの編集ページを開くと、ブラウザのURL部分にURLが表示されますが、そのURLで、「tag_ID=」のあとに表示されるのがカテゴリIDです。
サムネイルつき一覧を表示させる
これでうまく稼働していれば、固定ページを見ると、下の方に、ドットがいくつか並んだ状態になっていると思います。
これを記事下の関連記事のテンプレを使って、もうちょっと見栄えよくしていきたいと思います。
単一記事の投稿（single．php）というテンプレートを開いて、記事下の関連記事コードを確認します。
<dl>
<dt> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" />
<?php endif; ?>
</a> </dt>
<dd>
<h4 class="saisin"> <a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h4>
<p class="basui">
<?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 50 ) . ''; ?></p>
<p class="motto"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
</dd>
</dl>
この部分が関連記事出力部分なので、先ほどのループ出力内にはりつけます。
<div class="blog_info contentsbox">
・・・・
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
<!--ループ終了-->
<?php $paged = get_query_var('paged'); ?>
<?php query_posts("cat=1&posts_per_page=10&paged=$paged"); ?>
<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
<dl>
<dt> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" />
<?php endif; ?>
</a> </dt>
<dd>
<h4 class="saisin"> <a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h4>
<p class="basui">
<?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 50 ) . ''; ?></p>
<p class="motto"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
</dd>
</dl>
<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
</div>
<!-- END div.post -->
<?php get_footer(); ?>
体裁を整える
これでも出力されていますが、ちょっと、デザインがおかしくなっています。
なので、まず、dlの上下をdivタグで囲みます。
<div class="sumbox02">
<div id="topnews">
<div>
</div>
</div>
</div>
挿入するとこうなります。
<div class="blog_info contentsbox">
・・・・
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
<!--ループ終了-->
<?php $paged = get_query_var('paged'); ?>
<?php query_posts("cat=1&posts_per_page=10&paged=$paged"); ?>
<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
<div class="sumbox02">
<div id="topnews">
<div>
<dl>
<dt> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" />
<?php endif; ?>
</a> </dt>
<dd>
<h4 class="saisin"> <a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h4>
<p class="basui">
<?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 50 ) . ''; ?></p>
<p class="motto"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
</dd>
</dl>
</div>
</div>
</div>
<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
</div>
<!-- END div.post -->
<?php get_footer(); ?>
これでもまだおかしいので、もう一つ上のdivもつけます。6行目のループ終了のあとに、これを付け加えて、
<div class="kizi02">
<!--関連記事-->
<h4 class="kanren">関連記事</h4>
41行目のphp end if のあとにこれを付け加えます。
</div> <!--/kizi--> <!--/関連記事-->
結果、こうなる。
<div class="blog_info contentsbox">
・・・・
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
<!--ループ終了-->
<div class="kizi02">
<!--関連記事-->
<h4 class="kanren">関連記事</h4>
<?php $paged = get_query_var('paged'); ?>
<?php query_posts("cat=1&posts_per_page=10&paged=$paged"); ?>
<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
<div class="sumbox02">
<div id="topnews">
<div>
<dl>
<dt> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" />
<?php endif; ?>
</a> </dt>
<dd>
<h4 class="saisin"> <a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h4>
<p class="basui">
<?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 50 ) . ''; ?></p>
<p class="motto"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
</dd>
</dl>
</div>
</div>
</div>
<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
</div>
<!--/kizi-->
<!--/関連記事-->
</div>
<!-- END div.post -->
<?php get_footer(); ?>
これで、全固定ページの直下に指定したカテゴリの記事一覧が表示されてるはずです。多分。
特定の固定ページに表示させる
さらに、この記事一覧を全固定ページにではなく、特定の固定ページに表示させるカスタマイズです。
参考にさせていただいたのは、こちらの記事です。ありがとうございます！
▶ wordpressで特定のページのみに条件分岐して「特定の要素」を表示させる方法
このタグを使います。
<?php
if(is_page('about')):
get_template_part('banner');
endif;
?>
もしかすると、別テンプレにしなくてもできる方法があるのかもしれませんが、タグの書き方がよくわからんので、とりあえず、先ほど作った記事一覧のタグを別テンプレ化します。
<div class="kizi02">
<!--関連記事-->
<h4 class="kanren">関連記事</h4>
<?php $paged = get_query_var('paged'); ?>
<?php query_posts("cat=1&posts_per_page=10&paged=$paged"); ?>
<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
<div class="sumbox02">
<div id="topnews">
<div>
<dl>
<dt> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" />
<?php endif; ?>
</a> </dt>
<dd>
<h4 class="saisin"> <a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h4>
<p class="basui">
<?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 50 ) . ''; ?></p>
<p class="motto"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
</dd>
</dl>
</div>
</div>
</div>
<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
</div>
<!--/kizi-->
<!--/関連記事-->
そうですね、たとえば、これをhogehoge．phpというphpファイルにして、子テンプレフォルダにアップロードします。
そうすると、先ほどのタグを利用して、固定ページaboutにhogehogeファイルを表示させようとすると・・・
<?php
if(is_page('about')):
get_template_part('hogehoge');
endif;
?>
となります。
これを先ほどのテンプレ部分に突っ込むと、
<div class="blog_info contentsbox">
・・・・
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
<!--ループ終了-->
<?php
if(is_page('about')):
get_template_part('hogehoge');
endif;
?>
</div>
<!-- END div.post -->
<?php get_footer(); ?>
となります。
これで、多分完成。
