PHP

カテゴリ別のリスト状の記事一覧を表示する[WordPress]

過去のブログのアーカイブ
この記事は前身のブログのアーカイブを引き継いだものです． 画像が正しく表示できないなど，コンテンツの表示に問題がある恐れがあります．

私のブログはWordpressでしているのですが、書く記事のカテゴリーがバラバラな上に、投資とプログラミングという全く別の趣味ということもあり、投稿一覧で一緒に表示させてしまうのはなんか違うかなと…
というわけで記事一覧を一気にカスタムしてみました。

…という言い方すると語弊あるかもしれないですが、正確には記事一覧のページを新しく作るというものです。Exec-PHPとかでやってみようとも思ったのですが、やはり大きくカスタマイズするとなると限界があったりセキュリティリスクが出たりと…というわけでテンプレートページを新しく作り、固定ページとして表示しようと思います。
とりあえず私の大雑把な環境。
Wordpress: 4.0, テーマ: Hueman
テーマはHuemanです。大事なことなので2回書きました。この記事の内容はそのテーマに合わせて作っています。
各自のテーマにあったデザインにカスタマイズしましょう。
あとこの記事を書いている私自身、PHPの知識どころかHTMLの知識も怪しいぐらいです。あくまで参考までに、お願いします。

テーマの特徴

まずリスト上の投稿一覧を作る前に今使っているテーマの特徴を掴んでおく必要があります。というのも、既にリスト上の投稿一覧の表示方法があるかもしれません。私の方ではなかったですが。
Humanだと基本的な投稿一覧の表示はこのようになります。
hueman-article-list
このテーマはレスポンシブ対応デザインなので、幅を小さくすれば列も1列になります。便利ですねー
リスト状にする場合はレスポンシブを気にする必要はないと思います。
このテーマだと、記事の一覧を表示するときはget_template_part(‘content’);で呼び出されて表示しています。
これはテーマディレクトリにあるontent.phpを見れば表示するコードを見ることができます。

リスト状表示の下準備

完成図

完成図

まずは下準備をしましょう。style.cssの一番下にこのソースコードを追加しましょう。

/* content-mini */
.content-mini {
    width: 90%;
    padding: 0 5%;
    float: none;
    display: inline-block;
}
.content-mini .thum {
    float: left;
    padding: 0 10px;
}
.content-mini .title {
    float: left;
}

このcssはリスト表示をするための最低限のcssです。なのでデザインも質素、もう少し派手にしてもいいかも？
そしてテーマフォルダーにcontent-mini.phpを作り、このコードを追加します。
これはcontent.phpを改造したもの。サムネイルのサイズは48，48でこちらで指定しています。

<div class="content-mini">
	<div class="thum">
		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
				<?php if ( has_post_thumbnail() ): ?>
					<?php the_post_thumbnail(array(48,48)); ?>
				<?php elseif ( ot_get_option('placeholder') != 'off' ): ?>
					<img src="<?php echo get_template_directory_uri(); ?>/img/thumb-medium.png" alt="<?php the_title(); ?>" />
				<?php endif; ?>
		</a>
	</div>
	<div class="title">
		<h4><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>
			<span class="post-date"><?php the_time('j M, Y'); ?></span>
		<!--/.post-title-->
	</div>
</div><!--/.post-->

そしてテーマフォルダのpage-templatesフォルダの中にtop-page.phpを作り、下のコードをカスタマイズして保存してください。このコードは私のサイトの場合であり、他のサイトだと確実に正常に動作しないと思います。
query_posts(‘showposts=5&cat=3’);というところでカテゴリーの記事を取得しています。このcat=3のところがカテゴリーIDなのでこれを表示したいカテゴリーIDに置き換えてください。
カテゴリーの編集ページのURLからカテゴリーIDが分かります。
category-id

<?php
/*
Template Name: Top page
*/
?>
<?php get_header(); ?>
<section class="content">
  <?php get_template_part('inc/page-title'); ?>
  <div class="pad group">
    <h4>カテゴリ別</h4>
    <h5><a href="http://yryr.me/category/programming" title="カテゴリー: プログラミング">プログラミング</a></h5>
    <div class="post-list-mini">
      <?php
        query_posts('showposts=5&cat=3');
        while(have_posts()) :
          the_post();
          echo get_template_part('content-mini');
        endwhile;
        wp_reset_query();
      ?>
    </div>
    <h5>
      <a href="http://yryr.me/category/diary" title="カテゴリー: 日記">日記</a>
    </h5>
    <div class="post-list-mini">
      <?php
        query_posts('showposts=5&cat=6');
        while(have_posts()) :
          the_post();
          echo get_template_part('content-mini');
        endwhile;
        wp_reset_query();
      ?>
    </div>
    <div>
      メッセージ
    </div>
  </div>
  <!--/.pad-->
</section>
<!--/.content-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 まとめ

正直反省してます。この記事絶対わかりにくいですよね。
このコードで私のトップページはなりたってるので、私のサイトのトップページを気に入ってくれる方が本当にいるならば、参考にどうぞ

Recommend関連記事

関連記事は見つかりませんでした。