とりあえずfunctions.phpに書いとくと便利かもしれないシリーズ【WordPress】

今年の雪は急にやってきたりいなくなったり、忙しい天気ですね。
WordPressのカスタマイズをしていて、なんだか毎回functions.phpに同じこと書いてることが増えたので備忘録代わりに。
定番のものから小ネタまで。

ソースコード周り

ど定番ですがまぁ。定番ってことは便利ってことです。

固定ページ名をbodyのクラス名として追加

ページ名のクラスがあったほうがCSS書く時便利ですからね。

CSS、Javascriptの読み込み

これは子テーマでテーマを作っていく場合になりますが。

親テーマの不要なCSSを削除

逆に親テーマのCSSで不要なCSSを読み込みたくない時に。
$handle探すのに手間取ったりもしますが。。

ダッシュボード関連

自動で入力されるPタグを入れない。

記事(POST)はお客さんが使うことも考慮して固定ページにしました。

ウィジェットエリアを追加

追加したら利用したい場所に

投稿の画像相対パスを絶対パスに書き換え

ソースをペタッとWordPressに貼り付けて、あれれ、相対パスが切れた。をなくすよう。
自分のテーマディレクトリの直下にimagesフォルダがある場合です。
パスは適宜変更してください。
小ネタですが以外と便利です。

サイト名のショートコード

これも上と似たようなもんですが、WordPressのテキストエディターでリンク貼ったりする時に。
自分ではあんまりショートコードは使わないんですけど。
いろいろな人が使う場合はあると重宝することがあります。

小ネタ

Advanced Custom Fieldsで画像のパスを取得(ID利用)

基本はthe_field()だけで出力できちゃうお手軽さもAdvance Custom Fieldプラグインの魅力の一つ。
画像の時(IDを利用している場合)にパスの出力忘れることが多かったので関数にしてみました。

感想

簡単なものばかりですけど。
最近はset_query_var()で変数をget_template_part()に渡してget_query_var()で受けてごにょごにょっていうのがちょっとお気に入りです。
固定ページの内容なんかもファイル切り分けてページモジュールみたいにしちゃうと結構楽で。

やり方は人それぞれだと思います、何か使えそうなものがあったらどうぞご利用ください。


WordPressの投稿画面をカスタマイズしよう!!

どうもKazです。
実は、画像加工の記事を準備していましたが
もう少々お待ちいただくとして…

今回は、Wordpressの管理画面にCSSを当てるコツを
自分への備忘録としても書きたいと思います。

一番カスタマイズを必要とするところと言ったらカスタム投稿部分になるかと思います。
そして、だいたいお決まりでAdvanced Custom Fieldsプラグインをインストールしていると思いますので、プラグインを使う前提で説明いたします。

まずは管理画面で専用のCSSを読み込むようにします。

functions.phpへ ※「admin_enqueue_scripts」が管理画面への指定になっていますので、管理画面以外ではこのCSSが読み込まれません。

これで管理画面にCSSファイルを読み込ませることができましたので
マークアップの説明に移ります。

基本的に管理画面全てに読み込まれますので
CSSのリセットから書体の指定まで行うことができます。

カスタム投稿部分のみ指定する場合ですが、
Advanced Custom Fieldsプラグインを使うと、入力ページのbodyタグに
■ bodyタグ 「post-type-[ポスト名]」
のタグが付きますので、基本的な設定はこのタグを基本に行うと良いでしょう。

また、各入力項目タイトルと入力項目を1セットとして
■ 入力項目エリア 「field_key-field_[英数字]」
と言うクラスが振られていますので各項目ごとの設定は、このタグを指定してみてください。
一括で指定する場合は「label」にスタイルを設定してもいいです。

入力項目には
■ 入力項目 「acf-field-[フィールド名]」
と言うidが振られますので、CSSを当てやすい感じになります。
もしくは「input」に対して設定をしてもいいです。

背景画像なども使っていくと、初めての方でも入力しやすい登録画面ができますし
レスポンシブなスタイルにも対応できますので
一手間加えて使いやすい画面にしましょう!!


コンタクトフォーム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』で吐き出しますので、画像でもタグ付でも