コピペで簡単カスタマイズ！Lightningのヘッダーに検索窓を設置する方法

/************************************************
 * ロゴの横に検索窓を設置
 */

function add_header_serch(){
    echo '<form role="search" method="get" class="search-form" action="'.home_url( '/' ).'">
	<input type="search" class="search-field" placeholder="キーワードを入力" value=" '.get_search_query() .'" name="s" title="検索したいキーワードを入力してください" />
	<input type="submit" class="search-submit" value="Search"/>
  </form>';
}
add_action( 'lightning_site_header_logo_after', 'add_header_serch' );

/* ---------------------------------
 ヘッダーロゴ横に検索窓
---------------------------------*/
/* デザインが崩れるので991.98px以下でform非表示 */
@media (max-width: 991.98px){
    .site-header-container form{
        display: none !important;
    }
}
.site-header-container .search-form{
    position: relative;
}
/*虫眼鏡マーク*/
.site-header-container .search-form:after {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin: 0;
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding:14px 1.5em;
}
/*フィールド*/
.site-header-container .search-field{
    position: absolute;
    top: 50%;
    transform: translateY(-50%) ;
    right: 0px;
}
/*submitボタン非表示*/
.site-header-container .search-submit{
    display: none;
}
/*テキストフィールド*/
.site-header-container form .search-field{
    z-index: 200;
    opacity: 0;
    width: 64px;
    transition: all 0.5s ease-in;
    padding: 1em 0.8em;
    cursor: pointer;
}
/*フォーカス時にテキストフィールド表示*/
.site-header-container form .search-field:focus{
    opacity: 1;
    width:155px;
    transition: all 0.5s ease-in;
    border-width:1px;
    border-radius:var(--vk-size-radius);
}

/************************************************
 * header-topに検索窓を設置
 */
function add_header_top_serch(){
    echo '<form role="search" method="get" class="search-form" action="'.home_url( '/' ).'">
	<input type="search" class="search-field" placeholder="キーワードを入力" value=" '.get_search_query() .'" name="s" title="検索したいキーワードを入力してください" />
	<input type="submit" class="search-submit" value="Search"/>
  </form>';
}
add_action( 'lightning_header_top_container_append', 'add_header_top_serch' );

/* ---------------------------------
 header-topに検索窓を設置
---------------------------------*/
.header-top .search-form{
    position: relative;
    top:3px;
    margin-left: 30px;
}
/*虫眼鏡マーク*/
.header-top .search-form:after {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin: 0;
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding:10px;
}
/*フィールド*/
.header-top .search-field{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}
/*submitボタン非表示*/
.header-top .search-submit{
    display: none;
}
/*テキストフィールド*/
.header-top form .search-field{
    z-index: 200;
    opacity: 0;
    width: 64px;
    transition: all 0.5s ease-in;
    padding: 3px;
    cursor: pointer;
}
/*フォーカス時にテキストフィールド表示*/
.header-top form .search-field:focus{
    opacity: 1;
    width:155px;
    transition: all 0.5s ease-in;
    border-width:1px;
    border-radius:var(--vk-size-radius);
}