【wordpress】Custom Fields Searchをちょっといじくった
事の起こり
お客さんから電話
「デザイナーにWordpressで店舗検索機能作ってもらってんけど
うまく検索できないのよねぇ～ 助けて！」
との事で
対処したので、備忘録的に
そもそもなぜ？
要望から、
複数のカスタムフィールドで入力された内容全てに対して
自由入力で検索を行いたい
症状
入力inputに「ソフマップ 神田」を入力すると
対象のソフマップ秋葉原店が
検索結果としてほしいのに、検索結果0件になる！
あ～。
SQLやなと
しかも、複数のカスタムフィールドをANDで検索してるし、空白で正しく分割してないなと
修正箇所
①検索ワードをスペースで分割
wp/wp-content/plugins/wp-custom-fields-search/extra_search_fields.php
384行目付近
<?php function splitMultiValues($value){ // return array($value); コメントアウト //空白文字での複数条件指定に対応 $ary = preg_split('/[\s ]/u',$value); //検索ワードをスペースで分割 foreach($ary as $key => $row){ //分割したワードが''の状態なら削除 if(empty($row)){ unset($ary[$key]); } } return $ary; } ?>
②検索対象カスタムフィールドを作るプラグインを作った。
ファイル構成
serach_box/
serach_box.php
js/
input.js
view/
input.php
serach_box.php
<?php /* Plugin Name: search_box Plugin URI: 検索用カスタムフィールド作成 Version: 1.0 Author: shie*2Works */ $sbSet = array( 'sbUrl' => plugins_url('',__FILE__), 'sbPath'=>dirname(__FILE__).'/', ); /** * 記事編集画面に検索文字列カスタムフィールドを追加 */ function add_search_box() { // add_meta_box(表示されるボックスのHTMLのID, ラベル, 表示する内容を作成する関数名, 投稿タイプ, 表示方法) add_meta_box( 'post_serch_box_block','検索対象カスタムフィールド', 'create_serch_box_for_post', 'post', 'normal' ); } add_action('admin_menu', 'add_search_box'); /** * 検索文字列カスタムフィールドのhtml出力 * @return [type] [description] */ function create_serch_box_for_post(){ global $sbSet; global $post; wp_nonce_field(wp_create_nonce(__FILE__), 'my_nonce'); include_once($sbSet['sbPath'].'view/input.php'); } function save_search_box($post_id){ if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) { return $post_id; } $my_nonce = isset($_POST['my_nonce']) ? $_POST['my_nonce'] : null; if(!wp_verify_nonce($my_nonce, wp_create_nonce(__FILE__))) { return $post_id; } $key ='search_box'; if(isset($_POST[$key])){ $val=$_POST[$key]; }else{ $val=''; } if(get_post_meta($post_id, $key) == ""){ add_post_meta($post_id, $key, $val, true); }elseif($val != get_post_meta($post_id, $key, true)){ update_post_meta($post_id, $key, $val); }elseif($val == ""){ delete_post_meta($post_id, $key, get_post_meta($post_id, $key, true)); } } add_action('save_post', 'save_search_box'); ?>
input.php
<textarea name="search_box" id="post_search_box_input" rows="3"><?php print get_post_meta($post->ID, 'search_box',TRUE);?></textarea> <script type="text/javascript" src="<?php print $sbSet['sbUrl']; ?>/js/input.js"></script> <style> #post_search_box_input{ width: 100%; border:none; resize: none; } </style>
input.js
(function($) { $('#publish').click(function(){ var metObj = $('#cftdiv'); //全カスタムフィールドが入ってるDivのidを指定する。 var searchWord = ''; //テキストボックス metObj.find('input[type="text"]').each(function(i){ searchWord = searchWord + ' '+$(this).val(); }); //チェックボックス metObj.find('input[type="checkbox"]').each(function(i){ elm = $(this); if(elm.prop('checked')){ searchWord = searchWord + ' '+elm.val(); } }); //テキストボックス metObj.find('textarea').each(function(i){ searchWord = searchWord + ' '+$(this).val(); }); //セレクトとかラジオボタンとかなかったから書いてない $('#post_search_box_input').val(searchWord); }) })(jQuery)
【エフェクター】バイアス電源にオペアンプを入れてみる。
バイアス電源にオペアンプ入れたら音がよくなるらしい
なんてことをどっかのブログで発見したので、
やってみたwwww
ちょうどベースのオーバードライブを作りたっかたので
実験程度に作ろうとblueberryBassOverDrive(以下 bbbod)の回路を
いつもお世話になっております。
homemadefx様から
いただいて作業を行います。
とりあえず、回路図を書いた
pdfのダウンロードはこちらからどうぞ
一応解説
青色で囲ってる部分が新しいバイアス回路
どうもbbbodは9VからVCCとVBBの
2つのちょっと電圧を落とした電源を作ってるみたいなので、
4558を1つ使用してオペアンプドライブの回路を書いてみた。
要はオペアンプの+に入れて-とアウトをつなげろってこっちゃ！
簡単やろ？(爆)
レイアウトは
homemadefx様から頂いたレイアウトの バイアス部分のパーツをとって別の基盤作ってケーブルでつなげる形になるかと思います。
作ったら報告します。
テストブログ
<?php
$name='aaaa';
?>
はてなブログでphpのソースをSyntaxHighlighter
phpってハイライトされる？
print = $name;
**されてないよね？
htmlとかjs(javascript)はハイライトされるけど、 phpはされない！
ちょっと調べたけどどこにもそんな記事も全くない。
さてと、どうするかね？
JSとSyntaxHighlighterでハイライトするか？
読み込みはこんな感じ。
<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/3.0.83/styles/shCore.css" /> <link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/3.0.83/styles/shThemeDefault.css" /> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shCore.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushJScript.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushXml.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushCss.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushPhp.js"></script>
前にtumblrで使ったJSを修正してつかうか。
//これはtumblr用 <script type="text/javascript"> // SyntaxHighlighterの実装 $(function(){ /** * 引数1の中の引数2を全て引数3に変換 */ function replaceAll(expression, org, dest){ return expression.split(org).join(dest); } $(".post-content pre").each(function(){ sorce_code = $("code",this).text(); code_type = sorce_code.match(/\/#\*.*/); if (code_type == null) { code_type = "php" } else { code_type = code_type.toString().slice(3); } sorce_code = sorce_code.replace(/\/#\*.*\s/, ""); //<と>を変える。 sorce_code = replaceAll(sorce_code,'<','<'); sorce_code = replaceAll(sorce_code,'>','>'); $(this).html(sorce_code); $(this).addClass('brush: ' + code_type); }); $(".post-content pre").addClass('brush: php'); SyntaxHighlighter.all(); }); </script>
結果！
できねぇ～！！
tumblrか？
MDwikiか？
jQuery スライドショープラグインを作った。
sSlider
クライアントからの要望でスライダーをいろいろ見たんだけど、 いいのが無い。
- UL>LIの中に画像を入れたら勝手にスライダーになってくれるけど、 ボタンは自由に配置しずらい
- 移動が終わったあとにCollBack関数を実行できない。
「いや！できるし！」
っていわれそうなんですが、つくりました！ つくりましたから！
今後の為に備忘録として。
DLは以下からどうぞ
| var | ログ | |
|---|---|---|
| var0.5 | 新規作成 | DL |
基本的な使い方
とりあえず基本的な使いたかを。
<html> <head> <title>スライダー</title> <script type="text/javascript" src="js/jquery.js"></script> </head> <script type="text/javascript" src="js/sSlider.js"></script> <body> <script type="text/javascript"> (function($) { $(window).load(function() { $('#slider').sSlider(); }); })(jQuery); </script> <h1>スライダー</h1> <ul id="slider"> <li><a class="aaa" id="a1" href="#"><img src="img/img1.jpg" alt="" /></a></li> <li><a class="aaa" id="a2"href="#"><img src="img/img2.jpg" alt="" /></a></li> <li><a class="aaa" id="a3"href="#"><img src="img/img3.jpg" alt="" /></a></li> <li><a class="aaa" id="a4"href="#"><img src="img/img4.jpg" alt="" /></a></li> </ul> <button class="sSliderBt_1">ボタン1</button> <button class="sSliderBt_2">ボタン2</button> <button class="sSliderBt_3">ボタン3</button> <button class="sSliderBt_4">ボタン4</button> </body> </html>
で動きます。 スライダーを指定するボタンは自分でコーディングしなければなりません。
オプション
| 名前 | デフォルト | 説明 |
|---|---|---|
| wrapDiv.class | sSliderWrapDiv | 一番外側のDIVのclass名 |
| wrapDiv.css | {}(無し) | 一番外側のDIVにつけるCSS |
| winDiv.class | sSliderWinDiv | スライドウィンドになるDIVのClass名 |
| winDiv.css | { overflow: 'hidden', 'position': 'absolute', 'z-index': 100 } |
スライドウィンドになるDIVのCss |
| li.css | { 'position': 'absolute', 'z-index': 50 } |
スライどliのCss |
| btslg | sSliderBt_ | スライダー指定ボタンのクラス名の共通部分 |
| btOnClass | sSliderOn | カレントのスライダー指定ボタンにつけるクラス |
| sleepTime | 3000 | 移動終了から次に移動開始するまでの時間 |
| moveTime | 1000 | 移動開始から終了までの時間 |
| endMove | function() {} | 移動が終了した時に実行する関数 |
| endInt | function(){} | 画面の読み込みが終了して準備が出来た時に実行する関数 |
オプションの設定の仕方
var option = { wrapDiv:{ class:'sSliderWinDiv', css:{ overflow: 'hidden', position: 'absolute', z-index: 100 } } } $('#slider').sSlider(option);
その他の使い方
移動開始前になんか関数を走らせる。
var option = { endInt:function(){ alert('end'); } } $('#slider').sSlider(option);
移動の準備が整った時点でアラートを表示する。
移動終了後になんか関数を走らせる。
var option = { endMove:function(){ alert('end'); } } $('#slider').sSlider(option);
スライドが完了した後にアワートを表示する。
今後考えている事
- オプションで縦スクロールでも対応できる。
- オプションで画面いっぱいのスクロールを実装できる。
以上、使えたらいいな～
MDwikiのリンクリスト作成プログラムを作ってみよう
初めに
何でこんなこと考えたのか？
このごろブログを短期間にとっかえひっかえしてるんだけど
その理由は
- markdownで記事を書きたい。
- コードの事もエフェクタの事も書きたい
- トップページからリンク記事リストを見たい
っていう要件がある。
んでtumblrを使ったんだけどカテゴリが使いにくい
そもそもtumblrにはカテゴリって概念はないもんね。
とりあえず、wikiはどうだ！
って思ってpikiWikiを入れたんだけど
これはこれで便利なんだけど、
markDownで記事をアップできない。
んでMDwikiってのにたどり着いて
けっこういいじゃん！
ってなったんだ。
でも問題があって
作ったページのリンクリストをつくったらなアカン！
なので考えたわけだ！
じゃぁ つくってやろぅって！
phpでやる
- トップページの「リンク更新」ボタンをクリックしたらupdataLink.phpへ移動する
- updataLink.phpは自分のパス以下のDir・mdファイルをなめて配列にする。
- 配列にしたmdファイルリストをindex.mdにリンクとしてリスト形式にして入れる
JSでやる
でいいよね。
jsで作ったら重いかな？
phpってめんどいかな？
どっちがいいかな？
的な？
