Your SlideShare is downloading. ×
いちばん簡単なconcrete5テーマ
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

いちばん簡単なconcrete5テーマ

3,216
views

Published on

ごく簡単なconcrete5のテーマの作り方説明。 …

ごく簡単なconcrete5のテーマの作り方説明。
勤務先の社内勉強会用に作成したもの。

Published in: Technology

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,216
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. いちばん簡単なconcrete5 テーマ~ concrete5 のテーマを作ってみよう~MACHIDA ‘matchy’ Hideki
  • 2. concrete5 とはPHP 、 MySQL を使用した、 Web サイト用 CMSいわいる「ホームページ」を作るためのCMS であり、 Blog ツールではないJoomla に近いカンジコーポレートサイトや学校サイトなどに適している
  • 3. テーマをつくろう標準でいくつかテーマがついてくるマーケットプレイスにも有償、無償のものがたくさんあるWordPress などのメジャーなものにはかなわない標準のテーマを転がして自分流にするのはちと無理がある「 Blog 」じゃなくて「ホームページ」なので、そこそこの見た目でないと ...というわけで、作ってみよう
  • 4. トップページと下層ページ今回はトップページとそれ以外 ( 下層ページ ) 用に2種類のページ ( ページタイプ ) をつくるまずはそれぞれモックアップの 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. テーマ定義ファイル3つのファイルを作ってテーマディレクトリ直下に入れる。ファイル: 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"> 、 <metaname="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 」のところは編集可能エリアを識別する一意の文字列1つのページタイプの中に複数の編集可能エリアがある場合は、この文字列を区別する例 ) 「 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 含む ) でしかないので、特殊な方言を覚える必要がない