ワードプレス、カスタムフィールドによる絞り込み検索サイトの作成

2015年05月22日

昨日、自身が身に着けたスキルをメモ帳代わりとして記事にしましたので
少し前に請け負った、ワードプレスでカスタムフィールドの値を参考に
絞り込み検索機能のついたサイトを作成したので
そちらの方も記事にしたいと思います。

まずは絞り込み検索した結果を表示するページに関してですが
これはsearch.phpに表示させるようにします。
このsearch.phpはワードプレスのテーマには大体、標準についていて
「テーマの編集」の項目で、「検索結果」として表示されますが
このsearch.phpに関しては、「s」というパラメータに対して
検索ワードを格納して表示される仕組みになっています。

つまり、「s」の中に検索ワードが入っていなかったら
検索結果のページ(search.php)が表示されません。
この現象を回避するため、function.phpに以下のコードを指定する必要があります。


function custom_search($search, $wp_query  ) {
    if ( isset($wp_query->query['s']) ) $wp_query->is_search = true;
    return $search;
}
add_filter('posts_search','custom_search', 10, 2);

では早速、絞り込み検索を作り込んでいきますが
まず、「カスタムフィールドテンプレート」のプラグインをインストールします。
しなくてもいけるかもしれませんが、カスタムフィールドの設定が楽なので
私は利用しています。

カスタムフィールドテンプレートをインストールしたら
絞り込み検索で表示させる記事に対して、カスタムフィールドを設定していきます。

例えば、カスタムフィールドに「ワード1」という項目を作成したとします。
「ワード1」に「キーワードA」と入力したページ(ここでは「ページA」とします)と、
入力していないページ(「ページB」)を作成します。
そして、絞り込み検索にてチェックボックスで「キーワードA」を指定し
チェックを入れたらページAが表示、チェックを入れなかったら
「ページA」「ページB」が、共に表示されるようになる仕組みです。

それでは、まず絞り込み検索を行うページの作成ですが
絞り込み検索を行うページには、formタグにて作成していきます。


<form method="get" action="<?php bloginfo('url'); ?>">
<input type="hidden" name="s" id="s" placeholder="検索" /><br />

<input type="checkbox" name="search-word" value="キーワードA">キーワードA<br />
<input type="checkbox" name="search-word" value="キーワードB">キーワードB<br />

<input type="submit" name="submit" value="上記の条件で検索">

</form>

上記のコードが絞り込み検索を行う部分のformタグです。
カスタムフィールドテンプレートのIDは、ここでは「search-word」と設定します。
このカスタムフィールドのIDは、自分で考えたワードで結構です。
そして、inputタグのname属性に「search-word」を設定し
valueの値は、絞り込みしたいキーワードを指定します。

また最初に書きましたが、ワードプレスのsearch.phpはsのパラメータで表示させるので
type属性にhiddenを指定して、隠しパラメータとして送信する必要があります。

絞り込み検索を行うページの作成が終わったら
今度は、その絞り込み検索の結果を表示させるために
search.phpに、PHPを記述していく必要があります。


<?php
$s = $_GET['s'];
$word = $_GET['search-word'];

foreach($word as $keyword){
	$jouken[] = array(
		'key' => 'search-word',
		'value' => $keyword,
		'compare' => '='
	);
}

$paged = get_query_var('paged');

query_posts(
array(
'post_type' => 'page',
'post_status' => 'publish',
'posts_per_page' => 20,
'meta_query' => array(
	$jouken,
	'relation' => 'AND'
),
'paged' => ( $paged ) ? intval($paged) : 1
));
?>

絞り込み検索の結果の表示ですが、「query_posts」でページ情報を取得し
表示させています。

inputタグで送信したvalueの値を「$word」に格納。
そして、foreachにて$joukenの中に配列として、格納していきます。

…とまあ、一通りのコードと大雑把な説明で書いてきましたが
私自身、まだ理解していない部分があったりします。
ちなみに、この絞り込み検索の作成を行うに当たっては
「KOTORI」さんのページを参考にさせていただきました。
かなり四苦八苦したのですが、上手くいった時には
なんとも言えないような快感にも似た感覚でしたw

このカスタムフィールドによる絞り込み検索ですが
例えばカスタムフィールドに数値を入力し
特定の数値の範囲内ならば表示するといった検索も可能みたいです。
不動産関係や、ネットショップの販売価格による絞り込み検索なんかにも実装できそうです。


javascriptでfromの各入力項目の空欄をチェックし、警告文を表示

2015年05月21日

ちょっと久しぶりの日記更新。
今週のFXトレードで損失を出してしまいました。
まあトータルではプラスなので
その部分では、昔よりは成長したかな。

さて今回は、HTMLのformタグで登録フォームを設置し
各入力項目の空欄状況をjavascriptでチェックして
必須項目が空欄であれば、入力を促すように警告文を出す
…といったことに現在、チャレンジしていて解決したので
自分のメモ代わりとして、記事にしたいと思います。

現在、ランサーズで受けている依頼で
ホームページから登録できるフォームを作成しているのですが
クライアント側の意向で、必須項目が空欄の場合
ページ上に警告文を出す…といった依頼を受けていました。

正直、作成した経験がありませんでした。
が、過去の経験上、これを乗り越えたら
また自分のスキルが確実にレベルアップはするので
逃げずに作成、そしてなんとか作り上げることができました。
クライアントさんには、かなり待たせてしまいましたが…

まずHTMLは以下の通りに記述します。


<form name="form1" method="post" enctype="multipart/form-data" onsubmit="return check()">
<p>
名前:<input type="text" name="text1"><br />
写真:<input type="file" name="file1"><br />
チェック:<br />
<input type="radio" name="check1" value="チェック1">チェック1<br />
<input type="radio" name="check1" value="チェック2">チェック2
</p>
<div id="no-input1">[名前]の項目が未入力です</div>
<div id="no-input2">[写真]の項目が選択されていません</div>
<div id="no-input3">[チェック]の項目がチェックされていません</div>
<p>
<input type="submit" value="送信">
</p>
</form>


未入力の項目があった場合の警告文は
予め、HTMLソースに記述しておき
cssのdisplayで「none」を指定し、非表示にしておきます。
「enctype」を設定しているのは、今回の依頼が
画像のアップも必須項目だったからです。

そして、javascriptのコードは以下の通りに記述。


<script>
function check() {
	var flag = 0;

	if( document.form1.text1.value=="" ) {
		flag = 1;
		document.getElementById('no-input1").style.display="block";
	} else {
		document.getElementById('no-input1").style.display="none";
	}

	if( document.form1.file1.value=="" ) {
		flag = 1;
		document.getElementById('no-input2").style.display="block";
	} else {
		document.getElementById('no-input2").style.display="none";
	}

	if( document.form1.check1.value=="" ) {
		flag = 1;
		document.getElementById('no-input3").style.display="block";
	} else {
		document.getElementById('no-input3").style.display="none";
	}

	if( flag == 0) {
		return true;
	} else {
		return false;
	}
}
</script>

「flag」という変数を設定し、if文で各項目が空欄かどうかをチェック。
空欄のチェックは「value==""」で指定しています。
もしvalueの値が空欄だった場合は、flagに1を代入。
そして最後のif文で、flagの値をチェックし
値が0の場合は送信、値が0ではない場合は「return false」で
submitによる送信を中止させています。
「type="file"」や「type="radio"」の場合も
「value==""」の指定でチェックできました。

ちなみに、HTMLのformのonsubmitは「check()」ではなく
「return check()」と「return」を書いていないと
「return false」としても、そのまま送信されてしまいます。

以前書いた「jQueryの条件分岐」の依頼なのですが
私はjQueryでの解決法が見つけられずに
今回のjavascriptによるプログラムで上手くいきました。
なんか、肩の荷が下りました(笑)


「他人から仕事を依頼される」ということの責任

2015年05月15日

本日(というか、昨日)ランサーズにて、以前依頼を受けたクライアントから
「以前、制作してもらったサイトのデータが滅茶苦茶」
という連絡がありました。
…ということで、そのデータの部分のみですが
修正することになってしまいました。

その依頼については、私の中では「絞り込み検索の実装」という
その当時では、かなり未知のスキルを用いての作業でしたので
そちらの方で、気力を使い果たしていました。
なので、その絞り込み検索によって表示されるページのデータまで
正直言って、細かい部分まで気が回らない状態でした。

自分自身が今まで経験がしたことがない仕事内容の依頼を受けた時
自分自身のスキルアップを図ることができ
そのことを経験で分かっているので、これまで受けるようにしていました。

…が、クライアントの方からすると、こちらのそんな事情は知ったことではなく
「プロの人のお金を出して依頼している」ということに間違いはなく
私の方は、依頼を受けた時点で、その仕事を正確にこなす責任が発生します。

これはまあ当然のことで、
例えば大工さんに高いお金を払って、家を建ててもらったのに
後でその住宅に欠陥が見つかれば、怒るのは当然のこと。
同様にレストランなどで、金を払って食事をしますが
出された料理の中に虫などが入っていれば、当然怒ります。

それは確かにそうなので、制作したサイトに欠陥が見つかれば
それは私のミスであり、責任があるのは確かです。
…が、一方的に言われるのも、腹が立ったりします(笑)
「逆切れかよ」と思われるかもしれませんが
仕事の依頼を受けていて、最初の依頼にはなかった内容を
追加してくる依頼人が、とにかくよくいるので
その部分で、必要以上に気力を消失したりしてしまいます。

まあようするに、一番の要は、最初に依頼を受ける時に
きちんと打合せをするのが一番だと、いろいろと経験した上で
感じる部分だったりしています。
今のところ、FXが順調ということもあり
ランサーズの新規受注に関して、おっくうになっていたりします。