多くのサイト、特にブログでは、写真、自己紹介文、他の投稿へのリンク、ソーシャルメディアのプロフィールなど、追加の情報を表示するためのサイドバーが設けられています。
このガイドでは、サイトエディターを使用してサイドバーを追加する方法について説明します。このガイドで説明する方法を使用するには、サイトエディターをサポートするテーマを使用する必要があります。
通常サイドバーの要素は、70/30のレイアウトの「カラム」ブロックを使用して追加でき、小さい方のカラムがサイドバーになります。
「外観 → サイトエディター」に進み、左上にある自分のサイトのアイコンをクリックし、「テンプレート」を選択します。 次に必要に応じて、次の手順を実��します。
- 「空白」テンプレートを選択します。
- 「+」ブロック挿入ボタンをクリックして「カラム」ブロックを挿入します。
- 2カラムのレイアウトを設定し、「70/30」を選択します。
- 小さい方のカラムに、サイドバーに表示したいブロックを追加します。
- 大きい方のカラムには、「投稿コンテンツ」 ブロックを追加します。これにより、後で空白のテンプレートを適用するページや投稿のコンテンツが動的に表示されます (ステップ7を参照してください)。
- 「保存」をクリックします。
- サイドバーを表示させるページや投稿を編集します。右側の設定で、「テンプレート」設定を探します。「空白」テンプレートを選択します。
これで、「空白」テンプレートを使用しているページや投稿で、ページや投稿のコンテンツの横にサイドバーが表示されるようになります。
「インデックス」テンプレートは、自分の投稿を表示するものです。「アーカイブ」テンプレートは、特定のカテゴリーやタグを含む投稿を表示します。このどちらかのテンプレートにサイドバーを追加すると、投稿ページや、カテゴリーページやタグページにサイドバーが表示されるようになります。
「外観 → サイトエディター」に進み、左上にある自分のサイトのアイコンをクリックし、「テンプレート」を選択します。その後、以下の操作を実行します。
- 「インデックス」テンプレートを選択します。
- 「リスト表示」から「クエリーループ」ブロックを選択し、「カラム」ブロックに変換します。
- 「カラム」ブロックの設定で、「カラム」ブロックを2カラムに設定します。
- 「リスト表示」で各カラムを選択し、一方を70%、もう一方を30% に設定します。
- サイドバーに表示するブロックを小さい方のカラムに追加します。
- 「保存」をクリックします。
同様に、「ページ」、「フロントページ」、「個別投稿」、「404」、「検索」などの他のテンプレートでもこの手順に従います。
再利用可能な「サイドバー」要素を作成するには、「テンプレートパーツ」ブロックとして保存して使用することをお勧めします。これにより、各テンプレートでゼロからサイドバーを構築するのではなく、完成したサイドバーを後で簡単に追加できるようになります。