WordPressTip’s～テンプレートファイルindex.phpの概要を表示する方法

index.phpに必要な構成要素

index.phpにはどんな要素が必要でしょうか？
今回は次のように考えてみました。
・記事概要
・ページネーション
・カテゴリーリスト
・ウィジット（新着記事・おすすめ記事・人気記事）
全部このページで扱うと長くなってしまうので「index.phpの書き方〜全編〜」では「記事概要」「ページネーション」を扱います。
別途「index.phpの書き方〜後編〜」のページを追加し、そちらで「カテゴリーリスト」「ウィジット（新着記事・おすすめ記事・人気記事）」について書くようにします。
という事で後編もまたご覧下さい。
まずは「記事概要」「ページネーション」の書き方を説明していきます。説明が必要な方、物足りない方は「2.～」もご覧下さい。

記事概要を表示する

<!--記事があれば概要を表示-->
<?php if ( have_posts() ) : ?>
  <!--1記事づつ読み込んでいく-->
  <?php while ( have_posts() ) : the_post(); ?>
    <article>
      <!--更新日を表示-->
      <time><?php the_modified_date() ?></time>
      <!--タイトルを表示-->
      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <!--アイキャッチ画像を表示-->
      <?php if( has_post_thumbnail() ): ?>
        <a href="<?php the_permalink(); ?>">
          <?php the_post_thumbnail(); ?>
        </a>
      <?php endif; ?>
      <!--抜粋を表示-->
      <?php the_excerpt(); ?>
      <!--記事ページへのリンクを表示-->
      <a href="<?php the_permalink(); ?>">記事を読む</a>
    </article>
    <?php endwhile; ?>

<!--記事が無ければsorry-->
<?php else : ?>
  <p>Sorry, no posts were found!</p>
<?php endif; ?>

//アイキャッチ画像を有効化
add_theme_support('post-thumbnails');

//文字長さを制限する
function my_length($length) {
  return 100;
}
add_filter('excerpt_length','my_length');

//↑で制限した文章の末に付与する文字を指定する
function my_more($more) {
  return '...';
}
add_filter('excerpt_more','my_more');

↑の2種類のコード群により記事概要が表示出来ます。後は、適当なタグで囲み、クラスを付け、CSSで装飾させて使って下さいね。
詳細の説明が欲しい方、時間のある方は次の項も読んでもらえたらいいな。と思います。

記事抜粋の表示文字数を制限する

デフォルトでの表示文字数は55文字に設定されています。ので変更の必要が無ければ、この設定は不要です。

functions.phpに関数を2つ追加します。
1つ目：add_filter()関数
2つ目：文字数を返すコールバック関数X（Xには任意の名前をつける）
まずは1つ目の関数が↓です。

  add_filter('excerpt_length', 'my_length', 999);

「add_filter()」WordPress固有の関数で、functions.phpにコードを書きます。
この関数には4つの引数がありますが、ここで使用しているのは3つのみ。↓がその引数を表しています。

  add_filter( string $hook_name, callable $callback, int $priority = 10, int $accepted_args = 1 )

add_filterの引数を解説。

add_filter()

WordPress固有の関数。フィルターフック関数とコールバック関数をバインド(連動)させ、WordPressの設定に修正を加えます。

string $hook_name

WordPress固有の関数である、フィルターフックの名前を入力。「excerpt_length」というフック名を入力。

callable $callback

任意で作成したコールバック関数の名前を入力。今回は「my_length」という関数名を入力。別途コードを書きます。

int $priority = 10

このフィルターフック関数の実行タイミングに対するプライオリティ（優先順位）を入力。値が小さい程、先に実行される。（既定値は10）999として実行タイミングを後にする。

int $accepted_args = 1

引数の数を入力。（既定値は1）この値は省略する。

excerpt_length

WordPress固有のフィルターフック関数の名前。抜粋を表示する際の文字数を設定するフック。コールバック関数からリターンされた文字数を適用させる。（補足：コールバック関数の引数として現在設定されている文字数を渡す）

指定した文字数が反映されない時、$priorityの数値が小さくないか？確認してみて下さい。早々に反映し終わり、その後で書き換えられている可能性があります。
add_filterの詳細は↓をご覧下さい。
add_filter (WORDPRESS Codex日本語版)

2つ目の関数が↓

  function my_length($length) {
    return 100;
  }

except_lengthフックに連動させるコールバック関数です。
引数を$lengthで受け取ります。この$lengthには現在セットされている文字数が渡されます。
メモ：この引数の値は使いません。送られてくるので受け取っているのみ。名前も$lengthの必要は無い。が、どこをみてもこの名前になっているので、そういうもの。と考えています。
必ずリターンで文字数を返します。その数値がexcept_lengthに渡り、セットされます。
以上で抜粋に対する文字数制限の変更が可能となります。

記事抜粋の文末に付与する文字を指定する

デフォルトでの表示文字は[･･･]に設定されています。ので変更の必要が無ければ、この設定は不要です。

functions.phpに関数を2つ追加します。
1つ目：add_filter()関数
2つ目：文字数を返すコールバック関数X（Xには任意の名前をつける）
まずは1つ目の関数が↓です。

  add_filter('excerpt_more','my_more',999);

「add_filter()」WordPress固有の関数で、functions.phpにコードを書きます。
この関数には4つの引数がありますが、ここで使用しているのは3つのみ。引数については説明済みですので「add_filterの引数を解説」をご覧下さい。

excerpt_more

WordPress固有のフィルターフック関数の名前。抜粋の文末に表示する省略を表す文字（記号）を設定するフック。コールバック関数からリターンされた文字（記号）を適用させる。（補足：コールバック関数の引数として現在設定されている文字（記号）を渡す）

指定した文字（記号）が反映されない時は、$priorityの数値を大きい数値に変更してみて下さい。実行タイミングが遅らせられるので、その後の書き換えを防ぐ事が出来ます。

2つ目の関数が↓

  function my_more($more) {
    return '...';
  }

excerpt_moreフックに連動させるコールバック関数です。
引数を$moreで受け取ります。この$lmoreには現在セットされている文字（記号）が渡されます。
メモ：この引数の値は使いません。送られてくるので受け取っているのみ。名前も$moreの必要は無い。が、どこをみてもこの名前になっているので、そういうもの。と考えています。
必ずリターンで文字（記号）を返えす様に作ります。その値がexcept_moreフックが実行された際に適用されます。
以上で抜粋文末の文字（記号）変更が出来ます。

アイキャッチ画像を有効化する

デフォルトではアイキャッチ画像の機能は無効化されていますので、有効化させます。

functions.phpに↓の関数を1つ追加します。

add_theme_support('post-thumbnails');

add_theme_support（string  $ feature、 mixed  $ args  ）

add_theme_support()について

add_theme_support

WordPress固有の関数。$featureで指定された、WordPressテーマ向け機能を有効化させる。

string $ feature

WordPressテーマ向け機能に関わるテンプレートタグを入力。今回はpost-thumbnailsを入力し、テーマでのアイキャッチ画像利用を有効化。

mixed $args

オプションの為、使わない場合は入力を省略可能。今回は使用しない。

「post」「page」「movie」などを「array( ‘post’, ‘page’ )」と配列に入れて渡す。アイキャッチ画像を、指定したタイプでのみ使用する事が出来る。

これでWordPressダッシュボード（管理画面）で記事を作成する際、アイキャッチ画像の機能を使う事が出来ます。
また、the_post_thumbnail()を使い、アイキャッチ画像の表示を行える様になります。
add_theme_supportの詳細は↓をご覧下さい。
add_theme_support (WORDPRESS Codex日本語版)

記事があるか確認をする

まずは、そもそも記事はあるの？の確認から。
記事があれば表示させる。
無ければ「ありません」と表示させます。

<!--記事があれば概要を表示-->
  <?php if ( have_posts() ) : ?>
    ・・・
  <!--記事が無ければsorry-->
  <?php else : ?>
    <p>Sorry, no posts were found!</p>
  <?php endif; ?>

have_posts()について

WordPress固有の関数。表示させる記事が有るのか？調べ。有れば「true」無ければ「false」を返えします。

have_postsの詳細は↓をご覧下さい。
have posts (WORDPRESS Codex日本語版)

ループを使い1記事づつ表示させる

whileループの中で、複数の記事から1つの記事をセットし、その記事データから必要な情報を取り出していきます。
それを記事の数分繰り返させます。

<?php while ( have_posts() ) : ?>
  <?php the_post(); ?>
　  ・・・
<?php endwhile;　?>

まとめると↓になります。

<?php while ( have_posts() ) : the_post(); ?>
  ・・・
<?php endwhile; ?>

再び登場した「have_posts()」。もちろん先程同様に記事があるか？を確認しています。ですがこの場合、全ての記事を表示した事を判定するのがお役目です。
表示する記事が無くなればfalseを返し、whileループか抜け出します。
複数の記事をどう切り替え、どう次の記事へ進めて行くのか？

the_post()について

ループ内で使用します。「次の記事」を表示出来るようにセットするテンプレートタグです。ので、ループの度に次の記事をセットし、データを取り出せる様に準備します。

the_post()の詳細は↓をご覧下さい。
the post (WORDPRESS Codex日本語版)

ここでどうしても気になったのはthe_post()が次の記事をセットする。という事。
じゃあループに入り、最初はどうなってるの？いきなり次の記事に行ってしまったら、最初の記事を飛ばし、2番目の記事から初めてしまうのでは？
と気になり調べて見た所
global変数の$wp_queryの$wp_query->current_postには「記事のインデックス」が保存されており、今のクエリ状態の「何番目の記事を表示させるか？」を表しています。
記事のインデックスが「0」であれば「最初の記事」、「1」であれば「2番目の記事」です。
また、このcurrent_postの初期値は「-1」に設定されています。
その為、the_post()を実行する事で、インデックスが次に移され「0」となり、最初の記事が表示されるのです。

さらにhave_posts()はどうやって記事の終わりを判断するのか？
やはり$wp_query->current_postの数値を見ています。と同時に
$wq_query->post_countも見ています。
post_countには今のクエリ状態での記事数が入っています。ので、この2つの数値を比べて記事がまだ残っているのか？確認をしています。

という事で、ここまでのコードをまとめると、基本の形は↓です。

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  　・・・ここで1記事づつ表示する・・・
<?php endwhile; else : ?>
<p>Sorry, no posts were found!</p>
<?php endif; ?>

記事概要を表示する

上記までの工程を踏み、ループの中、the_post()より後ろに記事抜粋を表示するコードを書きます。

 <?php the_excerpt(); ?>

the_excerpt()について

WordPressの抜粋に入力した文章を表示するテンプレートタグ。抜粋文章が無ければ記事の本文から表示。制限文字数のみ表示され、オーバーした部分は[…]などに置き換えられます。※ループ内で使用する事。

the_excerpt()の詳細は↓のリンク先をご覧下さい。
the_excerpt (WORDPRESS Codex日本語版)

記事タイトルを表示する

ループの中、the_post()より後ろに記事タイトルを表示するコードを書きます。

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

the_title()について

該当記事のタイトルを表示するテンプレートタグ。※ループ内で使用する事。

the_permalink()について

該当記事のをURLを出力するテンプレートタグ。※ループ内で使用する事。

the_title()の詳細は↓のリンク先をご覧下さい。
the_title (WORDPRESS Codex日本語版)
the_permalink()の詳細は↓のリンク先をご覧下さい。
the_permalink (WORDPRESS Codex日本語版)

記事の更新日を表示する

ループの中の、the_post()より後ろに記事更新日を表示するコードを書きます。

<time><?php the_modified_date() ?></time>

the_modified_date()について

該当記事の更新日を表示するテンプレートタグ。※ループ内で使用する事。

the_modified_date()の詳細は↓のリンク先をご覧下さい。
the_modified_date (WORDPRESS Codex日本語版)

記事のアイキャッチ画像を表示する

ループの中、the_post()より後ろに記事のアイキャッチ画像を表示するコードを書きます。

<?php if( has_post_thumbnail() ): ?>
	<a href="<?php the_permalink(); ?>">
	  <?php the_post_thumbnail(); ?>
	</a>
<?php endif; ?>

has_post_thumbnailでアイキャッチ画像があるか？を確認。あるならthe_post_thumbnailで画像を表示させます。またthe_permalinkを使ってリンクを設定しました。

has_post_thumbnail()について

該当記事のアイキャッチ画像があるか？の確認に使います。あればtrueを返します。

the_post_thumbnail()について

該当記事のアイキャッチ画像を表示するテンプレートタグ。※ループ内で使用する事。

has_post_thumbnail()の詳細は↓のリンク先をご覧下さい。
has_post_thumbnail (WORDPRESS Codex日本語版)

the_post_thumbnail()の詳細は↓のリンク先をご覧下さい。
the_post_thumbnail (WORDPRESS Codex日本語版)

記事へのリンクボタンを表示する

ループの中、the_post()より後ろに記事へのリンクボタンを表示するコードを書きます。

<a href="<?php the_permalink(); ?>">記事を読む</a>

先程も出てきましたthe_permalink()で該当記事へのURLを取得しhrefの値としリンクを作っています。（the_permalink()については先の文章に説明を書きましたので、省略します）