web-dev-qa-db-ja.com

Wordpressで検索ボックスを下にスライドさせる

スライドダウン検索ボックスを作成しています。私はうまくコーディングしました、そしてそれはjsfiddle上で動作します。しかし、私がワードプレスでそれを実装しようとしているとき、それは機能しません。それはjsfiddle上で動作するので、それはwordpress上で何かである必要があります、しかし私は問題が何であるかわかりません。誰かが何かエラーを見ますか？

jsfiddle - https://jsfiddle.net/jd0a433f/1/ /

searchform.php

<div class="search-field">
</div>
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label for="search-input" id="search-label" class="search-label">
    Search for:   
    </label>
<input id="search-input" type="search" class="search-input" placeholder="Search …" value="" name="s" title="Search for:" />
  <input type="submit" class="search-submit" value="Search" />
</form>

search.js

document.getElementById("search-label").addEventListener("click", function(e) {
  if (e.target == this) {
    e.preventDefault();
    this.classList.toggle("clicked");
  }
});

functions.php

function searchfunction() {
wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/search.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'searchfunction' );

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;
}

.search-form {
  position: relative;
}

.search-form label {
  position: relative;
  background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png') 0 0 no-repeat;
  background-size: cover;
  width: 50px; height: 50px;
  text-indent: 9999px;
  overflow: hidden;
  white-space: nowrap;
}

.search-input {
  transform: translateY(-100%);
  opacity: 0;
  position: absolute;
  top: 100%;
  transition: opacity .25s, transform .25s;
  left: 0;
  z-index: -1;
  border: 0;
  outline: 0;

}
.search-label, .search-input {
  background: #ccc;
  padding: .5em;
  display: inline-block;
}

.clicked + .search-input {
  opacity: 1;
  transform: translateY(0);
}

footer.php *

<footer class="site-footer">
    <!-- footer-widgets -->
    <div class="footer-line"></div>
<div class="footer-widgets clearfix">
<?php if (is_active_sidebar('footer1')) : ?>
<div class="footer-widget-area">
<?php dynamic_sidebar('footer1'); ?>
</div>

<?php endif; ?>
<?php if (is_active_sidebar('footer2')) : ?>
<div class="footer-widget-area">
<?php dynamic_sidebar('footer2'); ?>
</div>

<?php endif; ?>

<?php if (is_active_sidebar('footer3')) : ?>
<div class="footer-widget-area">
<?php dynamic_sidebar('footer3'); ?>
</div>

<?php endif; ?>
<?php if (is_active_sidebar('footer4')) : ?>
<div class="footer-widget-area">
<?php dynamic_sidebar('footer4'); ?>
</div>

<?php endif; ?>
</div><!-- /footer-widgets -->
         <nav class="site-nav">
                <?php 

             $args = array(
                'theme_location' => 'footer'
             );

              ?>

             <?php wp_nav_menu( $args ); ?>

            </nav>

<div style="display:inline-block;vertical-align:top;"><p id="copyright">&copy; <?php echo date('Y');?> <?php bloginfo('name'); ?> | </div>
<div style="display:inline-block;vertical-align:top;"><?wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'secondary-footer' ) ); ?></p></div>

</footer>

</footer>

</div><!-- container -->

<?php wp_footer(); ?>
</body>
</html>
javascriptsearchwp-enqueue-scripthtml
1
user7548188

私はそれがあなたがそれを暗示している方法かもしれないと思う。個別のファイルとしてテーマにこれを追加しようとしているように見えますが、テーマ自体のsearchform.phpファイルを呼び出している場所に、コードのどこにも表示されません。

そのため、私はあなたが提供したコードをテストし、私があなたが提供したコードスニペットを置いた場所を調整することによって私のカスタムテーマでうまく動作させることができました。

これが私のステップでした。

最初に私は自分のテーマのheader.phpファイルにsearchform.phpコードを置きました。

 <div class="search-field">
 </div>
 <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
   <label for="search-input" id="search-label" class="search-label">
     Search for:   
     </label>
 <input id="search-input" type="search" class="search-input" placeholder="Search …" value="" name="s" title="Search for:" />
   <input type="submit" class="search-submit" value="Search" />
 </form>

次に、私は自分のテーマのfooter.phpファイルにsearch.jsを置き、その周りにscriptタグを追加し、それを終了タグの直前に追加しました。

 <script>
 document.getElementById("search-label").addEventListener("click", function(e) {
   if (e.target == this) {
     e.preventDefault();
     this.classList.toggle("clicked");
   }
 });
 </script>

その後、私はあなたの関数をカスタムテーマのfunctions.phpに追加しました

 function searchfunction() {
 wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/search.js', array( 'jquery' ) );
 }
 add_action( 'wp_enqueue_scripts', 'searchfunction' );

最後に、私はあなたの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;
 }

 .search-form {
 position: relative;
 }

 .search-form label {
 position: relative;
 background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png') 0 0 no-repeat;
 background-size: cover;
 width: 50px; height: 50px;
 text-indent: 9999px;
 overflow: hidden;
 white-space: nowrap;
 }

 .search-input {
 transform: translateY(-100%);
 opacity: 0;
 position: absolute;
 top: 100%;
 transition: opacity .25s, transform .25s;
 left: 0;
 z-index: -1;
 border: 0;
 outline: 0;

 }
 .search-label, .search-input {
 background: #ccc;
 padding: .5em;
 display: inline-block;
 }

 .clicked + .search-input {
 opacity: 1;
 transform: translateY(0);
 }

このページを読み込むと、あなたが提供したjsfiddleの例と同じ機能を見ることができます。最初に開いたときにヘッダーの後ろに隠れていたという高い番号のz-indexを使用しているヘッダーがあるため、私はテーマに気付きました。しかし、それはサイトに正しくロードされています。

この解決策を試してみてください。私はそれがあなたのニーズに合っていると思います。

1
DigitalDesigner