公開日:2017年8月26日Plusers作成中のWordPressテーマのデモサイトはこちらindex.phpは、[home.php(トップページ)][category.php(カテゴリ別一覧ページ)][tag.php(タグ別一覧ページ)][archive.php(アーカイブ一覧ページ)][serch.php(検索結果一覧ページ)]が作成されていない場合に、代わりとなって表示される万能テンプレートです。WordPressで上記の記事の一覧を出力するためのテンプレートを作成していく際の、ベースとなるテンプレートでもあります。WordPressテーマ作成5では、記事情報を呼び出すためのループの記述方法とテーマのメイン部分であるindex.phpの作成方法についてご紹介いたします。CONTENTSメインループとサブループについて理解するメインループサブループindex.phpにコンテンツを追加するloop-content.phpを作成するloop-content.phpを呼び出すための記述を追加するindex.phpの記事一覧の各デバイスごとのデザインをCSSで反映する記事一覧のパソコン表示用のデザイン記事一覧のスマホ表示用デザイン記事一覧にページネーションを追加するページネーションの要素をindex.phpに追加するページネーション用のデザインをCSSで反映するメインループとサブループについて理解するindex.phpを作成する前に、記事の一覧を呼び出すためのwordpressのループについて理解しておきましょう。ループとは、WordPressのデータベースから記事のデータを抽出して表示する機能で、WordPressが自動的に処理を行うメインループと自分で抽出条件を選択するサブループが存在します。WordPressで自動的にページを生成する上で、ループは絶対に欠かせない存在なのでメインループとサブループに分けて理解しておきましょう。メインループメインループでは、呼び出されたURLなどから自動的にWordPressが必要なデータを判別し表示させるループです。表示させるコンテンツはWordPressが自動で判別するので、TOPページや記事ページ・カテゴリ、タグ、アーカイブページなどで使用します。?>』でループの処理を終了させましょう。1ページで表示する最大投稿数』で指定できます。サブループサブループは、WordPressのデータベースから抽出する記事の条件を任意に指定することができます。記事の属性や、呼び出す記事数など様々な条件を付けて呼び出すことができるので様々な場面で活躍します。サブループには、『WP_Query』『get_posts』『query_posts(非推奨)』の3つの形式がありますが、今回は一番取得できる情報量が多く複雑な処理が可能な『WP_Query』の使い方をご紹介します。?>『array()』の中の配列で、様々な記事の抽出条件を指定することで、好きな条件の記事を出力することができます。出力する記事の条件を指定するパラメーターについては、コーデックスに詳しく記述されていますので参考にしてください。Queryサブループを使用する場合は、ループ終了後に『wp_reset_postdata();』を記述して必ずループをリセットしてください。ループのリセット処理を行わないと、後のループに悪影響を与えてしまうので忘れないように注意しましょう。サブループを自動で作成できる『WordPressサブループ自動作成ツール』を公開しました。ページ・カスタムフィールドなど、様々な条件をセレクトボックスで選択するだけでサブループを出力するためのコードを自動で作成することができますので、ぜひ利用してみてください。WordPressサブループ自動作成ツールindex.phpにコンテンツを追加するindex.phpは、『WordPressレスポンシブテーマ作成1』でご紹介したように、トップページ・カテゴリ・タグ・検索結果ページなどの一覧ページを生成するためのファイルなので、WordPressに出力する記事情報を自動で選択させるために、メインループを使用します。?><!--ループ終了-->メインループをindex.phpに追加したら、続いてループ内にコンテンツを追加していきましょう。今回作成するWordPressテーマでは、一覧ページの記事情報に『サムネイル画像』『カテゴリ』『タイトル』『記事の投稿日』『記事の著者』『抜粋』を呼び出して表示させます。loop-content.phpを作成するループ内のコンテンツは、作成中のWordPressテーマ内に『loop-content.php』というファイルを新たに作成し、そこに記述していきます。これは、後の記事でご紹介する『home.php』や『archive.php』でコンテンツを共通化し、ソースコードを修正や追記した場合に一つのファイルを触るだけ済むようにするためです。※『loop-content.php』を作成しない場合は、『index.php』のループの中に直接記述してください。</a></article>上記のソースコードを追加することで、記事へのリンク付きで『サムネイル画像』『カテゴリ』『タイトル』『記事の投稿日』『記事の著者』『抜粋』を出力することができます。一つ一つの要素については下記の通りです。?>』で『article-list+各記事の情報』をclass属性として追加します。?>』とphpを記述することで、各記事のURLを自動で取得できます。?>画像は、各記事に設定されているアイキャッチ画像を自動で出力します。?>』で画像を中サイズで呼び出します。ソースコードの('medium')の部分で、呼び出す画像のサイズを指定することができます。『thumbnail』『medium』『large』『full』『空欄』のいずれかの値を指定してください。ページの呼び込み速度を上昇させるためにも適切なサイズで出力しましょう。アイキャッチ画像が無い場合は『no-image』という画像が出力されるように、作成しているWordPressのテーマ内のimagesフォルダ(headerのタイトル画像を挿入時に作成)に追加しておきましょう。追加した『no-image.gif』の画像が必要な方はご自由にお使いください。カテゴリの設定がある場合のみカテゴリ情報を出力するようにします。$postcat[0]->name;』で記事に設定されているカテゴリの名前を1つだけ出力します。class="text">というエリアを作成しています。?>』で呼び出します。ループ内の記事のタイトルは『h2』タグで出力されるようにします。?>">』で出力します。『()』の中で日付を好きな形式に変更することができます。フォーマット』で選択したものが表示されます。fa-clock"></i>』でfontawesomeの時計のアイコンを追加しています。ユーザー』から『ニックネーム』とブログ上の表示名を変更しておきましょう。?>』で出力することができます。呼び出された抜粋欄は『<p>~</p>』で囲まれた一つの段落として出力されます。loop-content.phpを呼び出すための記述を追加する編集が完了したら、『index.php』に『loop-content.php』を呼び出すための記述を追加します。?>要素がきちんと組み込まれていれば、下記の画像のように各記事の一覧が追加した要素付きで出力されます。(画像はTOPページ)要素の出力が完了したらCSSでデザインを整えていきましょう。index.phpの記事一覧の各デバイスごとのデザインをCSSで反映する記事一覧のパソコン表示用のデザインまずは、パソコン表示用のCSSから整えていきます。CSSでデザインを始める前に、contentsに要素を確認するために指定しているカラーと高さの一時設定を、非表示もしくは削除してください。1.7;}object-fitは、とても便利なCSSプロパティですがIEに対応していません。object-fitをIEにも対応させる方法は下記の記事で紹介しています。wordpressで画像のサイズをCSSで最適化してレスポンシブデザインに対応する今回は、記事が一つずつ縦に表示されるようにCSSを設定していますが、お好みに合わせて自由にCSSを調整してください。デモのCSSをそのまま記述して表示すると、上の画像のようなデザインになります。PC用のベースとなるデザインが整ったら、『@media』を使って各デバイスの表示を整えていきましょう。記事一覧のスマホ表示用デザインスマホ用のデザインを整えるときは、ブラウザのデベロッパツール(F12キー)を使ってスマホ版の表示を確認しながら作成すると便利ですよ。}}スマートフォン表示用のデザインでは、記事の抜粋を非表示に、サムネイル画像やフォントのサイズを調整しています。600px)』に記事リストのCSSのフックポイントを設定していますが、タブレットの表示など細かく調整したい場合は、フックポイントを増やしてCSSを追記してください。上記のCSSをそのまま記述するとスマートフォンでは上記の画像のように表示されます。記事一覧にページネーションを追加する記事の一覧が出力できたら、最新の記事だけでなく全ての記事をユーザーが見ることができるように、ページネーション(ページ送り)を作成しましょう。ページネーションの要素をindex.phpに追加するメインループで記事を出力するときに使用するページネーションは、WordPressのデフォルトの機能として搭載されている関数を使って出力します。paginate_links(~』でページネーションの機能を呼び出し配列(array)で詳細を指定します。'list'htmlタグのリストタグ(<ul><li><ul><li>)でページネーションを表示するように指定します。mid_size現在のページ番号の両隣に、何個ずつの数字を表示するかを指定することができます。prev_textとnext_textページネーションの最初と最後の表示を指定できます。今回は、fontawesomeのアイコンが出力されるように指定しています。上記のように、ページネーションの要素が出力されたら、きちんと動くか動作確認をしましょう。ページネーション用のデザインをCSSで反映する今回は、パソコン表示・スマホ表示共通でページネーション用のCSSを記述しています。#03162f;}CSSをそのまま反映すると、上記の画像のようにデザインが反映されます。好みに合わせて、サイズや色を調整してください。『記事の一覧』『ページネーション』がきちんと作成できたら、『index.php』の作成は完了です。カテゴリやタグページなどに出力するタイトル等の条件分岐は、後の記事で『index.php』を『archive.php』に分岐する際に詳しくご説明いたします。次回は、ユーザーに一番みられると行っても過言ではない『single.php』の作成方法についてご紹介します。下記より記事で作成したところまでのテーマファイルを下記よりダウンロードできます。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のディスクリプションの出力方法を変更しました。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のコードを修正しました。2019年9月21日WordPressテーマ作成の記事の内容をリニューアルしました。