【Elementorを使ったWordPressサイト制作②】Elementorを準備しましょう

記事
コラム
こんにちは、webデザイナーのLeycoです。
「すべての人がwebを使って自由に表現するお手伝いをする」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。

前回から、「WordPressで簡単にwebサイトが作れる!」と人気が高いElementorというプラグインをご紹介しています。

今回は、Elementorの導入方法をお伝えします。
webサイトを自作したいという方は、ぜひご覧ください。

(なお、今回からの内容は、ご自身のサーバーでWordPressが作業できる環境になっていることが前提です。
まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。)

はじめに:Elementorの設定は簡単です

Elementorは「ページビルダー」と呼ばれる、編集を簡単にしてくれるWordPressのプラグインです。
編集画面がわかりやすいので、プログラミングの知識がなくてもサイト作成ができます。

Elementorを設定する手順も簡単。
さっそく、次からご紹介していきます。

スクリーンショット 2023-11-06 10.50.39.png

【Elementorの設定①】Elementorをインストール

まずは、Elementorをインストールしましょう。

WordPress管理画面の左側にあるメニュー「プラグイン」→「新規追加」で、右上の検索窓から「Elementor」と検索します。
すると、「Elementor Website Builder」というプラグインが出てきます。(下の画像では左上)
スクリーンショット 2023-11-06 10.33.10.png

「今すぐインストール」をクリックして、インストールを開始します。
次に「有効化」の文字が出てくるので、それもクリック。

そうすると、Elementorのサイト画面が出てきます。
スクリーンショット 2023-11-06 10.33.43.png
こんな感じで、アカウント設定など色々と質問されますが、すべて右下の「Skip」で飛ばしても大丈夫です。


【Elementorの設定②】テーマの設定

次にテーマを設定します。

テーマとは、WordPressのサイトの土台となるもの。
テーマによってElementorが動かないということはないのですが、Elementorが編集機能を強化させるプラグインなので、レイアウトがシンプルなテーマのほうが相性が良いと言われています。

レイアウトがしっかり作られているテーマの場合、そもそもElementorを使う必要がないとも言えます。

Elementorと相性の良いテーマとしては、
・Hello Elementor
・Astra
・OceanWP
・GeneratePress
などがあげられます。
1つ目の「Hello Elementor」はElementorを作っている開発者が作ったテーマなので、とりあえず迷ったらこちらがオススメです。

どのテーマを選ぶにしても、親テーマと子テーマをダウンロードして、子テーマを有効化することを忘れないでください。



【Elementorの設定③】起動するかチェック

では、実際にElementorが使える状況になっているか、確認してみましょう。
WordPress管理画面の「固定ページ」を確認すると、Elementorのページができていると思います。
スクリーンショット 2023-11-08 11.25.14.png
こちらの「Elementor #32」を「編集」を選択して開いてみます。

スクリーンショット 2023-11-08 11.27.44.png
このように「Elementorで編集」となっていれば大丈夫です。
ボタンをクリックすると、Elementorの編集画面へ移動できます。

スクリーンショット 2023-11-07 15.02.42.png

(こちらの画面になる前に、Elementorの広告画面が出てくることがありますが、そのまま消して大丈夫です。)

何でも良いので、左の要素をひとつ選んでみてください。
スクリーンショット 2023-11-08 11.31.22.png

今回は「画像」を選んでいます。
左下の「更新」がピンク色に変わりました。

Elementorは自動保存されないので、何か変更したらそのたびに「更新」を選んでおきましょう。

ただし、「更新」をそのまま選択すると、記事そのものが公開となります。
もし、作業途中で、記事を公開したくない場合は、「更新」の右にあるボタンから「下書き保存」を選びます。

スクリーンショット 2023-11-08 11.31.31.png

また、Wordpressの基本設定の「noindex」設定を使って、記事を公開しても検索されないようにする方法もあります。

「更新」を押すとエラーが出る場合は、その数字をチェックしておきましょう。エラーの原因を検索するときに必要です。


まとめ:Elementorは簡単に設定できます

ここまで、Elementorを使うための設定を見てきました。
手順が多いようにも見えますが、時間がかかる作業はないので、さくさく進められると思います。


ここまでご覧いただきありがとうございます。
次からは簡単な架空サイトを、Elementorを使って作っていきます。

ご自身のポートフォリオやLPなど、自作で頑張ってみたい!という方はぜひご覧ください。
引き続きどうぞよろしくお願いいたします。


サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す