WordPressのブロックテーマで投稿(記事詳細)ページを作成するためには以下のことを行います。
- 投稿記事用テンプレートを作成する
- 記事の内容を表示するブロックを設置する
- 記事を作成しアイキャッチなどの設定を行う
投稿用テンプレートはすべての記事を対象にしたり、記事ごとに違うテンプレートを作ることができます。
WordPressの標準ブロックを使って記事の作成も可能ですが、見出しやボタンなどのパターンテンプレートを使うことでもっとオシャレなページを作ることも可能です。
OrigamiUIでは投稿(記事詳細)ページによく使われるパターンテンプレートをたくさん用意していますのでぜひダウンロードしてみてください。
ここからは、Wordpressのブロックテーマで投稿(記事詳細)ページを作る方法を画面の画像付きで詳しく解説していきます。
ブロックテーマで投稿(記事詳細)ページを作成する方法
投稿記事用テンプレートを作成する
まずは投稿記事用のテンプレートを用意します。投稿記事用のテンプレートは以下のような方法で用意することができます。
- すでにあるものをカスタマイズして使う
- 新しくテンプレートを作成する
- 新しく特定の記事用のテンプレートを作成する
- カスタムテンプレートを作って記事ごとに選べるようにする
1つめはテーマをインストールした時点ですでにあるもの(「個別投稿」という名前のテンプレート)を使う方法。テンプレート名の右にある点々のアイコンをクリックして「編集」を選ぶとテンプレートの編集画面になるので、レイアウトなどをカスタマイズしてそのまま使うことができます。
2つめと3つめは新しくテンプレートを作成する方法。右上にある「テンプレート追加」というボタンを押ストテンプレートの種類を選ぶ画面が表示されます。
この中の「個別項目: 投稿」が投稿記事用テンプレートなのでこれを選びます。その次の画面ですべての記事で使用するか、特定の記事で使用するテンプレートを作るかを選びます。
4つめは自由に選べるテンプレートを作っておく方法。2つめと3つめは作成した時点で自動的にそのテンプレートが表示されますが(記事編集ページで変更可能)、カスタムテンプレートは手動で選ぶテンプレートです。
4つのどれかの方法でテンプレートを作成すると(作成したあと編集をクリックすると)、テンプレートの編集画面になるのでここに記事のタイトルやカテゴリ、日付、コンテンツなどのブロックを設置してレイアウトをカスタマイズしていきます。
記事の内容を表示するブロックを設置する
先ほどの作業でテンプレートを作成したら。次は記事テンプレートのレイアウトを作っていきます。
編集画面には自由にブロックを設置することができます。ブロックを設置するには、左上の「+」アイコンのついたボタンを押してブロック一覧から必要なものを選択します。
記事の編集画面で入力した内容をどのブロックで表示できるかは以下のようになります。
- タイトル: 記事のタイトルを表示
- 抜粋: 記事の抜粋を表示
- 投稿のアイキャッチ画像: アイキャッチ画像を表示
- コンテンツ: 記事の投稿内容を表示
- 投稿者: アバターや自己紹介を含む投稿者情報を表示
- 作成者名: 記事の作成者名を表示
- 日付: 投稿記事の作成日を表示
- 変更日: 記事の最終更新日を表示
- カテゴリー: 記事のカテゴリーを表示
- タグ: 記事のタグを表示
- 次(前)の投稿: 次(前)の投稿リンクを表示
デフォルトテーマにあるテンプレートでは以下のようなレイアウトで設置されています。
記事の内容の他に、コメントやクエリーループを使った新着記事の表示も可能です。
ブロックの配置はやること自体は簡単ですが、綺麗なデザインでレイアウトを作るのは結構大変な作業だと思います。OrigamiUIストアではコピペで使える記事テンプレートをたくさん用意しています。ゼロから作るよりも楽にレイアウトを作成できるのでぜひ活用してみてください。
記事を作成しアイキャッチなどの設定を行う
テンプレートができたらあとは記事を作成していくだけです。
記事のタイトルや内容は左のメインエリアで、それ以外の情報は右側のパネルで入力できます。
右側のパネルで「テンプレート」の横にあるテンプレート名をクリックすると、テンプレートオプションが表示されます。
ここでは以下のような操作が可能です。
- テンプレートを編集: 選択中のテンプレートを編集する
- テンプレートを変更: この記事で使用するテンプレートを変更する
- 新規テンプレートを作成: この記事で使用するテンプレートを作成する
- テンプレートを表示: 編集画面にテンプレートを表示する
カスタムテンプレートを作った場合は、このオプションでテンプレートを変更することができます。
テンプレートを表示を選択すると、実際のページで表示される画面をみながら記事を編集することができるようになります。ただ、ちょっとごちゃごちゃしてるのでこれはオフのままでもいいでしょう。
投稿記事内でボタンや見出しのパターンテンプレートを使うには？
投稿記事内でもエディターを使ったテンプレート編集と同じようにレイアウトブロックやボタンのブロックを設置することができます。
パターンテンプレートを設置するには、左上にある「+」アイコンのついたボタンを押して、表示されたパネルの上にある「パターン」タブを選択します。
マイパターンには自分で作ったパターンがまとめて表示されるのでこの中から必要なものを選びましょう。
ボタンなどのパターンテンプレートもOrigamiUIで多くの種類が登録されていて、簡単にコピーできます。
投稿ページにサイドバーを設置するには？
ブロックテーマの投稿ページにサイドバーを設置してバナーを表示したり、新着記事などを表示するには、投稿用テンプレートをカスタマイズします。
サイドバーを作るなら無料でレスポンシブ対応のレイアウトを作ることができるOrigamiUIプラグインを使うと便利です。
画像のように、上下にヘッダー、フッターを設置し、メインエリアに「コンテンツ」ブロックを含めた記事の内容を表示、サイドエリアにはバナー画像を設置することができます。
WordPressのブロックテーマ+OrigamiUIで自由なレイアウトでページを作成できます。
投稿ページでコメントを表示/非表示にするには？
投稿ページでコメントを表示するには以下のブロックを設置します。
- コメント
- コメントフォーム
さらにコメントブロック内ではコメントの日付やコメント本文、コメント作者名など細かい要素の設置も可能です。
それぞれの要素はレイアウトブロックでレイアウトをカスタマイズすることができます。
コメントを非表示にしたい場合はテンプレートからコメント部分を削除してください。
