web-dev-qa-db-fra.com

Construire un champion de la recherche vers le bas dans wordpress

Je construis un champ de recherche par glissement. Je l'ai codé avec succès, et cela fonctionne sur jsfiddle. Cependant, lorsque j'essaie de le mettre en œuvre sur Wordpress, cela ne fonctionne pas. Puisqu'il fonctionne sur jsfiddle, il doit être quelque chose sur wordpress, mais je ne vois pas quel est le problème. Est-ce que quelqu'un voit des erreurs?

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

Je pense que c'est peut-être ainsi que vous la mettez en œuvre. Il semble que vous tentiez d'ajouter ceci à votre thème sous forme de fichiers individuels, mais je ne vois nulle part dans le code que vous avez indiqué où vous appelez le fichier searchform.php dans le thème lui-même.

En tant que tel, j'ai testé le code que vous avez fourni et j'ai réussi à le faire fonctionner sur mon thème personnalisé en ajustant l'emplacement où j'ai placé les extraits de code que vous avez fournis.

Voici mes pas.

J'ai d'abord placé le code searchform.php dans le fichier header.php de mon thème.

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

Ensuite, j'ai placé search.js dans le fichier footer.php de mon thème en ajoutant la balise de script autour de lui et en l'ajoutant juste avant la balise de fermeture.

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

Après cela, j'ai ajouté votre fonction à functions.php du thème personnalisé.

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

Enfin, j'ai ajouté votre style CSS à la feuille de style des thèmes.

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

Lorsque je charge la page, je peux voir la même fonctionnalité que sur votre exemple jsfiddle que vous avez fourni. J'ai remarqué avec mon thème, car l'en-tête utilisant un indice z élevé était caché derrière mon en-tête lors de son ouverture initiale. Cependant, il se charge correctement sur le site.

Essayez cette solution et j'espère que cela répond à vos besoins.

1
DigitalDesigner