Elementor Proで投稿一覧をカスタマイズする「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」を選択します。

実装しみてる

トップぺージなどの実装したい箇所に、エレメンターの左側のメニューから「プロ＞ポスト」を挿入します。

挿入されたら、左側のメニューから「レイアウト＞スキン」で「Custom」を選択します。

スキンのすぐ下にある「Select a default templete」から先程作ったLoopのテンプレートを選択すると、図の様に反映がされます。

※下部の設定で「カラム＞1」にしています。

さいごに

Elementorの初期機能だけでは足りないカスタマイズをかけたい場合などの時は、今回のプラグイン「Elementor Custom Skin」を使って、オリジナルカスタマイズをしていきましょう。

エレメンターにはカラムやセクション単位でのリンクが標準では付けることが出来ません。以下の記事にて紹介しているプラグイン「Happy Addons for Elementor」を使用することで簡単に設置できます。

2023.06.29

Elementorでカラムなどにもリンクを付けれるようにしてみる「Happy Addons for Elementor」

Elementor（無償版）、Elementor Pro（有償版）の双方ともに、カラムやセクションに対して、リンクを書けることが出来ま...