a-blog cms「simple2016」で学ぶカスタマイズ初級編

WYSIWYGを利用しないユニット
テーマとテンプレートの関係
モジュールによる情報の表示と条件設定
テンプレートの基本
カスタムフィールドの入力フォームと表示
お問い合わせフォームの作成
カスタマイズ初級編

WYSIWYGを利用しないユニット

テキストユニット
画像ユニット
ファイルユニット
地図ユニット
ユニットの種類
ビデオユニット（YouTube）
Yahoo地図
改ページユニット
引用ユニット
画像URLユニット
メディアユニット
モジュールユニット
カスタムユニット

ユニットグループ
ユニットを囲むDIVの Class を指定

マルチファイルドロップが可能

ブラウザ上で画像リサイズが可能
ブラウザ上で画像をリサイズして 
サーバーにアップロードが可能

テーマとテンプレートの関係

site2016 bootstrap2016 simple2016 blog2016
標準テーマは4つ

site2016 bootstrap2016 simple2016 blog2016
カスタマイズ難易度 ★★★ ★★★ ★★ ★
レイアウト ○ × × ×
コンテンツの表示切替 ○ × × ×
テンプレート変数化 ○ ○ × ×
モジュールID利用 ○ ○ ○ ×
デモデータ多数多数多数 1件
多くの機能を試したい方やクライアントにデモをする際にはsite2016を
カスタマイズの勉強をこれから始めたい方はsimple2016をインストール。
標準テーマの特徴

基本の3つのテンプレート
トップ・一覧・詳細

トップページ
一覧ページ
詳細ページ

URL：
テンプレート：
トップ http://localhost/
/themes/simple2016/top.html

URL：
一覧 http://localhost/recruit/
/themes/simple2016/index.html

URL：
詳細 http://localhost/recruit/entry-3.html
/themes/simple2016/entry.html

カテゴリー毎にテンプレートを変更

一覧ページ
詳細ページ
カテゴリーコードのフォルダを用意する

URL：
一覧 http://localhost/realestate/
/themes/simple2016/realestate/index.html

URL：
詳細 http://localhost/realestate/entry-23.html
/themes/simple2016/realestate/entry.html

テンプレートの利用（おまけ）

URL：
詳細 http://localhost/company/
/themes/simple2016/entry.html

←ファイル名を空にする
一覧URLで詳細を表示

←URLを指定
一覧からのリンクが変わります

モジュールによる情報の表示と条件設定

<ul>

<li><a href="{url}">{title}</a></li>

</ul>

テンプレート上には、HTMLタグをどう表示するのか指定され、表示条件や件数
については管理ページ上で設定します。
モジュールの基本

←表示順を指定
「固定ページ」と「投稿」という
区別は存在しません。

<ul>

<li><a href="{url}">{title}</a></li>

</ul>

モジュールにidをつけて区別する

←チェックをつけるとURLの値を優先して
　引数としてモジュールを実行します。

ファイルのインクルード


simple2016の場合には /themes/simple2016/include/sample.html が読み込
まれ、テーマからの絶対パスになります。
外部ファイルを読み込む場合には、<html><head><body>のようなタグのない
テキストファイルを読み込むようにしてください。

グローバル変数
%{BLOG_NAME} ブログ名ブログのタイトル
%{CCD} カテゴリーコード news
%{CID} カテゴリーID 5
%{UA_GROUP} UAグループ SmartPhone
%{VIEW} ページの状態表示 entry
%{BASE_URL} 基本となるURL http://localhost/

{text}[nl2br] 改行コードを<br />に
{text}[trm(10, "...")] 文字列を指定して足切り
{text}[split("_", 3)] 文字列を分割して指定文字列を表示
{path}[resizeImg(200,200)] 画像をトリミングしてファイルを生成
{price}[number_format] 数字を千単位にカンマ区切りに
/php/ACMS/Corrector.php に公式のものがあり、ユーザー自身が拡張す
る事も可能です。その際には /php/ACMS/User/Corrector.php に。
校正オプション

カスタムフィールドの入力フォームと表示

管理ページのテンプレート
/themes/system/admin

URL：
管理 http://localhost/bid/1/admin/top/ 
/themes/system/admin/top.html

URL：
管理 http://localhost/bid/1/admin/blog_edit/ 
/themes/system/admin/blog/edit.html

<header class="acms-admin-grid-r">
<div class="acms-admin-col-md-6">
<h1 class="acms-admin-admin-title"><i class="acms-admin-icon acms-admin-
icon-blog"></i><span class="js-dialog-title">ブログ管理</
span></h1>
</div>
<div class="acms-admin-col-md-6">

</div>
</header>

ここは修正しない事がオススメ
上記のファイルの中に /admin/blog/field.html をインクルードする記述が用意
されています。
/themes/system/admin/blog/edit.html

ブログ
カテゴリー
エントリー
ユーザー
モジュール
/admin/blog/field.html
/admin/category/field.html
/admin/entry/field.html
/admin/user/field.html
/admin/module/field.html
カスタムフィールドの種類と設定ファイル

カスタムフィールドの基本
<input type="text" name="sample" value="{sample}">
<input type="hidden" name="field[]" value="sample">
入力：/admin/blog/field.html

<p>{sample}</p>

表示：

カスタムフィールドの画像(例)

<img src="%{ARCHIVES_DIR}{sample@path}">
<input type="hidden" name="sample@old" value="{sample@path}"><br>
<label class="acms-admin-form-checkbox">
<input type="checkbox" name="sample@edit" value="delete">
<i class="acms-admin-ico-checkbox"></i> 削除 </label>

<input type="file" name="sample" size="20"><br>
<input type="hidden" name="field[]" value="sample">
<input type="hidden" name="sample:extension" value="image">
<input type="hidden" name="sample@size" value="300">
<input type="hidden" name="sample@filename" value="">
書き方を覚える必要はありません

カスタムフィールドの出し分け



/themes/simple2016/admin/entry/field.html を確認してみてください。
インクルードグローバル変数+

フォームのカスタマイズ

データを蓄積しダウンロードも可能

←テンプレートとの関連づけ

フォームモジュール





 











・・・
・・・

contact/form/main.html
step input.html
step#reapply input.html
step#confirm confirm.html
step#result confirm.html

フォームのステップ処理
<input type="hidden" name="step" value="confirm">
<input type="hidden" name="error" value="reapply">
<input type="hidden" name="id" value="contactForm">
<input type="submit" name="ACMS_POST_Form_Confirm"
value="送信内容の確認へ">
step 次のステップ
error エラー時のステップ
id フォームID

管理ページのカスタムフィールド
通常ページのお問い合わせ
＝
フォームのHTML記述

バリデーター＆コンバーター
<input type="hidden" name="sample:validator#required">
必須(required) 最小文字数(minLength) 最大文字数(maxLength) 下限値(min)
上限値(max) ファイルサイズ上限値(filesize) 数字チェック(digits) 
メールアドレスチェック(email) URLチェック(url) 等価チェック(equalTo)
日付チェック(dates) 時間チェック(times) 正規表現マッチ(regex)
メールアドレスの重複禁止(duplication)
変換オプション(上記の例では a)は、PHPのmb_convert_kana関数に準拠します。
<input type="hidden" name="sample:converter#a">

バリデーター＆コンバーター
<input type="hidden" name="sample:validator#required">
テンプレートにも書けますが、厳密なチェックが必要な場合には、管理ページ上
のフォーム管理のところで指定してください。

テーマテンプレートコンフィグ
モジュール
カスタム
フィールド
フォーム
ユニット
今日の紹介した7つのキーワード

PHPについては出てきませんでした。
HTML・CSS・JavaScript のフロント側の
技術だけでカスタマイズが可能です。
まとめ
これなら出来そうな気がしませんか？

マルチブログ・テーマの継承
ルールによる表示制御（マルチデバイス対応）
テンプレートの応用
Ajaxを利用したコンテンツの読み込み
Webサイトの運用に関する機能の紹介
カスタマイズ中級編（予定）

ありがとうございました

a-blog cms「simple2016」で学ぶ カスタマイズ初級編

More Related Content

Viewers also liked

Similar to a-blog cms「simple2016」で学ぶ カスタマイズ初級編

More from Kazumich YAMAMOTO

Recently uploaded