Creare una pagina di ricerca custom in Wordpress

Mattepuffo's logo
Creare una pagina di ricerca custom in Wordpress

Creare una pagina di ricerca custom in Wordpress

Quello che vogliamo ottenere oggi è una pagina di ricerca custom in Wordpress, usando il motore di ricerca del CMS ovviamente.

In sostanza vogliamo visualizzare il risultato della ricerca come ci pare.

Prima di tutto dobbiamo creare il file search.php, che sarà richiamato al posto di quello di standard.

Qui dentro metteremo il nostro codice; considerate che lo prendo da un esempio reale, e quindi molto HTML potrebbe non servirvi.

Comunque ecco il codice:

<?php
get_header();

$s = get_search_query();
$title = $s;
?>

    <section class="page-header page-header-classic">
        <div class="container">
            <div class="row appear-animation" data-appear-animation="fadeInLeftShorter"
                 data-appear-animation-delay="700">
                <div class="col p-static text-center">
                    <h1 class="text-uppercase text-primary" data-title-border><?php echo $title; ?></h1>
                </div>
            </div>
        </div>
    </section>

    <div class="<?php echo $container; ?> py-4">
        <div class="row appear-animation" data-appear-animation="fadeInUpShorter"
             data-appear-animation-delay="900">
            <div class="col-lg-3">
                <?php include_once 'sidebar.php'; ?>
            </div>
            <div class="col-lg-9">
                <div class="blog-posts">
                    <div class="row px-3">
                        <?php
                        $postsPerPage = 10;
                        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                        $args = array(
                            'post_type' => 'post',
                            'post_status' => 'publish',
                            's' => $s
                        );
                        $posts = get_posts($args);
                        if ($posts):
                            foreach ($posts as $p):
                                $img = get_the_post_thumbnail_url($p->ID);
                                ?>
                                <div class="col-sm-6">
                                    <article class="post post-medium border-0 pb-0 mb-5">
                                        <div class="post-image">
                                            <a href="<?php echo get_permalink($p->ID); ?>">
                                                <img src="<?php echo $img; ?>"
                                                     class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-0"
                                                     alt="<?php echo $p->post_title; ?>">
                                            </a>
                                        </div>
                                        <div class="post-content">
                                            <h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-2">
                                                <a href="<?php echo get_permalink($p->ID); ?>"><?php echo $p->post_title; ?></a>
                                            </h2>
                                            <p><?php echo get_the_excerpt($p->ID); ?></p>
                                            <div class="post-meta">
                                                <span class="d-block mt-2">
                                                    <a href="<?php echo get_permalink($p->ID); ?>"
                                                       class="btn btn-xs btn-primary text-1 text-uppercase">
                                                        Leggi tutto
                                                    </a>
                                                </span>
                                            </div>
                                        </div>
                                    </article>
                                </div>
                            <?php
                            endforeach;
                        endif;
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

<?php get_footer();

Bene, adesso creaimo un form per la ricerca.

Per l'esempio basta una cosa del genere:

<form role="search" action="https://www.sito.it/?s" method="get">
	<input class="form-control text-1" id="headerSearch" name="s" 
		type="search" value="" placeholder="Cerca...">
	<button class="btn" type="submit">
		Cerca
	</button>
</form>

La cosa importante è che il campo input abbia il nome s, che il valore che si prenderà il motore di ricerca di Wordpress.

Enjoy!


Condividi

Commentami!