补-蝉补辫06「カスタムフィールドを使いこなす」
?
1 like?1,871 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)
![辫谤别惫颈别飞.丑迟尘濒には
出力用のコードを書く
<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)
![辫谤别惫颈别飞.丑迟尘濒には
出力用のコードを書く
[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)
补-蝉补辫06「カスタムフィールドを使いこなす」
- 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ファイルがふたつ必要 ?eld.html preview.html
- 26. HTMLファイルがふたつ必要 ?eld.html preview.html 編集画面用 詳細画面用 テンプレート テンプレート
- 27. 详细画面って何？
- 28. 详细画面って何？ 編集前 後に移動する ? 各設定の情報画面
- 30. 辫谤别惫颈别飞.丑迟尘濒には 出力用のコードを書く <table class="adminTable adminTableY"> <tr> <th>★フィールドの名前★</th> <td>{★フィールドの英語名★}[raw]</td> </tr> </table>
- 31. 辫谤别惫颈别飞.丑迟尘濒には 出力用のコードを書く [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/?eld.html
- 34. 公開画面はどう書くの？ <!-- BEGIN_MODULE Blog_Field --> ブログ <!-- BEGIN ★フィールドの英語名★:veil --> {★フィールドの英語名★} <!-- END ★フィールドの英語名★:veil --> <!-- END_MODULE Blog_Field --> ブログ http://www.a-blogcms.jp/support/reference/?eld.html
- 35. 公開画面はどう書くの？ <!-- BEGIN_MODULE Category_Field --> <!-- BEGIN ★フィールドの英語名★:veil --> {★フィールドの英語名★} <!-- END ★フィールドの英語名★:veil --> <!-- END_MODULE Category_Field --> http://www.a-blogcms.jp/support/reference/?eld.html
- 36. 公開画面はどう書くの？ <!-- BEGIN_MODULE Category_Field --> カテゴリー <!-- BEGIN ★フィールドの英語名★:veil --> {★フィールドの英語名★} <!-- END ★フィールドの英語名★:veil --> <!-- END_MODULE Category_Field --> カテゴリー http://www.a-blogcms.jp/support/reference/?eld.html
- 37. 公開画面はどう書くの？ <!-- BEGIN_MODULE User_Field --> <!-- BEGIN ★フィールドの英語名★:veil --> {★フィールドの英語名★} <!-- END ★フィールドの英語名★:veil --> <!-- END_MODULE User_Field --> http://www.a-blogcms.jp/support/reference/?eld.html
- 38. 公開画面はどう書くの？ <!-- BEGIN_MODULE User_Field --> ユーザー <!-- BEGIN ★フィールドの英語名★:veil --> {★フィールドの英語名★} <!-- END ★フィールドの英語名★:veil --> <!-- END_MODULE User_Field --> ユーザー http://www.a-blogcms.jp/support/reference/?eld.html
- 42. 管理ページの カテゴリー一覧でIDを調べる これがカテゴリー滨顿
- 43. ?别濒诲冲肠颈诲(调べた滨顿).丑迟尘濒 を新規作成 ?eld_cid27.html ?eld_cid29.html
- 44. 各カテゴリー専用の カスタムフィールドを書く aaaaaa bbbb aaaaa bbbbbb ?eld_cid27.html ?eld_cid29.html
- 45. 各カテゴリー専用の カスタムフィールドを書く カテゴリーID 27のときだけ aaaaaa bbbb aaaaa bbbbbb カテゴリーID 29のときだけ ?eld_cid27.html ?eld_cid29.html
- 46. ?eld.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} = 表示しているページが属するカテゴリー滨顿 %{EID} = 表示しているページのエントリーID %{BID} = 表示しているページが属するブログ滨顿
- 47. 項目が切り替わるようになる カテゴリーID カテゴリーID 27の 29の それ以外 投稿画面 投稿画面 aaaaaa bbbb aaaaa bbbbbb
- 48. エントリー别?ブログ别でも 手順は同じ！ cccccc ddd cccc dddd ddd ?eld_eid99.html ?eld_bid3.html
- 49. エントリー别?ブログ别でも 手順は同じ！ エントリーID 99のときだけ cccccc ddd cccc dddd ddd ブログID 3のときだけ ?eld_eid99.html ?eld_bid3.html
- 50. 特定のカテゴリーだけ 本文を消す
- 52. ?本文＝ユニットを囲んでいる divにはclassがついている .entryFormColumn
- 53. テーマのbody要素を編集 <body class="category-%{CID}"> %{CID} = 表示しているページが属するカテゴリー滨顿
- 54. テーマのbody要素を編集 <body class="category-%{CID}"> %{CID} = 表示しているページが属するカテゴリー滨顿 ということは… ＝カテゴリーごとに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要素で書かれている 颁厂厂で选択できない
- 60. jQueryが あるじゃないか！
- 61. テーマのbody要素を編集 <body class="blog-%{BID}"> %{BID} = 表示しているページが属するブログ滨顿
- 62. テーマのbody要素を編集 <body class="blog-%{BID}"> %{BID} = 表示しているページが属するブログ滨顿 ということは… ＝ブログごとに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. 蹿辞谤尘要素の仕様がわかれば なんでもあり
- 72. systemテーマ上書きのリスク 編集画面のどこを編集したのか あとで把握しにくい メジャーバージョンアップ後に 不具合が出る可能性も… 用法?用量を守って正しくお使いください
- 73. 次回はa-blog cmsの オリジナル機能！ カスタムフィールドグループ
- 74. ありがとうございました