14. Creare Pagina Custom e pagina 404

Creare un layout pagina customizzata

Per creare una pagina customizzata diversa da quella standard del template che abbiamo creato.

Creiamo anzitutto un file page-custom.php e nell’intestazione specifichiamo un nome.

<?php
/**
 *Template Name: Pagina Custom
 */
get_header(); ?>

In questo modo quando dalla dashboard andremo ad aggiungere una nuova pagina, nella sidebar della bacheca ci chiederà nel menu a tendina di specificare se una nuova pagina template standard oppure usare il layout che vogliamo noi, della pagina custom appena creata. Con la struttura bootstrap che vogliamo.

 

Sulla falsa riga quindi ora possiamo

Creare una pagina errore 404

Crea file 404.php e nome pagina :

<?php
/**
 *Template Name: Pagina 404
 */
get_header(); ?>
<!– Corpo Pagina–>
<section>
    <div class=”container”>
        <div class=”row”>
            <div class=”col-sm-12 col-md-12 col-lg-12″>
                <h2>Ops! Sembra che la pagina che cerchi non esista!</h2>
                       <h3>Ecco alcuni suggerimenti di navigazione: </h3>
                <div class=”row pt-5″>
                    <div class=”col-sm-6 pt-3″>
                        <?php the_widget(‘WP_Widget_Pages’); ?>
                    </div>
                    <div class=”col-sm-6 pt-3″>
                        <?php the_widget(‘WP_Widget_Recent_Posts’); ?>
                    </div>
                    <div class=”col-sm-6 pt-3″>
                        <?php the_widget(‘WP_Widget_Categories’); ?>
                    </div>
                    <div class=”col-sm-6 pt-3″>
                        <?php the_widget(‘WP_Widget_Tag_Cloud’); ?>
                    </div>
                </div>
            </div>
        </div>
</section>

 

<!– FOOTER –>
<?php get_footer(); ?>
Dal codice sopra si evince che la funzione per richiamare i widget è la seguente:
<?php the_widget( $widget, $instance, $args ); ?> 
e dentro la parentesi si vanno a richiamare i nomi dei widgets che consultiamo dal codex di wordpress:
Posso customizzare questi widget inserendo dentro la parentesi come secondo e terzo parametro ad esempio
 <?php the_widget(‘WP_Widget_Pages’ , ‘title=Le mie pagine&exclude=2,13’ , ‘before_title=<h4>&after_title=</h4>’); ?>
Come vediamo posso escludere delle pagine inserendo l’ID exclude=2,13

11. La pagina archivio

Crea file archive.php

copiamo e incolliamo index.php come punto di partenza.

nella sezione header o intestazione che abbiamo creato inseriamo queste semplici funzioni per far comparire nome autore e categorie

                <h1 class=”display-5″><?php the_archive_title(); ?></h1>
                <h2> <?php the_archive_description(); ?></h2>

 

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>

10. Impostare e customizzare area commenti

Registrare area commenti sotto l’articolo

Mi trovo nella pagina single.php

Aggiungo la seguente funzione nel punto in cui voglio mostrare l’area commenti. Per usabilità subito dopo l’articolo, in fondo pagina.

       <!–commenti–>
            <?php comments_template(); ?>

creo nuova pagina comments.php

copiamo e incolliamo il codice dalla pagina comments.php di un tema preimpostato di default di WP.

Modifichiamo l’intestazione sostituendo i nomi corretti io ad esempio userò Manoz

/**
* The template for displaying comments
*
* This is the template that displays the area of the page that contains both the current comments
* and the comment form.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Manoz Theme
* @since Manoz 1.0
* @version Manoz 1.0
*/
Riprendendo ovviamente dal foglio di stile le stesse intestazioni, nomi etc
Se non è presente molto importante aggiungere la voce Text Domain: 
che poi sarà il parametro che andrà a pescare il nostro comments.php
/*
Theme Name: Manoz Theme
Theme URI: https://barrettasalvatore.it/manoz
Author: Salvatore Barretta
Author URI: https://barrettasalvatore.it
Description: My first theme Bootstrap for WordPress
Version: 1.0
Theme Domain: Manoz
Text Domain: manoz
*/
possiamo sistemare lo stile lavorando sulle seguenti classi
/*COMMENT AREA*/
textarea#comment{
width: 100%!important;
}
input#submit{
width: 100%;
color: #fff;
font-size: 18px;
background-color: black;
text-transform: uppercase;
padding: 1rem;
}
#author{
width: 100%;
}
#email{
width: 100%;
}
#url{
width: 100%;
}
p.comment-form-cookies-consent{
font-size: 10px;
}
Facoltativo:

a questo punto già funziona tutto, se vogliamo possiamo aggiungere questa funzione al file functions.php nella sezione della funzione carica scripts.

/* FUNZIONE PER CARICARE STANDARD DI WP PER LA REPLICA COMMENTI migliora usabilità */

if(is_singular())wp_enqueue_script(‘comment-reply’);

Configurazione e customizzazione dell’area commenti

comment_form()

Per lavorare invece sulla customizzazone dell’area commenti form, come ad esempio i testi delle sezioni input etc.. dobbiamo lavorare sulla seguente funzione fondamentale:

<?phpcomment_form();?>
La maggior parte delle stringhe e dei campi modulo può essere controllata tramite l’array $ args passato alla funzione, mentre puoi anche scegliere di utilizzare il filtro ‘comment_form_default_fields’ per modificare l’array di campi predefiniti se desideri aggiungerne uno nuovo o rimuoverlo un singolo campo.
Per cui andiamo nel file comments.php e dentro <?phpcomment_form();?>
(utilizziamo la variabile $args perchè è uno standard per wp) scriviamo questo array:
<?php
$args = array(
                                      ‘label_submit’ => ‘Invia’,
                                      ‘class_submit’=> ‘btn btn-primary’,
                                      ‘title_reply’=> ‘Vuoi Commentare?’,
                                      ‘comment_field’ => ‘<div class=”form-group”>
                                                                           <label for=”comment”>Commento</label>
                                                                           <textarea class=”form-control” rows=8>
                                                                           </textarea>
                                                                           </div>’
);
comment_form($args);
?>
all’interno della variabile args andiamo a richiamare uno specifico array
creo un’altra variabile la chiamo fields (che servirà per gestire gli aspetti dei campi del form )
e dentro la variabile args richiamo fields di modo che la funzione comment_form quando utilizza il parametro args, includa cosi anche l’array fields.
     <?php
        $fields = array();
        $args = array(
            ‘fields’ => $fields,
            ‘label_submit’ => ‘Invia’,
            ‘class_submit’=> ‘btn btn-primary’,
            ‘title_reply’=> ‘Vuoi Commentare?’,
            ‘comment_field’ => ‘<div class=”form-group”>
                                    <label for=”comment”>Commento</label>
                                    <textarea class=”form-control” rows=8>
                                    </textarea>
                                </div>’
        );
        comment_form($args);?>
a questo punto se facciamo un refresh della pagina, nella sezione commenti dovrebbe sparire la formattazione standard di WP sotto la textarea, dove di solito c’è il campo nome, email e sitoweb.
Ora siamo liberi di personalizzare quei fields , quei campi.
  $fields = array(
        ‘author’ => ‘<div class=”form-group”>
                        <input type=”text” class=”form-control” placeholder=”Nome*” required=”required”>
                        </div>’,
        ‘email’ =>  ‘<div class=”form-group”>
                        <input type=”email” class=”form-control” placeholder=”Email*” required=”required”>
                        </div>’,
        ‘url’ =>     ‘<div class=”form-group”>
                        <input type=”url” class=”form-control” placeholder=”Sito Web” >
                        </div>’
    );