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」の部分は任意（*１）、「カスタムフィールド」の部分は一覧のカラム名
$columns['columns_nickname'] = '名前';
$columns['last_login_time'] = '最終ログイン';
unset($columns['name'],$columns['account_status']);
$sort_number = array(
'ID' => 0,
'username' => 1, //ユーザー名
'um_custom' => 2, //カスタムフィールド *１と同じもの
'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>
の１行を入れるだけ。
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が押せないってなる
