Elementorで作ったページにショートコードを使ってPHPスクリプトを埋め込む

最近になってやっと使い出したElementor。

便利でいいんだけどコーディングの仕事が益々減っていくんでしょうな。まあ時代の変化に柔軟についていけるかがこの商売のキモなのでしょうがないか〜。

今回やろうとしている事。

●テーマ:ルクセリタス
●プラグイン:Elementor

この二つを使って

●ルクセリタスにはショートコードを登録する機能がある。

●Elementorにはショートコードを埋め込む機能がある。

これらを利用して

「ルクセリタスで登録したショートコードをElementorに埋め込む」

これを実現しようと思います。

Elementor

Elementorはパーツをドラッグして置いていくだけでHTMLを意識しないでWEBページが作れるwordpressプラグイン。

用意されたパーツを選んでWEBページが作れるサービスWixが結構前からあるけどあれのwordpress版。

Wixはブログサービスのようにドメインごと用意されているけど、Elementorはあくまでwordpressプラグインなので当然最初にwordpressをどこぞのサーバーに設置してから使う。

用意されたパーツを選んでWEBページが作れるサービスでは「ペライチ」がある。
かなりシンプルな操作で簡単にペライチのWEBページ、ランディングページが作れるサービス。

Elementorもかなり簡単に操作が出来て「ペライチ」と似たよう使い方だ。

しかし一番の違いはwordpressの指定した固定ページあるいは投稿ページを全く別物のWEBページ、ランディングページに出来るというもの。

これは強力だよね。

Elementorで作ったランディングページのurlは指定した固定ページのurlになるから元のwordpressサイトからのアクセスがもちろん簡単。

Elementorで作ったランディングページのurlを別ドメインに割り当てられるかはこんど調べておきます。

Luxeritas

Luxeritasルクセリタス、これはみんな知ってるよね。

無料ワードプレステーマでは一番使いやすいかな、自分としては。

クセがなくてカスタマイズしやすい。

気に入っているのはショートコード登録。

簡単にショートコードが登録出来て、それをエディターから呼び出して記事内に貼る事が出来る。

ちょっとしたPHPスクリプトを記事内に書きたいときなど重宝している。

そして登録したショートコードはエクスポート出来るのでよそのサイトでも使い回しが出来てしまう。

 

今回はこの二つの便利グッズを使ってゴニョゴニョやっていきます。

ルクセリタスでショートコードを登録

まずはルクセリタスでショートコードを登録してくだい。

ルクセリタスでは実に簡単にショートコードを登録してそれを記事編集エディターから呼び出して貼り付ける事ができます。

管理画面メニューから

Luxeritas→ショートコード登録

ここで登録出来ます。

 

登録出来たらそのショートコードをどこかにコピーしておきます。

{new_list id=”” post=””}

こんな感じのやつね。(ショートコード両端のカッコは変えてます。スクリプトを呼び込んでしまうので。)

Elementorでショートコードを貼り付ける

さあ、それじゃElementor編集画面に行きましょう。

新規の投稿ページ、あるいは固定ページを開いてタイトルをスラッグを決めて下書きにしておく。
Elementorでは元記事のタイトルは使わないしスラッグはあとからでもいいんだけど。

下書きしたら「Elementorで編集」をクリックでElementor編集画面に行ける。

左側に用意されたウィジェットの中にショートコードウィジェットがあるのでそれを記事の入れたい箇所にドラッッグ。

Elementor編集画面では通常の記事編集エディターのようにルクセリタスで登録したショートコードを呼び出す事は出来ないのでコピーしておいたショートコードをここで貼り付ける。

完了。

特定のカテゴリーの記事一覧やそれに対するページャーなんかElenentorのページに埋め込む事が出来るわけです。

なんとも簡単ですね。

また仕事が減るわ〜!

注意しなければいけないのはElementorで編集したページを通常のエディターで開くと「wordpressエディターに戻る」というボタンがあってそれを押すとElementorで編集した部分は見事に崩れるので絶対にやってはいけない。

Elementorで編集した大事なページはElementor編集画面の左下あたりで「テンプレート」として保存出来る。

それをやっておけばインポートしてすぐに復元出来るし、他のサイトでも使い回しが出来る。

これは絶対覚えておかないといけない機能ですよ。

Elementorはすでに結構使われていて、ランサーズやクラウドワークスに非プログラマーの人がElementorで作ったページを他サイトへ移動したいとか、「こういう感じのランディングをページを作ってほしいが後から自分で編集出来るようにElementorを使って作成して欲しい」などという案件がちらほらあったりする。

ソースを見るとタグが多くてゾッとする

Elementorで作ったページのソースを見るとタグが多くてゾッとしますわ。

まあ、いじる事はないだろうけどほんとにゾッとする多さです。


以上「Elementorで作ったページにショートコードを使ってPHPスクリプトを埋め込む」という記事でした。
気に入ってもらえたらシェアしてくれると嬉しいです。