WordPressのプラグイン、Elementorのインストールと初期設定について紹介します。Elementorはドラッグ&ドロップで固定ページや投稿をデザインできるWordpPress プラグインです。

Elementorのインストール方法

 Elementorのインストール方法は、他のプラグインと同じです。

1.ダッシュボードにログイン

 WordPressをある程度使用して慣れている方はこの辺りは読み飛ばしてください。初心者の方向けに少々詳しく説明します。

 まず、ダッシュボードにログインをします。

▶ スポンサードリンク

2.プラグインのページにアクセス

 ダッシュボードにアクセスしたら、左側のサイドバーを見ます。「プラグイン」という項目がありますのでクリックして一覧を確認します。下のキャプチャはwpXサーバーの自動インストール機能でWordPressをインストールした時の、初期の状態の画面です。

 既にプラグインがいくつかインストールされています。ちなみにこの中では、WP Multibyte Patchというプラグインは大事です。日本語表示では不具合が出る場合があるので、それを未然に修正してくれるものです。有効化しておくと安心です。

 Akismet Anti-Spam (アンチスパム)という気になる名前のプラグインもありますが、これはAPIキーというものを取得する必要があります。

3.Pluginの「新規追加」でElementorを検索​

 話しは少しそれましたが、プラグインの「新規追加」ボタンをクリックし、キーワードにElementorと入力します。その便利さと分かりやすさから、ここ数年で一気に注目度が上がっているプラグインです。おそらくトップにElementor Page Builderというものがトップに表示されると思いますので、「今すぐインストール」をクリックします。

 数十秒でインストールが完了し、先ほどクリックしたところが「有効化」に変わります。素直にクリックして有効化します。

 Elementorのうたい文句は、最も高度なフロントエンド・ドラッグ & ドロップ・ページビルダーということです。どんなテーマやページ、デザインにも対応しています。凄いですねぇ、でも本当に便利です。

 ここまでで、最初の作業は終了です。次は設定をしていきます。

Elementorの初期設定

1.Elementor Page Builderの『設定』へアクセス

 有効化が終わったらダッシュボードのサイドバーにあるElementorから設定画面を開きます。プラグイン一覧からも設定画面を開くことができます。

2.Generalタブの中の中で2か所にチェック

 細かいところはいろいろありますが、私が2年ほど使ってみて変更した方が使いやすいと思ったところはたった2か所です。Generalタブの中にある、Disable Global ColorsとDisable Global Fontsにチェックを入れるところです。この項目にチェックを入れると、Elementor独自の色やフォントの設定が無効になり、自分のテーマの設定で表示するようになります。

 ElementorのテーマやCSSをいろいろアレンジして、今後オリジナルのホームページに仕上げていくときには邪魔になります。データトラッキングの使用は書いてある通りで、チェックを入れるも入れないも自由です。お好きなようにどうぞ。

3.「変更を保存」で準備完了

 他にも、スタイルや詳細がありますがデフォルトのままで問題ありません。「変更を保存」して準備完了です。使っていくうちに気になることがあれば調べてみると良いと思います。私は特に変更していません。

Elementorで発生した不具合と対策

1.賢威8のテーマでElementorを使用する。

 アクセス増やアフィリエイトでの成果を期待するなら最低限の初期投資としてサーバーやテンプレートにお金をかけることをおすすめします。中でも、ウェブライダーさんの賢威はその効果が絶大でした。私が運営するサイトでも導入して成果をあげています。

 さて、その賢威ですが、バージョンが8になったところでElementorとの相性が若干よくないような「気がします」。気がするというのは。まだベータ版である上に、私の使用環境が特殊な場合もあるからです。賢威8でElementorを使う際、次のような問題があり対応しましたので紹介します。

 賢威8でElementorを使うと、見出しのCSSが修正されてしまい余白がなくなるという問題が発生。賢威をあきらめずにElementorを使用するために、解決法を紹介します。

2.Elementorのテキストエディターでタグの自動挿入

 もうひとつの問題点。それは、Elementorのテキストエディタで入力中に、BackSpeceキーで行を詰めると、自動的に<span>タグが挿入されるという問題点です。この問題は常に起こるわけではなく、テーマ側で文字サイズを設定するCSSがem表示であったり、2重に設定したりしているときに起こります。詳しくは下の記事で紹介しています。

 Elementorで記事を更新していると、backspaceで行を詰めたときに勝手に<span style~>が挿入されるテーマがあります。その原因の1つを突き止めましたので記録しておきます。

次の記事

 Elementorのインストール、設定が終わったらいよいよ記事の投稿に挑戦してみます。公開画面に直接文字を打ち込む感覚で記事を更新できます。

新規投稿・固定ページの追加を直感的に。Elementorの使い方を、画面のキャプチャも交えながら分かりやすく紹介します。