Aggiungere barra di ricerca e personalizzare search form

 

Per attivare modulo ricerca scriviamo la funzione dove vogliamo che compaia la barra search.

         <?php get_search_form(); ?>

Creiamo un nuovo file search.php

usiamo come base index.php la nostra pagina articoli.

 

modifichiamo il loop articoli in questo modo:

   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                        <div class=”pt-5″>
                            <h3 class=”display-4″><a href=”<?php the_permalink(); ?>”> <?php echo the_title(); ?></a></h3>
                            <p class=”meta-text-articolo p-5″>
                                <i class=”fa fa-user” aria-hidden=”true”></i><?php echo the_author_posts_link(); ?> <br>
                                <i class=”fa fa-calendar” aria-hidden=”true”></i> <i><?php echo the_time(‘d m Y’); ?> </i><br>
                                <i class=”fa fa-archive  ” aria-hidden=”true”></i></b><i><?php echo get_the_category_list(‘,’); ?></i><br>
                                <i class=”fa fa-tags  ” aria-hidden=”true”></i></b><i> <?php echo the_tags(); ?></i>
                            </p>
                        </div>
                        <div class=””>
                            <div class=”blog-media mb-4″>
                                <?php echo the_post_thumbnail(‘medium’);
                                the_excerpt(); ?>
                                <button class=”btn btn-primary btn-sm”> <a href=”<?php the_permalink(); ?>”> Leggi tutto…</a> </button>
                            </div>
                        </div>
                        <hr>
   <?php endwhile; else : ?>
                    <h4> <?php echo ‘Non ci sono articoli per la seguente parola chiave di ricerca utilizzata:<i>’ . get_search_query() . ‘</i><br>Riprova’; ?></h4>
   <?php endif; ?>

Crea un nuovo file searchform.php per personalizzare il form con le classi di bootstrap

Diamo uno stile alla barra di ricerca sempre cercando sul codex search form

 

<form role=”search” method=”get” class=”search-form” action=”<?php echo home_url(‘/’); ?>”>
    <div class=”input-group”>
        <input type=”search” class=”form-control” name=”s” id=”search” value=”<?php get_search_query(); ?>” placeholder=”<?php echo esc_attr_x(‘Fai la tua ricerca…’, ‘placeholder’) ?>” />
        <input type=”submit” alt=”Cerca” class=”btn btn-primary btn-sm” value=”<?php echo esc_attr_x(‘Search’, ‘submit button’); ?>” />
    </div>
</form>

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *