WordPressユーザーのための、「公式よりも簡単な」ゆるかわCMS『seezoo』テーマのつくりかた解説(前編:テンプレートタグ的な)

WordPressユーザーのための、「公式よりも簡単な」ゆるかわCMS『seezoo』テーマのつくりかた解説(前編:テンプレートタグ的な)

前回の記事「非PGなWordPressユーザーのための、ゆるかわCMS『seezoo』解説」、意外と好評でありがたい限りです。
ということで続編です。

seezooの公式サイトには、残念ながらテーマ作成のチュートリアルがありませんが、商用版の『seezoo more』のサイトに「Webデザイナーのためのテンプレート作成教室」というコンテンツがあります。
オープンソース版と何ら変わらないので、このサイトを見ればいいのですが、、、

勝手に、もっと簡単なチュートリアルを展開してみようと思います!!
今回は前編として、seezooで使うPHPのコードを7つだけ覚えてください。コピペでOKなのでPHP未経験者も安心!

アジェンダ

  1. 用意するもの(前編)
  2. 使うPHPのコード(コピペでOK)(前編)
  3. seezooテーマの構成・役割(後編)
  4. seezooテーマ化の手順(後編)
  5. 自作seezooテーマのインストール(後編)

用意するもの

  • ブラウザ
  • エディタ
  • seezooテーマ化したいHTML+CSS
  • ごく基本的なHTMLとCSSの知識
  • 一歩踏み出す勇気

さて、ではお手元のHTMLをseezooテーマ化してみましょう。


今回はシンプルに、右のような感じのベースHTMLを使って、

  • グローバルナビ
  • 右カラム(メイン)
  • 左カラム(サイドバー)

の3つを編集可能領域にします。
HTML、CSS、テーマに埋め込む画像はもう用意があるものと仮定して話を進めます。

≫今回使用するベースHTMLのデモを見る

使うPHPのコード(コピペでOK)全7種

必須の4つ

1.<?php echo $this->load->view(‘header_required’);?>

<head>内に書きます。この部分が、

[html]
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf-8" />
<title>(管理画面で設定したタイトル)</title>
<meta name="description" content="(管理画面で設定したdescription)" />
<meta name="keywords" content="(管理画面で設定したkeywords)" />
<script type="text/javascript" src="(seezooのインストール先)/flint/flint_config/view" charset="UTF-8"></script>
<script type="text/javascript" src="(seezooのインストール先)/js/flint.dev.js" charset="UTF-8"></script>
<script type="text/javascript" src="(seezooのインストール先)/js/jquery.min.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="(seezooのインストール先)/blocks/(使用しているブロックのディレクトリ)/view.css" media="all" />
(他、ブロック独自で使っているCSSやJSが勝手に書きだされる)
[/html]

に置き換わります。必須です。

WordPressでいうところの → <?php wp_head(); ?>

2.<?php echo $this->load->view(‘footer_required’);?>

</body>の直前に置きます。
デフォルトでは何も書き出していませんが、使用するブロックによっては何かソースを吐き出します。多分。
お作法的に、入れておきましょう。
WordPressでいうところの → <?php wp_footer(); ?>

3.<?php echo $this->load->area(‘hogehoge’); ?>

編集可能領域(ブロック)になる部分です。複数設置OK。hogehoge’の部分には任意の英数字のIDを付けます。
WordPressでいうところの → <?php wp_content(); ?> かなぁ。ちょっと違うけど。

4.<?php echo $template_path; ?>

テーマディレクトリのパスを出力します。
WordPressでいうところの → <?php bloginfo(‘template_url’); ?>
ただし、seezooでは最後のスラッシュも出力されますので
src=”<?php echo $template_path; ?>images/photo.jpg って感じで。
WPだと src=”<?php bloginfo(‘template_url’); ?>/images/photo.jpg だけどね。

これもよく使う3つ

5.<?php echo SITE_TITLE; ?>

管理画面で設定したサイトタイトルを出力します。
WordPressでいうところの → <?php bloginfo(‘name’); ?>

6.<?php echo $page_title;?>

管理画面で設定したそのページのタイトルを出力します。
(※今回は使わずやります)
WordPressでいうところの → <?php wp_title(); ?>

7.<?php echo xml_define();?>

DOCTYPE宣言の前に書くと、適切なXML宣言を出力してくれます。
IE6対策で、普段XML宣言を省略している人も多いと思います。(私も)
この構文を使うと、IE6では自動的にXML宣言を出さないでくれます。安心して使えます。

以上。
こんだけ。

前編はここまでです。
後編では、実際にデモページのHTMLをseezooテーマ化してみます。