前回まででheader.phpの作成が完了しました。 これからindex.phpなどの作成を行うにあたり、ループタグで呼び出すためのカテゴリー・タグ・投稿が必要となります。
今回は動作確認用の記事を作っていきましょう。
1.仮のsingle.phpを作る
まだ作成中のテーマフォルダにsingle.phpがありません。 記事が投稿できているか確認するため、仮のsingle.phpを作っておきましょう。
1. single.phpを作成する
index.phpをコピーして、single.phpを作ります。 全選択からのコピペでも、エディターの「名前を付けて保存(別名で保存)」でも、方法はなんでも構いません。
2. 不要な部分を削除
single.phpはindex.phpそのまま。 必要がないコードを削除しておきましょう、
mainタグ部分を丸ごとコメントアウト、もしくは削除してください。
3. 記事情報を出力する
<div class="row">の直下に、下記コードを張り付けてみましょう。
表示する記事の title（タイトル）と content（投稿本文）を表示します。
<?php while (have_posts()) : the_post(); ?>
<article>
<?php the_title(); ?>
<?php the_content(); ?>
</article>
<?php endwhile; ?>
single.php
これで、投稿した記事が確認できるようになります。
2.ブログ記事を投稿する
bootstrapの課題で作った記事ページの内容を、
そのままワードプレスのエディターに移していきましょう。
エディターのサイド部分で、以下の３つを設定しておいてください。
- カテゴリーを入れる（無ければ新規作成する）
- ヘッダー出力用の抜粋文を入れる
- アイキャッチ画像を入れる
記事トップに表示されていた画像は入れなくても構いません。
プレビューで見て、記事内容が表示されていればOKです。
公開設定で保存してください。
※注意！
この時点では、またindex.phpから投稿記事へのリンクは出来ていません。 投稿した記事の表示を確認したい場合は、プレビュー、もしくは管理画面>投稿から「表示」をクリックして開いて下さい。
3.記事を増やす
2で記事を一つ作成しましたが、記事一覧下のページ送り（ページナビ）、サイドバーに表示予定のタグ一覧などを確認するにはもう少し記事が欲しいところです。
そんなときに役立つのが記事のテストデータ。 こちらこちらで配布されている「theme-test-data-ja」などを活用することであっという間にサンプル記事を沢山表示させることが出来ます。 タイトルが長い記事、youtube動画を埋め込んだ記事、など色々なバリエーションがありますので、テーマを作っていく中での調整目安にもなりますよ。
下記ではテストデータをWordPressにインポートする方法をご紹介します。
※ご自身で記事を作成されても構いません。 その場合はタグをいくつか作成し、投稿記事に登録しておいてください。
テストデータを使う場合
theme-test-data-jaの配布ページを開き、フォルダをダウンロードします。
解凍してフォルダの中を見ると、いくつかのファイルが入っています。 使用するのは「wordpress-theme-test-date-ja.xml」というXMLファイルのみです。
WordPress管理画面からツール>インポートの画面を開きます。
下の方に「WordPress」の項目があります。その下の方に「インポーターの実行」もしくは「今すぐインストール」という文字が表示されます。インポーターをインストールされていない方は、まず指示に従ってインポーターをインストールして下さい。
インストール完了後、もしくは「インポーターの実行」をクリックで、下図のようなインポート画面に移ります。
「ファイルの選択」をクリック。
ダウンロードしてきたフォルダ内にあるwordpress-theme-test-date-ja.xmlを選び、「ファイルをアップロードしてインポート」をクリックしましょう。
投稿者の割り当て画面が出ます。 こちらは変更しても良いですし、空のままでも問題ありません。
ページ下に移動して「添付ファイルをダウンロードしてインポートする」にチェック。
「実行」ボタンをクリックします。
少し経つと下図のようなインポート結果を表示する画面に移ります。
この画面が表示されたらインポートは完了。 記事一覧のページで見てみると、記事・カテゴリー・タグなどが読み込まれています。
これで投稿記事などをループで表示させることが出来るようになりました。
ここまでのレッスンで作成した部分までを「レッスンの素材一覧」にアップロードしています。 見直しや確認用にご利用ください。