WordPress 2020.11.3

WordPressの検索結果にカスタムフィールドの値を追加する

function cf_search_join( $join ) {
	global $wpdb;
	if ( is_search() ) {
		$join .= ' LEFT JOIN ' . $wpdb->postmeta . ' ON ' . $wpdb->posts . '.ID = ' . $wpdb->postmeta . '.post_id ';
	}
	return $join;
}
add_filter( 'posts_join', 'cf_search_join' );

function cf_search_where( $where ) {
	global $wpdb;
	if ( is_search() ) {
		$where = preg_replace(
			"/\(\s*" . $wpdb->posts . ".post_title\s+LIKE\s*(\'[^\']+\')\s*\)/",
			"(" . $wpdb->posts . ".post_title LIKE $1) OR (" . $wpdb->postmeta . ".meta_value LIKE $1)", $where );

		// 特定のカスタムフィールドを検索対象から外す（※１）
//		$where .= " AND (" . $wpdb->postmeta . ".meta_key NOT LIKE 'number')";
//		$where .= " AND (" . $wpdb->postmeta . ".meta_key NOT LIKE 'zip')";
//		$where .= " AND (" . $wpdb->postmeta . ".meta_key NOT LIKE 'access')";
	}
	return $where;
}
add_filter( 'posts_where', 'cf_search_where' );

function cf_search_distinct( $where ) {
	global $wpdb;
	if ( is_search() ) {
		return "DISTINCT";
	}
	return $where;
}
add_filter( 'posts_distinct', 'cf_search_distinct' );

// 検索対象を『タイトルのみ』にする
function __search_by_title_only( $search, & $wp_query ) {
	global $wpdb;
	if ( empty( $search ) )
		return $search; // skip processing - no search term in query
	$q = $wp_query->query_vars;
	$n = !empty( $q[ 'exact' ] ) ? '' : '%';
	$search =
		$searchand = '';
	foreach ( ( array )$q[ 'search_terms' ] as $term ) {
		$term = esc_sql( like_escape( $term ) );
		$search .= "{$searchand}($wpdb->posts.post_title LIKE '{$n}{$term}{$n}')";
		$searchand = ' AND ';
	}
	if ( !empty( $search ) ) {
		$search = " AND ({$search}) ";
		if ( !is_user_logged_in() )
			$search .= " AND ($wpdb->posts.post_password = '') ";
	}
	return $search;
}
//add_filter( 'posts_search', '__search_by_title_only', 500, 2 );// （※２）

下記サイトを参考にしました。
WordPress内の検索対象にカスタムフィールドも適用する

WordPress 2020.10.27

現在のページにクラスを付与する

<nav>
    <ul>
        <li><a <?php if( is_page('concept') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>concept/">コンセプト</a></li>
        <li><a <?php if( is_page('news') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>news/">新着情報</a></li>
        <li><a <?php if( is_page('menu') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>menu/">メニュー_</a></li>
        <li><a <?php if( is_page('staff') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>staff/">スタッフ</a></li>
        <li><a <?php if( is_page('salon') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>salon/">サロン案内</a></li>
        <li><a <?php if( is_page('contact') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>contact/">お問い合わせ</a></li>
    </ul>
</nav>

HTML jQuery WordPress 2020.4.24

画面幅によって読み込みファイルを変える〜レスポンシブウェブデザイン

<script>
  jQuery(document).ready(function($) {
    //PC環境の場合
    if (window.matchMedia('(min-width: 768px)').matches) { //切り替える画面サイズ
      $.ajax({
        url: '<?php echo esc_url( get_template_directory_uri() ); ?>/js/pc.js',
        dataType: 'script',
        cache: false
      });
      //スマホ環境の場合
    } else {
      $.ajax({
        url: '<?php echo esc_url( get_template_directory_uri() ); ?>/js/sp.js',
        dataType: 'script',
        cache: false
      });
    };
  });
</script>

CSS jQuery 2019.7.20

【CSS】height: 100vh;を確実にする

.my-element {
  min-height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */
  min-height: calc(var(--vh, 1vh) * 100);
}

const setFillHeight = () => {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

let vw = window.innerWidth;

window.addEventListener('resize', () => {
  if (vw === window.innerWidth) {
  　// 画面の横幅にサイズ変動がないので処理を終える
    return;
  }

  // 画面の横幅のサイズ変動があった時のみ高さを再計算する
  vw = window.innerWidth;
  setFillHeight();
});

// 初期化
setFillHeight();

jQuery 2019.7.11

【JavaScript】指定した期間中だけ表示を変えたい

<script>
<!--
window.onload = function() {
var now = new Date();
var start = new Date('2001/1/1 0:00:00'); // 表示開始日時
var end = new Date('2020/12/31 23:59:59'); // 表示終了日時
 
if ( start <  now && now < end ) {
    document.getElementById("campaign").style.display="block";
}
}
-->
</script>

<div id="campaign" style="display: none;">
ここに表示させたい内容を書き込む
</div>

Category

Recent posts

Category