月: 2018年11月

WordPressのコンタクトフォーム7は定番で利用されている問い合わせフォームかと思いますが、確認画面を表示したいという日本式？のフォームがどうしても必要になるときがあるかと思います。

その時は「Contact Form 7 add confirm」を利用して確認画面を簡単に表示させることができます。

ですが

 

今回は、それではダメ！確認画面をポップアップで！！

 

というケースです。

 

ひさびさにどーするか悩んでみました。コンセプトはざっくり簡単に、忘れても後で見ればなんとなく思い出せるように？って感じです。

では、早速料理を始めたいと思います。

 

■必要な材料（プラグイン）

・Contact Form 7：コンタクトフォーム

・Contact Form 7 add confirm：コンタクトフォームの確認画面表示用プラグイン

・Popup Maker：ポップアップを作るプラグイン

・Simple Custom CSS and JS：スクリプトを作るプラグイン

 

上記のプラグインをWordPressにインストールしておきます。

 

■下準備１：コンタクトフォームを用意する

初期の簡単なものでOKです。「確認」のボタンを追加します。

ざざっといい加減なのでこんなところです。

<label> お名前 (必須)
    [text* your-name] </label>

<label> メールアドレス (必須)
    [email your-email] </label>

<label> 題名
    [text your-subject] </label>

<label> メッセージ本文
    [textarea your-message] </label>

[submit "送信"]

[confirm "確認"]

 

あとは、このコンタクトフォームを表示できるようにしておいてください。

■下準備２：ポップアップを作ろう！

「Popup Maker」＞「Add Popup」で新規に作ります。

中身としては

<table>
<tr>
<th>名前</th>
<td id="popup_name"></td>
</tr>
<tr>
<th>メールアドレス</th>
<td id="popup_email"></td>
</tr>
</table>

<input type="submit" value="送信" id="pop-submit">
<input type="submit" value="キャンセル" id="pop-cancel">

※外観などは後ほど変更してくださいね。

https://docs.wppopupmaker.com/article/42-popup-maker-jquery-api

 

作成したら一覧に戻って「popmake-xxx」の「xxx」の数字を控えてください。

 

■メイン作業として

「Custom CSS ＆ JS」＞「Add Custom JS」をクリックして新規に作ります。

下記のコードを貼り付けます。「popupnum_id」に下準備で入手したIDを入れてください

popupnum_id=ここにPOPUPMAKERのIDを記述;
popupcancelflg=true;
document.addEventListener('wpcf7submit', function (event) {
  switch (event.detail.status) {
    case 'wpcf7c_confirmed':
      jQuery('#popmake-'+popupnum_id+' #popup_name').html(jQuery('[name="your-name"]').val());
      jQuery('#popmake-'+popupnum_id+' #popup_email').html(jQuery('[name="your-email"]').val());
	  PUM.open(popupnum_id);
      break;
  }
}, false);


jQuery(document).on('pumBeforeClose', '.pum', function () {
	popupcancel();
});

jQuery(document).on('click', '#pop-cancel', function () {
	popupcancel();
    PUM.close(popupnum_id);
});

function popupcancel()
{
  if(popupcancelflg)
  {
  		wpcf7c_to_step1(jQuery("form"), true);
  }
}

jQuery(document).on('click', '#pop-submit', function () {
    popupcancelflg =false;
    PUM.close(popupnum_id);
	jQuery('.wpcf7-submit').click();
});

 

■ということで完成です。

フォームに内容を入力して、「確認」ボタンを押すとポップアップで確認が表示され、そのまま「送信」も可能！！

 

悩み始めて数時間で何とか料理できました。出来上がってみると大したことないってところ？？？

WordPressの投稿で記事を作成するときにセレクト文を記述したいと思うときがあるかと思います。（何の時ってなにかプルダウンで選択させてたいとき）

 

記述の注意としては

 

テキストモードで編集

セレクトテスト：<select>
<option></option>
</select>

セレクトテスト２：<select></select>

 

↓問題なく下記のように表示された。

 

コードをそのままでエディタをビジュアルモード →テキストモードタブの切り替えを行っていると。。。

セレクトテスト：<select>
<option></option>
</select>

セレクトテスト２：

 

そうすると「select」のコードが消えた。

<option>がある場合は残るみたいだが、optionが無い場合は消えてしまう。

 

標準のエディタでこのようになるので仕様っぽいですね。WordPressは4.9系

 

javascript等でoptionを自動で記述したい場合は気を付けいたい点ですね。

 

 

WordPressで5000アカウントを作成して運用できるのかテストしてみます。

本当は外部の認証でいろいろとやりたいところですが、面倒そうなのでWordPress基本機能を流用してみたいと思います。

会員情報（アカウント）は、基本内容＋拡張したいので「WP-Members」プラグインを入れます。

 

※「WP-Members」のインストール類は省略

 

アカウント情報のインポートに「Import users from CSV with meta」プラグインを使ってみたいと思います。

URL:https://ja.wordpress.org/plugins/import-users-from-csv-with-meta/

 

「Import users from CSV with meta」プラグインのインストール手順

「プラグイン」＞「新規追加」で「Import users from CSV with meta」を検索してインストール→有効化を行う。

 

「Import users from CSV with meta」プラグインの使い方

１．「ツール」＞「Import users from CSV with meta」をクリックする

２．インポートするCSVを用意する

 

↓のようなCSVを作れということ見たい

Username,Email,Password,Address,City,State,Zip code,Country,user_url
john,john@mymail.com,mypassword,Rd. Victoria,Atlanta,Georgia,1201,USA,
javier,javier@micorreo.com,pass,Av. Cervantes,Córdoba,Córdoba,14004,España,http://www.linuxhispano.net
elissa,eliss@mymail.com,elis2013,Verona,Ferrara,Ferrara,89891,Italia,
piere,mon@mon.fr,passwordfrance,Nation,París,Île de la Cité,28280,France,
peter,pet@me.com,passpass,National,Washington,Columbia,2001,USA,
luis,luisperez@correo.es,contrasenna,Sol,Madrid,Madrid,28005,Spain,
eleonora,eleonora@me.it,barele,Spagna,Roma,Roma,10101,Italia,

 

それなので最低限の内容にしてみた。（文字コードはUTF-８で保存）

Username,Email,Password
hoge,hoge@it-trouble.help,mypassword

 

「Import」タブの「ファイルを選択」で先ほどのCSVを選択し「Start importing」ボタンを押す。

 

WP-Membersを利用している場合は

「Activate user when they are being imported?」を「Activate users when they are being imported」に選択する。

 

↓簡単に入った。

 

あとは応用で・・・。

 

「WP-Members」で拡張したフィールドも対応できるか試してみる

 

今回は、所属という項目を「セレクト」で準備した。

WP-Membersで追加したフィールド。ラベル名：所属。メタキー：belongs

<---- 選択してください ---->|,
所属部署1|1,
所属部署2|2,
所属部署3|3

 

というこで早速さっきのCSVにフィールドを追加。所属はあえて「所属部署3」になるようにしてみた。（ちゃんと選択されるかの意味合いで）

Username,Email,Password,belongs
hoge,hoge@it-trouble.help,mypassword,3

 

↓取り込んでみたところちゃんと選択されていた。

 

 

5000アカウントをインポートしてみる。

まあ、Excelでざざーっとコピーしてアカウントを増やしてみた。

 

早速インポート処理….5000になると処理がかかりますな・・無事にインポートされた。

 

次に5000アカウント更新→5000アカウント新規でインポート処理。

→これも無事に終了。あれ日本語が落ちてる。。。

↓のようにしたら、「ほげ」が抜けた。あ、そうそう、username→ユーザ名ね。そーすよね。。

ほげ10000,hoge10000@it-trouble.help,mypassword,3

 

ニックネームや表示名を変更したい場合は

Username,Email,Password,belongs,nickname,display_name
hoge1,hoge1@it-trouble.help,mypassword,3,ほげにっく,ほげ表示

 

nicknameでニックネーム

display_nameで表示名

 

に対応しています。

 

アカウントを一括削除したい

「Import users from CSV with meta」プラグインではできないようです。

 

じゃあ、アカウントをロックしたい

→インポート時に「Activate user when they are being imported?」を「Do not activate users」すれば？結果は、有効アカウントは無効化にならなかった。

(無効化状態→有効化は可能）

アカウント無効？フィールドを追加してCSVでインポートしたが反映されなかった。。。ソースを見ないとダメかな

 

→特段アカウントをロックするようなプラグインがなかった。

ということで「http://jisakupc-technical.info/web-survice/wordpress/4839/」の「User Account Lock out」プラグインを使ってみるか？

 

新たに試してみた。

↓

■アカウント権限を「無し」にする

Username,Email,Password,belongs,nickname,display_name,role
hoge1,hoge1@it-trouble.help,mypassword,3,ほげにっく,ほげ表示,''

上記をインポートして権限を無しにする

 

その後「Bulk Delete」プラグインでアカウントを削除する

Bulk Delete

 

・「Dulk WP」＞「Dulk Delete Users」をクリックする

なぜか権限が「NONE」だとうまくいきません。

それなので削除権限グループを作って、削除するようにすると良いと思います。

 

 

うーん、今日はここまでさ。