Wordpress

Elementorと有料テーマでサイトリニューアル完了

コロナ禍でのSTAY HOMEの時間を有効に使おう、ということで自分のポートフォリオサイトのリニューアル作業に取り組んでみました。Natsukoです。

さて、私は自分のサイトはWordpressで構築していますが、このサイトのリニューアル作業に、今回巷で評判のレイアウトプラグイン「Elementor(エレメンター) Page Builder」(※以下「Elementor」)を導入してみましたので、備忘のために作業メモを残しておきます。

じつはこのプラグイン、以前別サイトを構築する際に一度インストールしたものの、利用していた無料テーマとの相性が良くなかったのか、残念ながらうまく行かずに断念した経験があります。でも今回はテーマ(有料)との相性も良く、テーマ側のCSSをちまちまカスタマイズし、加えて「Elementor」側カスタマイザー内のmargin/paddingプロパティの調整程度で、なんとか公開しても大丈夫そうかな?の最低限の状態に漕ぎつけることができたので、今回の作業メモを残しておきます。
「Elementor」でWordpressサイト構築をしているけれどうまくいかないという方は、お役立ていただけるかも知れませんので、宜しければご参考までにどうぞ(何の役にも立たなかったらごめんなさい)。

「Elementor」本体は5/19/2020 時点で有効インストール数500万件以上、5,000件を超えるレビューは満点の5つ星を誇るレイアウトプラグインです。さらに、構成要素にアニメーションなどの動的な動きを加えるほか、様々な拡張モジュールをまとめて搭載したプラグインも多々リリースされているので、良さげなプラグインを選び、好みのモジュールをインストールして「Elementor」のウィジェットとして使えば、イメージにかなり近いサイトが作れてしまいます。
ちなみに今回使用しているテーマはDigiPressさんの有料テーマ『GRAPHIE』ですが、DigiPressのテーマはデザイン性はもちろん、カスタマイズのし易さ、SEOとレスポンシブ性の点からも個人的に好きで、価格も良心的なことからほかにも所有させていただいています(利用は1購入あたり1サイトまでなので、複数のサイトで利用する場合はサイトの数だけ買わないといけないのですが…)。
何はともあれとりあえずサイトのリニューアル完了で、今日は、美味しいビールを一杯飲んじゃおうかな!と思いつつ、酒の肴は何にしようか、真剣に考え中です。

【NATSUKO ART LAB リニューアル作業に関するメモ】


※要件定義やワイヤーフレームは頭の中だけで可視化しないまま作業着手⇒完了した。なので時間がかかった。
(どのくらいかかったかは言いたくない。個人のサイト制作でも、やはり可視化は大事です。)

「Elementor Page Builder」の利点
・ビジュアルエディタのため、CSS/HTMLのコーディング知識がない人でも視覚的にデザイン作業が進められる。
・Elementor 本体のウィジェットで物足りない場合は、あまたある拡張プラグインを追加でインストールし欲しいモジュールを選んでウィジェット化できるため、デザインや機能を容易に拡張できる(拡張プラグインは有料版もあるが、よほど凝ったり難易度の高いリクエストでない限り、無料版でほとんど事足りる。※私の場合)。
・Elementorのカスタマイザーでウィジェット単位でCSSがいじれるので、余白調整やテキスト装飾もラク。
・カスタマイズした要素はテンプレ化出来るため、複数ページ共通で使いたい場合もテンプレ呼び出して配置すればOK。※「Elementor」有料版でなくてもできる。
<テンプレ作成手順> ※ページ単位でもパーツ(ブロック)単位でも可
 保存:カスタマイザーフッター部分"更新"右側にある"▲"⇒「テンプレートとして保存」押下。タイトルつけて保存。
 呼出:ウィジェットドラッグスペース内の「+」アイコンでなく、その右側のフォルダのアイコンを押下して該当のテンプレ選択し呼び出し&配置。
[備考]
DigiPressの『GRAPHIE』のように、トップページを「固定ページ」で作れない場合は下ごしらえが必要で、トップページ表示要素用のスペースをWordpressウィジェットで作る必要があります。手順として
Step1. 新規ウィジェット(カスタムテキストでOK)をひとつ、メインエリア表示スペースに配置する(この段階では中身はブランクでもOK)。
Step2. WordPress新規プラグインのインストール画面で「Elementor - Header, Footer & Blocks」を検索、インストール&有効化する。有効化するとWordpress管理画面の「外観」項目内に「Elementor - Header, Footer & Blocks」メニューが追加されているので、選択して遷移した画面で"ADD NEW"を選択。
Step3. ブランクの投稿スペースに「Elementor で編集」ボタンが表示されるのでそこからElementor 編集画面へ。
Step4. 編集画面左ショルダーのカスタマイザー領域でウィジェットタブを開き、必要なウィジェットを選択して内容を編集&デザイン。作業終了したらカスタマイザー画面下にある「テンプレートとして保存」を押下し、タイトルをつけて保存。この状態でカスタマイザー上部にあるパネルメニューを開き、「ダッシュボードに戻る」を選択すると「Elementor - Header, Footer & Blocks」画面に戻る。この画面を更新して保存。ここでこのテンプレ専用のショートコードが発行されるのでコピーする。
Step5. 'Step1'で作成したテキストウィジェット内に、 'Step4'で発行されたショートコードを張り付けて保存。
Step6. プレビューまたは本番URL画面で無事表示されているか確認して終了。
とりあえずは以上。

「Elementor Page Builder」の欠点
・作業時のパフォーマンス、何かちょっと、、重い???…⇒確認中だが気のせいかもしれない。微妙。引き続き確認へ。

以上、とりあえず次回のために覚えておきたい作業メモでした。

 

※2020/5/27追記
「Elementor」導入後にわかった問題点などこちらで書きましたので、併せてどうぞ。

Return Top