さて、再び、Wordpress関連の記事になりますが、最近、またプラグインを購入しました。これは本当に強烈なプラグインで、Elementorを使用しているユーザーには最強とも言えます。現在、1ユーロが140円程度なのですが、499ユーロでしたので、まぁまぁな買い物になりました。もちろんライフタイムプランです。サブスクリプションもありますが、そちらも、まぁまぁな価格になるので、デベロッパーならライフタイムプランを選んだほうが先決でしょう。

今回はあまり詳しくは書きませんが、どういったプラグインかと言いますと、ACFの連携をElementor上で抽出並びに表示出来るようにしてくれるプラグインになります。Elementorはカスタムフィールドのデータに書き込まれたを呼び出すことは出来るのですが、カスタムフィールドの入力タイプが「連携」や「投稿オブジェクト」の場合は呼び出し出来ない仕様になっています。意地悪ですよねｗ

ECサイトなどのデータベースを多様するサイトの制作を行った場合、商品アイテムのブランドや、ショップ名などをカテゴリーやタグに登録して対応している方は多いですが、カテゴリーやタグだと書き込める内容に制限はないものの、お店の歴史やブランドの詳細などを紹介した場合に、写真を使用した説明などが書き辛いってのがありまして、そもそも、そういう仕様で作られていないので、かなり無理があるのです。

そこで、
1.CPT UIを仕様し、ブランドやショップのカスタム投稿タイプを作成します。
2.ACFで商品とブランドを連携させます。
3.商品一覧で、その商品名にブランドを表示します。
4.ブランド名をクリックすると、ブランドの詳細に飛びます。

もちろん、カテゴリーにブランドを登録して実行可能ですが、先に伝えた通り、カテゴリーの登録画面では、詳細な情報を登録できないため、カスタム投稿タイプで対応するわけです。

プラグインの名前は、Dynamic.ooo　です。

/****
郵便番号呼び出し
**/
function meta_headcustomtags() {
$headcustomtag = <<<EOM

EOM;
echo $headcustomtag;
}
add_action( ‘wp_head’, ‘meta_headcustomtags’, 99);

Fluent Formのフォームパーツには、IDやクラス名など、様々な属性を付与するための入力欄が備わっています。
但し少々癖があり、「ff_3_クラス名」の様に頭に勝手にFluentFormの頭文字＋フォームIDが付与されるものもあったりしますので、
付与したIDまたはクラスで動かないときは、コードを一度見てください。

さて、この属性の入力欄ですが、これから実装する郵便番号での住所自動登録に必須となる、
onkeyup=”AjaxZip3.zip2addr(this,”,’hogehoge’,’fugafuga’);” を入れる為の入力欄はありません。がしかし、
Fluent Formには、CSSとJavascriptを書き込む欄がありますので、自分で振ったIDがあるパーツに対し、以下のJavascriptを書き込みます。

今回は事前に以下のようなIDを振っています。
郵便番号：　zipcode
都道府県：　prefecture
郡・市区町村：　city

[JavaScript]
var sample = document.getElementById(‘ff_3_zipcode’);
sample.setAttribute(‘onKeyUp’, “AjaxZip3.zip2addr(this,”,’prefecture’,’city’);”);

WordPressでは、投稿・固定に関わらず、ページにYouTubeチャンネルを表示してくれるプラグインがいくつかあります。私が試したのは、下の４つになりますので、そちらをレポートしたいと思います。ちなみに④は、プラグインとは言えませんね。ただのリンクです。

①Embed Plus Plugin for YouTube（無料・有料）
②Feeds for YouTube（無料・有料）
③YotuWP（無料・有料）
④YouTube Gallery（Elfsight Apps）（無料・有料）

[全体的な特長]

• レイアウトが、「Flex」ではなく「Float」だったりする
• 設定項目の代表格は、列数・表示数である
• サムネイルの間隔は10px程度
• それぞれの間隔は、Paddingで取っている
• 動画詳細（タイトルやいいねなど）を個別に呼び出せない
• 動画詳細が表示出来るものは、全部表示されてしまう（三点リーダーなどない）

[間隔ををPaddingで取るデメリット]
・上のコンテンツと縦の線が合わない。（図を参照）

縦の線が必ず合う必要もありませんし、好みが分かれるところであると思いますが、私は好きではありません。私は右側の図の方が好きです。こういう自分だけのこだわりを持つことは大切だと思っています。

[私個人のプラグイン採用条件]

• YouTubeチャンネルの表示ごときに金は掛けたくない
• 縦の線が合う
• サムネイルの間隔をコントロール出来る
• 動画のタイトルとその他の詳細情報を表示出来る

[結果発表]
そんなものはありませんでした。全てガッチガチにFloatされていますが、最終的には妥協しなければなりません。そこで、CSSで簡単にコントロール出来そうだなと思ったものが、①のEmbed Plus Plugin for YouTubeということになりました。呼び出せるメタ情報も、タイトルのみです。そして、これまた、UIがとてもダサいのですが背に腹は代えられません。
ちなみに、有料でもいい場合は、絶対的に②のFeeds for YouTubeのプロ版です。

Feeds for YouTube プロ版の特長
・サムネイルとサムネイルの間隔をピクセル指定できる
・好きな項目（タイトル、日付、詳細など）を呼び出せる

④は、確かに、「お？！」と、一見カッコよく感じるのですが、余計なヘッダーが着いたり、そのヘッダーのデザインが柔軟ではなかったりで結局断念しました。カッコ良さは自分で作るべきだと思います。

採用したくないプラグインを一度でもインストールすると、DBが汚くなるイメージがあってイヤですよね。そういった方の参考になればいいなと思いました。

• WEBに乗っけたものは、何れ全部漏れる！（ WEB上に完璧なセキュリティなどない ）
• WordPressを使う場合は、PHPやJavascriptなど、オリジナルなコードは出来るだけ書かない
• 無料コースしか用意していない個人制作のプラグインは出来るだけ使わない
• ユーザーが少ない有料のプラグインは出来るだけ使わない

仕事でフォームを作るとき、どういった条件のフォームを作らなければならないか、要件を定義しなければなりませんが、自分の場合は、いつも難しく考えずに、ぼんやりと、まず２つに分けています。

• シンプルなフォーム
• シンプルじゃないフォーム

まずはこれだけでいいと思っています。尚、今回はシンプルなフォームには触れません。シンプルなフォームは、Elementor Proでサクッと作って下さい。という事でシンプルじゃないフォームについて書きたいと思います。

今回依頼を受けたフォームは以下の条件となります。

• ログインしたユーザーだけが見ることの出来るページを作成
• ログインユーザーページ内にお申し込みフォームを設置
• フォームの投稿内容（お申込み内容）をメールだけではなく、DBに登録
• 全てのユーザーの投稿内容をCSVやエクセルに一括エクスポートが出来る
• フォーム入力項目には条件分岐がある（Conditional Logic）
• ユーザーはお申し込みが完了後、再度ログインをしても、お申込み済みユーザーとして扱われ、フォームは現れない。（本当は退会処理が同時になされればもっと良い）

これを、コードでやると結構テクニカルですが、このフォームは簡単にそれらを実現してくれます。

今回クライアントに妥協して頂いた点は、管理はWEB上で行わず、あくまでもエクセルなど、ローカルで行ってくれ。ということにしました。これにより、フォームの項目に「氏名」「メールアドレス」「電話番号」は不要になります。「ログインIDとローカルPCにあるエクセルのIDの付け合わせでチェックをしていってくれ」ということでご納得頂きました。

本当に個人情報の事故を起こしたくなければ、これくらいの手間は掛けてもいいのではないか？と思うわけです。付け合わせくらいは、マクロでどうにでも出来ますし。今回は扱う規模が割と大きかったのでそうしました。これが私のセキュリティポリシーです。

Fluent Forms Proのご紹介

このプラグインは、フォームの制作を行うためのプラグインです。そして、上記条件の全てをクリアしたフォーム制作プラグインになります。もし、初心者の方が直面する難関があるとすれば、

• SMTPアドオンをインストールしなければならない
• プルダウンメニューの並び替えは、wp_queryを簡易化したものを書く必要がある

といった２点ありますが、それも特に難しいわけではなく、ヘルプページに説明がありますし、それ以外についても簡単に設定が可能です。

最後の詳細設定画面で、１回きりのお申込みにするか、など、細かい設定が可能となります。ここまで簡単で完璧なフォームプラグインに出会ったことはありません。購入プランはサブスクリプションとライフタイムプランがあります。私は、ライフタイムプランの最上級のプランで購入しました。９万円ほどですが、自分はサブスクリプションが好きではありません。

• Contact Form 7
• MW WP Form

どちらもシェア率がトップクラスのフォームですね。
しかし、私はどちらも使用しません。正しくは、使用していましたが辞めました。
もちろん、自作もしません。フォーム程度のプログラムなら、これまでに無数に制作してきたので、作れないこともないのですが、まず、時間がもったいない。時間を無駄にするくらいならお金を出します。時間のほうが大切です。というのが私の考え。では、私から見たそれぞれの特徴です。

MW WP Form

メリット

• 日本人だけが好きだと言われているプレビュー画面が簡単に作れる
• メールを投げるだけではなく、フォームの内容をデータベースに登録できる

デメリット

• Elementorと相性が悪く、コンフリクトを起こす
• 条件分岐にはコーディングが必要（そんなの、めんどくせーです）

Contact Form 7

メリット

• 「フラミンゴ」というプラグインを追加してデータベースに登録が出来ます
• 「Contact Form 7 Conditional Fields」というプラグインを追加することで条件分岐が使えるようになります

デメリット

• UIがちょっとなぁ・・・

Elementorでフォーム内容をデータベースに登録する方法は、２つ

• コーディングする
• プラグインを利用する

今回の用途

今回は、フォームの内容をメールで送る以外に、

• データベースに登録したい
• 条件分岐が出来る
• ラジオボタンの項目名に画像が登録出来る

これらが条件になります。
まず、データベースに登録出来るプラグインを探しました。

Form Vibes

そして使ってみた感想として、プラグインを追加するだけで、何の設定もなしにフォームで送信した内容がデータベースに登録されるようになりました。
しかし、自分は、今回の用途である条件分岐までも可能にしたプラグインを見つけました。条件分岐とデータベース登録の両方の機能を持っているプラグインということになります。また、支払いなどのアドオンを追加出来たりもします。

Fluent Forms

このプラグインは基本無料ですが、有料版だと、私の今回の用途をすべて満たせるものとなります。自分はこのプラグインは使ってみて素晴らしいと感じたので、価格にして\60,000～70,000弱ですが、それはライフタイムであり、個人ユースでも決して高くないと感じました。

予め、このブログでも紹介している「Ultimate Member」で会員サイトを制作し、
会員に予め配布済みIDとパスワードでログインしてもらい、
会員だけが申し込める条件分岐付きフォームを設置したかったのです。
予め、IDとパスワードをユーザーに郵送済みの場合、
サイトに個人情報を置いておく必要がないので何かと安心だなぁ～と思いました。
コロナのワクチン接種の受付システムに似ているかもしれません。

その他は、

Dynamic Content for Elementor

という名のプラグインを見つけました。このプラグインも、データベースへの登録が可能で、更に条件分岐も得としているようです、そして価格は、先ほど紹介した Fluent Forms よりも若干安いです。しかし、無料版がないということと、ラジオボタンなどの項目名に画像の追加は出来ないようです。（質問をなげたところ、そのように回答を頂きました。

Search & Fiter Proの検索窓は、「ul li label」の中にあるのですが、「ul」「li」のwidthを100%にしているのにも関わらず、伸びない。まさか・・・・・。

そのまさかでした。「label」が悪さしていました。コイツを[display:block]にした上で[width:100%]にしてやったら、％指定で伸びました。