baserCMSの固定ページで入力欄がどうしてもあとひとつ必要なときのTips

baserCMSでサイト作ってるときにたまに起こるのが、
「あとひとつ入力欄要る」
です。

そんなときに対応できる方法を考えてみました。
本記事の対象は固定ページです。
ブログ?この辺使えばなんとかなるですかね。

選択肢としては以下になるかなぁ?と思います。

  • キーワードプラグインを導入する
  • 条件分岐でなんとかする
  • code 欄使う[今回の提案策]

ベースとなるHTML構造

こんな感じの一般的なベースを例にします。
「<h2>この辺に追加表示したいテキスト</h2>」が、固定ページのタイトルでもなく本文でもなく、どこかで設定したい箇所。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<?php $this->BcBaser->title() ?>
	<?php $this->BcBaser->metaDescription() ?>
	<?php $this->BcBaser->metaKeywords() ?>
	<?php $this->BcBaser->scripts() ?>
	<?php $this->BcBaser->element('google_analytics') ?>
</head>
<body>
<?php $this->BcBaser->header() ?>

<h1><?php echo $this->BcBaser->getContentsTitle() ?></h1>

<h2>この辺に追加表示したいテキスト</h2>

	<section id="mainContents">
		<?php $this->BcBaser->flash() ?>
		<?php $this->BcBaser->content() ?>
	</section>

<?php $this->BcBaser->footer() ?>
<?php $this->BcBaser->func() ?>
</body>
</html>

キーワードプラグインを導入する

固定ページとブログ記事に、キーワードの設定欄を追加するプラグインがあります。
https://github.com/materializing/keyword
これ導入するのはてっとり早いです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<?php $this->BcBaser->title() ?>
	<?php $this->BcBaser->metaDescription() ?>
	<?php $this->BcBaser->metaKeywords() ?>
	<?php $this->BcBaser->scripts() ?>
	<?php $this->BcBaser->element('google_analytics') ?>
</head>
<body>
<?php $this->BcBaser->header() ?>

<h1><?php echo $this->BcBaser->getContentsTitle() ?></h1>


<?php if (Hash::get($dataForView, 'Keyword.keywords')): ?>
<h2><?php echo h(Hash::get($dataForView, 'Keyword.keywords')) ?></h2>
<?php endif ?>


	<section id="mainContents">
		<?php $this->BcBaser->flash() ?>
		<?php $this->BcBaser->content() ?>
	</section>

<?php $this->BcBaser->footer() ?>
<?php $this->BcBaser->func() ?>
</body>
</html>

とか、キーワード設定管理でできるカスタムテキストを有効化して以下。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<?php $this->BcBaser->title() ?>
	<?php $this->BcBaser->metaDescription() ?>
	<?php $this->BcBaser->metaKeywords() ?>
	<?php $this->BcBaser->scripts() ?>
	<?php $this->BcBaser->element('google_analytics') ?>
</head>
<body>
<?php $this->BcBaser->header() ?>

<h1><?php echo $this->BcBaser->getContentsTitle() ?></h1>


<?php if (Hash::get($dataForView, 'Keyword.name')): ?>
<h2><?php echo h(Hash::get($dataForView, 'Keyword.name')) ?></h2>
<?php endif ?>


	<section id="mainContents">
		<?php $this->BcBaser->flash() ?>
		<?php $this->BcBaser->content() ?>
	</section>

<?php $this->BcBaser->footer() ?>
<?php $this->BcBaser->func() ?>
</body>
</html>

管理側から設定できるのでラクですね。
ただし、キーワードプラグインを導入して設定し、レイアウトファイルを改修する、というコストが掛かります。

条件分岐でなんとかする

URLから決め打ちで判定して表示する手法です。
以下のようにURLによる条件分岐を書いて対応します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<?php $this->BcBaser->title() ?>
	<?php $this->BcBaser->metaDescription() ?>
	<?php $this->BcBaser->metaKeywords() ?>
	<?php $this->BcBaser->scripts() ?>
	<?php $this->BcBaser->element('google_analytics') ?>
</head>
<body>
<?php $this->BcBaser->header() ?>

<h1><?php echo $this->BcBaser->getContentsTitle() ?></h1>

<?php if ($this->request->here === '/hoge/fuga'): ?>
<h2>ここに表示したいテキスト</h2>
<?php endif ?>

	<section id="mainContents">
		<?php $this->BcBaser->flash() ?>
		<?php $this->BcBaser->content() ?>
	</section>

<?php $this->BcBaser->footer() ?>
<?php $this->BcBaser->func() ?>
</body>
</html>

。。。これひとつならまだ良いですが、複数に渡るとメンテナンス・コストが膨れ上がりそうです。
設定ファイルにでもURLの定義リスト作っておいて、対応とかでしょうか。

code 欄使う[今回の提案策]

固定ページには、「オプション」で開いて利用できる code欄があります。
今回はここに着目。

Untitled

この code欄に入力した内容は、通常、メインコンテンツ部分の上部に表示されます。
以下のような具合です。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<?php $this->BcBaser->title() ?>
	<?php $this->BcBaser->metaDescription() ?>
	<?php $this->BcBaser->metaKeywords() ?>
	<?php $this->BcBaser->scripts() ?>
	<?php $this->BcBaser->element('google_analytics') ?>
</head>
<body>
<?php $this->BcBaser->header() ?>

<h1><?php echo $this->BcBaser->getContentsTitle() ?></h1>

	<section id="mainContents">
		<?php $this->BcBaser->flash() ?>
この辺に code欄の内容は出力される
		<?php $this->BcBaser->content() ?>
	</section>

<?php $this->BcBaser->footer() ?>
<?php $this->BcBaser->func() ?>
</body>
</html>

※ちなみにこの code欄の表示はどんな仕様になってるか見てみたところ、
/lib/Baser/Model/Page.php の addBaserPageTag() で付与処理されました。

これではあとちょっと、目的とする位置に表示するためには一工夫必要そうです。
例えば、class や id 割り当てておいて、jQuery で目的とする位置に移動する、とかでしょうか。
そうした処理もコスト増です。もうちょっとなんとかしたいです。
そこで以下のように下準備します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<?php $this->BcBaser->title() ?>
	<?php $this->BcBaser->metaDescription() ?>
	<?php $this->BcBaser->metaKeywords() ?>
	<?php $this->BcBaser->scripts() ?>
	<?php $this->BcBaser->element('google_analytics') ?>
</head>
<body>
<?php $this->BcBaser->header() ?>

<h1><?php echo $this->BcBaser->getContentsTitle() ?></h1>

<?php $this->fetch('subTitleBlock') ?>

	<section id="mainContents">
		<?php $this->BcBaser->flash() ?>
		<?php $this->BcBaser->content() ?>
	</section>

<?php $this->BcBaser->footer() ?>
<?php $this->BcBaser->func() ?>
</body>
</html>

準備のポイントは
「<?php $this->fetch('subTitleBlock') ?>」を書いておくことだけです。
※ 名称 subTitleBlock はあくまで例です。これが決まりではなくなんでも良いです。

そして、code欄側には以下のように記述します。

<?php $this->start('subTitleBlock') ?>
<h2>ちょっと出したいテキスト</h2>
<?php $this->end() ?>

こうすることで、メインコンテンツ部分の上部には何も表示されず、目的の場所に目的のテキストを表示することができます。
code 欄に記載がない場合は、何も表示されません(何もしない)し、start〜end の範囲が利用・表示されるため、code欄に他の記載用途があった場合も影響受けることがありません。

これで、特別な作業コストをかけることもなく、表示を追加することができますね。

表示する仕組みについて

どんなことを利用してるかというと、Cakephpのビューブロックの仕組みを利用しているだけです。
ビューブロックは、表示内容を各ビューに定義しておいて利用できる仕組みです。
上記の例を用いると、baserCMSのブログのindexビュー(例: /app/webroot/theme/YOUR_THEME/Blog/default/index.php)に、同じ記載をした場合、レイアウト内の subTitleBlock を定義している箇所に、その内容が表示されます。

もうちょっと知りたい場合は以下の記事でとてもわかりやすく解説されてます。
ぜひご参照ください。
レイアウトのmetaタグやサイドバーの内容をコンテンツテンプレートから上書き|baserCMS|CMS|スタッフブログ|京都のホームページ制作 株式会社Nextat(ネクスタット)

あとがき

ビューブロックの仕組みを利用すると、余分な条件分岐を減らすことができ、かつ、表示内容の責任を各ビューに持たせることができるため、非常にすっきりとしてレイアウトを作ることができます。
また、ビューブロックには append、prepend、assign 等の他にも便利に使える仕組みが備わっているため、これらを併用することで、更に調整を行いやすくなります。
ビュー -- CakePHP Cookbook 2.x ドキュメント

ちなみにですが、fetch() で定義する文言には予約後があります。
content、css、script は利用しないようにしましょう。

▲ to Top

▲ to Top