【WordPress】ページビルダーElementor無料版と無料テーマAsheでサイトを作ってみた

WordPressのカスタマイズやプラグインに関する情報です。

今回は、ページがさくっと作れるページビルダープラグイン「Elementor」を使って、医療機関のサイトを作ってみました。要件としては、施設案内・サービス内容などの固定ページのほか、お知らせ・ブログといった記事の投稿も可能なコーポレートサイト。固定ページは1カラム、アーカイブ・記事は2カラムレイアウトで考えていました。

モンキー

ページビルダープラグインを使うとドラッグ＆ドロップでページが作れるよ

ピンキー

テーマの相性とかプラグイン同士の相性とか動作環境はどうなの？

動作確認バージョン

「WordPress」Ver5.3.3
テーマ「Ashe」Ver1.9.7.99.01
ページビルダープラグイン「Elementor」Ver3.0.14
ヘッダー・フッター編集プラグイン「Elementor – Header, Footer & Blocks Template」Ver1.5.3

2020年11月時点の最新バージョンです。

Elementorを使った理由
テーマを決める
本当によくわかるWordPressの教科書

Elementorを使った理由

ドラッグ＆ドロップで視覚的にレイアウトができるページビルダープラグインはいくつかありますが、記事にされてる方が多く情報量も多いのでElementor Website Builder(エレメンター)を選びました。バージョンは2020年10月時点の最新バージョンです。

参考にしました

Elementor Website Builder

https://ja.wordpress.org/plugins/elementor/

The Elementor Website Builder has it all: drag and drop page builder, pixel perfect design, mobile responsive editing, and more. Get started now!

Page Builder By SiteOrigin(サイトオリジン)と並ぶ人気のプラグインです。
Elementorには有料版と無料版がありますが、他のプラグインと組み合わせれば無料版で要件を満たすことができます。
メリット・デメリットいろいろあったのでご紹介します。

テーマを決める

ページビルダー系のプラグインを使う時に重要なのがテーマ選び。Elementorと互換性のあるテーマを調べて試してみた個人的な感想です。

Hello Theme (無料)

WordPress公式テーマ：Hello Theme
Elementorの純正テーマ。互換性は間違いないけどシンプルすぎてランディングページ向き。記事を2カラムレイアウトにできない。

参考にしました

Hello Elementor

https://wordpress.org/themes/hello-elementor/

A plain-vanilla & lightweight theme for Elementor page builder

Envato Elements (有料：月額固定費)

Envato Elements＞WordPress＞Themes
Envato Elements(エンバトエレメンツ)とは、定額で使える素材サイトでWordPressのテーマもあります。上部メニューから「More Categories＞WordPress＞Themes」と進み「Elementor」にチェックを付けるとElementorを使ったテーマに絞り込めます。デザインもおしゃれで使ってみたい！と思ったのですが、毎月固定費がかかるので断念。

余談ですが、Envato Elementsには無料の素材もありKeynoteやPowerPointのテンプレートもあるので覚えておいたら便利かも。

OceanWP (無料)

WordPress公式テーマ：OceanWP
有料・無料のデモテーマがありインポートして使えます。無料でおしゃれなテーマもあり。ただし、PHP7.2以上じゃないと動きません。(2020.11時点)

参考にしました

OceanWP

https://wordpress.org/themes/oceanwp/

OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the …

Astra (無料)

WordPress公式テーマ：Astra
OceanWPと同じように有料・無料のスターターサイトがありインポートして使えます。子テーマを設定すると、Elementorでヘッダー・フッターが作成できるプラグイン「Elementor – Header, Footer & Blocks Template」が動きませんでした。
有料版のElementor Proでは、ヘッダー・フッターの編集ができますが、無料版Elementorでは「Elementor – Header Footer & Blocks Template」が必須なのです。

参考にしました

Astra

https://wordpress.org/themes/astra/

Astra is fast, fully customizable & beautiful WordPress theme suitable for blog, personal portfolio, business website and WooCommerce storefront. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with Schema.org code integrated and is Native AMP ready so search engines will love your site. It offers special features and templates so it works perfectly with all page builders like Elementor, Beaver Builder, Visual Composer…

動かなかった組み合わせ

「Astra」Ver2.6.0
「Elementor – Header, Footer & Blocks Template」Ver1.5.3

PHPはVer7.0.0で検証。

Ashe (無料)←これを採用

WordPress公式テーマ：Ashe
同じく上記のテーマで満たされたかったことが、Asheで全て満たされたので最終的に「Ashe」を採用しました。プラグイン「Envato Elements – Photos & Elementor Templates」をインストールすると、テンプレートやブロック・ヘッダー・フッターなどのデザインがインポートできます。

参考にしました