WordPressのカスタマイズ記事・シンタックスハイライトどうする？問題
hiro
magmag
Snow Monkeyのヘッダーに検索窓を設置するメモ
hiro
記事内に商品プロモーションを含む場合があります
Snow Monkeyのヘッダーに検索窓をつけてみたカスタマイズについてのメモです。
こちらにのサポートフォーラムにあります通りにすれば良いのですが、
https://snow-monkey.2inc.org/forums/topic/ヘッダーコンテンツにサイト内検索のフォームを/
検索フォームの表示を実行可能にする
functions.phpやMy Snowmonkeyに以下を追記します。
/**
* [search_form] で検索フォームを表示
*/
add_shortcode(
'search_form',
function() {
ob_start();
get_template_part( 'template-parts/common/search-form' );
return ob_get_clean();
}
);
/**
* ヘッダーコンテンツ内でショートコードを実行可能に
*/
add_filter(
'snow_monkey_template_part_render',
function( $html, $slug ) {
if ( 'template-parts/header/content' !== $slug ) {
return $html;
}
return do_shortcode( $html );
},
10,
2
);/**
* [search_form] で検索フォームを表示
*/
add_shortcode(
'search_form',
function() {
ob_start();
get_template_part( 'template-parts/common/search-form' );
return ob_get_clean();
}
);
/**
* ヘッダーコンテンツ内でショートコードを実行可能に
*/
add_filter(
'snow_monkey_template_part_render',
function( $html, $slug ) {
if ( 'template-parts/header/content' !== $slug ) {
return $html;
}
return do_shortcode( $html );
},
10,
2
);それから、JQueryは、
jQueryを追記する
CDN
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>jQuery
jQuery(function($){
// 検索アイコンクリック開閉
$('.c-header-content .form-toggle').on('click',function() {
$('.c-header-content .p-search-form').toggleClass('active');
});
// 検索ボックス範囲外クリックで閉じる
$(document).on('click touchend', function(event) {
if($('.c-header-content .p-search-form').hasClass('active')){
if (!$(event.target).closest('.c-header-content .p-search-form, .c-header-content .form-toggle').length) {
$('.c-header-content .p-search-form').removeClass('active');
}
}
});
});カスタマイザーからヘッダーに検索窓を設置する
外観→カスタマイズ→デザイン→ヘッダー→ヘッダーコンテンツの箇所に以下を書きます。
<div class="header-search">
<div class="header-search__inner"><p class="form-toggle"><i class="fas fa-search"></i></p>
[search_form]
</div>
</div>CSSで形を整える
CSS
.l-header__content .c-header-content {
position: fixed;
top: 20px;
left: 0;
width: 100%;
z-index: 99999;
}
.l-header__content .header-search__inner {
position: relative;
}
.l-header__content .c-container {
position: relative;
}
.l-header__content .header-search {
position: absolute;
top: 0;
left: 65%;
}
.l-header__content .p-search-form {
position: absolute;
top: -40%;
left: 0;
width: 250px;
opacity: 0;
visibility: hidden;
transition: .3s;
}
.l-header__content .p-search-form.active {
opacity: 1;
visibility: visible;
}
.l-header__content .form-toggle {
cursor: pointer;
}
.l-header__content .form-toggle:hover {
color: var(--wp--preset--color--sm-accent);
}以上でヘッダーに検索窓が出てきて検索できるようになります。
広告
ABOUT ME
小１娘を育児中の主婦。娘の不登校と向き合っています。ブログカスタマイズが趣味。