vicuna CMS テーマの修正 (body_class()関数・post_class()関数の追加)

今回のvicuna CMS – WordPress Theme Ext. Custom (以下 vicuna とします)の修正はbody_class()関数・post_class()関数の追加についてです。

body_class()関数やpost_class()関数はHTMLタグのbodyや記事を一覧で表示するとき、そのデザインを指定するのに必要なクラスを自動的に生成してくれる関数です(詳細はWordPress Codex日本語版やグーグル先生に聞いてみてください 😛 )。この関数をあらかじめ使うように考えて作られたテーマなら関数を追加するだけで終了します、たぶん…。

すでに独自でクラスを指定している場合も大丈夫。独自のクラスは関数を使う際に引数として追加すれば一緒に羅列してくれるので、これまで使っていたクラスを引数に指定すればデザインが崩れることなく修正は終わります。post_class()関数は投稿一覧ページで投稿毎にクラスを羅列するのですが、vicunaは独自のコードが静的に描かれているので次のように引数で指定して終了です。

// before ->	<div class="section entry" id="entry<?php the_ID(); ?>">
		<div <?php post_class(array('section', 'entry')); ?> id="entry< ?php the_ID(); ?>">	// < - after

これがbody_class()関数となると問題が発生するのです。vicunaはカラムを動的に替えるのにクラスを使用しているので引数を指定して終了…とは問屋が卸してくれませんでした。カラム変更のため動的にクラスを生成している関数は、クラスの指定に直接記述することを前提に文字列として値を返す関数なので、これを配列として値を返すように変更することにしました。

そこでまずvicuna_layout()関数の戻り値に当たる記述を次のように変更。

// bifore ->	echo $layout.' '.$eye_catch;
	return array($layout, $eye_catch); // < - after

この戻り値のままbody_class()関数に入れると一部で問題が発生します。というのもvicunaにはカラム変更の操作にCSSのクラスを利用して変更しているのですが、そのためのクラスの指定に「single」という名前の指定があります。しかしこのsingleはbody_class()関数によって羅列されるクラスにも存在するため、そのまま使用するとデザインが崩れる…ということになる訳です。

これを回避するため新たにvicuna_layout_class_param()関数を設け、vicuna_layout()の戻り値のうち$layout変数に文字列に文字を少し追加して返してやることで問題を回避します。

function vicuna_layout_class_param($page) {

	list($layout, $eye_catch) = vicuna_layout($page);
	return array($layout.'-layout', $eye_catch);

}

後はbodyタグがあるところでこの関数を呼び出すように修正するだけ。…なのですが、修正前のvicuna_layout()関数によるクラス記述の他に独自クラスも付加されているので、配列に変数を追加するおまじないをして独自指定のクラスも追加するようにしました。

たとえばindex.php上ならこんな感じ。

<!-- delete
	<body class="mainIndex <?php vicuna_layout('index'); // <- before ?>"> 
-->
	<body <?php $array = vicuna_layout_class_param('index'); array_push($array, 'mainIndex'); body_class($array); <- after ?>>

この修正をbodyタグの記述があるPHPファイルに施せば完了です。

あとはcore.cssファイルにてvicuna_layout_class_param()関数で-layoutと付加したことによるつじつまを合わせて修正は完了です。具体的には「single」を「single-layout」に、「double」を「double-layout」に、といった感じです。

これで管理画面でvicunaのカラム変更の設定をしても問題なく動作すると思います 😉

コメントを残す

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