WordPressで投稿した記事の一覧ページを作る【WordPress制作入門講座】

この講座で新たに追加する、ブログ部分を作っていきましょう。
最初に記事一覧のページをつくります。

• 固定ページを２つ作成し、役割を決める
• 固定ページの新規作成
• メニューに「ホーム」と「ブログ」を追加
• index.phpを編集する
• index.phpのベースを作る
• アイキャッチを有効にする
• ループを書く
• html&CSSで調整する
• ★cssを更新しても反映されない時は

固定ページを２つ作成し、役割を決める

ブログ記事（投稿）の一覧を表示するためのページを作ります。

サイトのトップページと、記事一覧を分けたい時には少し工夫が必要です。
WordPressは元々、ブログの考え方が基本。
そのまま使うとトップページ＝記事一覧という考え方をしてしまいます。

そのため、今回のようなサイトを作る場合は「トップページと記事一覧ページは分けますよ」という設定をしてあげる必要があるのです。

その設定は、WordPress管理画面の設定 > 表示設定で行えます。
下図のように、ホ―ムページと投稿ページ（投稿一覧ページ）を分けたい場合は、固定ページを割り当てる仕組みになっています。
それぞれの欄に入れられるように、固定ページを追加しましょう！

固定ページの新規作成

固定ページの新規追加画面を開きます。

タイトルを「ブログ」
URLスラッグに「blog」
と入力して、公開してください。

もう一度、固定ページの新規追加。
タイトルに「ホーム」と入力して、公開します。

管理画面左メニューの設定 > 表示設定を開いてください。
ホームページの表示を、下図のように変更します。

ページ下部にある「変更を保存」ボタンで保存してください。

メニューに「ホーム」と「ブログ」を追加

ヘッダーナビゲーションのリンクを完成させましょう。

管理画面左メニューの設定 > 表示設定を開きます。
メニュー項目から、追加したページ２つを選択して追加します。

必要に応じて並び替えて、メニューを保存してください。

これで最初の構想通りのメニューが表示されるようになりました。
固定ページを割り当てたので、トップページのタイトル（タブに表示される文字）部分も「ホーム」になりましたね。

index.phpを編集する

下準備は整いました。
index.phpを編集して、記事の一覧が表示されるようにしましょう。

index.phpのベースを作る

今のindex.phpは確認のために、適当な記述をしていますね。
page-form.phpの中身を丸ごと張り付けてしまいましょう。

mainタグに付いているクラス、トップ画像は要らないので削除します。
h2の文言は「エドベースブログ」に変えましょう。

index.php

<?php get_header(); ?>

    <main>
      <section>
        <h2>エドベースブログ</h2>
          <?php while (have_posts()) : the_post(); ?>
            <?php the_content(); ?>
          <?php endwhile; ?>
      </section>
    </main>

<?php get_footer(); ?>

一旦、上書き保存して、ブログのページを見てみましょう。
下図のように、前回作ったテスト投稿が表示されます。

index.phpに戻ります。
今書かれている指示は<?php the_content(); ?>。
投稿の本文部分を出力せよ、です。
ここを変更すれば、記事一覧を作れそうですね。

アイキャッチを有効にする

作成中のテーマ、実はまだアイキャッチ機能が使えません。
投稿の追加/編集画面を開いても、アイキャッチの欄が消えてしまっているはずです。

アイキャッチの機能も「メニュー」と同じく、functions.phpに記述しなくては使用できない機能です。functions.phpに下記の２行を追加すると有効化できます。

メニューの時に書いた記述の下に入れましょう。
functions.php全体は、下記のコードになります。

functions.php（完成!）

<?php 
  add_theme_support('menus');
  register_nav_menus( );

  add_theme_support('post-thumbnails');
  set_post_thumbnail_size(200, 200 );
?>

functions.phpを上書き保存。
投稿エディタを開き直すと、アイキャッチの項目が表示されます。

ループを書く

index.phpで表示させたいのは、記事の一覧です。

固定ページを作る時、<?php while ~> という記述をしました。
この whileで囲う書き方を“繰り返し処理”や“ループ処理”、whileタグに挟まれた部分をループ内などと言い表します。

ループ内を書き換え、アイキャッチ画像+投稿タイトルが表示されるようにしましょう。使用するWordPressタグは、下記の３つです。

投稿のアイキャッチ画像を表示する

<?php the_post_thumbnail( ); ?>

投稿のURLを（文字列として）出力する

<?php the_permalink(); ?>

投稿のタイトルを表示する

<?php the_title(); ?>

とりあえずループ内に入れてみましょう。
ただし<?php the_permalink(); ?>はそのまま書くと、http://edbase.local/%e3%83%86%e3%82%b9%e3%83%88%e3%81%a7%e3%81%99/のように、URLがそのまま文字として表示されてしまいます。

リンクとして機能するように、aタグの中に入れてあげましょう。

index.php

<?php get_header(); ?>

  <main>
    <section>
      <h2>エドベースブログ</h2>
        <?php while (have_posts()) : the_post(); ?>
          <?php the_post_thumbnail( ); ?>
          <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>
          </a>
        <?php endwhile; ?>
    </section>
  </main>

<?php get_footer(); ?>

上書き保存して、表示画面で確認してみましょう。

うーん…。
あと一歩、というところですね。
別の投稿である「Hello world」がくっついて表示されてしまっています。

ループ内のHTML部分を少し作り込んでみましょう。

html&CSSで調整する

「Hello world」がくっつかないようにするためには、記事１つ１つをsectionタグで囲って、回り込まないようにすると良さそうです。

上図の構造に合うように、HTML部分を作ります。

index.php（完成!）

<?php get_header(); ?>

  <main>
    <h2>エドベースブログ</h2>
    <?php while (have_posts()) : the_post(); ?>
      <section class="section">
        <div class="image">
          <?php the_post_thumbnail( ); ?>
        </div>
        <div class="desc">
          <h3>
            <a href="<?php the_permalink(); ?>">
              <?php the_title(); ?>
            </a>
          </h3>
        </div>  
      </section>
    <?php endwhile; ?>
  </main>

<?php get_footer(); ?>

左右横並びにするためにstyle.cssにスタイル指定も加えます。
PC幅でのスタイルは、メディアクエリよりも上に書いてください。

style.css

.section{
  display: flex;
}

.image{
  flex: 1;
}

.desc{
  flex: 3;
}

スマホ幅では縦並びになるようにしましょう。

もう一度、ブラウザで表示を確認します。
イメージした形になりました。

折角style.cssを開いているので、管理バーのところも直しましょう。
ulタグに対して「display:flex」と指定している部分、
セレクタを<header>タグの中にある<ul>タグという書き方に変えます。

そうすると、管理バーの右側も黒い部分に収まります。

★cssを更新しても反映されない時は

WordPressの制作を行っていると、style.cssを上書き保存してリロードしたのに表示画面が変わらない…ということが起こります。

これは、ブラウザの“キャッシュ”という機能によるもの。
ブラウザはページを早く読み込むために、同じサイトで使われているjsやcssファイルの情報を一時的に保存しています。毎回、全ファイルを読み込まずに記憶しているものを再利用しているのです。

このためstyle.cssを更新しても、ブラウザは自分が保存している情報を使おうとして、更新が反映されないという状態になることがあります。

Google Chromeには、キャッシュ分も更新して再読み込みをする（スーパーリロード）ショートカットが用意されています。
cssを上書きしたのに反映されない、という場合は、下記のショートカットを使ってリロードしてみてください。

• Mac：Command + Shift + R
• Windows：CTRL + Shift + R