前回の記事「非PGなWordPressユーザーのための、ゆるかわCMS『seezoo』解説」、意外と好評でありがたい限りです。
ということで続編です。
seezooの公式サイトには、残念ながらテーマ作成のチュートリアルがありませんが、商用版の『seezoo more』のサイトに「Webデザイナーのためのテンプレート作成教室」というコンテンツがあります。
オープンソース版と何ら変わらないので、このサイトを見ればいいのですが、、、
勝手に、もっと簡単なチュートリアルを展開してみようと思います！！
今回は前編として、seezooで使うPHPのコードを7つだけ覚えてください。コピペでOKなのでPHP未経験者も安心！
アジェンダ
- 用意するもの（前編）
- 使うPHPのコード（コピペでOK）（前編）
- seezooテーマの構成・役割（後編）
- seezooテーマ化の手順（後編）
- 自作seezooテーマのインストール（後編）
用意するもの
- ブラウザ
- エディタ
- seezooテーマ化したいHTML＋CSS
- ごく基本的なHTMLとCSSの知識
- 一歩踏み出す勇気
さて、ではお手元のHTMLをseezooテーマ化してみましょう。
今回はシンプルに、右のような感じのベースHTMLを使って、
- グローバルナビ
- 右カラム（メイン）
- 左カラム（サイドバー）
の3つを編集可能領域にします。
HTML、CSS、テーマに埋め込む画像はもう用意があるものと仮定して話を進めます。
使う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テーマ化してみます。