Wordpress Front End PM で、カスタマイズしたテンプレートをテーマ内に置く
Wordpress管理画面のユーザ一覧にUltimate Memberのカスタムフィールドを表示する方法
Ultimate Memberを使っていると、Wordpress管理画面のユーザ一覧にUltimate Memberのカスタムフィールドを表示したくなるよね?
ついでに表示順や表示内容のカスタマイズも。
functions.php
///////////////////////////////////////////////////////////////// // 管理画面のユーザー一覧のカスタマイズ function add_users_columns( $columns ) { $columns['ID'] = '管理番号'; $columns['um_custom'] = 'カスタムフィールド'; // 「um_custom」の部分は任意(*1)、「カスタムフィールド」の部分は一覧のカラム名 $columns['columns_nickname'] = '名前'; $columns['last_login_time'] = '最終ログイン'; unset($columns['name'],$columns['account_status']); $sort_number = array( 'ID' => 0, 'username' => 1, //ユーザー名 'um_custom' => 2, //カスタムフィールド *1と同じもの 'columns_nickname' => 3, //ニックネーム 'email' => 4, //メールアドレス 'role' => 5, //権限グループ 'posts' => 6, //投稿 'last_login_time' => 7 //最終ログイン ); $sort = array(); foreach($columns as $key => $value){ $sort[] = $sort_number{$key}; } array_multisort($sort,$columns); return $columns; } function add_users_custom_column( $dummy, $column, $user_id ) { if ( $column == 'ID' ) { $user_info = get_userdata($user_id); return $user_info->ID; } if ( $column == 'columns_nickname' ) { $user_info = get_userdata($user_id); return $user_info->nickname; } if ( $column == 'um_custom' ) { // UMカスタムフィールド um_fetch_user( $user_id ); return um_user('custom'); // メタキーを設定 } if ( $column == 'last_login_time' ) { $last_login_time = get_user_meta( $user_id, 'last_login_time', true ); $output = ( $last_login_time ) ? date( 'Y-m-d H:i', $last_login_time ) : '-'; return $output; } } add_filter( 'manage_users_columns', 'add_users_columns' ); add_filter( 'manage_users_custom_column', 'add_users_custom_column', 10, 3 );
wordpressのfunctions.phpにデフォルトで記述したいこと
カスタムフィールドを検索対象にする
//カスタムフィールドを検索対象にする function custom_search($search, $wp_query) { global $wpdb; if (!$wp_query->is_search) return $search; if (!isset($wp_query->query_vars)) return $search; $search_words = explode(' ', isset($wp_query->query_vars['s']) ? $wp_query->query_vars['s'] : ''); if ( count($search_words) > 0 ) { $search = ''; $search .= "AND post_type = 'post'"; foreach ( $search_words as $word ) { if ( !empty($word) ) { $search_word = '%' . esc_sql( $word ) . '%'; $search .= " AND ( {$wpdb->posts}.post_title LIKE '{$search_word}' OR {$wpdb->posts}.ID IN ( SELECT distinct post_id FROM {$wpdb->postmeta} WHERE {$wpdb->postmeta}.meta_key IN ('num') AND meta_value LIKE '{$search_word}' ) ) "; } } } return $search; } add_filter('posts_search','custom_search', 10, 2);
ショートコードでphpを読み込む
// ショートコードでphpを読み込む function Include_my_php($params = array()) { extract(shortcode_atts(array( 'file' => 'default' ), $params)); ob_start(); include(get_theme_root() . '/' . get_template() . "/$file.php"); return ob_get_clean(); } add_shortcode('myphp', 'Include_my_php');// ショートコード
テーマ内のparts-myphp.php を 呼ぶ場合のショートコード
[myphp file='parts-myphp']
Wordpress プラグインSearch & Filter Pro のフリーワード検索にカスタムフィールドを含める
絞り込み検索の実装には欠かせない「Search & Filter Pro - Advanced Filtering for WordPress」。
しかしこれだけでは、カスタムフィールドのフリーワード検索はできなかった。
結局、ACFを含むカスタームフィールドを検索するために functions.php に追記が必要。
こんな感じ。
function casestudy_search($search, $wp_query) { // *1「casestudy_search」は好きな名称で global $wpdb; if (!$wp_query->is_search) return $search; if (!isset($wp_query->query_vars)) return $search; $search_words = explode(' ', isset($wp_query->query_vars['s']) ? $wp_query->query_vars['s'] : ''); if ( count($search_words) > 0 ) { $search = ''; $search .= "AND post_type = 'casestudy'"; // 投稿タイプ名。通常の投稿の場合は casestudy を post に。 foreach ( $search_words as $word ) { if ( !empty($word) ) { $search_word = '%' . esc_sql( $word ) . '%'; $search .= " AND ( {$wpdb->posts}.post_title LIKE '{$search_word}' OR {$wpdb->posts}.post_content LIKE '{$search_word}' OR {$wpdb->posts}.ID IN ( SELECT distinct post_id FROM {$wpdb->postmeta} WHERE meta_value LIKE '{$search_word}' ) ) "; } } } return $search; } add_filter('posts_search','casestudy_search', 10, 2); // 「casestudy_search」の部分は*1で設定したは好きな名称で
今回は事例紹介なので、
カスタム投稿「casestudy」を対象にしました。
参考にさせていただきました
WordPressでカスタムフィールドの値をサイト内検索の対象にする方法(プラグインなし)
https://www.webernote.net/wordpress/custom-fields-search.html
Safariでスムーススクロールを実装する(非jQuery)
jQueryを使わない案件、もしくは途中から入ってjQueryのエイリアスがぐちゃぐちゃになっててjQuery使いたいとき、
// ページトップ var pagetop_elements = document.getElementById('pagetop'); pagetop_elements.addEventListener('click', scroll_to_top); function scroll_to_top() { window.scroll({ top: 0, behavior: 'smooth' }); };
こんなスクリプト書く。
でも、Safari(iOS含む)は、この「behavior: 'smooth'」に対応してないし、するつもりもないらしい。
edgeは対応したのにね。
そんな時役に立つのが、
Polyfill.io
https://polyfill.io/v3/url-builder/
ここで、必要なpolyfillを選択して、urlをgetする
今回は必要なのが smoothscroll だけだからそこにチェックすると、
https://polyfill.io/v3/polyfill.min.js?features=smoothscroll
なんでURLになる
結論
自分が作ったjsファイルを読み込む前に
<script src="https://polyfill.io/v3/polyfill.min.js?features=smoothscroll"></script>
の1行を入れるだけ。
Wordpress Ultimate Memberのフォームで「同意する」にチェックしないとSubmitボタンを押せなくする
Ultimate Memberのフォームで「同意する」にチェックしないとSubmitボタンを押せなくするってのはよくある話。
Ultimate Memberの同意するは、チェックボックスで作る
メタキー(この場合は agree )はJavaScriptで使う
SubmitボタンのCSS(SCSS)はこんな感じ
#um-submit-btn{ opacity: 0.5; pointer-events: none; &.active{ opacity: 1; pointer-events: initial; } }
チェックボックスのJavaScript(jQuery)はこんな感じ
// デフォルで同意のチェックを外す $('.um-field-agree input').removeAttr('checked'); $('.um-field-agree .um-field-checkbox').removeClass('active'); $('.um-field-agree i').removeClass('um-icon-android-checkbox-outline'); $('.um-field-agree i').addClass('um-icon-android-checkbox-outline-blank'); // 同意のチェックがされたら登録ボタンが押せるようになる $('.um-field-agree').on('click', function(){ $(this).find('input').prop('checked') ? $('#um-submit-btn').addClass('active') : $('#um-submit-btn').removeClass('active'); });
um-field-agree の agree はチェックボックスに設定したメタキー
前半の「デフォルトで同意のチェックを外す」部分がないとバリデーションエラーの時同意のチェックがされているのに、Submitが押せないってなる