カスケード変数のためのCSSカスタムプロパティを使ったら、CSSの管理が楽になりました。
hiro
magmag
恒例の検索窓設置シリーズベクトル製買い切りテーマKatawara
hiro
記事内に商品プロモーションを含む場合があります
最近カスタマイズのネタが尽きてきたので、過去に買ったWordPressテーマを使ってはいじるということをしています。
今回は、ベクトルさんの買い切りテーマKatawaraを使ってみました。
ライトニングはサブスクですけど、katawaraは買い切りでキャンペーン価格の時に購入したのでとてもお得でした。
VKブロックって多彩で機能が充実していてさすがのベクトルさんです。テーマもフックがしっかりと用意されています。
さて、Katawaraのヘッダーにも検索窓をつけてみました。自分のためにメモします。
Katawaraは基本的に左側ヘッダーのレイアウトを変更しないことを想定とされたテーマなので、普通のレイアウトにしたい場合は、ライトニングをご使用くださいということらしいです。
以下をfunctions.phpまたはコードスニペッツに追記です。
function add_search_icon_to_header() { ?>
<div id="search-form-wrapper">
<form method="get" class="searchform" action="<?php echo esc_url( home_url('/') ); ?>"> <input type="text" placeholder="" name="s" class="search-edit" value="" /> <button type="submit" class="search-submit"><i class="fas fa-search"></i></button> </form>
</div>
<?php
}
add_action( 'katawara_header_logo_after', 'add_search_icon_to_header' );お馴染みのCDN
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>jQueryです
<script>
jQuery(document).ready(function($) {
$('#search-icon-toggle').click(function(e) {
e.preventDefault();
$('#search-form-wrapper').slideToggle();
});
// 初期状態で検索フォームを閉じる
$('#search-form-wrapper').hide();
});
</script>CSSです。
#search-form-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
padding-bottom:10px;
border: none!important;
}
.searchform {
display: flex;
background-color: transparent;
border: none!important;
border-radius:5px!important;
}
.search-edit {
display: flex;
background-color: transparent;
border: none!important; /* ボーダーを無くす */
}
.search-submit {
color: #333;
border: none;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
margin-left: 5px;
}
.search-submit i {
display: inline-block;
border: none;
background: transparent;
font-size: 18px;
vertical-align: middle;
}これで検索窓設置いたしましたー。
広告
ABOUT ME
小１娘を育児中の主婦。娘の不登校と向き合っています。ブログカスタマイズが趣味。