SNSでシェアする

WordPressのページビルダー系プラグインである、Elementorについて、その導入方法と最初のブログ記事の投稿方法を解説します。

「WordPressとは何か?」については下記の記事も参考にしてください。

なお、この記事と同内容の動画もあります。あわせてご利用ください。

今回使っているソフトウェア等のバージョン情報です。使用するソフトウェアや、そのバージョンが異なる場合には、画面構成や挙動が異なる可能性があります。

  • WordPress:Version 5.0.3–ja
  • テーマ:Twenty Seventeen Version 2.0 
  • Elementor: Version 2.3.8
  • ブラウザ:Google Chrome Version 71.0.3578.98

各ソフトウェアの最新バージョンは下記のリンクから確認してください。

1.Elementorをインストールする

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

WordPressのログイン画面から、ユーザー名・パスワードを入力して、ログインしてください。

今回は「demo-user」というユーザーアカウントを使用します。

ログインすると、次のようなWordPressの管理画面が開きます。

この画面で、左側に並んでいるサイドメニューの中から、「プラグイン」にマウスカーソルを合わせます。

するとドロップダウンリストが出てきますので、その中の「新規追加」をクリックしてください。次のような画面が開きます。

この画面の右上にある「プラグインの検索」と書かれた検索ボックスにElementorと入力してください。

しばらく待つと検索結果が表示されます。

上の画像の左上にある「Elementor Page Builder」が、これからインストールするプラグインです。

「今すぐインストール」のボタンをクリックしてください。インストールには数秒程度の時間がかかりますので、しばらく待ちます。

インストールが完了すると、「今すぐインストール」ボタンが、次の画像のように「有効化」ボタンに変化します。

では、「有効化」ボタンをクリックしましょう。有効化にも数秒かかりますので、少し待ちます。

有効化が完了すると、その旨のメッセージが表示されます。

以上で、WordPressにElementorを導入することができました。

2.Elementorの編集画面を開く

WordPressにElementorを導入したので、Elementorを使ってブログ記事を編集・投稿してみましょう。

WordPress管理画面の左にあるサイドバーから、「投稿」をクリックすると次のような画面になります。

画面の左上の方にある「新規追加」ボタンをクリックします。

すると、次のようなブロックエディター画面が開きます。

ブロックエディター画面の上部に「Elementorで編集」と書かれたボタンがあります。これをクリックしてください。

※WordPressのバージョンが古い場合等は、「クラシックエディター」と呼ばれる別の構成の画面が開く場合があります。ですが、「ブロックエディター」と同様「Elementorで編集」ボタンがあるので、それをクリックしてください。

上の画像が、Elementorの編集画面です。画面左に並んでいる様々なパーツ(ウィジェットと言います)を使って、記事を編集することができます。

3.Elementorでブログ記事を投稿する

Elementorの編集画面を開くことができたので、ブログ記事を投稿してみましょう。

まず、ブログ記事のタイトルを入力します。Elementor編集画面の左下にある歯車のマークをクリックし、「ページ設定」を開きます。

ページ設定の「タイトル」欄に「Elementor #17」という、自動入力された仮のタイトルが入っていますので、これを修正します。

今回は「初めてのブログ」というタイトルにしました。

これでブログ記事のタイトルを変更することができました。せっかくなので、記事の中身も書きましょう。

画面左側のツールバーの上端、「ページ設定」という見出しの右側に、点が9つ並んだボタンがあります。これをクリックしてください。

すると、最初にElementor編集画面を開いた時と同様に、ウィジェットが並んでいる状態になります。その中に「テキストエディター」と書かれたウィジェットがあります。その「テキストエディター」をマウスでドラッグし、画面の中央辺りにある「ウィジェットをここにドラッグ」と書かれている場所でドロップしてください。

上の画像のように、ダミーテキストが入ったテキストエディターが挿入されます。

画面左のツールバーでテキストを修正できます。ダミーテキストを削除して、お好きな文章を入力してください。今回は「こんにちは!初めての投稿です。」と入力しました。

これで、初めてのブログ記事を公開する準備ができました。

ツールバーの下端にある「公開」ボタンをクリックしてください。これにより、Elementor編集画面で編集した内容が保存され、ブログ記事として投稿され、インターネット上から閲覧することができるようになります。

無事、ブログ記事を投稿することに成功しました。

4.WordPressの管理画面に戻る

ブログ記事の投稿が終わったので、WordPressの管理画面に戻りましょう。

画面左のツールバー上端、「テキストエディターを編集」という見出しの左側にある、直線が3本並んだボタンをクリックします。

すると、上の画面のような状態になります。「ダッシュボードに戻る」と書かれたボタンがあります。これをクリックすると、WordPressの管理画面に戻ることができます。

※「公開」ボタンをクリックせずにWordPressの管理画面に戻ると、それまでの編集内容が破棄されてしまいます。「ブログ記事を公開したくはないが、これまでの編集内容を保存したい」という場合は、「公開」ボタンの右にある三角マークのボタンをクリックして、表示されるメニューから「下書きを保存」をクリックしてください。

WordPressの管理画面に戻ってくることができました。

以降は、画面中央に表示されている「Elementorで編集」ボタンから、先程のElementor編集画面を表示することができます。

以上で、Elementorの導入から、初めてのブログ記事投稿までの操作を行うことができました。

SNSでシェアする