WordPress

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

【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を使った理由

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

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

テーマを決める

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

Hello Theme (無料)

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

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

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

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

Envato Elements

OceanWP (無料)

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

Astra (無料)

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

動かなかった組み合わせ
  • 「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」をインストールすると、テンプレートやブロック・ヘッダー・フッターなどのデザインがインポートできます。

テーマ「Ashe」に決めた理由

・Elementorと互換性がある
・無料のWordPressテーマ
・固定ページは1カラム、アーカイブ・記事は2カラムレイアウトにしたい
・ヘッダー・フッターを自由に編集したい

ここまでのテーマの選定で制作工数の3分の1ぐらいかかってしまいました。次回は、完成までに発見したノウハウを公開します。

この記事は、2020.12.5時点の情報です。
ABOUT ME
モンキー
福岡県在住。社内SEとしてkintone(キントーン)でシステムを開発したりWordPress(ワードプレス)でサイトを制作したりしてます。もともとは20年ほどシステム会社で働いていて趣味でネットショップを構築・運営していました。 ある日突然英会話に興味を持ち国際交流が好きになりました。その影響で留学生に日本語を教えてみたいと思い、日本語教師の資格を取るため日本語教師養成講座420時間コースを修了。世界中を旅しながら仕事するのが夢です。