Twenty Seventeen カスタム – 固定ページ

Twenty Seventeenの特殊なことと言えば固定ページです。カラム変更方式でサイドバーがありません。固定ページについてです。

フロントページに固定ページをセットしたときの効果、プライバシーポリシーみたいな存在、そういうのも考慮すれば固定ページについての考え方が少し変わってきていることも頷けます。これまで、普通のシングルポストと固定ページなんてブログ機能的な違いしかありませんでした。Twenty Seventeenの固定ページは通常の投稿とは全然違う考え方で作られていて、だからデザインも大きく異なりますね。

1カラム、2カラム

デザインを1カラムと2カラムから選びます。そしてタイトル文字がとても小さいです。

2017ページ(2列)
デフォルトの2列の固定ページ

2カラムにするとタイトルが左に、本文が右に現れます。左がタイトルだけであとは空白てのが書籍ぽくてなかなか渋いですね。小さな字で註釈を入れたくなるスペースです。

1カラムにすると普通になりますがこのときタイトルのフォントサイズが小さいのが気に触ります。1カラムの時はもうちょっと大きなフォントがいいですよね。

どこで設定するのか

で、しかし問題があります。この1カラム2カラムを指定するの、基本カスタマイザからしかできないんです。ということはあれです、ページによって1カラムにしたり2カラムにしたり、そういうことができないわけです。ページの編集画面では設定項目がありませんからできません。カスタマイザで指定した1カラム2カラムは固定ページすべてに適用されてしまいます。これはいただけない仕様ですね。

body classでやります

<body> に付ける class てのはカスタマイズに大活躍しますよね。カスタム投稿や特別なタクソノミーなど専用デザインを使いたいときにbody_classを使ってcssを作り分けたり読み込む関数を制御したりできます。

案の定、カスタマイザから1カラム2カラムの設定をすると<body>のクラスに「page-one-column」「page-two-column」が出力されます。ですのでページごとに使い分けるにはbody classを与えてやればいいわけですね。

functionsに書いてそれなりの処理をしてもいいですが、body classを与える関数をページテンプレートに直接書いてもいいと思います。

<?php
add_filter('body_class','ad_body_class_column');
function ad_body_class_column($classes){
  $classes[] = 'page-one-column';
  return $classes;
?>

こんな感じでbody classを与えて、あとはテンプレート名を付けてそれぞれテンプレートとして保存すればページごとにカラムを選ぶことができるようになりますね。

おっと、削除について書き忘れてた。

page-one-columnかpage-two-columnのどちらかのクラスがデフォルトで入ってるはずですから、いらないほうを削らないといけません。

クラスを追加する関数は簡単ですが削除するのはややこしいですね。「クラスを削除する」などで検索して賢人たちのコードを参考にしてください(何たる無責任)

サイドバーが持てない

それから、固定ページの特殊なことといえば何といってもサイドバーが持てません。なんと、サイドバーが持てないんです。あわわわ。固定ページの特殊感が出まくります。

思想的に理解出来ても、これまで作っていた固定ページの印象が大きく変わりすぎるのもどうかと思いまして、せめてサイドバーを持たせたいなと考え page.php に

<?php get_sidebar(); ?>

と書いてみるわけですがこれでは表示できません。これは困った。サイドバーを持たせた固定ページを作りたい人もきっといることでしょう。

body classでやります

サイドバーを持てないのも body class のせいです。固定ページではすべからくhas-sidebar が外されています。もう根本的に自動的にそうなっています。<body> のクラスに has-sidebar の文言がなければサイドバーを表示できません。当たり前のことを逆に言うとhas-sidebarのクラスを持たせるとサイドバーを表示できます。

で、このbody_classでサイドバー全否定してるpage.phpですが、やっぱりサイドバーを持たせたいこともあるのでして、しかも持たせたり持たせなかったりも選びたいので、やっぱり専用のページテンプレートを作ります。

functionsに書いてそれなりの処理をしてもいいですが、body classを与える関数をページテンプレートに直接書いてもいいと思います。

<?php
add_filter('body_class','ad_body_class_sidebar');
function ad_body_class_sidebar($classes){
  $classes[] = 'has-sidebar';
  return $classes;
?>

そして下のほう、primaryの終わりとwrapの終わりの間にget_sidebar()を挿し加えます。

		</main><!-- #main -->
	</div><!-- #primary -->
	<?php get_sidebar(); ?>
</div><!-- .wrap -->

<?php
get_footer();

これでサイドバーが表示されます。

こんな感じでbody classとサイドバーを与えて、あとはテンプレートに名前を付ければページ編集ごとに選ぶことができるようになりますね。

場合によってはデフォルトのpage.phpにこのカスタムを施してデフォルトにしてしまい、元々のpage.phpを「サイドバーなし」の名前を付けて別テンプレートにしてしまってもいいかもしれないですね(自分はそうした)

カラム数とサイドバーあるなしが作れそうなページテンプレートですが実際のところ

  • 2カラム、サイドバーなし
  • 1カラム、サイドバーあり

この二種類あれば大体いいんじゃないかと思います。1カラムサイドバーなしっていうのも需要あるかもしれないので必要なら作ればいいですね。2カラムでサイドバーありってのはさすがに誰もいらないでしょう。

以上、固定ページを見てきました。

Digital Boo Pennguin Iconシリーズ記事の目次はこちらです Twenty Seventeen カスタマイズ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください