Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

a-sap06「カスタムフィールドを使いこなす」

2,074 views

Published on

2012年9月8日の「a-sap::a-blog cms札幌勉強会06」のプレゼン資料です。

Published in: Technology
  • Be the first to comment

a-sap06「カスタムフィールドを使いこなす」

  1. 1. 口田 聖子 :: WebbingStudio2012.09.08 (Sat)@ Garage labs
  2. 2. CSS Nite in SAPPOROの中身は a-blog cms
  3. 3. 他の地方版でも使ってます
  4. 4. 12日に坂田さんが来るよ!
  5. 5. 今回のお題
  6. 6. カスタムフィールドは管理ページにも作れる
  7. 7. エントリーのフィールドも 使いやすくしたい…
  8. 8. エントリーのフィールドも 使いやすくしたい… 不要な項目不要な項目
  9. 9. もっとカスタムフィールド管理ページ用カスタムフィールドの作り方カテゴリーごとにカスタムフィールドを変える基本の項目を消すには?
  10. 10. もっとカスタムフィールド管理ページ用カスタムフィールドの作り方カテゴリーごとにカスタムフィールドを変える 前回のおd(ry基本の項目を消すには?
  11. 11. 1 管理ページ用カスタムフィールドの 使いどころ
  12. 12. a-blog cms 基本テーマ「blog」
  13. 13. ブログ設定画面にオリジナルの項目がある
  14. 14. キーカラーを変更!
  15. 15. ユーザー設定画面もオリジナルの項目がある
  16. 16. サイドバーにプロフィールを表示
  17. 17. 書いておいてなんですが ユーザーフィールドはあんまし出番ないかも。 ー がーん ー
  18. 18. 各カテゴリーページに 画像を入れたい「site」テーマにも追加できる
  19. 19. エントリーと同様に画像・選択肢も作れる
  20. 20. カテゴリー別に画像を表示!
  21. 21. 2フィールドを作ろう!
  22. 22. カスタムフィールドを 追加する場所 blog[テーマ名] admin category user
  23. 23. カスタムフィールドを 追加する場所 blog[テーマ名] admin category user
  24. 24. HTMLファイルがふたつ必要field.html preview.html
  25. 25. HTMLファイルがふたつ必要field.html preview.html 編集画面用 詳細画面用テンプレート テンプレート
  26. 26. 詳細画面って何?
  27. 27. 詳細画面って何?編集前 後に移動する ・ 各設定の情報画面
  28. 28. field.htmlの作り方は エントリーのときと同じhttps://github.com/maki-t2nd/cfm
  29. 29. preview.htmlには 出力用のコードを書く<table class="adminTable adminTableY"> <tr> <th>★フィールドの名前★</th> <td>{★フィールドの英語名★}[raw]</td> </tr></table>
  30. 30. preview.htmlには 出力用のコードを書く [raw]って?<table class="adminTable adminTableY"> <tr> <th>★フィールドの名前★</th> <td>{★フィールドの英語名★}[raw]</td> </tr></table>
  31. 31. タグの後ろに[raw]を付けると HTMLをそのまま出力します{hoge}↓ ↓ ↓ ↓&lt;p&gt;ほげほげほげほげ&lt;/p&gt;{hoge}[raw]↓ ↓ ↓ ↓<p>ほげほげ</p>
  32. 32. 公開画面はどう書くの? <!-- BEGIN_MODULE Blog_Field --> <!-- BEGIN ★フィールドの英語名★:veil --> {★フィールドの英語名★} <!-- END ★フィールドの英語名★:veil --> <!-- END_MODULE Blog_Field -->http://www.a-blogcms.jp/support/reference/field.html
  33. 33. 公開画面はどう書くの? <!-- BEGIN_MODULE Blog_Field --> ブログ <!-- BEGIN ★フィールドの英語名★:veil --> {★フィールドの英語名★} <!-- END ★フィールドの英語名★:veil --> <!-- END_MODULE Blog_Field --> ブログhttp://www.a-blogcms.jp/support/reference/field.html
  34. 34. 公開画面はどう書くの? <!-- BEGIN_MODULE Category_Field --> <!-- BEGIN ★フィールドの英語名★:veil --> {★フィールドの英語名★} <!-- END ★フィールドの英語名★:veil --> <!-- END_MODULE Category_Field -->http://www.a-blogcms.jp/support/reference/field.html
  35. 35. 公開画面はどう書くの? <!-- BEGIN_MODULE Category_Field --> カテゴリー <!-- BEGIN ★フィールドの英語名★:veil --> {★フィールドの英語名★} <!-- END ★フィールドの英語名★:veil --> <!-- END_MODULE Category_Field --> カテゴリーhttp://www.a-blogcms.jp/support/reference/field.html
  36. 36. 公開画面はどう書くの? <!-- BEGIN_MODULE User_Field --> <!-- BEGIN ★フィールドの英語名★:veil --> {★フィールドの英語名★} <!-- END ★フィールドの英語名★:veil --> <!-- END_MODULE User_Field -->http://www.a-blogcms.jp/support/reference/field.html
  37. 37. 公開画面はどう書くの? <!-- BEGIN_MODULE User_Field --> ユーザー <!-- BEGIN ★フィールドの英語名★:veil --> {★フィールドの英語名★} <!-- END ★フィールドの英語名★:veil --> <!-- END_MODULE User_Field --> ユーザーhttp://www.a-blogcms.jp/support/reference/field.html
  38. 38. 3カスタムフィールドを使いやすくするTIPS
  39. 39. カテゴリーごとにカスタムフィールドを変える
  40. 40. 管理ページのカテゴリー一覧でIDを調べる
  41. 41. 管理ページのカテゴリー一覧でIDを調べる これがカテゴリーID
  42. 42. field_cid(調べたID).html を新規作成field_cid27.html field_cid29.html
  43. 43. 各カテゴリー専用の カスタムフィールドを書く aaaaaa bbbb aaaaa bbbbbbfield_cid27.html field_cid29.html
  44. 44. 各カテゴリー専用の カスタムフィールドを書く カテゴリーID 27のときだけ aaaaaa bbbb aaaaa bbbbbb カテゴリーID 29のときだけfield_cid27.html field_cid29.html
  45. 45. field.htmlにはこう書く<!--#include file="/admin/entry/field_cid%{CID}.html" --><!--#include file="/admin/entry/field_eid%{EID}.html" --><!--#include file="/admin/entry/field_bid%{BID}.html" -->%{CID} = 表示しているページが属するカテゴリーID%{EID} = 表示しているページのエントリーID%{BID} = 表示しているページが属するブログID
  46. 46. 項目が切り替わるようになるカテゴリーID カテゴリーID 27の 29の それ以外 投稿画面 投稿画面 aaaaaa bbbb aaaaa bbbbbb
  47. 47. エントリー別・ブログ別でも 手順は同じ! cccccc ddd cccc dddd dddfield_eid99.html field_bid3.html
  48. 48. エントリー別・ブログ別でも 手順は同じ! エントリーID 99のときだけ cccccc ddd cccc dddd ddd ブログID 3のときだけfield_eid99.html field_bid3.html
  49. 49. 特定のカテゴリーだけ 本文を消す
  50. 50.  本文=ユニットを囲んでいる divにはclassがついている
  51. 51.  本文=ユニットを囲んでいる divにはclassがついている .entryFormColumn
  52. 52. テーマのbody要素を編集<body class="category-%{CID}">%{CID} = 表示しているページが属するカテゴリーID
  53. 53. テーマのbody要素を編集<body class="category-%{CID}">%{CID} = 表示しているページが属するカテゴリーIDということは…=カテゴリーごとにclassが変わる
  54. 54. あとはCSSで消すだけ :D.category-11 .entryFormColumn,.category-22 .entryFormColumn{ display: none !important;}
  55. 55. あとはCSSで消すだけ :D.category-11 .entryFormColumn,.category-22 .entryFormColumn{ display: none !important;} カテゴリーIDが 11・22のときは本文が出なくなる
  56. 56. 特定のブログだけカテゴリー・タグを消す
  57. 57. 特定のブログでは、カテゴリーと タグを使わせたくない 隠したい…
  58. 58. しかし、この部分はtable要素で書かれている CSSで選択できない
  59. 59. jQueryがあるじゃないか!
  60. 60. テーマのbody要素を編集<body class="blog-%{BID}">%{BID} = 表示しているページが属するブログID
  61. 61. テーマのbody要素を編集<body class="blog-%{BID}">%{BID} = 表示しているページが属するブログIDということは…=ブログごとにclassが変わる
  62. 62. カテゴリーとタグは何行目? 0 1 2 行目 3 行目 4 0から数える
  63. 63. eqとcssを使おう :D<script>$(function(){ var Obj = $(.blog-3 table.entryFormTable); $(tr:eq(2), tr:eq(3), Obj).css({ display: none });});</script>
  64. 64. eqとcssを使おう :D<script>$(function(){ var Obj = $(.blog-3 table.entryFormTable); $(tr:eq(2), tr:eq(3), Obj).css({ display: none }); ブログIDが3のときは}); カテゴリーとタグが出なくなる</script>
  65. 65. まとめ
  66. 66. エントリー カスタムフィールドは 4種類
  67. 67. a-blog cmsの特徴カスタムフィールドのコードは公開ページ・管理ページ共通CSS・JSを追加しやすい画面別の表示切り替えはグローバル変数とincludeで
  68. 68. 編集画面をいちから書き替えることもできるsystem admin entry edit.html add.html
  69. 69. 編集画面をいちから書き替えることもできるsystem admin entry edit.html 編集画面・ユニット追加画面 全体のテンプレート 自分のテーマにコピーすると 内容を上書きできる add.html
  70. 70. form要素の仕様がわかれば なんでもあり
  71. 71. systemテーマ上書きのリスク 編集画面のどこを編集したのか あとで把握しにくい メジャーバージョンアップ後に 不具合が出る可能性も…用法・用量を守って正しくお使いください
  72. 72. 次回はa-blog cmsの オリジナル機能!カスタムフィールドグループ
  73. 73. ありがとうございました

×