WordPressカスタム三兄弟
concrete5ならこう作る。
2015年10月04日
concrete5 harvest festival ー 2015 Autumn
ねこみみ隊長
ねこみみ隊長
岡本  直美  
concrete5 Japan Evangelist

千葉UG(コンちば)
1967年6月生まれ。

バブル期にCOBOLerとしてシステ
ム会社勤務。2児出産後、PCスクー
ル開業からweb屋に転向。職業訓練
校講師から一旦会社員になるも、現
在はフリーランスに戻る。
エバンジェリスト
ねこみみすくーる
2013年から週末にCMSを中心の

web製作者向け講習を行っている。
現在は、他の制作会社との連携をしつつ、
愛媛県松山市で主に製作活動をしている。
少人数制教室  
concrete5ジャパン インテグレートパートナー
よろしくお願いします。
本日のめにう
concrete5とWordPressの違い
WordPressのテーマとカスタム三兄弟
WordPressのデモサイト
concrete5のテーマ
concrete5とWordPressの似てるところ
concrete5のデモサイトの作り方
おまけ
今日は、時間があまりないので  
本当にざっくりな説明です。  
後日、千葉勉強会などで  
きっちり作成方法をやります。
concrete5とWordPressの違いconcrete5とWordPressの違い
ねこみみ的解釈。
CMSを建物に例えるなら
居住マンション物件。
WordPressは、
それぞれに決まったフォーマットの投稿(部屋)が用意されてますよね?
店舗用テナント物件。
concrete5は、
からっぽのスペースに壁やパーティションを切って自由にレイアウトしますよね?
最初から用意されている

部屋の形が違う。

   
それがふたつのCMSの違い。
でも今日は  
WordPressぽい

concrete5のサイトの

作り方のお話。
ねこみみ的説明。
WordPressのテーマと

カスタム三兄弟
WordPressのテーマと

カスタム三兄弟
PHP、CSSなどのファイルで構成された

テンプレートファイルのあつまり
テンプレート階層により、ファイル命名規則があり、
表示テンプレートが決められている
個別投稿ページや固定ページ、アーカイブなど
WordPressのテーマ
• カスタム投稿タイプ  
• カスタムフィールド  
• カスタム分類
WordPressのカスタム三兄弟
個別投稿、固定ページ以外の新たな投稿タイプ
タイトル、本文以外の新たな項目
新たなカテゴリーやタグ
ねこみみ的デモサイト説明。
WordPressのデモサイトWordPressのデモサイト
カスタム投稿タイプ  
カスタムフィールド  
カスタム分類
WordPressのサンプルサイト
四国各県の企画の投稿タイプ
放送回、場所など
企画名、関係のあるタグ
水曜どうでしょうの番組に出てくる

日本各地のロケ地を紹介するサイト(四国編)
作り方については

特に説明はしません。
だって今日はconcrete5のイベントですしおすし。
http://suidou-wp.nekomimi-school.com/
concrete5のテーマについて
ねこみみ的ざっくり解説。
concrete5のテーマについて
PHP、CSSなどのファイルで構成された

テンプレートファイルのあつまり
どのページにどのテンプレートや属性が使われるか

ページ編集画面や管理画面から設定する
concrete5のテーマ
ページテンプレート  
ページタイプ  
ページ属性(カスタム属性)  
トピック
concrete5のテーマ
ページのレイアウトなどを決める
ページの使い方やページの設定を決める
ページに新たな項目を追加する
カテゴリー等を設定する
※最新版 5.7系でのお話です。
ページタイプ
ページテンプレート
ページテンプレート
ページテンプレート
ページ属性
ページ属性
ページ属性
フォーム編集
権限
出力
concrete5とWordPress
似てるところ
concrete5とWordPress
似てるところ
ねこみみ的解釈。
WordPressの投稿
concrete5のコンポーザー
これは似てますよ...ね
おまじない。
hearder.phpを読み込み
footer.phpを読み込み
WordPressのこれに近い感じ?
concrete5 elementalテーマのdefault.php
concrete5のエリア
WordPressのウィジェットエリア
あくまでも、ねこみみ的解釈。
≒
concrete5のブロック
WordPressのウィジェット
あくまでも、ねこみみ的解釈。
≒
WordPressのウィジェット
concrete5のブロック
似てると思うんだけど?
concrete5のサンプルサイトconcrete5のサンプルサイト
ねこみみ的デモサイト説明。
ページタイプ  
ページ属性(カスタム属性)  
トピック
concrete5のサンプルサイト
四国企画のページタイプ
放送回、場所、タグなど
企画カテゴリー
水曜どうでしょうの番組に出てくる

日本各地のロケ地を紹介するサイト(四国編)
http://suidou-c5.nekomimi-school.com/
concrete5デモサイトの
作り方
concrete5デモサイトの
作り方
ねこみみ的ざっくり製作。
concrete5を「空白のサイト」でインストール
HW Simple Blog アドオンのインストール
concrete>themes>elementalテーマをコピー
page_theme.phpで名前などを変更
作り方
慣れていないうちはやらないほうがいい
使わないファイルを削除
使わないエリアの定義を削除
sass(scss)で書いたのでcssパスの変更
管理画面(ページとテーマ)からテーマを

インストール&有効化
作り方
今回作ったテーマ
css
elements
page_theme.php
page_forbidden.php
page_not_found.php
view.php
thumbnail.png
left_sidebar.php
right_sidebar.php
default.php
full.php
ページ属性
管理画面(ページとテーマ)の属性へ
セットを編集で「番組企画」セットを作成
カスタム属性の作成

(放送回、場所、行き方など)
作り方
ページ属性(カスタム属性)
放送回 選択
場所 テキスト
迷セリフ テキスト
行き方 テキストエリア(複数行)
ページタイプ
ブログのページタイプをコピーして作成
四国データと四国記事の2つ
作り方
四国データ(基本情報)
ページタイプ名 四国データ
ハンドル shikoku_data
デフォルトページテンプレート 右サイドバー
コンポーザーで開くか? いいえ
よく使うページ? いいえ
許可されたテンプレート 選択されたもの(右サイドバー)
公開方法 特定のページ下(Home)
四国記事(基本情報)
ページタイプ名 四国記事
ハンドル shikoku_entry
デフォルトページテンプレート 右サイドバー
コンポーザーで開くか? はい
よく使うページ? はい
許可されたテンプレート 選択されたもの(右サイドバー)
公開方法 特定のページ下(四国データ)
ブログ記事や四国記事など、決まった投稿フォーマット
があるときはコンポーザーを使う。
コンポーザーの機能を活かすにはページタイプの

設定がとても大切。
作り方
これでWordPressぽいこと、いくらでもできる。
いらないエリアのコードの削除。
CSS
CSSに必要なHTMLの記述
コーディング
以上。
いろんなブロックの使い方を知っていると、

ほとんどコードを書かなくてもうまくいく
ページタイプのフォームと出力(デフォルトページ)
の編集をきちんとしておく

(あとで編集しても既存のページに上手く反映されない)
コツ?
おまけおまけ
ねこみみ的カスタマイズ。
ブロックの表示内容などを変えたい時に使う
PHPの書ける人にここだけお願いできる
concrete5のオーバーライド機能ステキ!
カスタムテンプレート
WordPressのカスタムフィールドは

PHP書かないとページ上には表示されない
concrete5は「ページ属性の表示」というまんまの名前
のブロックがあるのでそれを使えば簡単!
concrete5、ステキ!
ページ属性の表示
ページ属性の表示
ねこみみ心の短歌。
最後に。最後に。
コンクリで   
ホームページを 作っても

   
心の壁は  壊したいのよ。
ご静聴ありがとうございました。

WordPressカスタム三兄弟、concrete5ならこう作る。