[jQuery] セレクトボックスで選択した値で表を絞り込む方法(プラグイン不使用、動作デモ、サンプルコード有)

表を検索したい!簡単に!

都道府県別にある情報を簡単に絞り込みたい。というご要望。

セレクトボックスに47都道府県の情報をあらかじめ設定しておきセレクトボックスを選択すると該当の都道府県を検索(絞り込み)する。

というかたちで実装を考えました。

テキストボックスだと入力するの面倒だし、都道府県で絞り込みたいだけなのでこのような形でどうだろうと。

jQueryのプラグインが色々とありましたが、自分でも簡単に表検索の仕組みが実装できそうだったので実装してみました。

参考になればと思い、ソースコードとデモサイトを作ったのでご活用下さいませ。

動作デモ・ソースコード

動作デモ

http://onocom.net/code/japan-prefecture/

ソースコード

https://gist.github.com/onocom/904991e984f1da14ef6e1d156bc6e570

ライセンス:WTFPL

好きに利用して改変して下さい。

実装したこと

セレクトボックスで選択した値(value)で表を検索(絞り込み)する機能を実装します。

ソースと解説

ソースコードサンプルと合わせてご覧くださいませ。

1.表を作る

取り敢えず検索するための表を作ります。

今回、都道府県の一覧表を作りました。

theadに見出しを。tbodyにデータを記述しましょう。

2.都道府県選択用のセレクトボックスを作る

表を絞り込む為のセレクトボックスを作ります。

optionタグのvalueに検索キーワードを割り当てます。valueの値で検索をかけるので、以下のようにvalueと異なる表示を設定してもOKです。

また、最初のoptionのvalueは空にしておき、絞り込み解除用に使います。

3.JavaScriptを組む

キモとなるJavaScriptのコードは以下のように記述します。

コメントで処理を補足しておりますので、参考にしてみてくださいませ。

まとめ

あえて、一般的なテキスト入力で絞り込む方法をせず、セレクトボックスで絞り込むようにしてみました。検索ワードが固定されている場合、この方が操作しやすいと思います。

もちろん上記を応用すれば、テキスト入力やラジオボタンで絞り込みなんてことも簡単に出来ます。

お役に立てば幸いです。



WordPressの検索フォームのカスタマイズ!カスタムタクソノミーを検索条件に追加する方法

WordPressの検索フォームをカスタマイズしよう

WordPressの検索フォームはキーワードを入力するテキストボックスと、検索を実行する検索ボタンで構成されています。

この検索フォームにカスタムタクソノミーを指定する方法をご紹介します。

検索条件にカスタムタクソノミーを追加しよう

以下の順序で検索フォームをカスタマイズしていきます。

  1. searchform.php をテーマフォルダに追加

  2. searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置

  3. 検索ボックスを呼び出し

1.searchform.php をテーマフォルダに追加しよう

まずやることは、searchform.phpというファイルをテーマフォルダ内に追加することから始めます。

中身は取り敢えず空で大丈夫です。

2.searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置

searchform.php をエディタで開いて以下のように書き換えます。

タクソノミースラッグ(以下例だとpref)をご自身のサイトに付け加えてあげてください。

2-1. カスタムタクソノミーを複数設置したい場合

以下部分をコピーして、formタグ内に追加することで、複数のカスタムタクソノミーからのAND条件検索も行えます。

●●●・・・タクソノミーラベル(例:都道府県)
■■■・・・タクソノミーの名前[半角英数](例:pref)

3. カスタマイズした検索ボックスを呼び出し

検索ボックスを表示させたい箇所のテンプレート(sidebar.php等)に以下のコードを記載します。

これでカスタマイズした検索ボックスが表示されるはずです。

CSSの調整等はよしなにしてくださいませ。

まとめ

結構簡単に検索条件にタクソノミーを追加できた!

その他にも、特定の日付範囲内の記事を検索する。とかもやろうと思えば出来ます。その場合、上記以外にも修正が必要です。それはまた気が向いたら追記しようかな。



【WP】[Beaver Builder - WordPressページビルダー]プラグインのカスタマイズメモ

WordPressのプラグイン「Beaver Builder- WordPressページビルダー」が個人的に熱い

WordPressはブログツールとして発展してきた経緯もあり、長文を書くのは大変得意です。

しかし、記事をレイアウトしようとすると、途端に難易度が上がります。

コンテンツを2カラムに分けて画像を配置したり、各画像にアニメーションを適用するなどといったことをデフォルトの投稿画面で実施しようとすると、非常に難しいんですよね。

テキストモードでHTMLが書ける人なら良いかもしれませんが、そんな高度なことは制作者ぐらいしか出来ません。

じゃあconcrete5で良いじゃないか!と言われると、ブログもよく書いていたりすると、WordPressからなかなか逃れられない。

そこで最近気に入って使っているのが【Beaver Builder – WordPressページビルダー】というプラグインです。

Beaver Page Builderのカスタマイズ

[Beaver Builder-WordPressページビルダー]のプラグインページはこちら

Beaver Builderで何ができるのか?

どんなことができるかの説明は、きっと以下の動画を見てもらった方が早い。

要はWordPressのコンテンツエリアを見たまま直接編集できる。というプラグインです。レイアウトとモジュールという部品を組み合わせて複雑なページを簡単に実装できます。

まじで簡単だから感動した。そしてサクサク動くのも素敵。

WordPressの公式プラグインディレクトリでは、無料でlite-versionが配布されており、公式サイトより有料版を買うと、さらに多くのモジュールが追加され、より高度なページを簡単に実装できるようになるようです。

という私はまだ無料版しか使っていない(^_^;)

実際に触ってみたいという方は、公式サイトの「Try the Demo」ボタンからお試しで操作を行えます。

ちなみにしっかりと日本語の翻訳も完了しているため、私のような英語の苦手な日本人にもスムーズに操作することが出来ます。(翻訳してくださった方ありがとうございますm(_ _)m)

 

Beaver Builderで困ったこと

無料版だからだと思うのですが、しょっちゅう「どのテンプレートを選ぶ?」的なメッセージボックスが表示されます。もちろん無料版だし、有料版にしてほしい。という気持ちもわからないでも無いけども、ちょっと鬱陶しい。

しょっちゅう表示されるテンプレート選択画面

該当の表示はJavaScriptで制御しているようで、その制御の設定をPHPで出力していました。

beaver-builder-lite-version\includes\ui-js-config.php

なんやかんやソースコードを追っていくと、上記の ‘enabledTemplates’ => ‘core’,の部分を「disabled」に変更してあげれば、該当の表示はしなくなるようでした。

丁度設定用のフィルターフック’fl_builder_ui_js_config’があったので、以下のようなフィルターを追加することで、しょっちゅう出てきたメッセージを表示させなくすることが出来ました。

ただ、この方法だと、テンプレートボタンを押しても何も反応しなくなるので要注意。

お客様に納品する際はテンプレートボタンを非表示にするCSS等を入れてあげましょう。こんな感じで動くかと。

 

まとめ

まだまだ奥が深そうな【Beaver Builder – WordPressページビルダー】。これからも活用していきます。



【PHP】営業日カレンダー表示用PHPクラスを作ってみた

営業日カレンダー

営業日カレンダーを作ることになりそうだったのでサンプルを作ってみた。

まだまだ改善の余地はある。ってか動かなかったらごめんなさい。

ソースコード

Gistに上げました。

好きに使ってください(MITライセンス)。

動作するかどうかは保証しません、動作によって色んなことが起きても自己責任でどうぞ。

ライセンス

MIT license

使い方

ソースコードをダウンロードしてインクルード頂いた後、こんな感じで使って頂ければと思います。

まとめ

プログラム作るの面白かった。

仕事では未だ使っていないので、動かなかったらごめんなさい。



[WordPress]コメント等に使用されるアバターをカスタムフィールドに指定した画像に変更する

コメントのアバターを変えたい

アバターを自分の好みの画像に変更したい

WordPressは、Gravatorというシステムと連動してアバターを表示しています。

Gravatar
https://ja.gravatar.com/

アバターを変更する場合は、このGravatorに自分のメールアドレスを登録する必要があるのですが、結構面倒だと言われることが有ります。

今回、そんな時のために、ユーザカスタムフィールドに画像を登録してもらい、それをアバターとして表示するようにカスタマイズします。

アバターを取得している場所

アバターを取得している処理は、wp-includes/link-template.php のget_avatar_data関数っぽいです。

get_avatar_data関数の以下のフィルターフックの値をフィルタ(add_filter)します。

ちなみにこのフィルタの第一引数の$argsは以下のように設定されています。
$args[“url”]を書き換えてあげればアバターで使用する画像が変わります。

 

functions.php に処理を追加しましょう

さあ、フィルタを使って書き換えて見ましょう。

ちなみに今回はACF(Advanced Custom Fields Plugin)を使っていますので、流用される場合は、適宜修正してくださいね。

お使いのテーマのfunctions.phpに以下を書き込みます。

これをすることで、該当するユーザがコメントの書き込みを行った場合、以下のような$args[“url”]に書き換わり、アバターの画像を変えることができます。

まとめ

WordPressでは、様々なフィルターフックやアクションフックが用意されているため、フックする箇所に目星をつけることができれば、コアファイルを触ること無く簡単に結果を制御できます。

ぜひご活用ください。