Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a いちばん簡単なconcrete5テーマ
Semelhante a いちばん簡単なconcrete5テーマ (20)
Mais de Hideki MACHIDA
いちばん簡単なconcrete5テーマ
- 1. いちばん簡単な concrete5 テーマ ～ concrete5 のテーマを作ってみよう～ MACHIDA ‘matchy’ Hideki
- 2. concrete5 とは PHP 、 MySQL を使用した、 Web サイト 用 CMS いわいる「ホームページ」を作るための CMS であり、 Blog ツールではない Joomla に近いカンジ コーポレートサイトや学校サイトなどに適 している
- 3. テーマをつくろう 標準でいくつかテーマがついてくる マーケットプレイスにも有償、無償のものがたくさん ある WordPress などのメジャーなものにはかなわない 標準のテーマを転がして自分流にするのはちと無理が ある 「 Blog 」じゃなくて「ホームページ」なので、そこそ この見た目でないと ... というわけで、作ってみよう
- 4. トップページと下層ページ 今回はトップページとそれ以外 ( 下層ページ ) 用に２種 類のページ ( ページタイプ ) をつくる まずはそれぞれモックアップの HTML を作成する 後からレイアウトなどを大幅に修正するのは厳しいの で、この段階でお客様の確認をとっておく
- 5. いちばん簡単なトップページのモック <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> トップページ </title> </head> <body> <h1> トップページ </h1> <p> ～内容 (** ここが可変領域 **) ～ </p> </body> </html> ファイル： home.html
- 6. いちばん簡単な下層ページのモック <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> その他のページ </title> </head> <body> <h1> その他のページ </h1> <p> ～内容 (** ここが可変領域 **) ～ </p> </body> </html> ファイル： default.html
- 7. 名前を決める テーマの名前を考える ( 半角英数 ) ここでは「 VerySimple 」とする 「 VerySimple 」というディレクトリを作り、以後作成 するファイルはすべてこの中に入れる。
- 8. テーマ定義ファイル ３つのファイルを作ってテーマディレクトリ直下に入れる。 ファイル： description.txt ファイル： thumbnail.png テーマを識別するアイコン / サムネイル画像 120 x 90 ピクセルの png ファイル： typography.css 編集・管理機能が使うための CSS 。内容は共通なので、他の テーマファイルからコピーしてくる VerySimple <- テーマの名前 Theme for concrete5 very simple. <- テーマの説明
- 9. トップページと下層ページを配置 テーマファイルは実は PHP スクリプトである ファイル名は以下のようにする トップページ用： home.php それ以外のページ用： default.php 先に作ったモックアップ HTML をとりあえず拡張子を 「 php 」にしてテーマディレクトリに入れる 参考 ) ページタイプを増やすことも可能 例 ) 左サイドバー用、右サイドバー用 例 ) 商品リストページ用、商品詳細ページ用
- 10. PHP ファイルのお約束 <?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?> ブラウザからアクセスされたときに中身が見えないように、すべて の PHP ファイルの先頭に以下を記入しておく ( おまじない )
- 11. 共通するところは部品にしよう それぞれのページタイプ用 PHP ファイルで、内容が同じかつ ユーザーが編集しない部分は共通部品化したほうが後々の修正 が楽 よくある例 「 <html> ～ <body> 」までと「 </body> ～ </html> 」まで グローバルメニュー、住所連絡先 共通部品として切り出した PHP (HTML) の断片は 「 elements 」というサブディレクトリの中に入れるお約束 ここでは「 <html> ～ <body> 」までと「 </body> ～ </html> 」 までを部品化する
- 12. <head> のお約束 <?php Loader::element('header_required'); ?> <style type="text/css">@import "<?php echo $this->getStyleSheet('typography.css');?>";</style> <title> 、 <meta name="keywords"> 、 <meta name="description"> 、 <meta http- equiv="content-type"> は入れない jQuery 本体の JavaScript 呼び出しは入れない <head> 直後ぐらいに、以下を記述
- 13. </body> のお約束 <?php Loader::element('footer_required'); ?> </body> の直前ぐらいに、以下を記述
- 14. テーマディレクトリ直下の CSS ファイルは以下のよう に記述できる 画像、 JavaScript 、 CSS など <style>@import "<?php echo $this->getStyleSheet('hoge.css');?>";</style> <link rel="stylesheet" href="<?php echo $this->getStyleSheet('hoge.css');?>" /> サブディレクトリの中のファイルや、 CSS 以外の画 像・ JavaScript などは、以下のように記述する <script src="<?php echo $this->getThemePath();?>/js/hoge.js"></script> <img src="<?php echo $this->getThemePath();?>/image/hoge.jpg" />
- 15. いちばん簡単な共通ヘッダ <?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?> <html> <head> <?php Loader::element('header_required'); ?> <style type="text/css"> @import "<?php echo $this->getStyleSheet('typography.css')?>"; </style> </head> <body> ファイル： elements/header.php
- 16. いちばん簡単な共通フッタ <?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?> <?php Loader::element('footer_required'); ?> </body> </html> ファイル： elements/footer.php
- 17. 共通部品の呼び出し <?php $this->inc('elements/header.php'); ?> <?php $this->inc('elements/footer.php'); ?> 共通部品は次のようにして呼び出す
- 18. 編集可能エリア <?php $a = new Area('Main'); $a->display($c); ?> 編集可能エリアには次のように記述する 「 Main 」のところは編集可能エリアを識別する一意 の文字列 １つのページタイプの中に複数の編集可能エリアがあ る場合は、この文字列を区別する 例 ) 「 Main 」「 Sidebar 」など
- 19. いちばん簡単なトップページ <?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?> <?php $this->inc('elements/header.php'); ?> <h1> トップページ </h1> <p> <?php $a = new Area('Main'); $a->display($c); ?> </p> <?php $this->inc('elements/footer.php'); ?> ファイル： main.php
- 20. いちばん簡単な下層ページ <?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?> <?php $this->inc('elements/header.php'); ?> <h1> その他のページ </h1> <p> <?php $a = new Area('Main'); $a->display($c); ?> </p> <?php $this->inc('elements/footer.php'); ?> ファイル： default.php
- 21. アップロードするところ concrete5 がインストールされているとこ ろの「 theme 」ディレクトリ 手元のテーマディレクトリのディレクトリ 構造を保ったままアップロードする 「 concrete/theme 」ディレクトリは標準 添付のテーマが入っている
- 22. インストール～テーマ適用 [ 管理画面 ]->[ システムと設定 ]->[ キャッシュ をクリア ]->[ キャシュをクリア ]( 念のため ) [ 管理画面 ]->[ テーマ ]->[ インストール可能な テーマ ]->[ インストール ]->[ 有効 ] 必要に応じ、 [ 管理画面 ]->[ ページタイプ ] で ファイル名 ( ハンドル ) と名前の関係を追加修 正する 例 )[ 商品ページ ] -> [product_detail](.php)
- 23. ナゾな「テンプレートタグ」は存在しない これでほぼすべてです ( 爆 WordPress や MovableType のような、ナゾの「テン プレートタグ」は存在しない その代わり「編集可能エリア」におまじないの PHP コードを埋める 特別なパーツやウィジットはすべて「ブロック」とし て GUI で入力するので、覚えるおまじないがとても少 ない PHP のごくあたりまえな文法 (HTML 含む ) でしかな いので、特殊な方言を覚える必要がない