WEB制作

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

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によるプログラムで上手くいきました。
なんか、肩の荷が下りました(笑)



jQueryの条件分岐

2015年05月12日

現在、ランサーズから受けている依頼の内容で
formからsubmitで送信した際に
入力必須項目が未入力の場合、HTMLの文章で警告文を出す
…という機能を実装させるために四苦八苦していますが
中々、上手くいきません。

formタグに、onsubmit属性を設定し
それをjQueryによって、警告文を表示させようとしていますが
どうもif文がひとつしか読み込まれていないようです。

function sp_check() {
if (条件文1) {
// 命令文
}
if (条件文2) {
// 命令文
}
}

…というプログラムを組んでいますが、どうも
片方のif文しか読み込んでいないように思います。

まあ、HTMLやCSSに比べると
javascriptやPHPなどは、まだ赤子に毛が生えた程度の知識しか
持ち合わせていないのですが…

ただ、こういう”プログラム”って
自分で組んで、上手く動作すると、すごぶる快感だったりしますw

その快感を得るためにも、まだまだ命令文や記述方法を
マスターしなければいけませんけどね…



各無料ブログサービスについて

2015年05月07日

ちょっとSEOを意識してですが、アメブロで新たにブログを立ち上げました。
…といっても、アメブロってHTMLやCSSのカスタマイズが出来ず
かなり扱いづらいって感じの仕様です。
どうして、こうも制約が厳しいのでしょうか?

これまで様々な無料のブログサービスを利用してきましたが
ここで私の中で、扱いやすかったブログサービスベスト3をご紹介!

1位 … FC2ブログ

一番扱いやすかったのがFC2ブログ。
htmlやcssのカスタマイズにしやすさはもちろん
javascriptなどの制約もほとんどなく
アフィリエイトも制限なし、アダルト系もOKと万能でした。

FC2ブログの最大の欠点は、その存在の危うさ。
FC2ブログを運営しているFC2は、FC2動画やFC2ライブチャットなども運営しており
この点で、犯罪の温床になりやすいグレーゾーンで運営しております。
つい先日、このFC2の社長が先日逮捕されたとの報道もありましたが
今なお、今後の存続に疑問点が残り、安心して運営ができません。
これさえなければ完璧なんですけどね~。

2位 … ライブドアブログ

このブログでも利用させていただいているライブドアブログが第2位。
ひとつのアカウントで、複数のブログを運営できるのが最大の魅力でしょうか?
htmlやcssも編集できますし、カスタマイズ性も豊かです。

記事下に、勝手に広告が挿入されるのが難点ですが
まあ無料だし、仕方ないかな。

3位 … 忍者ブログ

第3位が忍者ブログ。ライブドアブログと同様、ひとつのアカウントで
複数のブログを運営することができます。
カスタマイズ性も豊かで、中々優秀なブログサービスだと思います。

…と、まあこんな感じでしょうか?
正直、FC2とライブドア以外は、そこまでカスタマイズしまくってもいないのですが。
もうちょっと、いろいろ試してみたいと思います。



自分のサイト制作は、やはり疲れる…

2015年04月15日

今日は、自分のアフィリエイトの作り込みやSEO対策を施したりしていました。
ランサーズの依頼が無いわけではないのですが
以前に比べて、受注している依頼のペースを落としています。
もちろん、自分のサイトに時間を割くためですが…
まあ、そんなことをやっているので前回の記事で
年収240万と想定しましたが、それより落ちるかもですね…

で、今日は自分のサイトに没頭したわけですが
まあ、自分のサイトの作り込みは疲れますね。
既存サイトの作り込みや、コンテンツの充実を図ったり
相互リンクの依頼をしたり、サテライトサイトを立ち上げたり…
やることが多すぎて、ホント、疲れました。
自分のサイトをやっている時は、依頼されている仕事には
着手する気になれません。

頭にイメージするのは簡単だけど
それの実行は、やっぱり大変だね。