賢威でカラム数に応じて見出しのデザインを変更する方法

賢威のテンプレートは、投稿ページから簡単にそのページ数のカラム数を設定できます。これはめちゃくちゃ便利な機能ですよね。僕も重宝しています。

このページごとにカラム数を変える方法については、以前にもこちらの記事（賢威で個別ページごとにカラム数を設定する方法）で解説しているので参考にしてください。

ところで、賢威のデザインをカスタマイズしてオリジナルの見出し画像を設定している場合には、これでちょっと困ることがおこることがあるんですよね。例えば、僕は賢威の投稿記事の見出しは以下のようなデザインに設定しています。

 
この見出しは背景画像を使っているので、見出しの横幅も２カラムにあわせて作っています。ところが、このまま賢威の記事投稿ページを１カラムに設定してしまうと以下のようになってしまうんですね。（当然ですが）

さすがに正直、ちょっと不格好ですよねｗｗ　右側がもろ余ってしまっています。なので今回は、カラム数に応じて、それに最適な見出しへと変更する方法を解説します。

まずは違うクラスで１カラム用の見出しを作成

まずは１カラムに最適な横幅950pxの見出しを違うクラスで作成します。今回は固定ページで１カラムページ用の見出しとして標準で使っている上の見出しを作ります。CSSでいうと、h2 class=”blk” というのを、標準のh2とは別で用意する、ということです。

ちなみに１カラムページ用の見出し画像の作り方は、少し昔の記事ですがこちら（賢威の記事タイトルをカスタマイズする方法【上級】）で解説していますので参考にしてください。

ここでは既に１カラム用の見出し画像を、h2の違うクラスで用意しているのを前提とします。次にやりたいことは、ページのカラム数を自動で取得して、それに応じてh2の見出し画像を切り替える、ということですよね。

つまり、２カラムのページでは記事タイトルは「h2」で表示されて、１カラムのページでは記事タイトルは「h2 class=”blk”」（僕の場合）で、表示されるように出来ればいいわけです。ではその方法です。

ページのカラム数の取得方法

賢威テンプレートでは、カラム数はPHP関数の「getPageLayout()」で取得できます。これでカラム数を取得して、１カラムだったらh2のclassを変更する、という方法をとります。（わからなくても大丈夫ですｗ）

まずは賢威の管理画面から「外観―＞テーマ編集」を開いて、「単一記事の投稿(single.php)」を開いてください。これが、記事の投稿ページを表示させているPHPファイルです。ここから以下の記述を探します。

<div class="post">
<h2 class="post-title"><?php the_title(); ?></h2>

 
この記述が、投稿記事ページでh2タグを表示させている部分です。ここを以下のように書き換えます。

<div class="post">
<h2 class="post-title <?php if(getPageLayout($post->ID)=='col1')
 { ?>ここに１カラム用のh2のクラス名を記述<?php } ?>">
<?php the_title(); ?></h2>

一応意味としては、getPageLayout()でカラム数を取得して、もしそのカラム数が「col1」(１カラム)だったら、「h2 class="クラス名"」のなかに、記述したいクラス名を追加する、ということになります。

ただ意味はわからなくても、とりあえずコピペしてクラス名だけちゃんと記述すれば動くと思います。

 
このように１カラムのページのときだけ、１カラム用の記事タイトルのデザインを表示させることができました。こういったPHPを使った自動切り替えの方法はいくつか覚えておくと非常に便利です。

例えば、特定のページだけサイドバーのナビゲーションを変更するとか、特定のページだけヘッダー画像を変更するとか、特定のページだけ広告を変えるとか、そういったことも出来るようになります。

ただ、PHPでの切り替えは非常に便利な反面、やりすぎると表示が重くなったりするのでそこは少し注意が必要です。　以上。もしわかりづらかったりしたらコメントください。