a-blog cms「simple2016」で学ぶ カスタマイズ初級編
•
0 gostou•1,292 visualizações
オンラインで a-blog cms の勉強会を開催した際のスライドを公開します。初心者がカスタマイズを学ぶ際にインストールするテーマは simple2016 をオススメしています。
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a a-blog cms「simple2016」で学ぶ カスタマイズ初級編
Semelhante a a-blog cms「simple2016」で学ぶ カスタマイズ初級編 (20)
Mais de Kazumich YAMAMOTO
Mais de Kazumich YAMAMOTO (20)
a-blog cms「simple2016」で学ぶ カスタマイズ初級編
- 4. ユニット
- 5. WYSIWYG
- 6. ユニット
- 11. コンフィグ
- 17. テーマとテンプレートの関係
- 18. site2016 bootstrap2016 simple2016 blog2016 標準テーマは4つ
- 19. site2016 bootstrap2016 simple2016 blog2016 カスタマイズ難易度 ★★★ ★★★ ★★ ★ レイアウト ○ × × × コンテンツの表示切替 ○ × × × テンプレート変数化 ○ ○ × × モジュールID利用 ○ ○ ○ × デモデータ 多数 多数 多数 1件 多くの機能を試したい方やクライアントにデモをする際にはsite2016を カスタマイズの勉強をこれから始めたい方はsimple2016をインストール。 標準テーマの特徴
- 27. カテゴリー毎にテンプレートを変更
- 30. URL： テンプレート： 詳細 http://localhost/realestate/entry-23.html /themes/simple2016/realestate/entry.html
- 31. テンプレートの利用（おまけ）
- 36. <!-- BEGIN_MODULE Entry_List --> <ul> <!-- BEGIN entry:loop --> <li><a href="{url}">{title}</a></li> <!-- END entry:loop --> </ul> <!-- END_MODULE Entry_List --> テンプレート上には、HTMLタグをどう表示するのか指定され、表示条件や件数 については管理ページ上で設定します。 モジュールの基本
- 41. ←表示件数を指定
- 42. <!-- BEGIN_MODULE Entry_List id="news-list" --> <ul> <!-- BEGIN entry:loop --> <li><a href="{url}">{title}</a></li> <!-- END entry:loop --> </ul> <!-- END_MODULE Entry_List --> モジュールにidをつけて区別する
- 44. ←検索条件を指定
- 46. テンプレートの基本
- 47. <link href="/css/style.css" rel="stylesheet"> <img src="/images/sample.png"> パスの書き換え機能 <link href="/themes/abc/css/style.css" rel="stylesheet"> <img src="/themes/abc/images/sample.png"> テーマファイル：/themes/abc/top.html ブラウザで表示時：
- 48. <link href="/css/acms-admin.min.css" rel="stylesheet"> 読み込みが必須なファイル(CSS/JavaScript) <script src="%{JS_LIB_JQUERY_DIR}jquery-2.1.1min.js" charset="UTF-8"></script> <!-- BEGIN_MODULE Js --> <script src="/acms.js{arguments}" charset="UTF-8" id=“acms-js"></script> <!-- END_MODULE Js --> CSS JavaScript
- 49. ファイルのインクルード <!--#include file="/include/sample.html" --> <!--#include file="http://www.example.com/sample.txt" --> simple2016の場合には /themes/simple2016/include/sample.html が読み込 まれ、テーマからの絶対パスになります。 外部ファイルを読み込む場合には、<html><head><body>のようなタグのない テキストファイルを読み込むようにしてください。
- 50. グローバル変数 %{BLOG_NAME} ブログ名 ブログのタイトル %{CCD} カテゴリーコード news %{CID} カテゴリーID 5 %{UA_GROUP} UAグループ SmartPhone %{VIEW} ページの状態表示 entry %{BASE_URL} 基本となるURL http://localhost/
- 51. {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 に。 校正オプション
- 56. <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"><!--T-->ブログ管理<!--/T--></ span></h1> </div> <div class="acms-admin-col-md-6"> <!--#include file="/admin/topicpath.html"--> </div> </header> <!-- BEGIN_MODULE Admin_Blog_Edit --> ここは修正しない事がオススメ 上記のファイルの中に /admin/blog/field.html をインクルードする記述が用意 されています。 /themes/system/admin/blog/edit.html
- 58. カスタムフィールドの基本 <input type="text" name="sample" value="{sample}"> <input type="hidden" name="field[]" value="sample"> 入力：/admin/blog/field.html <!-- BEGIN_MODULE Blog_Field --> <p>{sample}</p> <!-- END_MODULE Blog_Field --> 表示：
- 59. カスタムフィールドの画像(例) <!-- BEGIN sample@path:veil --> <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> <!-- END sample@path:veil --> <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=""> 書き方を覚える必要はありません
- 61. カスタムフィールドの出し分け <!-- コード別フィールドの表示 --> <!--#include file="/admin/entry/%{CCD}.html" --> <!--#include file="/admin/entry/%{ECD}" --> /themes/simple2016/admin/entry/field.html を確認してみてください。 インクルード グローバル変数+
- 62. フォームのカスタマイズ
- 65. データを蓄積しダウンロードも可能
- 66. ←テンプレートとの関連づけ
- 67. フォームモジュール <!-- BEGIN_MODULE Form --> <!-- BEGIN step --> <!-- フォームの初期画面 --> <!--#include file='/include/input.html'--> <!-- END step --> <!-- BEGIN step#reapply --> <!-- フォームのエラー＆修正画面 --> <!--#include file='/include/reapply.html'--> <!-- END step#reapply --> <!-- BEGIN step#confirm --> <!-- 確認画面 --> <!--#include file='/include/confirm.html'--> <!-- END step#confirm --> <!-- BEGIN step#result ̶> <!-- 送信完了画面 --> <!--#include file='/include/result.html'--> <!-- END step#result --> <!-- END_MODULE Form --> ・・・ ・・・
- 68. contact/form/main.html step input.html step#reapply input.html step#confirm confirm.html step#result confirm.html
- 69. フォームのステップ処理 <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
- 72. バリデーター＆コンバーター <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">
- 74. まとめ
- 78. マルチブログ・テーマの継承 ルールによる表示制御（マルチデバイス対応） テンプレートの応用 Ajaxを利用したコンテンツの読み込み Webサイトの運用に関する機能の紹介 カスタマイズ中級編（予定）
- 79. ありがとうございました