1
ナビゲーションバーに検索フォームを作成しようとしています。ナビゲーションバーに虫めがねのシンボルがほしいと思っています。シンボルを押すと、検索フォームがドロップされます（このサイトのように - http://goodlife.fuelthemes.net）。私は私のテーマにシンボルを含む検索フォームを追加しましたが、ドロップダウン機能を追加する方法を理解できません。誰にも解決策はありますか？前もって感謝します。スライド式検索フォームを作成
header.phpの
<?php
/**
* The header for our theme.
*
* @package Total
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="ht-page">
<header id="ht-masthead" class="ht-site-header">
<div class="ht-container ht-clearfix">
<div id="ht-site-branding">
<?php
if (function_exists('has_custom_logo') && has_custom_logo()) :
the_custom_logo();
else :
if (is_front_page()) : ?>
<h1 class="ht-site-title"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
<?php else : ?>
<p class="ht-site-title"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></p>
<?php endif; ?>
<p class="ht-site-description"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('description'); ?></a></p>
<?php endif; ?>
<div class="search-toggle">
<?php get_search_form(); ?>
</div>
</div><!-- .site-branding -->
<nav id="ht-site-navigation" class="ht-main-navigation">
<div class="toggle-bar"><span></span></div>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container_class' => 'ht-menu ht-clearfix' ,
'menu_class' => 'ht-clearfix',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
));
?>
</nav><!-- #ht-site-navigation -->
</div>
</header><!-- #ht-masthead -->
<div id="ht-content" class="ht-site-content ht-clearfix">searchform.php
<form role="search" method="get" class="search-form" action="<?php echo home_url('/'); ?>">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
</label>
<input type="submit" class="search-submit" value="Search" />
</form>CSS
#ht-masthead .search-form {
position: absolute;
right: 200px;
top: 200px;
}
#ht-masthead .search-field {
background-color: transparent;
background-image: url(images/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
#ht-masthead .search-field:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}更新CSS *
#ht-masthead .search-field {
background-color: transparent;
background-image: url(images/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 230px;
}
#ht-masthead .search-field:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
}
#ht-masthead .search-form {
display:none;
position: absolute;
right: 200px;
top: 200px;
}
.search-toggle:hover #ht-masthead .search-form{
display:block;
}
.search-form
.search-submit {
display:none;
}更新検索フォーム。PHP *
<div class="search-field"></div>
<form role="search" method="get" class="search-form" action="<?php echo home_url('/'); ?>">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="" placeholder="Search …" value="" name="s" title="Search for:" />
</label>
<input type="submit" class="search-submit" value="Search" />
</form>
これをCSSで実行しようとしましたが、検索アイコンが消えました。 – user6738171
あなたが試したCSSコードを投稿してください –
あなたの編集内容を私の質問に投稿しました。それでも動作しませんでした。アイコンは表示されますが、クリックすることはできません。 – user6738171