投稿フォーマットを利用して記事ごとにレイアウト変更

ブログの記事が増えていくと、この記事はもっと幅を広げて表示したい、この記事はサイドバーを表示したくない、など、記事ごとにレイアウトを変えたくなりませんか？直接記事を指定してカスタマイズしても良いのですが、この記事では「投稿フォーマット」を利用して何種類か記事のレイアウトをあらかじめ作っておく方法をご紹介します。

投稿フォーマットとは

Twenty SeventeenだけではなくWordpressの他のテーマでも共通ですが、記事を投稿する際に「投稿フォーマット」というのが選べます。僕の環境では記事作成画面の左側に表示されています。これを選ぶことで、「画像」や「動画」など、投稿のタイプに合ったフォーマットが選べるようになっているようです。デフォルトの状態では、それぞれのフォーマットにあまり違いはないのですが、今回はこれを利用して、記事ごとにレイアウトを変更するカスタマイズをしてみます。

このカスタマイズが必要な理由

記事の中でyoutubeの動画を埋め込んで紹介する場合や、PDFを埋め込んで表示する場合など、記事の幅をもう少し広くとって画面を大きく見せたいときがあります。特定の記事でサイドバーを非表示にして、その分記事の幅を広くするのが目的です。

フォーマットのレイアウトを変更

この例では、フォーマットの中の「動画」をカスタマイズしてみます。サイドバーを消して、記事の幅をいっぱいに表示したいので、以下をstyle.cssに記述します。

.single-format-video #secondary{
    display:none;
}
.single-format-video :not(.has-sidebar) #primary {
    width: 100%;
}

これで、投稿フォーマット「動画」を選択した記事のみ、サイドバーを非表示にして記事を広く表示できます。

まとめ

あらかじめフォーマットごとにレイアウトをカスタマイズしておくことにより、記事の投稿時に選択するだけで任意のレイアウトにできるので便利です。色々と応用がきくと思うので是非試してみてください。