公開日:2017年8月27日Plusers作成中のWordPressテーマのデモサイトはこちらsingle.phpは、『投稿ページ』を出力する際に参照されるブログの要とも言える重要なテンプレートです。WordPressでは、single.phpに要素を追加することで、投稿の本文を初めとしてカテゴリや投稿日・タグ・アイキャッチ画像など、投稿ごとに設定されている様々な情報を自由に出力することができます。ブログの見やすさを考えつつ、表示したい投稿の情報を自由にレイアウトして、あなただけの記事ページを作成しましょう。WordPressテーマ作成6では、WordPressテーマの中で一番重要だと言っても過言ではないsingle.phpの基本的な作成方法をご紹介します。※本記事は、基本的なsingle.phpの作成方法についてご紹介しています。SNSボタンや関連記事・広告などを出力する方法は、別途個別にご紹介しておりますので、カテゴリ『WPカスタマイズ』を参照してください。投稿の各デバイスごとのデザインをCSSで反映する投稿のパソコン表示用のデザイン投稿一覧のスマホ表示用デザイン固定ページ用のpage.phpを作成する投稿の要素を出力する今回は、最もスタンダードな『タイトル』『投稿日』『カテゴリ』『投稿の著者』『コンテンツ』『タグ』で構成されている投稿ページを作成します。『single.php』に投稿を出力するためのソースコードを追加しましょう。?>上記のソースを追加することで、『タイトル』『投稿日』『カテゴリ』『投稿の著者』『コンテンツ』『タグ』のコンテンツを出力することができます。『single.php』に出力する一つ一つの要素は下記の通りです。?>投稿の情報をリクエストされたURLに応じて自動で呼び出すためにメインループを使用します。?>』で『article-content+各投稿の情報』をclass属性として追加します。?>』という関数を使い、該当の投稿に設定しているカテゴリをリンク付きで出力しています。?>』で呼び出します。フォーマット』を変更するか、関数の引数に任意の日付のフォーマットを入力しましょう。今回は、検索エンジンに構造として日付を伝える『datetime=""』の中で使う場合は、引数『Y-m-d』を入れて出力を個別に指定し、文字列として出力する場合は、管理画面の設定が反映されるように空欄にしています。ユーザー』から『ニックネーム』とブログ上の表示名を変更しておきましょう。?>』というWordPress関数で出力します。?>』というWordPress関数で出力できます。src="~">)でソースが出力されます。?>』でサムネイル画像が設定されているかどうかの条件分岐を行いましょう。?>』というWordPress関数で取得、出力することができます。?>』は、ユーザーが管理画面で編集した投稿の内容に自動補正(<p>などを追加)を行い出力する関数です。?>』というWordPress関数を使用して出力してください。?>』というWordPress関数を使い、アーカイブへのリンク付きで全て出力します。『the_tags()』関数は、引数で同時に前後とタグとタグの間に出力する文字列を指定することができます。今回は、タグをリスト形式で出力するように引数を指定しています。投稿を出力するための基本的な要素の説明は以上です。自分がデザインした順番に合わせて出力する内容や順番を自由に変更して調整しましょう。要素がきちんと出力されたら、上記のように投稿ページに『single.php』に記述した要素が出力されます。投稿の各デバイスごとのデザインをCSSで反映する投稿の出力を確認したら、CSSを追加していきましょう。投稿のパソコン表示用のデザインまずは、パソコン表示用のCSSから整えていきます。.6;}投稿のCSSを記述するときは、『single.php』に記述した要素に加え、投稿を編集する際に使うであろうタグも一緒にデザインを追加しておきましょう。投稿は一番ユーザーに見られる部分なので、妥協せずに納得のいくまで調整してください。デモのCSSをそのまま記述して表示すると、上の画像のようなデザインになります。PC用のベースとなるデザインが整ったら、『@media』を使って各デバイスの表示を整えていきましょう。投稿一覧のスマホ表示用デザインスマートフォン用のデザインを整えるときは、ブラウザのデベロッパツール(F12キー)を使ってスマホ版の表示を確認しながら調整します。}}今回は、文字のサイズがスマホで表示したときに適切になるように微調整をするだけにしています。上記のCSSをそのまま記述するとスマートフォンでは上記の画像のように表示されます。以上で、single.phpの基本的な作成は完了です。SNSボタンや関連記事・広告を出力する場合は、各要素を好きな位置に追加していきましょう。固定ページ用のpage.phpを作成する投稿ページを作成したら、single.phpとは別に固定ページ専用のテンプレートを作成する必要があります。『single.php』をそのままコピーして『page.php』という名前のテンプレートをWordPressのテーマ内に作成しましょう。single.phpを複製してpage.phpを作成したら、固定ページを表示する際に必要のない物を省いていきます。固定ページは、お問合せページやプライバシーページなどを作成するときに使用する場合が多いページなので、『サムネイル』『投稿日』『カテゴリ』『投稿の著者』『タグ』などの流動的な情報を省きましょう。?>今回は、タイトルと記事本文だけというシンプルな構造で作成しています。必要に応じて要素を追加してください。page.phpはソースコードをsingle.phpと共有しているので、CSSの記述は特に必要ありません。?>』の『article-content』の部分の名前を別の名前に書き換えたり、独自のclass名を設定するなどして、投稿の記事用のCSSが固定ページに反映されないようにしてください。以上で、WordPressテーマの基本的な『single.php』と『page.php』の作成は完了です。次回は、検索エンジンやSNS拡散する際に、正確な情報を伝えるためのheadタグの中身を作成していきましょう。下記より記事で作成したところまでのテーマファイルを下記よりダウンロードできます。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のディスクリプションの出力方法を変更しました。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のコードを修正しました。2019年9月21日WordPressテーマ作成の記事の内容をリニューアルしました。