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