OHTA Tatsuki

どう説明していいか分からないですが。.test {    background-color: #fff;}p.test {   background-color: #f00;}を Sass の入れ子でどう書くか.test {    background-color: #fff;    @at-root {        p#{&} {            background-color: #f00;        }    }}で多分大丈夫かと。

Sass 入れ子で要素にもクラスを付ける

WordPress を使ってカスタムフィールド製造業をしていると、ACF で Date Picker を使う時があります。こんな感じで、どこまでも選択し放題な感じなので、範囲を決めたいと思った時に管理画面から出来ないので管理画面に以下のような js を読み込めば大丈夫だと思います。example.js(function($){    var post      = $('#post');    var postType  = $('#post_type').val();    var postTypes = [ 'post', 'page' ];    if ( -1 !== $.inArray( postType, postTypes ) ) {        var datePickerField = $('#acf-xxxxxx'); // xxxxxx の部分は編集画面の表示オプションに Field Keys があるので、チェックして確認        datePickerField.next('input').datepicker({ minDate: -1, maxDate: "+1d" }); // とりあえず前後一日を指定    }})(jQuery);ファイルの読み込みは割愛します。うまいこと読み込めれば、上記画像みたいになります。すでに出てたり知っていたらすみません。追記:date_picker_args があるので、さっきの example.js はexample.js(function($){acf.add_filter('date_picker_args', function( args, $field ){    if ( 'field_xxxx' === $field.data('key') ) { // field_xxxx の部分は編集画面の表示オプションに Field Keys があるので、チェックして確認        args.minDate = '+1d';        args.maxDate = '+3m';    }    return args;});})(jQuery);上記で大丈夫みたいでした

ACF の Date Picker で範囲を指定する。

波紋が広がるリップルエフェクトボタンの作り方（CSS・Javascript）を参考に jQuery にしてリップルエフェクトボタンをやってみました。ripple-effect.js// クラス名rippleの要素を取得var ripples = $('.ripple');// クラス名rippleの要素があるかの判定if ( ripples[0] ) {    // クリックされた際の処理    ripples.on('click', function(event) {        offset = $(this).offset(); // 絶対座標の取得        w      = $(this).outerWidth(); // 要素の幅を取得        x      = event.pageX - offset.left - (w / 2);　// リップルの要素の X 座標を設定        y      = event.pageY - offset.top - (w / 2);　// リップルの要素の Y 座標を設定        // リップルの要素を設定        html   = $('<span>').css({            'top'    : y,            'left'   : x,            'width'  : w,            'height' : w        }).addClass('rp-effect').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){            // css の animation が終わったら各リップルの要素を削除            $(this).remove();        })        // リップルの要素を追加        $(this).append(html);    });}後は参考サイトの、CSS と HTML を参考に作っていけば終わりです。

リップルエフェクトボタン

WordPress で WP REST API を使って検索するときに、http://example.org/wp-json/wp/v2/posts/?search=タイトルですると、本文内に含まれているものまで検索されてがっかりするあなたにこんな事してみてはいかがでしょうか。functions.phpadd_filter( 'rest_post_query', 'my_rest_post_query', 10, 2 ); // rest_{post_type}_query 今回は post なので rest_post_queryfunction my_rest_post_query( $args, $request ) {    if ( isset( $request['title'] ) ) {        $args['title'] = esc_attr( $request['title'] );    }    return $args;}http://example.org/wp-json/wp/v2/posts/?title=タイトルとかやってすればタイトルを検索してくれます。他に追加出来ると思うので、自分で探求してみてください。https://capitalp.jp/2017/01/26/theme-security/また、上記でエスケープ処理等を参考にリクエストするものを適切にエスケープ処理してください。

WP REST API でタイトルで検索する。

WordPress をインストールしたてだと投稿が一個しかなくて、ページネーションの動作テストが面倒くさい。わざわざいっぱい投稿して記事数を増やすのも面倒くさい。Duplicate Post をインストールしてコピーして記事数を増やすのも面倒くさい。そんなあなたに functions.php 等に以下を追加すれば一気に解決！functions.php// 投稿が一個しかないのでページ送りした際にエラーになるのを回避add_action( 'pre_get_posts', 'pager_many_many_tester_offset' );function pager_many_many_tester_offset( $query ) {    if ( ! is_admin() && $query->is_main_query() ) {        $query->set( 'offset', 0 );    }    return $query;}// 投稿を9999にするadd_filter( 'found_posts', 'pager_many_many_tester_found_posts' );function pager_many_many_tester_found_posts( $found_posts ) {    $found_posts = 9999;    return $found_posts;}こうすれば、WP-PageNaviでもpaginate_links を使ったページネーションでも簡単にテストする事ができます。以上、良いページネーションライフを。

Sass 入れ子で要素にもクラスを付ける

ACF の Date Picker で範囲を指定する。

リップルエフェクトボタン

WP REST API でタイトルで検索する。

WordPress の面倒くさいページネーションの動作テスト