Elementorを使わずWordPressのテキストエディタを使う時がある?

Elementorを使わずWordPressのテキストエディタを使う時がある?

  • 投稿者:
  • 投稿カテゴリー:WordPress

Elementorのウジェット(部品)にHTMLタグ挿入というウジェットがあります。
そのHTMLタグにオンラインショップの「買い物かご」を貼り付けた例で、以下のような不具合が発生しました。

某ユーザー様のネットショップでの事例で起きました。いつもの様にElementorでページ編集して「買い物かご」のHTMLタグを、Elementorのウジェット「HTMLタグ」に挿入したとたん前記のエラーです。

原因が分からずElementor側の調査に手間取っていて、このままでは納期に間に合わないとの判断で、そのネットショップページでのElementor使用を諦め、WordPressのエディタ編集に戻ってやり直すことにしました。

Elementorは、ページ単位にElementorを使用するか否かを、ユーザーの判断で選択できます。その辺は優れたツールだなと思うのですが、いざElementorを使わないページで、どうやって段組を設定するか、Elementor一辺倒で来た筆者には、呆然とした感で一瞬頭が真っ白になりました。

Elementorは段組そのものですので、Elementorを使わないで段組を設定する方法が鍵になります。その結果、「Bootstrap Shortcodes」というプラグインを見つけました。この手のプラグインはネット上に沢山あるみたいですが、一番やさしく段組が設定できるとの評判で「Bootstrap Shortcodes」を使ってみる事にしました。

 

先ず、該当の編集ページをElementorからWordPressに切り替えるために、「←WordPressエディタに戻る」ボタンを押して、「続ける」をクリックする。(左図)

ここからはElementorではなくWordPressのページ編集です。

プラグイン「Bootstrap Shortcodes」をインストールすると、テキストエディタに「Grid」というアイコンが追加されているのが分かります。その「Grid」アイコンをクリックすると、段組の初期設定画面(下記)が表示されていることが分かります。

左図の赤枠で囲ったアイコンが「Grid」アイコンです。
プルダウンメニューを開くと段組の段数(カラム数)を選択するメニューが表示されます。

前記の「Grid」で「3 Columns」を選択したケース

所謂、3段の段組を選択してクリックしたケースで生成されたソースコードが左図になります。左図のソースコードのTextの部分に画像を挿入したり、テキスト文字を挿入したりして、段組設定をして行くことになります。
[ ]で囲まれたテキストがShortcodesなのです。そのShortcodes以外のTextで記載された部分が段組内容としてHP上に表示されます。

前記のソースコードをカスタマイズした結果です。

前記の編集結果を閲覧画面で見た結果です。

見事に3段の段組が実装されています。

【参考】今回、参考にした資料です(作成者はToieeラボです)