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テーマ化してみます。

コメント / トラックバック 2 件

:RAM| 2012/04/12 07:19

お客さん側で最低限の書き換えができればいいからなんとか簡単にCMSが導入できないかと探していてこちらに当たりました。解説ありがとうございます。
おかげでプログラムの知識が全くない私でもサイトの他とページと同じ見栄えのテンプレートが設置できました。
でも、直感的にできるどころか管理画面が意味不明で難しすぎます・・・
素人向けのサポートが一切ないのであきらめざるを得ないのかなと思います。
どうせイチからなら、マニュアルがいくらでもある他の有名ツールのほうが、まだなんとかなりそうです。

:mypacecreator| 2012/04/25 17:37

>RAMさん
そうですね、正直ほかの有名ツールみたいに開発メンバーがたくさんいるわけでなく、本業の合間に誠意開発、って感じなのでそこまで手が回ってないってのはありますね。
もしよければ、使っていて不便だったところやわからなかったところはご意見としてあげていただくと、開発者さんも喜ぶと思います。

コメントをどうぞ

メールアドレス (必須・公開されません)
コメント本文

  • スパム・迷惑コメント投稿防止のため、メールアドレスの入力が必須ですが、公開はされません。何卒ご協力のほどお願いいたします。
  • 投稿いただいたコメントは管理者のチェック後掲載しておりますので、即時には反映されません。
  • 記載内容に関する批判や間違いの指摘などはそのまま掲載する方針ですが、投稿内容と無関係な誹謗中傷、一方的な罵詈雑言の場合は削除させていただく可能性があります。
  • 通常業務の合間にコメントチェックをしておりますので、すべてのコメントへのお返事が出来ない場合もございます。あらかじめご了承ください。
  • 管理人個人への連絡等は、コメント欄ではなくコンタクトフォームをご利用ください。

書籍を執筆しました

WordPress 標準デザイン講座【Version 4.x対応】


翔泳社さんより、2015/02/27発売しました。2年経ちますのでもう賞味期限切れだとは思いますが、一応実績として...

寄付歓迎(・ω<)☆

当ブログの記事があなたの役に立ったら、気が向いたらでいいのでドネーションいただけると更新の励みになります!
気が向いた方はこちらから

ブログ内検索