コンタクトフォーム7で画像などファイルを送る。(添付ファイルの送信)

みんな大好きContact Form 7です。(3回目)

agnblog_20161015_02

前回はファイルの受信でしたが、逆にフォームから問い合わせてきた人に確認メールと合わせて、添付ファイルを送りたいケースもありますよね。
例えば資料請求フォームで、請求と同時にPDFファイルを自動的に送るとか。需要はあると思います。

そこでContact Form 7です。(いつもお世話になっております。)
受信だけでなく、サーバー上のファイルを添付しての送信も最初から対応しています。

受信メール設定場所
コンタクトフォームの編集→「該当のフォーム」→「メール」のタブagnblog_20161015_01 「ファイル添付」の欄に添付ファイルの場所を書きます。


[wp-contents]フォルダから下のパスを記載するか、サーバーのフルパス(絶対パス)で記載します。(httpからURLを書いてもダメです。)
フルパスがわかればサイト内の何処に置いてあるファイルでも構いません。よくわからなければ、WordPressダッシュボードのメディアでアップするのがいいでしょう。

先方の受け取り環境のこともあるので、あまり大きなファイルを添付しないようにしましょう。最大でも5MBぐらいが現実的ではないでしょうか?
フォームの作成時にその旨を記載しておくのが親切ですね。


コンタクトフォーム7で画像を送って貰う。(ファイル添付)

みんな大好きContact form 7の記事です。
(いつも使わせて頂いております。ありがとうございます。)

サイトに問合せフォームを付けたときに、画像などファイルを受け取りたいことが、あると思います。先日クライアントの工務店さんから「見積を出すのに、フォームから現場の写真を送ってもらえるようにしたいんだよね。」 などとのご要望がありまして、WordPressのフォームによる添付ファイルの送信について調べてみました。

Contact Form 7には初めから、画像を含む各種ファイル添付用のタグが用意されていますので、簡単に付けられます。まずフォームの設定(フォームタブ)画面です。

agnblog_20161014_02

ここで添付ファイルの種類とサイズに制限をかけられます。
詳しくはオフィシャルサイトで
http://contactform7.com/ja/file-uploading-and-attachment/
(…この記事不要です…)

次に受け取り設定(メールタブ)の画面です。
agnblog_20161014_03 ファイル添付のエリアにタグを書き込みます。
あとはフォームを固定ページに貼って送って貰うだけ!
agnblog_20161014_01

 受信すると、指定のアドレスにメール添付の形で画像が届きます。

注意点としては、添付ファイルは一時的にサーバーにアップロードされますが、フォルダの属性(パーミッション)などで書き込み禁止になっていると添付に失敗します。立ち上げたばかりで設定中のWordPressにありがちなミスです。


スマホの場合
・レスポンシブを意識してテーマを選んで作ればスマホ対応です。
・スマホだと画像選択時にカメラを選び、その場で撮影→添付の流れが実現できます。
(画像はandroidですが、iOSでも大丈夫。)

agnblog_20161014_04

業務によっては、画像のやり取りができると大幅に省力化に繋がることもあると思います。上手く活用したいですね♪



WordPressで画像情報を個々に取得する。

どうもKazです。

WordPressで画像を扱う際に、画像のalt、キャプション(caption)、説明(description)を個別に引用する事がありました。
altはともかく、キャプションや説明の欄を使う事が今まで無かったのでネットで調べてみると、以外と個別に取得する方法を書いている方が見当たらなかったので自分のメモ代わりの為にも書いておこうと思います。

WordPressで画像を扱う際にIDを持たせるかURLを持たせるか考える事があるかと思いますが、画像からイロイロと情報を引き出す場合はIDを持たせた方が使いやすいと思います。

さて、画像はIDで持つ事にして、その画像の情報はドコにあるのかと言うと…
WordPressのDBは『メディア用』『投稿用』『カスタム投稿用』などキレイに分かれておらず『ごった煮』状態になっていますので探すのは大変なのですが

.wp_postmeta
(meta_IDをキーにpost_IDやはaltなどがあります)

.wp_posts
(IDをキーに、キャプション、説明などがあります)

この2つのDBの中に入っています。
※画像に情報を書き込み、AdminerプラグインなどDB内を確認してみてください。

それぞれの記録状態がわかったので
画像のIDをキーとして取得する方法を説明致します。

【altの取得】

※altに関しては定番ですので、説明は不要かと思います。


キャプション(caption)、説明(description)の取得
前に説明した通りwp_postsの1レコードに書き込まれていますので、その1レコードを全部取得してから必要な情報のみ取得します。

【該当レコードの取得】


これでIDに紐付けされたレコードが取得できます。
取得できる項目が23項目ほどありますが
その中で

キャプション = post_excerpt
説明 = post_content
タイトル = post_title

以上の項目で持っています。
ちなみに、こんな物もあります。

投稿のタイプ(画像のみ) = post_type
オリジナル画像のURL = guid

では、早速alt以外の項目も取得していきましょう。

【画像情報の取得】


これで画像IDから基本的な情報が取得できました。

連続で取得する場合は、画像IDを配列に持ってループさせ
各情報も配列で持てば扱いやすくなるとおもいます。


Contact Form 7でアンケートフォームを設置

仕事でアンケートフォームを付けることになりそうなので、Contact Form 7での設置方法を整理して文章にしてみました。アンケートとしては小規模なものを想定しています。(回答数100未満くらい)

使ったプラグイン


Contact Form7
執筆時version4.5

導入方法は割愛します。ダッシュボード→プラグインからさくっと入れてください。
日本語対応しているので安心です。

cf701

フォームの設置(基本)


はじめて使う人は、基本となる問合せフォームを設置してみましょう。
ダッシュボードの左メニューお問い合わせからコンタクトフォームを選びます。
コンタクトフォーム 1としてサンプルが初めから入っています。cf702 貼り付け用の固定ページを用意しておきます。(記事でも構いません。)
本文にショートコードを貼ります。cf703 完了です!簡単です。cf704
実際にフォームに入力して送信すると、WordPressの管理者宛にメールが届きます。

アンケートフォームを作る


色々項目を増やしてアンケートフォームを作っていきます。
新規追加でフォーム追加画面を出します。↓最初の状態。
cf705 最初から基本的な部品は入っていますので、これを参考に付け足していきます。
今回はサンプルとして以下のようなアンケートを組み立ててみます。
フォーム下のボタンを押すとダイアログがでますので、必要項目をいれて挿入ボタンを押します。
今回は4つの質問を作ります。以下に記入例を挙げますので参考にしてください。

Q1 WordPressをセットアップしたことがある。
ある ない
→ラジオボタンcf711
Q2 どこにセットアップしましたか?
レンタルサーバー ローカルPC 専用サーバー ローカルサーバー
→チェックボックスcf712
Q3 現在WordPressサイトの管理をされていますか?
している いない
→ラジオボタンcf713
Q4 最もプラグインの多いサイトで何個入ってますか?
0~10 11~20 21~30 30個以上
→ドロップダウンメニューcf714
個人情報
・名前・メール・メッセージ
→デフォルトのまま

例と同じように<label>

個人情報部分は、標準の物をそのまま流用します。アンケートとしては不要なので題名を消しました。必須項目もそのままです。アスタリスクの有無で判別されます。
この段階で保存して固定ページにショートコードを貼り付け、見てみましょう。

cf706
もっともらしい、アンケートフォームができているはずです。
しかし、このままでは新規で追加した項目のデータを受け取ることができません。
受け取るための設定を追加してやります。

受信メールの設定


メールのタブを開いて受信メールの内容を書いていきます。受け取りに使いたいメールアドレスもこちらで設定します。
cf707
題名は消したので、[your-subject]は消します。
そして本文に追加したフォームのメールタグを追加して行きます。
追加出来るタグは上部に表示されているので、見ながら書き込みます。↓例です。
cf709
書いたら忘れずに保存を。

これで設定完了です。
回答者にもメールを送るには、メール(2)にチェックを付けて、同じように本文を書いていきます。回答や個人情報の控え、簡単なお礼、運営の署名などを記載しておくとよいでしょう。

表示メッセージの設定


Contactform7の仕様上、フォームの送信時に確認画面は出ません。
代わりに任意の送信完了のメッセージを出すことができます。
これはメッセージタブで設定します。
また、エラーの時の表示メッセージもこちらで設定可能です。
cf710
これでアンケートフォームは完成です。
実際の運用には、個人情報の取扱いなどもしっかり記載した方がよいでしょう。
より作り込むなら
・メールをWordPressのDBで管理する
・送信前に確認画面を出す。
などを別のプラグインを追加することで対応できます。

また、もっと大規模にアンケートを採るなら、
集計機能のあるアンケート専用のプラグインを使うとよいでしょう。
予算に都合が付くならSSLにも対応したいですね。

※以下に動作サンプルを設置しました。よろしければご回答ください。

続きを読む Contact Form 7でアンケートフォームを設置


コンタクトフォーム7のエラー(警告)を取る

みんな大好きcontact form 7。WordPressにお手軽にフォームを設置でき、カスタマイズも自在な人気プラグインです。私も長いことお世話になってます。
バージョン4.4に上げたあたりから、警告がダッシュボードに出るようになりました。
blog_cf7_01
設定は何も変えてないのに出た場合は、このまま利用してもちゃんとメールは届きます。
暫く放置してましたが、やはり気になるので、きちんと対処してみました。blog_cf7_02
今回の例では、エラーが2個ありました。というか書いてありました。blog_cf7_03
実際の設定画面を開いてみると、赤字の警告が該当項目の下に書いてあります。
それぞれ対処しましょう。
blog_cf7_04
題名の方はカンタンな話で、フォームからの送信時に題名が入ってないと、題名無しのメールになってしまうので、警告が出ます。ここは、題名が空欄の場合でも何らかの文字が入るように、分かりやすく「件名:」と入れてみました。

送信元のエラーですが、例としてあげたWordPressはドメインsample.com/test/と言うフォルダに構築しているため、ドメインが違うと認識されたようです。(もしかしたら違う理由かもしれませんが、それしか心当たりが無いので。)サブドメインを使っていても同じエラーが出るようです。
このような同じドメインのはずなのにエラーが出る場合はタグを使わず、
直接test@sample.comのように、アドレスを書き込んでください。blog_cf7_05
[]を取るのを忘れずに。構文エラーで怒られます。blog_cf7_06
この状態で保存をすると、エラーが無くなり警告も表示されなくなりました。スッキリです。
用法として正しいメールを送るように警告しているので、送信に支障が無くても折を見て対処した方が良いでしょう。


WordPressのダッシュボードからDBを操作する。[adminer]

WordPressのデータベースを操作する仕事があって、ちょくちょくDB内のデータを確認する必要があったのですが、通常だと、サーバーにphpmyadminを入れて使うことが多いと思います。あらかじめ用意してあるレンタルサーバーもいいですね。しかし、プラグインを使ってWordPressのダッシュボード内で完結させることもできます。
プラグイン[adminer]の導入
adminer01

例によって、ダッシュボードのプラグイン→新規追加より、adminerを検索し、導入します。


adminer02
無事に導入できると、メニューのツール内に「adminer」が追加されます。

イルカがかわいい。
開くと、DBへのログイン画面になります。日本語化済みで助かります。表示は別タブでも同一タブでもお好みで。
ログイン後は、phpmyadminに似た画面が出てきます。
adminer04
データの確認だけで無く、インポート、エクスポートやテーブルの作成、SQLコマンドの実行など、一通りのDB操作はできるようになっています。
ただし!DBの扱いは一歩間違えると、WordPressの再起不能を招きますので、くれぐれも慎重に操作してください。
adminer自体は、単体でphpmyadmin代わりに動くプログラムもあります。(そっちがメインかも?)phpファイル1つで動作するので、何らかの事情で、phpmyadminが導入できないサーバーなどで役に立ちますね。


取扱い注意な『チェックボックス』

WordPressでサイト構築を行った際に
プラグインを使わずに検索部分を作ったのですが
その際に迷走して3時間程悩んだ事を書きたいと思います。

事の始まりは、カスタム投稿で制作された情報追加画面です。
一部、該当する事全てにチェックを入れて頂くために
1つの項目に5つのチェックボックスを設置して
情報を入力して頂くようにしました。
そのチェックボックスの情報を使って
検索ページでは、該当する物だけをピックアップするように
プログラムを組んだつもりでした…

実際、ある項目を除いては問題なく検索できていました。

続きを読む 取扱い注意な『チェックボックス』


WordPressに便利なソース。

私がWordPressで構築する際に追加している
便利なソースをまとめてみました。

funtions.phpに記述する便利なソース

【固定ページ内の画像URLを簡単にする】
固定ページ内で画像を使う際に『get_bloginfo(‘template_directory’)』をイチイチ付けるのは面倒なので
サンプルでは『image/』が付いたらテンプレートまでのURLを付加します。



【カスタム投稿一覧でカテゴリでも絞り込みしたい】
投稿一覧ではカテゴリでの絞り込みはできますが
どう言う訳かカスタム投稿では絞り込みが用意されていません。
もっとも設定自体がユーザー次第なので付けようがないとは思いますが
カスタム投稿でも投稿数が増えると必要になってきます。
サンプルでは
《 カスタム投稿名:list / 分類名:cate 》
で記述しています。



【固定ページ内でPHPを使いたい⇒ショートコード対応】
今更なんですが、ショートコードの記述が理解しきれていませんでした…
基本的な部分は分かっていましたが…難しく考えすぎていたようです。
そんな同類の方に向けて、一番分かりやすい物を…

《indexft()》が関数になります。
“return”内で返す内容を用意。今回は、トップへ戻るリンク『トップ』が表示されます。
固定ページ、または投稿ページに《[idxfc]》と言うショートコードがあったら、ソコに『トップ』が表示されます。


テンプレートPHPに記述する便利なソース

【一定日数内の記事に”NEW”を付けたい】
ページ内で新着情報などの一覧表示部分で一定の期間だけ”NEW”マークを付けたい。
マークを付けたい部分に下記のソースを原だけでOK。
『echo』で吐き出しますので、画像でもタグ付でも



見せるページと見せないページを会員権限で簡単に分けるプラグイン

この記事は1年以上前に投稿されました。
公開時の情報を元に記述してありますので、最新版に対しては内容が陳腐化している可能性があります。ご注意ください。


先日、会員制サイトをWordpressで構築しました。
その際、コンテンツの閲覧を会員の権限によって分ける必要があったので、いろんなプラグインを試しましたが、最終的に採用したものをご紹介します。


類似のプラグインは多々あるのですが、日本語で設定できること、クライアント側でも簡単に設定できることを重視して今回は、 WordPress Access Controlを導入しました。
20151015_002


 導入は、プラグインページ→新規登録で入れられます。
日本語化ファイルは検索したところ複数あったのですが、一番新しそうな、こちらで配布されているものを利用させていただきました。
(リンク先があれば、この記事いらない気がしますが。)

導入後、プラグインを有効にすると、設定→Members Onlyから、サイト全体の設定ができるのですが、今回は使いませんでした。

各投稿ページの右上に公開範囲を決める選択肢が現れます。
20151015_001

ここで、ユーザーの権限に合わせて見せる範囲を決めていきます。
追加された権限などにも対応します。
20151015_003

 投稿時に、「このページを誰に見せるか」をチェック一つで選べるので、クライアント側での作業も簡単です。
非表示のページは、メニューからも消え、対象外の人には、ページの存在自体がわからなくなります。逆に、非会員のみに見せるページを作ることも可能です。(入会のご案内など)
また、この設定は投稿だけでなく、固定ページでも有効です。

これにWordpressのユーザー管理を組み合わせると、シンプルな会員制サイトのできあがりです。コンテンツ閲覧型のサイトならこれで十分機能します。


WordPressのテーマ選びに悩んだ時は!

ホームページ制作をしている方は、一度くらいは使った事がある……と思う
『WordPress』

今まで、触った事が無かった方だと
『どのテーマを使ったら良いのか』『どのテーマが目的のデザインに合っているのか』など
イロイロと悩む事があるかと思います。

そんな時には、一番シンプルで分かりやすいテーマを使って構築するのが一番ではないでしょうか。
理解できない機能満載のテーマでは、何かあった場合の問題点を探すのにも時間がかかってしまいます。

では、テーマは何を使うか?
私が一番オススメするテーマが

『WPMEMO basic』
WPMEMO_basic

『無料WordPressテーマ「WPMEMO basic」を公開しました。』

テーマの特徴
WordPress3.0以上対応
IE6,IE7, IE8, IE9 , Firefox, Chrome,Safariで動作確認済み(ただし、IE6はカスタムメニューのドロップダウンが動作しません)
カスタムメニューに対応
ウィジェットに対応
無料・商用利用可
※利用の際の注意点を必ずお読みください。


このテーマ、本当に必要最低限のファイルしかありません。
imageフォルダは有っても、中身は何も入っていません!!
今まで通常のHTMLサイトを移行するには”持ってこい”のテーマです。
そして、WordPressの構造を学んだり、オリジナルテーマを作る時の基礎にもなりえます。
レスポンシブなサイトを構築しようとした場合でも、好きな物を組み込みながら制作できますので
WordPressに慣れている方も、簡単に使う事ができると思います。

もし、テーマ探しで悩んでいるようならクセの少ないテーマを使って構築してみてはいかがでしょうか。