WordPressの2カラムの固定ページテンプレート

目的

  • 固定ページテンプレートにサイドバー付の2カラムテンプレートを作成
  • WordPressのブロックエディタとFSE(フルサイト編集)操作に慣れる

固定ページテンプレートの使い分け

WordPressの「外観 > エディター > テンプレート」一覧には、
「固定ページ(1カラム)」と「固定ページ(2カラム・サイドバー付)」の2種類が存在することがあります。これは、表示レイアウトの違いを目的としたテンプレート分けです。

テンプレートの役割

テンプレート名特徴
固定ページ(1カラム)全幅レイアウト(サイドバーなし)
固定ページ(2カラム)サイドバー付きの2カラムレイアウト

BLOGページには「2カラムテンプレート」を使用

BLOGページでは、右側にサイドバー(カテゴリー・新着・タグなど)を表示したいため、
2カラムのテンプレート」を選んで使用します。

固定ページ2カラムを選択して編集画面に入ります。

固定ページ(2カラム)変更

タイトル部分の背景を他の固定ページと同様に変更

ドキュメント外観をクリックし、カラムを選択後、右側(サイドバーが入る場所)のカラムを選択しておきます。

カラム内の+をクリックし、ブロック>全てを表示します。ブロック一覧のスクロールを下げて「サイドバー(投稿)のテンプレートパーツ(紫色のアイコン)クリックします。右側のカラムにサイドバーが挿入されたら保存しておきましょう。

固定ページ「BLOG」の編集

画面右にある設定のテンプレートを「固定ページ2カラム」に変更しておきます。編集画面にはサイドバーが表示されませんが、プレビュー確認時には挿入されています。

  • クエリーループのブロックを選択
  • 区切り線
  • 投稿テンプレート内は、2カラムを設置
    左カラム:幅は40%程度が目安
    右カラム:残り60%
  • 左のカラムに投稿のアイキャッチ
    投稿のアイキャッチ画像」ブロックを追加
  • 右のカラムにタイトル(タイトルにリンクする)
    デフォルト
  • その下に、横並びで、日付・カテゴリ
  • 抜粋
  • 区切り線