a-blog cms IFブロックを使ったコンテンツの制御方法
-
Upload
godai-hori -
Category
Internet
-
view
394 -
download
0
Transcript of a-blog cms IFブロックを使ったコンテンツの制御方法
![Page 1: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/1.jpg)
IFブロックを使った コンテンツの制御方法
有限会社アップルップル 堀 悟大
![Page 2: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/2.jpg)
目次
1. IFブロックの基本編
2. IFブロックのオプション 3. ブロックの解決順序 4. AND演算子、OR演算子
5. フォームで使えるIFブロック
6. カスタムフィールドで使えるIFブロック
7. 簡単な正規表現をつかったIFブロック
![Page 3: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/3.jpg)
IFブロックの基本編
<!— BEGIN_IF [値/オプション/値] —>
出力されるHTML
<!— ELSE —> 出力されるHTML
<!— END_IF —>
![Page 4: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/4.jpg)
IFブロックの基本編
<!— BEGIN_IF [3/eq/3] —> <p>3 = 3です</p>
<!— END_IF —> !
*IFブロックに入る値は変数じゃなくてもOKです
![Page 5: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/5.jpg)
IFブロックの基本編オプションの種類 eq …. 等しい
neq…等しくない
gt……より大きい
gte….以上
lt…….より小さい
lte……以下
!lk …. 含まれる
nlk…含まれない
re……正規表現に一致
nre…..正規表現に不一致
em…….値が空
nem……値がある
![Page 6: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/6.jpg)
ブロックの解決順序
1. インクルードを解決 2. グローバル変数を解決 3. タッチモジュールを解決 4. モジュール類を内側から解決 5. IFブロックを解決
![Page 7: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/7.jpg)
AND演算子、OR演算子
AND編
<!-- BEGIN_IF [3/gt/2/_and_/2/lt/4] --> <p>条件を満たします</p>
<!-- ELSE --> <p>条件を満たしません</p>
<!-- END_IF -->
![Page 8: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/8.jpg)
AND演算子、OR演算子
OR編
<!-- BEGIN_IF [4/lt/2/_or_/2/eq/2] --> <p>条件を満たします</p>
<!-- ELSE --> <p>条件を満たしません</p>
<!-- END_IF -->
![Page 9: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/9.jpg)
フォームで使えるIFブロック
例えば電話番号 2つのフォームの1つでも入力されていない場合にエラーメッセージを表示したい
![Page 10: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/10.jpg)
フォームで使えるIFブロック
<!— BEGIN_IF [<!— BEGIN phone1:validator —>error<!— END phone1:validator —><!— BEGIN phone2:validator —>error<!— END phone2:validator —>/nem/] —> <p class=“acms-text-error”> 郵便番号が正しく入力されていません
</p> <!— END_IF —>
![Page 11: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/11.jpg)
フォームで使えるIFブロック
青丸が未入力の場合 !
<!— BEGIN_IF [error/nem/] —> <p>電話番号が未入力です</p>
<!— END_IF —>
先にバリデーターが 解決される
![Page 12: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/12.jpg)
フォームで使えるIFブロック
両方とも入力されている場合 !
<!— BEGIN_IF [/nem/] —> <p>電話番号が未入力です</p>
<!— END_IF —>
先にバリデーターが 解決される
![Page 13: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/13.jpg)
フォームで使えるIFブロック
DEMO
![Page 14: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/14.jpg)
カスタムフィールドで使えるIFブロック
デフォルトでエントリーのカスタムフィールドのcheckboxをcheckedに
この商品をエントリーに表示する
![Page 15: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/15.jpg)
カスタムフィールドで使えるIFブロック
<!— BEGIN_IF [%{EID}/em/] —> <input type=“checkbox” name=“show” value=“yes” checked=“checked”> <!— ELSE —> <input type=“checkbox” name=“show” value=“yes” {show:checked#yes}/> <!— END_IF —>
この商品をエントリーに表示する
![Page 16: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/16.jpg)
カスタムフィールドで使えるIFブロックDEMO
![Page 17: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/17.jpg)
簡単な正規表現をつかったIFブロック<!-- BEGIN_IF [%{BID}/re/2|3] —> 出力したいHTML
<!— END_IF —>
![Page 18: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/18.jpg)
簡単な正規表現をつかったIFブロックDEMO !
物件情報と、製品情報のみバナーを表示する
![Page 19: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/19.jpg)
IFブロックは最後に実行される<!— BEGIN_IF [%{BID}/re/2|3] —> <!-- BEGIN_MODULE Entry_Body —> <!-- BEGIN entry:loop —> <!— END entry:loop —> <!-- END_MODULE Entry_Body —> <!— END_IF —>
![Page 20: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/20.jpg)
IFブロックは最後に実行されるなかで、処理の重いモジュールが動いていると当然処理が重くなります。
![Page 21: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/21.jpg)
IFブロックを使おう
IFブロックは使い方次第で、サイトの実装をとても楽にしてくれます。
![Page 22: a-blog cms IFブロックを使ったコンテンツの制御方法](https://reader035.fdocument.pub/reader035/viewer/2022062420/55c0decdbb61ebce7b8b4680/html5/thumbnails/22.jpg)
ありがとうございました! steelydylan " steelydylan