[WordPress]検索画面にターム一覧のチップを追加・検索対象にする

概要

テキストボックスでの検索の他に日付検索とタームを選択しての検索を追加する必要があった。
検索は特定のポストタイプでのみ動作する。
全部フック「pre_get_posts」の中に書いて、if ( $query->is_search() )で検索結果だけに反映しています。

add_action( 'pre_get_posts', 'customize_main_query' );
function customize_main_query($query) {
  if ( is_admin() || ! $query->is_main_query() )
    return;
    //ゴニョゴニョ………
}

ターム一覧

ポイントは下記

  1. 検索フォーム内で、チェックボックスのnameはcat[]とかcategory[]とか、[]で終わらせる。
    こうすると後でURLパラメータを配列に格納した時に勝手にこの項目が配列になる。
  2. functions.php内でパラメータをGETしてループを加工することで投稿の呼び出しへ反映させる。

検索テンプレート、検索を実装するテンプレートではinputタグのチェックボックスを用いてタームの選択肢を追加。

functions.phpでは、URLを元にパラメータの中身を配列として取り出し、tax_queryでタクソノミーとタームを指定する。
ターム名を配列にしてタームの指定に用いる。

参考URL:
【PHP】URLを分解して配列で取り出すには?(Web.fla)

functions.php

//URL取得
if ( isset($_SERVER['HTTPS']) and $_SERVER['HTTPS'] == 'on' )  
{  $protocol = 'https://';  }  
else  
{  $protocol = 'http://';  }
$search_url  = $protocol.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];  
//念のためデコード
$decoded_url = urldecode($search_url);
//URLを配列に分解
$url_arr = parse_url($decoded_url);
//パラメータの中身を文字列の配列として変数へ格納
parse_str($url_arr['query'], $parms);
//タクソノミー指定
if ( ! empty( $parms['category'] ) && !is_wp_error( $parms['category'] ) ){
  $query->set('tax_query' , array(
    array(
      'taxonomy' => 'タクソノミー名',
      'field' => 'slug',
      'terms' => $parms['category'] //フォームで取得した値
      )
    )
  );
}

ちなみにこれを作ってるときまで気づかなかったけどfunctions.php内で普通に$protocol.$_SERVER[‘HTTP_HOST’].$_SERVER[‘REQUEST_URI’]でURLを取得しようとしても実行タイミングが早すぎてサイトURLしか取れません。pre_get_postsのタイミングだから取れてるだけ。

検索するテンプレートのフォーム部分

<ul class="term-list">
<?php
  $terms = get_terms('タクソノミー名',
    //オプションは必要に応じて
    array(
      'parent' => 0,
      'orderby' => 'description'
    )
  );
  //投稿が存在するタームの一覧を取得・加工
  if ( ! empty( $terms ) && !is_wp_error( $terms ) ):
  foreach( $terms as $term ):
?>
  <li>
    <label class="term-item"><input name="category[]" type="checkbox" value="<?php echo $term->slug; ?>"><span><?php echo $term->name; ?></span></label>
  </li>
<?php endforeach; endif; ?>
</ul>

日付検索の実装

jQueryUIのDatepickerで入力した値を、検索結果のループを加工する時に利用する。
基準となる日付は投稿日ではなくてカスタムフィールドに入力された日付の値を利用しているのでちょっとややこしかった。

$date_from_src = $_GET["date_from"]; //この日から
$date_until_src = $_GET["date_until"]; //この日まで

if( $date_from_src != '' && $date_until_src != '' ){
  //始めも終わりも指定した場合
  $query->set(
    'meta_query', array(
      'relation' => 'AND', //AND検索にする
      array(
        'key' => 'カスタムフィールド名',
        'value' => $date_from_src,
        'compare'=>'>=',
        'type' => 'DATE'
      ),
      array(
        'key' => 'カスタムフィールド名',
        'value' => $date_until_src,
        'compare'=>'<=',
        'type' => 'DATE'
      )
    )
  );
} elseif( $date_from_src != '' && $date_until_src == '' ){
  //始めだけ指定した場合
  $query->set(
    'meta_query', array(
      array(
        'key' => 'カスタムフィールド名',
        'value' => $date_from_src,
        'compare'=>'>=',
        'type' => 'DATE'
      )
    )
  );
} elseif( $date_from_src == '' && $date_until_src != '' ){
  //終わりだけ指定した場合
  $query->set(
    'meta_query', array(
      array(
        'key' => 'カスタムフィールド名',
        'value' => $date_until_src,
        'compare'=>'<=',
        'type' => 'DATE'
      )
    )
  );
}

[WordPress]メディアファイルへリンクしている画像をLightbox対応する

概要

本文内に挿入した画像のうちリンク先が「メディアファイル」になっているものをすべてLightboxを用いて拡大する必要があったのでその方法の備忘録。

参考URL

[WordPress] 画像挿入時にリンク先が画像の時のみ、aタグに独自クラスを付与する方法(memocarilog)

フィルターの内容は上記で紹介してくれているソースを使用。正規表現詳しくなくて……
調整して、下記のソースにした。

add_filter( 'image_send_to_editor', 'addClass' );
add_filter( 'the_content', 'addClass' );
function addClass( $html ) {
  if(preg_match('/<a href="https?:\/\/+[-_.\/a-zA-Z0-9]+(?:png|jpg|jpeg|gif)"><img/' , $html)){
      $html = str_replace( '<a ', '<a data-lightbox="gallery" ', $html );
  }
  return $html;
}

追加点

1行目を追加。
フック「image_send_to_editor」はその名の通り「メディアライブラリから画像をエディタ内に追加するタイミングで」働くので、画像を挿入した後に編集してリンクを追加した場合には働かない。

もしも「メディアを追加」から追加するタイミングで設定を忘れたら対応できないということになるので、「the_content」にもフィルタリングして、本文がそもそも書き出される時に付加してくれるように調整。
これを使用した案件では特定のポストタイプのシングルページでのみ動作させれば良く、Lightboxのファイルの読み込みは条件付きにしたのであまり影響がなさそうだったのでここで落とし所とした。

ギャラリー機能への対応

post_galleryというフィルターフックがあったが出力されるHTMLの変数名などチラと見ただけでわからず、面倒だったのでjQueryで操作しました。
やってることは、似たようなもんです。
「.gallery-item内のaを全部調べて、hrefの中身に画像の拡張子があった場合data-lightbox属性をつける」という内容ですが、ちょっとif文甘い?ギャラリーの中だけだしイレギュラーはない気がするんですけど……

$(".gallery-item a").each( function(){
  var link = $(this).attr('href');
  if( link.match(/(?:png|jpg|jpeg|gif)/g) ){
    $(this).attr('data-lightbox','gallery');
  }
});

以上でございます。

[JS][jQuery]CSSの読み込みに日付を追加

きっかけ

最近iPhoneのSafari、キャッシュが全然消えない。CSS変更しても反映されない。一応URLをコピーして新しいタブで開き直すと反映されたりするけど、Basic認証かかったディレクトリのファイルなんかそんなことやってられないのでCSSへJSで日付を追加した。
PHPだともうちょっと簡単かもしれないがHTML普通に書いてる時に使いたいのでjQueryで適当に書いた。

本題

//css読み込みに日付付加
var date_obj = new Date();
var times = [
  String(date_obj.getFullYear()),
  String(date_obj.getMonth()+1),
  String(date_obj.getDate()),
  String(date_obj.getMinutes()),
  String(date_obj.getSeconds())
];
var timeNum = times[0]+times[1]+times[2]+times[3]+times[4];

$("link[href$='css']").each( function(){
  var filename = $(this).attr("href");
  var pathWithTime = filename.replace( /.css/g, '.css?v='+timeNum );
  $(this).attr("href",pathWithTime);
});

こう。もっといいやり方が…とか思うけどとりあえず付いたら良かったので。
即定型文登録。

[Coda2]background指定編集中にフリーズする件

Coda2を少し前にアップデートしてからCSSモードで色指定を行う時にフリーズするようになった。
原因は補完候補にカラーピッカーなどが出る機能だったので下記画像内のチェックを外して解決。

最初、設定確認してもどのチェックかわからなくて公式さんに確認したら「セーフブートしてみてくれ」とのことだったのでセーフブート、機能の一部がオフになった状態で操作してやっとわかったが手当たり次第にチェックを外してみればよかった……優しい公式さんでした。

[Shopserve]外部読み込みファイルに日付パラメーターを付ける

ショップサーブの「メイン紹介文」の一部をJSで呼び出してるんですが、キャッシュが結構残るので残したくないなあと思ってパラメーターをつけることにしました。
ショップサーブのテンプレはSmartyで作られているのでSmartyの日付変数を利用することにしました。

<script type="text/javascript" src="hoge.js?{$smarty.now|date_format:'%Y%m%d%H%M'}"</script>

こんな感じです。盲点やった。Smartyは使ったこと無いんですけどもね…

[WIX]ムームーDNSを利用してWIXのサイトへ接続する覚書

WIXで作成したサイトをすでにある別サイトに紐付いているドメインに切り替えてほしいという話になったがメールサーバーは別だったり、ちょっと慣れないパターンだったので備忘録。

前提

  • メールサーバーは別鯖(ロリポップ!)
  • WebサイトのみWIXへ接続
  • WIX内ではすでに別ドメインが接続されている

詳細

WIXの設定

接続したいドメインを追加し、ドメイン側の設定を変更。
設定完了後サイトと接続し、接続を確認してからプライマリドメインとして設定。
リダイレクトループが起こってしまう場合、ドメインの接続設定をし直すと改善するかもしれない。

ムームードメインの設定

WIXのヘルプはこれ。ポインティング形式。この方法でムームーと接続する。

ドメインをポインティング形式で接続する

ムームードメイン側ではメールが止まるのでネームサーバー設定を変更してはいけない。
ムームーDNSのカスタム設定を利用する。
カスタム設定で「ホームページ」を「利用しない」
「メール」は「ロリポップ」
Aレコード設定にIPを、CNAME設定でサブドメイン「www」「m」のレコードをWIXのネームサーバーに設定する。
WIXのドメイン管理画面と同じ内容。

[WordPress]今日以降の投稿を出したい時

結論

'meta_query' => array(
 array(
 'key' => 'date', //これはカスタムフィールドの名前
 'value' => date('Y-m-d'),
 'compare' => '>=',
 'type' => 'DATE'
 )
)

こう。meta_keyじゃなくてmeta_queryを使う。
valueで今日の日付。
compareで比較、比較対象(value)が右辺になる感じかと思います。

keyに入ってる値(任意の日付) >= valueに入ってる値(今日)
→今日よりも未来

途中、strtotime(date(‘Y-m-d’))って書いてstring型に変換したら全然別の数字になってしまって詰まった。
よく命令の意味を考えないですげー不要な処理をしてしまった。。

ちなみに上記は get_postsの配列に入れるときで(配列の中の配列の状態)
pre_get_postsの中でセットするときは、

'meta_query' , array(
 array(
 'key' => 'date',  //これはカスタムフィールドの名前
 'value' => date('Y-m-d'),
 'compare' => '>=',
 'type' => 'DATE'
 )
)

meta_queryの中身を指定するのに矢印っぽいのじゃなくてコンマ区切り。
無知って怖いな……

[CSS]text-overflow:ellipsisの指定について、Internet ExplorerとEdgeではエラーが起こる件

相変わらずのマイクロソフト勢

WordPressサイトの構築時、記事タイトルを文字数制限するのに text-overflow:ellipsisを利用していた時のこと。

日付とカテゴリで改行する見た目で組み立てたら、IEとEdgeで「…」が出ない。
とにかくbrタグでも1行目がdisplay:blockであっても2行になってたら続き文字が出せない模様。
お前らまたか。

対策

文字を隠したい1行だけspanタグで囲んでそこにはみ出しのスタイルを適用して対処した。これしかなかった。
Microsoft勢早くこの世からなくなってください!!