有料のElementor Custom Skin Proではいったい何ができるのか？検証してみた！
アドオンをいろいろ見てて、やっぱりいちばん気になる機能はポストリスト、投稿一覧なんですよね。そこの機能で、検索結果やアーカイブでの表現が大きく変わってくる。
Elementor本体はそこに軸足はないようで、前述のように3種類しかないチープさ。
その救世主がElementor Custom Skinなわけですよ。本当素晴らしいアドオンですよ。無料で十分ですよ、デッカードさん！
ってことで…よくわかんないけど有料版で何ができるか調べてみました。
まずは基本！Elementor Custom Skin の使い方を復習してみる
インストール、利用の復習としては下記を見てください。
ポストのデザインをオリジナルで作成できるElementor Custom Skin 無料でも役立つアドオン
上記で説明てきていなかった、重要な点が1点。ACFの表示方法。
ACFの値を参照して表示する
投稿のブロックがオリジナルにできるっていうのもウリなんだけど、ACF、Advanced Custom Fieldsの表示方法なのだが、順番に説明すると下記のような流れとなる。
- ACFなどのプラグインでカスタムフィールドを追加する。
- 利用したいLoopテンプレートをElementorで編集する。
- 見出し、テキストエディターをACFの値を表示したい場所にドラッグアンドドロップで配置。
- Elementorメニューの右上のDBアイコンをクリック。
- セレクトメニューで「ACF Field」を選択。
- 「ACF Field」をクリック、「key」の部分で利用したカスタムフィールド名を選択する。
- 高度な設定で、ACFの値の前後にテキストを表示できる。
郵便番号なら前に「〒」、価格なら末尾に「円（税込み）」といった表示が可能。
これこそノーコード、Elementorの現在地。使わにゃソン！ソン！操作の詳細は下記の画像をみておくんなまし！
まずはACFで表示に必要となるカスタムフィールドを作成する。
Elementor Custom SkinでLoopテンプレートを作成。ACFを表示したい部分に、見出し、あるいはテキストエディターを配置する。入力欄の右上のアイコンをクリック。
アイコンをクリックして「ACF Field」を選択。このDBマークがついている場所ではACFの値を参照できる。これで動的なページや一覧なんて簡単にできちゃう！サイコー！
「ACF Field」に設定してから「ACF Field」をクリック。追加で表示するカスタムフィールド名が設定できる。設定した部分を再度クリックする操作もElementorの基本操作。これも大事！
最後は「高度な設定」値の前後に単位など、いろんな文字を追加。いやノーコードでここまでできるんだからサイコウじゃない！
ACFの値が表示できたら、お次はPro版にはがどんな機能があるかをレポート！
さすがProバージョン！投稿全体をクリッカブルにする
Loopテンプレートで個別の投稿ページにリンクするには、見出し、アイキャッチ画像にリンクをしなければならないのだが…「ヤベッLoopテンプレートから設定しなおしじゃん！」「画角を統一したいから画像を背景にしちゃったから画像にリンクできねぇよ！」などなど思われる諸氏もいらっしゃるかと。でも安心めされ！
そんなウッカリさんにも救済策があるんです！Elementor Custom Skin Proには！
「Make entire post a link?」を設定するだけ。超簡単でお手軽！
Display Mode、表示モードをMasonry、Same Height、Show in Sliderから選べる！
表示モードが3種類から組み合わせで選択可能となる。
Mandoryは隙間を開けずに表示するモード。ポストリストの1ブロック分の大きさの大小が激しくても自動的に調整をして埋めてくれる。
Same Heightは投稿のブロックの高さをそろえてくれる。
そして最後のShow in Sliderはワードのごとく投稿一覧をスライダー表示にしてくれる。
お次はAlternating templates Loopテンプレートを複数使っての表示が可能
投稿一覧で画像の入る部分を交互にしたいとなった場合に役立つ機能が「Alternating templates」。Loopテンプレートを複数使った投稿リストが作成できる。
下は「画像（左）テキスト（右）」と「テキスト（左）画像（右）」を交互に並ぶように配列した投稿一覧。複数種類のLoopテンプレートが使えるので相当に複雑な投稿一覧の設定が可能。
Dynamic Everywhereは様々な投稿の値を直接記述して表示
Elementorメニューの「Dynamic Everywhere」を「YES」にすると利用ができる。Loopテンプレート側に、投稿スラッグ、投稿タイトルを表示するためのコードを記述する。すると記述した内容に従って投稿の値が表示される。
利用方法はわかるのだけど、どんな場面で役立つか不明なのでした。
表示例としては下記のようなものが用意されている。
{{post_name}} // 投稿スラッグを表示する
{{permalink}} // 投稿のパーマリンクを表示する
{{post_title}} // 投稿タイトルを表示する
機能不明…Enable Display ドキュメントがないので詳細不明
無料で使い勝手の良いElementor Custom Skin。ドキュメントの貧弱さが痛い。今どきのアドオンは動画とサンプルで懇切丁寧に利用方法を説明しているものがほとんどだが、Elementor Custom Skinは無料版でもProでもドキュメントは超ストイック。「Dynamic Everywhere」「Enable Display」はともにどんな機能かがわかりにくい。「Dynamic Everywhere」は利用方法がわかっても利用場面やサンプルがまったくない。少なすぎる。
重厚なアドオンを使わずに投稿一覧、ポストリストを利用したい場合は、ぜひに利用したいアドオンなのだが…。
ただ、Alternating templates Loopはデザインブロックを交互に並べるだけでなく、工夫によっては投稿のタイムラインをオリジナルで構築できる。これは非常に魅力的。
