固定ページを２つ作成し、役割を決める
この講座で新たに追加する、ブログ部分を作っていきましょう。
最初にブログ記事（投稿）の一覧を表示するためのページを作ります。
サイトのトップページと、記事一覧を分けたい時には少し工夫が必要です。
WordPressは元々、ブログの考え方が基本。
そのまま使うとトップページ＝記事一覧という考え方をしてしまいます。
そのため、今回のようなサイトを作る場合は「トップページと記事一覧ページは分けますよ」という設定をしてあげる必要があるのです。
その設定は、WordPress管理画面の設定 > 表示設定で行えます。
下図のように、ホ―ムページと投稿ページ（投稿一覧ページ）を分けたい場合は、固定ページを割り当てる仕組みになっています。
それぞれの欄に入れられるように、固定ページを追加しましょう！
固定ページの新規作成
固定ページの追加画面を開きます。
タイトル：ブログ
スラッグ：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とCSSのコーディングを工夫して、見た目を整えましょう。
html&CSSで調整する
まず、一番の問題の、記事のタイトルがくっついている部分。
これは記事１つ１つをsectionタグ、もしくは独立したコンテンツや記事を示すarticleなどのタグで囲うと良さそうです。
横並びにするdisplay: flex;なども指定したいので、CSSクラスを指定しておきましょう。
更に、内側も画像部分とテキスト部分をそれぞれdivタグで囲ってクラス名を付けます。
テキスト部分が寂しいので、ついでにWordPressの抜粋も表示させてみましょう。
<?php the_excerpt(); ?>を使うと、抜粋の出力ができます。
抜粋はWordPressが自動で作ってくれるほか、自分で概要などを入力することも可能です。
上図の構造に合うように、HTML部分を作ります。
index.php（完成!）
<?php get_header(); ?>
<main>
<section>
<h2>エドベースブログ</h2>
<?php while (have_posts()) : the_post(); ?>
<article class="postcard">
<div class="img">
<?php the_post_thumbnail( ); ?>
</div>
<div class="desc">
<a href="<?php the_permalink(); ?>">
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</a>
</div>
</article>
<?php endwhile; ?>
</section>
</main>
<?php get_footer(); ?>
左右横並びにするためにstyle.cssにスタイル指定も加えます。
PC幅でのスタイルは、メディアクエリよりも上に書いてください。
style.css
/* ブログ部分 */
.postcard {
display: flex;
}
.postcard .img {
flex: 1;
}
.postcard .desc {
flex: 3;
padding-left: 1rem;
}
もう一度、ブラウザで表示を確認します。
イメージした形になりました。
折角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