WordPress オリジナルテーマを作る 前後の記事へのリンク

始める前に、現在あなたのWordpressにはいくつの記事が投稿されていますか？「前後の記事へのリンク」とは、ブログでよくある「次の記事へ」「前の記事へ」といったようなナビゲーションのことです。つまり投稿された記事が複数ないと機能しないものです。

ですから、実際に機能させて作成していくために少し準備をします。
まずブログ全体で3記事以上になるようにし、足りない場合は仮のページでいいので作成してください。それから、ダッシュボードの設定から「表示設定」をクリックし、「1ページに表示する最大投稿数」という項目も、一時的に変更します。先ほどのとおりブログに3記事あるのなら、「1件」に設定すればいいでしょう。こうすることで、1ページに1件つまり1記事ずつ表示されるようになります。
そうなると、古い記事を見るためのページ、または新しい記事を見るためのページ、各々のリンクが必要になります。前後の記事へのナビゲーション、今回はそれを作成します。

まずは前のページ（古いの記事）へのリンクを表示するタグです。

Pick up

<?php next_posts_link() ?>

ですが、大抵はパラメータの値を入れることが多いです。パラメータの値とは、テンプレートタグのかっこ「()」の中身のことになります。
例えば、<?php next_posts_link('&laquo; 前のページ') ?>として使うと、リンクは「« 前のページ」というふうになります。<?php next_posts_link('&lt;&lt; Back') ?>としてみると、「<< Back」というようなリンクになります。お好みでアレンジしてみてください。

続いて次のページ（新しいの記事）へのリンクを表示するタグです。

Pick up

<?php previous_posts_link() ?>

こちらも同様に、パラメータの値でアレンジできます。
<?php previous_posts_link('次のページ &raquo;') ?>とすると「次のページ »」、<?php previous_posts_link('Next &gt;&gt;') ?>とすると「Next >>」というようになります。

先ほどのタグを、トップページのリンクも交えて（不要な方は消去）「index.php」に追加します。それからお好みで「style.css」で整えます。

編集: index.php

<?php get_header(); ?>

<div id="contents">

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<div class="entry">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry_main">
<?php the_content(); ?>
</div>
<p class="state"><?php echo get_the_date(); ?> <?php the_time(); ?>　　カテゴリー： <?php the_category(', '); ?></p>
</div>
<?php endwhile; endif; ?>

<div class="navi">
<?php previous_posts_link('&lt;&lt; 新しい記事へ'); ?>
│<a href="<?php echo home_url(); ?>">トップ</a>│
<?php next_posts_link('古い記事へ &gt;&gt;'); ?>
</div>

</div>

<?php get_footer(); ?>

編集: style.css

/* Theme Name: Custom Theme Author: 茶子 Author URI: https://wordpress.mofuh.com/ , http://basilcat.com/ Description: このテーマは実際に使っていただいて構いません。この冒頭の情報も含め、改変も商用もなんでも自由にどうぞ。でも違法はダメ。 Version: 1.0 */ * { margin: 0px; padding: 0px; } body { color: #666666; font-size: 14px; font-family: "ＭＳ Ｐゴシック",sans-serif; line-height: 160%; text-align: center; margin: 20px 0px; } h1 , h2 , h3 , h4 , h5 , h6 { font-size: 14px; font-weight: normal; } a:link { color: #f7bd6d; } a:visited { color: #f7bd6d; } a:active { color: #efdb75; } a:hover { color: #efdb75; } /* --- container --- */ #container { text-align: left; margin: 0px auto; width: 800px; } /* --- header --- */ #header { margin: 0px auto; padding: 20px; width: 760px; border: 1px solid #aaaaaa; } #header h1 { font-size: 15px; font-weight: bold; } /* --- contents --- */ #contents { margin-right: 20px; width: 580px; } /* --- entry --- */ .entry { margin-top: 20px; padding: 10px 15px; border: 1px solid #aaaaaa; } .entry_main { margin: 15px 5px; } /* --- navi --- */ .navi { text-align: center; margin: 15px 0px; }

これで下の画像のようになりました。
1ページに1記事表示され、複数の記事があればナビゲーションも表示されます。