Создание окна поиска слайдов в wordpress

Я создаю окно поиска слайдов. Я успешно закодировал его, и он работает на jsfiddle. Однако, когда я пытаюсь реализовать его в wordpress, он не работает. Так как это работает на 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('http://img.wordpressask.com/javascript/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> 

Solutions Collecting From Web of "Создание окна поиска слайдов в wordpress"

Я думаю, это может быть так, как вы имплементируете это. Похоже, вы пытаетесь добавить это в свою тему в виде отдельных файлов, но я не вижу нигде в коде, который вы указали, где вы вызываете файл searchform.php в самой теме.

Таким образом, я протестировал код, который вы предоставили, и смог успешно заставить его работать над моей настраиваемой темой, установив местоположение, где я разместил предоставленные вами фрагменты кода.

Здесь были мои шаги.

Сначала я поместил код searchform.php в файл header.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 в файл footer.php моей темы, добавив вокруг него тег скрипта и добавив его прямо перед закрывающим тегом.

  <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('http://img.wordpressask.com/javascript/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, который он скрывал за моим заголовком, когда он был первоначально открыт. Однако он правильно загружается на сайт.

Попробуйте это решение, и я надеюсь, что оно соответствует вашим потребностям.