Download as PDF, PPTX
Uploaded bySeiko Kuchida
a-sap10「モジュールIDを理解する」
a-sap（a-blog cms札幌勉強会）第10回の資料です。a-blog cmsの重要な機能、モジュールとモジュールIDの詳細な解説と、モジュールの使い方のハンズオンを紹介しています。
![Webっちゃ vol.01 [Wordpressでできること]](https://cdn.slidesharecdn.com/ss_thumbnails/webccha-wordpress01-130527043932-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
a-sap10「モジュールIDを理解する」
- 1. 口田 聖子 ::WebbingStudio 2016.10.22（Sat）@ サッポロカフェ2Fスペース 10 モジュールIDを理解する
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8. Entry_Body Category_List Topicpath a-blogcmsに登録した情報を 呼び出す部品 エントリーの 詳細な情報を 呼び出します カテゴリーの 一覧を 呼び出します 現在のページの パンくずを 呼び出します
- 9.
- 10.
- 11.
- 12. <!-- BEGIN_MODULE Entry_Body—> ～ <!-- END_MODULE Entry_Body —> モジュールタグの書式 モジュール名 ＝このモジュールの役割 HTMLのコメントと同じ書き方です
- 13. MTやWordPressだと <mt:Entries> ～ </mt:Entries> <?php if(have_posts()): while(have_posts()): the_post();?> ～ <?php endwhile; endif;?> これな
- 14. <!-- BEGIN_MODULE Entry_Body—> ・・・ <h2> {title} </h2> ・・・ <!-- END_MODULE Entry_Body —> モジュール内の変数 変数は波カッコで囲まれています
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24. こう書くのは良くないですよね？ <a style=“ display: inline-block; color:white; background-color: orange; text-decoration: none; ・・・ ”>ボタン</a> 指定が多いとわかりにくい コードを使いまわせない 修正が面倒
- 25. こう書きますよね？ CSSHTML <a class=“btn”> ボタン</a> a.btn { display:inline-block; color: white; background-color: orange; text-decoration: none; ・・・ }
- 26.
- 27.
- 28. モジュールにIDを付ける <!-- BEGIN_MODULE Entry_Summary↩︎ id=“summary_news_recent” —> ・・・ <!--END_MODULE Entry_Summary —> テーマ内での役割がわかる任意の名前 （この例ではニュースブログの新着）
- 29.
- 30.
- 31.
- 32.
- 33. モジュールIDの利点 • 機能の可視化 •どのような役割を持っているか、ひと目でわかる • 再利用性の向上 •コード内に表示条件を書いていないので 二回目以降の制作でコピー・ペーストで使い回せる •メンテナンス性の向上 •Webの知識がない担当者でも変更できる • FTPクライアントがなくても変更できる
- 34. モジュールIDの利点 • 機能の可視化 •どのような役割を持っているか、ひと目でわかる • 再利用性の向上 •コード内に表示条件を書いていないので 二回目以降の制作でコピー・ペーストで使い回せる •メンテナンス性の向上 •Webの知識がない担当者でも変更できる • FTPクライアントがなくても変更できる 公開後も簡単に サイトの表示状態を調整できる ＝コンテンツマーケティングに強い
- 35.
- 36.
- 37.
- 38.
- 39. カテゴリーを作る • メニュー「カテゴリー」を選択 カテゴリーを新規作成 表示名：テスト コードネーム：test • メニュー「エントリー」を選択 エントリーを10件くらい、作成したカテゴリーに入れる •以下のURLへ移動 公開ページのURL/test/ • テストエントリーの一覧が表示されているのを確認
- 40.
- 41. モジュールを使って ブログの情報を出してみる • 公式ドキュメントのサンプルコードをコピー • テーマに貼り付けてみる •変数表にあるいろいろな変数を追加してみる
- 42. モジュールごとの違いを 比較してみる • Entry_Summaryのコードを… •Entry_Headlineに変えたらどうなる？ •Entry_Listにしたら？ • クリックしたときの設定項目の違いを比較 •Entry_ArchiveListは何も表示されない （モジュールIDを指定しないと設定できないモジュールもある）
- 43. モジュールIDによる 表示条件の変更 • まったく同じEntry_Summaryのコードを テーマ内に二回貼り付ける • 表示結果が同じことを確認 •それぞれ違うモジュールIDをつけて 設定を変えてみると…？
- 44. 多彩な設定項目を試す • カテゴリー絞り込み • フィールド絞り込み 例1：field_test01/1 例2：field_test02/かきくけこ •期間絞り込み • 表示順 • 件数 • オフセット • インデキシング • ループ内クラス • ページャー表示 etc…
- 45.