Elementor Proでは投稿一覧を簡単に設置することが可能ですが、デザインにこだわりがある場合など、細かいカスタマイズをすることに少し困る場合があります。そんなときは、プラグイン「Elementor Custom Skin」を併用することにより簡単にカスタマイズが可能となります。
Elementor Proの初期機能で作れる投稿新着一覧の作り方は以下の記事にて取り上げています。
[clink url="https://recross.co.jp/elementor-posts-index/"]
※無償版のElementorでは下記内容は対応することが出来ません。
| 今回はあくまでサンプルで作るもののめ、デザイン性は重視していません。予めご理解ください。
この記事で出来上がるよりも、もっと洗練されたものを作ることが可能です。 |
Elementor Custom Skinをインストール
WordPress管理画面から、プラグインの新規追加で「Elementor Custom Skin」と検索をしてインストール、有効化します。
新規追加の検索で出てこない場合には、コチラからダウンロードし、wp-content/pluginsにインストールすることでも可能です。
テンプレートを作成する
有効化ができたら、ワードプレスの管理画面から「テンプレート＞Theme Builder」を選択します。
「Theme Builder」を選択すると、図の様に「テーマビルダー」が立ち上がりますので、左側のメニューから「Loop」を選択し、右上の「＋Add New」を選択します。
テンプレートの選択画面になります。テンプレートを使ってカスタマイズする場合には「Archive」から選択すると良いと思います。オリジナルで作成する場合には、右上の閉じるボタンを選択します。
※今回はオリジナルで作っていきます。
テンプレートの選択画面になります。テンプレートを使ってカスタマイズする場合には「Archive」から選択すると良いと思います。オリジナルで作成する場合には、右上の閉じるボタンを選択します。
※今回はオリジナルで作っていきます。
今回は参考に2カラムで作ってみます。
続いてアイキャッチ画像を左側に入れてみます。
左側のメニューから「Single＞アイキャッチ画像」で挿入することが出来ます。
続いて右上にタイトルを入れてみます。
左側のメニューから「Single＞Post Title」で挿入することが出来ます。
タイトルにリンクを入れてみます。
タイトルを編集する状態にし「コンテンツ＞リンク」から「Post URL」を選択します。
つづいて投稿情報を入れてみます。
左側のメニューから「Single＞Post Info」を選択します。
そのままの設定ですと、「Author」「Date」「Time」「Comments」が入っています。
レイアウトを「デフォルト」にすることで、図の様に縦に並びます。
アイコンやフォント、枠線なども自由に設定できます。
少しだけ調整して、図のような感じにしてみました。
調整できたら、左下の「公開」を選択しましょう。
「PUBLISH SETTINGS」のポップアップが出現しますが、条件の追加が必要ありませんので、右下の「SAVE & CLOSE」を選択します。
※「テンプレート名」は、そのままですと「Elementor Loop #123」のような名前ですので、任意の名前へ変更したい場合は、ワードプレスの管理画面から「テンプレート」から対象のものを選択し、編集しましょう。
実装しみてる
トップぺージなどの実装したい箇所に、エレメンターの左側のメニューから「プロ＞ポスト」を挿入します。
挿入されたら、左側のメニューから「レイアウト＞スキン」で「Custom」を選択します。
スキンのすぐ下にある「Select a default templete」から先程作ったLoopのテンプレートを選択すると、図の様に反映がされます。
※下部の設定で「カラム＞1」にしています。
さいごに
Elementorの初期機能だけでは足りないカスタマイズをかけたい場合などの時は、今回のプラグイン「Elementor Custom Skin」を使って、オリジナルカスタマイズをしていきましょう。
エレメンターにはカラムやセクション単位でのリンクが標準では付けることが出来ません。以下の記事にて紹介しているプラグイン「Happy Addons for Elementor」を使用することで簡単に設置できます。
[clink url="https://recross.co.jp/happy-addons-for-elementor/"]