2014.06.05

wordpressのテーマをbaserCMSのテーマに作りなおしてみた

どうも、最近ようやくバイクで遠出し始めてる村田です。

今回は前回書いた『福岡生まれのCMS「baserCMS」を使ってみた』の続きということで、公式の関数リファレンスやテーマ制作チュートリアルを参考に現在Wordpressで構築している当サイトをbaserCMSのテーマに作りなおしてみました。

baserCMS 3系関数リファレンス

baserCMS 3系テーマ制作チュートリアル

テーマの反映

１.テーマフォルダーを作成する

まず最初にbaserCMSに独自テーマを認識させるために、「theme/」フォルダの中に好きなテーマの名前でフォルダを作成します。

２.テーマサムネイルを配置

次にテーマ選択画面のサムネイルとして300 × 240pxサイズのpng画像を先ほど作成したフォルダの中に「screenshot.png」という名前で配置します。

３.Pagesフォルダの作成

管理画面の「テーマ管理」にアクセスすると作成したテーマフォルダ名とアップしたpng画像が表示されていると思いますが、まだこの段階では「有効」にはしません。

エラーメッセージにあるとおり「Pages」という名前のフォルダを作成して書き込み権限を与えないといけないようです。

今回はxamppを使ってローカルで構築しているので「Pages」フォルダを作るだけでしたが、サーバーで構築している場合は「theme/テーマ名/Pages/」フォルダを「707（もしくは777）」とし、フォルダ配下のファイル群は「606（もしくは666）」とすれば良いようです。

４.テーマ情報の入力

ここまでがテーマを有効するのに必要な作業になりますが、テーマの下にあるバージョン情報や制作者、テーマ有効化した際に出力される説明文の情報も入れたい！という場合は先ほどのscreenshot.pngと同じ階層に「config.php」というファイルを作成して下記の記述をします。

<?php 
$title = 'マグネッツ'; //テーマ名
$description = '株式会社マグネッツのテーマ'; //テーマの説明文
$author = 'murata'; //テーマ制作者
$url = 'http://magnets.jp'; //制作者のURL

<?php

$title = 'マグネッツ'; //テーマ名

$description = '株式会社マグネッツのテーマ'; //テーマの説明文

$author = 'murata'; //テーマ制作者

$url = 'http://magnets.jp'; //制作者のURL

同じ階層に今度は「VERSION.txt」というテキストファイルを作成し、バージョンの数字を入力します。（例：1.0.0）

これでテーマ名、バージョン、制作者、制作者へのリンク、説明文が表示されるようになりました。

デバックモードに切り替える

baserCMSはページの表示速度を上げるために「サーバーキャッシュ機構」というシステムを利用していて、テンプレートの修正を行っても反映がされていないように見える場合があります。

なので構築段階ではその機能を一時的に停止させます。
管理画面の「システム管理」より「オプション」の「制作・開発モード」の項目を「デバックモード1」とすることでキャッシュが生成されなくなります。
※構築が完了したら必ず元に戻しておきましょう。

レイアウトファイルの作成

１.LayoutフォルダとElementsフォルダを作成

テーマの選択ができたらテーマフォルダ内に「Layouts」というフォルダと「Elements」というフォルダを作成して「Layouts」フォルダ内に「default.php」というファイルを作成します。（theme/テーマ名/Layouts/default.php）
Elementsフォルダの方は一旦はそのまま空の状態とします。

Layoutsはページの基本レイアウトに当たる部分でテンプレートの大枠となります。
まずはWordpress側のheader.phpからhead要素内一式をdefault.phpにコピーします。

２.WordpressのタグをbaserCMSの関数に置き換える

wordpressの「wp_title」などのテンプレートタグで書かれている箇所を全てbaserCMSの関数で置き換えていきます。

※baserCMSの3系と2系で記述が異なるので注意してください。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<?php 
//titleタグを出力
$this->BcBaser->title(); 
?>
<?php 
//descriptionタグを出力
$this->BcBaser->metaDescription();
 ?>
<?php 
//keywordsタグを出力
$this->BcBaser->metaKeywords();
 ?>
<?php 
//ファビコンタグを出力
$this->BcBaser->icon();
 ?>
<?php 
/*cssの読み込みタグを出力。第一引数に読み込みたいcssファイルへのパスを指定。
拡張子は不要です。先頭に「/」を付けない場合は「theme/使用テーマ名/css」からの
パスになります*/
$this->BcBaser->css(array('base', 'style', 'fonts'));
if(!$this->BcBaser->isHome();){
$this->BcBaser->css( 'page' );
} ?>
<?php 
/*javascriptの読込タグを出力。使い方は前述のcssとほぼ同様で「/」なしの場合は
「theme/使用テーマ名/js」からのパスになります。*/
$this->BcBaser->js(array('jquery-1.8.3.min', 'scrollPgaeTop', 'heightLine'));
 ?>
<?php 
//各コンテンツ毎に設定したcssやjavascriptを出力
$this->BcBaser->scripts();
 ?>
</head>

<!DOCTYPE HTML>

<html>

<head>

<?php

//titleタグを出力

$this->BcBaser->title();

<?php

//descriptionタグを出力

$this->BcBaser->metaDescription();

<?php

//keywordsタグを出力

$this->BcBaser->metaKeywords();

<?php

//ファビコンタグを出力

$this->BcBaser->icon();

<?php

/*cssの読み込みタグを出力。第一引数に読み込みたいcssファイルへのパスを指定。

拡張子は不要です。先頭に「/」を付けない場合は「theme/使用テーマ名/css」からの

パスになります*/

$this->BcBaser->css(array('base', 'style', 'fonts'));

if(!$this->BcBaser->isHome();){

$this->BcBaser->css( 'page' );

} ?>

<?php

/*javascriptの読込タグを出力。使い方は前述のcssとほぼ同様で「/」なしの場合は

「theme/使用テーマ名/js」からのパスになります。*/

$this->BcBaser->js(array('jquery-1.8.3.min', 'scrollPgaeTop', 'heightLine'));

<?php

//各コンテンツ毎に設定したcssやjavascriptを出力

$this->BcBaser->scripts();

</head>

以下、置き換える際に使用した頻度の高い基本的な関数になります。

imgタグの出力

wordpressでは例えばテンプレートフォルダ内の画像を出力する場合

<img src="<?php bloginfo('template_url'); ?>/img/image.jpg" alt="画像">

1	<img src="<?php bloginfo('template_url'); ?>/img/image.jpg" alt="画像">

として、パスの一部分だけテンプレートタグで取得して他は直接書いていましたが、baserCMSではimg()関数を使用して以下の様な記述になります。

<?php $this->BcBaser->img('/img/image.jpg', array('alt'=>'画像')); ?>

1	<?php $this->BcBaser->img('/img/image.jpg', array('alt'=>'画像')); ?>

第一引数に画像へのパス（先頭に「/」がある場合はテーマフォルダからのパス）、第二引数に属性を配列で指定します。（alt、class、idなど）

リンク付きのimgタグの出力

wordpressだとaタグとimgタグを別々に書くだけなので特に迷うことはないですね。

<a href="<?php bloginfo('url'); ?>" class="link"><img src="<?php bloginfo('template_url'); ?>/img/image.jpg" alt="画像"></a>

1	<a href="<?php bloginfo('url'); ?>" class="link"><img src="<?php bloginfo('template_url'); ?>/img/image.jpg" alt="画像"></a>

baserCMSでは先ほどのimgタグの第二引数に「url」を指定することでリンク付きのimgタグを出力することができます。

<?php $this->BcBaser->img('/img/image.jpg', array('url'=>'/', 'alt'=>'画像')); ?>

1	<?php $this->BcBaser->img('/img/image.jpg', array('url'=>'/', 'alt'=>'画像')); ?>

また、aタグを出力するlink()関数の第一引数に画像タグを指定することでも可能です。この方がaタグにclassやIDを振ることができるので自分は全てこっちの方法で処理してます。

<?php $this->BcBaser->link($this->BcBaser->getImg('/img/image.jpg', array('alt'=>'画像')), '/', array('class'=>'link')); ?>

1	<?php $this->BcBaser->link($this->BcBaser->getImg('/img/image.jpg', array('alt'=>'画像')), '/', array('class'=>'link')); ?>

この場合は出力系のimg関数ではなく取得系のgetImg()関数を使って指定します。

link関数の第一引数はaタグで囲む要素でテキストや画像を指定できます。第二引数はリンク先の指定で、サイト内のページを指定する場合はbaserCMSの設置場所を起点として「/」から始まる絶対パスを指定します。第三引数はimgと同じく属性を配列で指定できます。

また第四引数には移動前の確認メッセージをつけることもできます。

<?php $this->BcBaser->link('<span>リンクテキスト</span>', '/link', array('id'=>'anchor'), '本当にこのページから移動してもいいですか？'); ?>

1	<?php $this->BcBaser->link('<span>リンクテキスト</span>', '/link', array('id'=>'anchor'), '本当にこのページから移動してもいいですか？'); ?>

３.headerやfooterなどのエレメント（部品）を作成する

ヘッダーやフッターなど共通パーツの作成をしていきます。
これらのファイルは「Elements」フォルダに格納していきます。

wordpress側のテーマファイル「header.php」から先ほどdefault.phpに移した以外の部分（ヘッダーやグローバルメニューなど）のタグ一式コピーしてbaserCMSの「theme/テーマ名/Elements/header.php」に移しタグを修正していきます。

フッターも同じように「footer.php」から要素をコピーしてElementsフォルダ内に移し、タグを適宜修正していきます。

４.エレメントの出力

Elementsフォルダに「header.php」と「footer.php」が用意できたら先ほどのdefault.phpの編集に戻り、「element()」関数を使ってヘッダーとフッターを出力します。

element()関数の第一引数にエレメントテンプレート名をElementsフォルダからの相対パスで指定します。

なので先ほど作成した「header.php」を呼び出すには

<?php $this->BcBaser->element('header'); ?>

1	<?php $this->BcBaser->element('header'); ?>

となり、同じようにフッターの箇所には

<?php $this->BcBaser->element('footer'); ?>

1	<?php $this->BcBaser->element('footer'); ?>

とします。

これでElementsフォルダ内のheader.phpとfooter.phpが読み込まれることになりました。

５.ツールバーを出力させる

最後にbodyの閉じタグの直前に

<?php $this->BcBaser->func(); ?>

1	<?php $this->BcBaser->func(); ?>

を入れておきます。

この関数は画面上部に管理画面や現在のページの編集画面へのリンクがあるツールバーを出力したり（Wordpressでもあるアレです）Cakeのデバッグ出力を出力してくれるので、構築の際に役に立つかと思います。

基本となる大枠のテンプレートはこれで一段落ついたので、次は固定ページを登録していきます。

固定ページの登録

１.固定ページ＆固定ページカテゴリーの新規登録

管理画面内の「固定ページ管理」にアクセスして「新規に登録する」を選択。

例えば会社概要のページで「http://xxxx/company/」のようにURLの終わりをスラッシュにしたい場合は、事前に「固定ページカテゴリー管理メニュー」からカテゴリー名「company」、ページカテゴリータイトル「会社概要」で登録しておきます。

そして固定ページ登録画面でカテゴリーを先ほどの「会社概要」を指定、ページ名は「index」でタイトルは空白のままで登録します。

また「http://xxxx/company/staff/」のような子ページの場合はページカテゴリー「スタッフ紹介」を作成し、親カテゴリーを「会社概要」とします。

最後に固定ページの説明文を入力して、「保存」ボタンを押して「Pages」フォルダ内にphpファイルを生成させます。

２.本文を入力。生成されたファイルには直接書き入れない

wordpress側では固定ページの内容は本文に記述しておらず全てテンプレートに記述する方法をとっているので、同じように生成されたファイルに直接記述することで対処しようとしましたが、この方法だと一度でも管理画面上で該当の固定ページを更新するとファイルが生成し直され、直接記述した本文の内容も綺麗さっぱり消えてしまうようです。

※追記：固定ページ管理メニューから「固定ページテンプレート読込」を使えば直接内容を記述していてもちゃんと反映してくれました。

なので、おとなしく編集画面の本文にソースコードを入れていきましょう。

本文入力エディタを「ソースコード表示」に切り替えて先ほど消えてしまった内容をコピペしてみます。ソース内にlink関数やimg関数があり、その部分がちゃんと出力されるのかだけ不安でしたが問題なく出力されているようです。

※当然ですが関数で出力する部分のテキストなどはビジュアルエディタ時では表示されません。

ちなみに編集画面にはdescriptionの項目はあってもkeywordの項目はありません。
こちらも生成されたファイルに直接

<?php $this->BcBaser->setKeywords('キーワード,キーワード2'); ?>

1	<?php $this->BcBaser->setKeywords('キーワード,キーワード2'); ?>

とすればちゃんと表示はされますが、先ほどと同じく管理画面から更新をかけると消えてしまいます。

詳しくは調べていないですが編集画面に「キーワード」の項目を追加するプラグインがあるようなので、それを使用するのが今のところ一番手っ取り早い方法ではないでしょうか。

３.default.phpにコンテンツ出力関数を記述

固定ページの登録が終わったら前項で作成した「Layouts/default.php」の任意の場所に

<?php $this->BcBaser->content(); ?>

1	<?php $this->BcBaser->content(); ?>

と記述します。これで先ほど固定ページで入力した本文の内容が出力されるようになりました。

ページによって出力する内容を変更する

構築しているとTOPだけとか特定の固定ページだけに出力したい内容が出てきますよね。例えばTOPだけメインビジュルを出したい時や固定ページによってサイドカラムに出力する内容を変えたいといった時です。

TOPページかどうか判定する

現在開いているページがTOPページかどうかを判定するにはwordpressでは「is_home()」を使いましたがbaserCMSでは「isHome()」でTOPかどうかの判定を行います。

<?php if($this->BcBaser->isHome()){
$this->BcBaser->img('/img/top/mainImage.png', array('alt'=>'メインビジュアル'));
} ?>

<?php if($this->BcBaser->isHome()){

$this->BcBaser->img('/img/top/mainImage.png', array('alt'=>'メインビジュアル'));

} ?>

これでTOPだけメインビジュアルを出せました。

次は固定ページによってサイドカラムの内容を変える方法です。

固定ページによって出力する内容を変える

wordpressでは「is_page()」で固定ページかどうか判定し、引数を渡すことで特定の固定ページかどうかも判定可能です。

baserCMSでも「isPage()」で判定できますが、特定の固定ページかどうかの判定はできないようです。

そこで自分は以下のように処理しました。

<?php 
//変更したい固定ページの名前をキャメルケースで配列にセット
$chkPages = array('Company', 'Service', 'Portofolio', 'News');
foreach($chkPages as $chkPage){
 /*
 getContentsName()で設置フォルダから最初のスラッシュまでの文字をキャメルケースで取得
 配列に同じ名前があればその名前のエレメントを出力
 */
 if($this->BcBaser->getContentsName()==$chkPage){
  $this->BcBaser->element(strtolower($chkPage));
 }
}
 ?>

<?php

//変更したい固定ページの名前をキャメルケースで配列にセット

$chkPages = array('Company', 'Service', 'Portofolio', 'News');

foreach($chkPages as $chkPage){

getContentsName()で設置フォルダから最初のスラッシュまでの文字をキャメルケースで取得

配列に同じ名前があればその名前のエレメントを出力

if($this->BcBaser->getContentsName()==$chkPage){

$this->BcBaser->element(strtolower($chkPage));

}

ただこの方法だと「getContentsName()」は設置フォルダから最初のスラッシュまでしか取得しないので、例えば会社概要の子ページになるスタッフ紹介ページ「/company/staff/」でも取得できるのは「Company」となり、スタッフ紹介だけ違う内容を出したいときはうまくいかないですね。

その場合getContentsName()の引数で「CompanyStaffIndex」や「company_staff_index」といった形で取得できるのでその辺を活用すると問題ないと思います。