テーマ制作【基礎６】「記事の一覧ページを作る」

カテゴリごとの記事の一覧テンプレートを作る

news.htmlをcategory.phpにリネームします。

そして、記事の一覧を表示させるコードを書きましょう。

記事一覧の表示

<?php get_header(); ?>

  <!--メインここから-->
  <div class="main">
    <h2>ニュース</h2>
    <?php if (have_posts()) : ?>
    	<?php while (have_posts()) : ?>
		<?php the_post(); ?>
    		<h3><?php the_title(); ?></h3>
    		<?php the_content(); ?>
        <?php endwhile; ?>
    <?php endif; ?>
  </div>
  <!--メインここまで--> 

<?php get_footer(); ?>

一覧を表示するには以下のコードを記述します。

<?php if(have_posts()): ?>
	<?php while(have_posts()): //記事がある限り繰り返す　?>
		<?php the_post(); ?>
		<!-- ここに表示部分が入ります。-->
	<?php endwhile; ?>
<?php endif; ?>

記事のタイトルを読み込むコードがこちらです。

<?php the_title(); ?>

記事の内容を読み込むコードがこちらです。

<?php the_content(); ?>

記事一覧タイトルの表示

現在表示しているカテゴリー一覧ページのカテゴリータイトルを表示させます。

h2に入っている「ニュース」を削除し、代わりに「<?php single_cat_title(); ?>」をいれます。

<?php get_header(); ?>

  <!--メインここから-->
  <div class="main">
    <h2><?php single_cat_title(); ?></h2>
    <?php if (have_posts()) : ?>
    	<?php while (have_posts()) : ?>
		<?php the_post(); ?>
    		<h3><?php the_title(); ?></h3>
    		<?php the_content(); ?>
        <?php endwhile; ?>
    <?php endif; ?>
  </div>
  <!--メインここまで--> 

<?php get_footer(); ?>

カテゴリータイトルを読み込むコードがこちらです。

<?php single_cat_title(); ?>

個別記事ページに飛ぶリンクを入れる

個別記事ページに飛ぶためのリンクを入れるために、「<?php the_content(); ?>」の次の行に「<p><a href="">詳細はこちら</a></p>」を書き加えます。

「href=""」の中には「<?php the_permalink(); ?>」を入れます。

<p><a href="<?php the_permalink(); ?>">詳細はこちら</a></p>

個別記事に飛ぶためのパスを書き出すコードがこちらです。

<?php the_permalink(); ?>

<?php get_header(); ?>

  <!--メインここから-->
  <div class="main">
    <h2><?php single_cat_title(); ?></h2>
    <?php if (have_posts()) : ?>
    	<?php while (have_posts()) : ?>
		<?php the_post(); ?>
    		<h3><?php the_title(); ?></h3>
    		<?php the_content(); ?>
            <p><a href="<?php the_permalink(); ?>">詳細はこちら</a></p>
        <?php endwhile; ?>
    <?php endif; ?>
  </div>
  <!--メインここまで--> 

<?php get_footer(); ?>

本文の文字数を指定して表示

ブログではよく記事の一部だけの表示して、クリックしたら全てが表示されるようになっていますよね？

この記事一覧でも、表示する文字に制限を加えて、一部を表示するようにします。

「WP Multibyte Patch」というプラグインを使えば簡単に表示する文字の制限ができます。

管理画面のプラグインからインストールして有効化しましょう。

functions.phpを開き、以下のコードを加えます。

//「WP Multibyte Patch」というプラグイン有効になっていないと効かない
function new_excerpt_mblength($length) {
		return 54;//表示する文字数
}
add_filter('excerpt_mblength', 'new_excerpt_mblength', 999);

function new_excerpt_more($more) {
  return '...';//文章の末尾につく文字列
}
add_filter('excerpt_more', 'new_excerpt_more');

category.phpの「<?php the_content(); ?>」の部分を「<?php echo get_the_excerpt(); ?>」に書き換えます。

<?php get_header(); ?>

  <!--メインここから-->
  <div class="main">
    <h2><?php single_cat_title(); ?></h2>
    <?php if (have_posts()) : ?>
    	<?php while (have_posts()) : ?>
		<?php the_post(); ?>
    		<h3><?php the_title(); ?></h3>
		<?php echo get_the_excerpt(); ?>
            <p><a href="<?php the_permalink(); ?>">詳細はこちら</a></p>
        <?php endwhile; ?>
    <?php endif; ?>
  </div>
  <!--メインここまで--> 

<?php get_footer(); ?>

<?php echo get_the_excerpt(); ?>

コピーできました！