e工房フジサキが運用サポートする ELEMENTOR ユーザー支援サイトです
Elementorのウジェット（部品）にHTMLタグ挿入というウジェットがあります。
そのHTMLタグにオンラインショップの「買い物かご」を貼り付けた例で、不具合が発生しました。即ち、Elementorで実装できない機能を、どのように回避したのかの事例報告で。
藤心WordPress塾は、新しいプラグイン ELEMENTOR によるページ編集を全面的に導入し、WordPress 初心者にも易しく丁寧に WordPress の楽しさと素晴らしさを、レクチャーすることをモットーとして活動しております。
カラフル（Colorful）というLP(ランディングページ)に特化してHPを作成するツールがあります。それも安価（8,760円）で購入できる優れものツールです。ツールと言ってもパッケージ・ソフトウエアではなくて、WordPressのテンプレートの形態を取ったツールとなっています。
「カラフル（Colorful）」とは、
WordPressの有料テンプレートです。そのテンプレートを一つ購入するだけで、自社のLP（ランデングページ）いくつでも簡単に作成できる優れものツールです。
WordPressのテンプレートだから、WordPressをインストールしたら、ついでにテーマをインストールする感覚で「カラフル（Colorful）」を手軽に自社のLPページとして利用できるようになります。
当方の制作代行で一番使用しているWordPressテーマが「Lightning」です。
その「Lightning」を使用して「Lightning」見本サイトとして公開しているサイトがコチラのサイトになります。そして「Lightning」に関連した記事やコンテンツを集めて下層ページに集約して、この度、新装開店しました。
筆者のサーバーは、2017年よりＸサーバーを使い始めました。それ以後、ロリポップとの併用使用となっていましたが、2020年４月のロリポップとの契約更新をせず、以後は、Xサーバーだけでの運用となったわけです。
上記の左端にあるのが、Elementorが公式としてリリースしている「Hello Elementor」というテーマです。Elementorを使用する前提で作られているので、完全に互換性のあるテーマになっています。
上記の真ん中にあるのが、「OceanWP」というテーマです。こちらもAstraやHello Elementorと同じくElementorテーマの話題になるとちょこちょこと顔を出す高機能テーマです。
上記の右端にあるのが、「Astra（アストラ）」というテーマです。こちらはElementorに限らず、ページビルダー系のプラグインと相性が良いテーマです。jQueryを使用していないので高速表示を実現しているのだとか。
もう一つ、４番目のテーマとして紹介したいのが「GeneratePress」というWPテーマです。こちらも上で紹介したテーマと同様、Elementorの話とセットになることが多い人気テーマです。実は、このページで実装されているテーマがGeneratePressです。
最近、サイトの送られてくるスパムまがいの迷惑メールが増えつずけて、毎日、20件にも達することがあります。何とかしなければ思いつつ悶々と過ごしていました。
大分前にXサーバーのメールフォームをテスト的に使用したことがあり、これを使ってみる手もあるのでないかと、何の根拠もなく、そのように思えて早速やってみることにしました。
筆者のサーバーは、2017年よりＸサーバーを使い始めました。それ以後、ロリポップとの併用使用となっていましたが、2020年４月のロリポップとの契約更新をせず、以後は、Xサーバーだけでの運用となったわけです。
当方は、WordPressでHPの制作代行を行っていますが、そのHPのWPテーマとして、よく使用するテーマがLightningです。理由は、ビジネス・サイトに最適なテーマとしてLightningを選んでおけば、当たり外れがないとの単純な理由しかありません。
WordPressに特化しての制作代行には、Lightningの他にElementorと言うページビルダを実装することが、Lightning以上に必須の条件で制作代行の必須アイテムとなっております。
そのElementorに抜群の相性を持っているWPテーマが、前記のHello-Elementor、OceanWP、Astraの３つと言われております。
（参考）【デモサイトあり】Elementorと相性の良いWordPressテーマ8選
本日は、そのElementorに相性の良いWPテーマで作成した見本サイトを紹介します。
ホームページを作成する際、最も気を使うことは、トップページに実装するメイン・ビジュアル画像とかアイキャッチ画像とかではないでしょうか？ 筆者の今でも毎回の如く頭を悩ませる問題の一つです。
今回、セクションの背景に画像を入れて、その画像の編集内容でElementorの持つ素晴らしい機能を活かしたメイン・ビジュアルを作ってみました。それもElementorの無料版で実装できるのです。凄いですね！
そして試作品として作成したメイン・ビジュアルの紹介と、関連する記事として背景画像の固定化の実装例も紹介します。
今一番Elementorとの相性の良いWPテーマ「Hello Elementor」を
実装したWordPressサイトが上記の３サイトです。
その３サイトの共通点を挙げてみました。
１．WPテーマとしてHello-Elementorが実装されている。
２．当然のことながらテキストエディターにはElementorが実装されている。
３．ＷＰテーマの特徴としてサイドバー無しの１カラムとなっている。
４．即ち、クラシック・ウジェット等のウジェットの設定が皆無。
HelloがElementorに極めて相性が良いWPテーマなのは、Helloを作っている企業がElementor社なのです。從って、Elementorを実装するならHelloをWPテーマに選択するのが当然のことなのです。
当サイトのナビメニューに「フィルタ・ギャラリー」というメニューがあります。
そのギャラリーは藤心で作成した自社HP見本を一同に集めて紹介するページです。
そのフィルタとして「Helloテーマ」を選択すると前記で紹介したHelloテーマ3兄弟が、
検索結果として再現されます。
Elementor使用のLightning
脱ElementorのLightning
上記の２サイトは、何れもWPテーマ「Lightning」で作成された見本ページです。
ただ、使用しているページ編集エディタが異なります。
左側は、Elementorを実装して、全ページElementor仕様のサイトになっております。
それに対して、右側は、脱Elementor即ちElementorを一切使用しておらず、ブロックエディタ：Gutenbergを使用したページ作りをしております。サイトの中身は、ほぼ同じ内容になっています。
作成者として、どちらが作成しやすかったかと言うと、左側のElementorサイトでした。
Elementorは使い勝手面からブロックエディタより断然作成し易いのは事実ですが、今回、ブロックエディタに慣れる意味で、Elementorの作成工数の倍の時間と手間をかけてのブロックエディタへのチャレンジ結果でした。
制作代行の流れ（SWELL）
制作代行の流れ（Elementor）
SWELLのステップ・ブロックとは、物の流れや操作手順などを表す表現方法の場で良く使われる機能をブロックにしたものです。上記の左側がSWELLの専用ブロック「ステップ」を実装したページです。
右側は、Elementorで作成したSWELLのステップと同等な「処理の流れ」的な表現例ですが、ElementorにはSWELLのような専用ブロック（ウジェト）はありません。