Lore Pirri

OnePress: aggiungere un menu nel footer

Fri, 29 Sep 2017 00:00:00 +0000

Aggiornato il 14 Agosto 2018

OnePress e’ un tema one-page per WordPress. I creatori FameThemes hanno fatto proprio un bel lavoro con il OnePress Theme e lo considero uno dei temi one-page migliori che abbia trovato.

Il tema non ha un secondo menu nel footer.

Un menu nel footer potrebbe essere molto utile per mostrare il link a pagine come privacy, cookies policy, impressum, FAQs, ed altre pagine secondarie.

In questo articolo vi mostrero’ come aggiungere un menu nel footer del tema OnePress per WordPress, usando la tecnica del child theme.

Se non avete ancora creato un child theme per il vostro tema OnePress, avrete bisogno di crearne uno adesso. Per quelli che non hanno mai sentito parlare di child theme per WordPress e di come siano utili per modificare un tema esistente, ho scritto un articolo su come cambiare il Copyright nel footer nel quale indico brevemente dove andare a cercare per capire cosa sia un child theme ed in particolare come installare un child theme per OnePress.

TLTR; Potete saltare l’articolo e passare direttamente alla sezione Riassumendo alla fine.

OnePress Plus Theme

Vi suggerisco caldamente di acquistare la versione completa OnePress Plus Theme in quanto ha molte funzionalita’ che saranno utili a voi o ai vostri clienti.

Installare il Child Theme

Per quelli che non hanno mai usato un child theme, qui di seguito traduco la definizione ufficiale data da WordPress:

“Un Child Theme e’ un tema che eredita le funzionalita’ e gli stili di un altro tema, chiamato tema genitore. Il metodo del Child Theme e’ il modo raccomandato per modificare un tema gia’ esistente.”

Quindi se non avete gia’ creato un Child Theme per il vostro tema OnePress, dovrete crearne uno ora.

Maggiori informazioni su come creare un Child Theme da zero (in inglese), oppure potete scaricarne uno gia’ fatto qui OnePress Child Theme.

OnePress ha un solo menu, definito come Primary Navigation, dunque dobbiamo aggiungere un altra definizione per un altro menu di Secondary Navigation, e poi definire dove andra’ visualizzato e come.

Aggiungere un altro menu e’ facile, basta aggiungere in fondo al file functions.php del vostro child theme questo codice:

// Add two menus: this theme uses wp_nav_menu() in two locations.  
register_nav_menus( array(  
  'primary' => __( 'Primary Navigation', 'onepress-child' ),  
  'secondary' => __('Secondary Navigation', 'onepress-child')  
) );

Nota: se avete rinominato il vostro child theme, sostituite onepress-child con lo slug del vostro tema.

Vogliamo visualizzare il secondo menu nel footer, quindi come gia’ spiegato nell’articolo su cambiare il Copyright nel footer, dobbiamo sovrascrivere la funzione responsabile per visualizzare il footer della pagina.

Dunque, dobbiamo aggiungere in fondo al file functions.php del vostro child theme, questa la funzione, che ha gia’ il codice per visualizzare il secondo menu, contenuto tra i commenti shows our custom menu:

// Customize the footer area (show also the secondary menu)
if ( ! function_exists( 'onepress_footer_site_info' ) ) {
    /**
     * Add Copyright and Credit text to footer
     * @since 1.1.3
     */
    function onepress_footer_site_info()
    {
        ?>

        <!-- shows our custom menu -->
        <?php if( has_nav_menu( 'secondary', 'onepress-child' ) ) {
            ?> <div class="footer-menu-container"> <?php
            wp_nav_menu( array( 'theme_location' => 'secondary' ) );
            ?> </div> <?php
        } ?>
        <!-- end: shows our custom menu -->

        <?php printf(esc_html__('Copyright %1$s %2$s %3$s', 'onepress'), '&copy;', esc_attr(date('Y')), esc_attr(get_bloginfo())); ?>
        <span class="sep"> &ndash; </span>
        <?php printf(esc_html__('%1$s theme by %2$s', 'onepress'), '<a href="' . esc_url('https://www.famethemes.com/themes/onepress', 'onepress') . '">OnePress</a>', 'FameThemes'); ?>
        <?php
    }
}

Notare che se voi aveste gia’ modificato il Copyright, allora dovrete aggiornare anche quella parte, oppure semplicemente copiate ed incollate questo codice all’interno della definizione della vostra funzione onepress_footer_site_info():

<!-- shows our custom menu -->
<?php if( has_nav_menu( 'secondary', 'onepress-child' ) ) {
    ?> <div class="footer-menu-container"> <?php
    wp_nav_menu( array( 'theme_location' => 'secondary' ) );
    ?> </div> <?php
} ?>
<!-- end: shows our custom menu -->

A questo punto il secondo menu viene visualizzato dalla funzione standard wp_nav_menu( ... ); quindi il suo risultato, racchiuso nella classe footer-menu-container, deve essere stilizzato per essere visualizzato in linea, e con un adeguato separatore tra le voci di menu.

Per questo motivo, aggiungiamo il seguente codice alla fine del file style.css del child theme:

.footer-menu-container { display: block; width:100%; margin-bottom: 12px; }
.footer-menu-container ul { display: inline; padding-left: 0px; }
.footer-menu-container li { list-style-type: none; display: inline; }

.footer-menu-container li:before {
	content: "\007C";
	font-family: FontAwesome;
    margin-left: 6px;
	margin-right: 8px;
}

.footer-menu-container li:first-of-type:before {
	content: none;
	margin-right: 0;
}

.footer-menu-container li:last-of-type {
	margin-right: 0;
}

WordPress Dashboard

Andate sulla vostra Dashboard di WordPress, create un menu chiamato ad esempio ‘Footer Menu’ con un po’ di items, e posizionatelo in ‘Secondary Navigation’.

Dovreste ora avere un menu nel footer simile a questo:

TLTR - Riassumendo

Per riassumere in pochi passi:

Creare un child theme per il vostro tema OnePress

Aggiungere questo codice alla fine del file functions.php del child theme

 // Add two menus: this theme uses wp_nav_menu() in two locations.  
 register_nav_menus( array(  
   'primary' => __( 'Primary Navigation', 'onepress-child' ),  
   'secondary' => __('Secondary Navigation', 'onepress-child')  
 ) );

 // Customize the footer area (show also the secondary menu)
 if ( ! function_exists( 'onepress_footer_site_info' ) ) {
     /**
      * Add Copyright and Credit text to footer
      * @since 1.1.3
      */
     function onepress_footer_site_info()
     {
         ?>

         <!-- shows our custom menu -->
         <?php if( has_nav_menu( 'secondary', 'onepress-child' ) ) {
             ?> <div class="footer-menu-container"> <?php
             wp_nav_menu( array( 'theme_location' => 'secondary' ) );
             ?> </div> <?php
         } ?>
         <!-- end: shows our custom menu -->

         <?php printf(esc_html__('Copyright %1$s %2$s %3$s', 'onepress'), '&copy;', esc_attr(date('Y')), esc_attr(get_bloginfo())); ?>
         <span class="sep"> &ndash; </span>
         <?php printf(esc_html__('%1$s theme by %2$s', 'onepress'), '<a href="' . esc_url('https://www.famethemes.com/themes/onepress', 'onepress') . '">OnePress</a>', 'FameThemes'); ?>
         <?php
     }
 }

Sostituite onepress-child con lo slug del vostro tema., se avete rinominato il vostro child theme.

Aggiungere questo codice alla fine del file style.css del child theme:

 .footer-menu-container { display: block; width:100%; margin-bottom: 12px; }
 .footer-menu-container ul { display: inline; padding-left: 0px; }
 .footer-menu-container li { list-style-type: none; display: inline; }

 .footer-menu-container li:before {
 	content: "\007C";
 	font-family: FontAwesome;
     margin-left: 6px;
 	margin-right: 8px;
 }

 .footer-menu-container li:first-of-type:before {
 	content: none;
 	margin-right: 0;
 }

 .footer-menu-container li:last-of-type {
 	margin-right: 0;
 }

Fine. Andate sulla vostra Dashboard di WordPress, create un menu chiamato ad esempio ‘Footer Menu’ con un po’ di items, e posizionatelo in ‘Secondary Navigation’.

Se questo articolo vi e’ stato utile, per favore premete il tasto Mi Piace o Condividi! Se avete dei suggerimenti o avete trovato un errore, per favore Commentate qua sotto, oppure Contattatemi!

OnePress: cambiare il Copyright nel footer

Mon, 25 Sep 2017 00:00:00 +0000

OnePress e’ un tema one-page per WordPress. I creatori FameThemes hanno fatto proprio un bel lavoro con il OnePress Theme e lo considero uno dei temi one-page migliori che abbia trovato.

Ho usato questo tema configurandolo per usare solo un’immagine di logo, e quindi il nome del sito non compariva nel messaggio di Copyright in fondo al footer.

In questo articolo vi spieghero’ come risolvere questo problema facilmente, senza modificare alcun file del tema, ma usando la tecnica del child theme.

TLTR; Potete saltare l’articolo e passare direttamente alla sezione Riassumendo alla fine.

OnePress Plus Theme

Vi suggerisco caldamente di acquistare la versione completa OnePress Plus Theme in quanto ha molte funzionalita’ che saranno utili a voi o ai vostri clienti.

Installare il Child Theme

Per quelli che non hanno mai usato un child theme, qui di seguito traduco la definizione ufficiale data da WordPress:

“Un Child Theme e’ un tema che eredita le funzionalita’ e gli stili di un altro tema, chiamato tema genitore. Il metodo del Child Theme e’ il modo raccomandato per modificare un tema gia’ esistente.”

Quindi se non avete gia’ creato un Child Theme per il vostro tema OnePress, dovrete crearne uno ora.

Maggiori informazioni su come creare un Child Theme da zero (in inglese), oppure potete scaricarne uno gia’ fatto qui OnePress Child Theme.

Cambiare il Copyright

Ho letto il suggerimento della documentazione ufficiale del tema OnePress Aggiungi una nuova sezione (inglese) usando un child theme, ed invece ho modificato il Copyright nel footer, usando lo stesso metodo: sovrascrivere la funzione che visualizza le informazioni riguardo al footer (in questo caso).

Tale funzione viene creata eventualmente, se non gia’ esistente, nel file inc/template-tags.php e puo’ quindi essere sovrascritta creandone una con lo stesso nome nel file functions.php del vostro child theme.

In particolare, questa e’ la funzione che potete aggiungere in fondo al file functions.php del vostro child theme

if ( ! function_exists( 'onepress_footer_site_info' ) ) {
    /**
     * Add Copyright and Credit text to footer
     * @since 1.1.3
     */
    function onepress_footer_site_info()
    {
        ?>
        <?php printf(esc_html__('Copyright %1$s %2$s %3$s', 'onepress'), '&copy;', esc_attr(date('Y')), esc_attr(get_bloginfo())); ?>
        <span class="sep"> &ndash; </span>
        <?php printf(esc_html__('%1$s theme by %2$s', 'onepress'), '<a href="' . esc_url('https://www.famethemes.com/themes/onepress', 'onepress') . '">OnePress</a>', 'FameThemes'); ?>
        <?php
    }
}

Notare che ho rimosso la chiamata alla funzione add_action() che normalmente verrebbe chiamata giusto dopo l’ultima parentesi graffa chiusa. Non vi e’ alcun bisogno di chiamarla nuovamente, in quanto verra’ comunque invocata nel file inc/template-tags.php del tema.

Come si puo’ vedere nella funzione, il nome della ditta alla quale apparterrebbe il sito web e’ dato dal valore restituito dalla funzione get_bloginfo().

Questo valore sarebbe vuoto, nel caso in cui si configurasse il tema usando solo un’immagine di logo (senza specificare nome e tagline).

Per questa ragione, bisognerebbe cambiare la chiamata get_bloginfo() con una stringa qualsiasi (tra virgolette), quindi ad esempio la linea

<?php printf(esc_html__('Copyright %1$s %2$s %3$s', 'onepress'), '&copy;', esc_attr(date('Y')), esc_attr(get_bloginfo())); ?>

diventerebbe qualcosa come

<?php printf(esc_html__('Copyright %1$s %2$s %3$s', 'onepress'), '&copy;', esc_attr(date('Y')), esc_attr('Lore Pirri. All Rights Reserved.')); ?>

TLTR - Riassumendo

Per riassumere in pochi passi:

Creare un child theme per il vostro tema OnePress

Aggiungere questa funzione alla fine del file functions.php del child theme

 if ( ! function_exists( 'onepress_footer_site_info' ) ) {
     /**
      * Add Copyright and Credit text to footer
      * @since 1.1.3
      */
     function onepress_footer_site_info()
     {
         ?>
         <?php printf(esc_html__('Copyright %1$s %2$s %3$s', 'onepress'), '&copy;', esc_attr(date('Y')), esc_attr(get_bloginfo())); ?>
         <span class="sep"> &ndash; </span>
         <?php printf(esc_html__('%1$s theme by %2$s', 'onepress'), '<a href="' . esc_url('https://www.famethemes.com/themes/onepress', 'onepress') . '">OnePress</a>', 'FameThemes'); ?>
         <?php
     }
   }

 <?php printf(esc_html__('Copyright %1$s %2$s %3$s', 'onepress'), '&copy;', esc_attr(date('Y')), esc_attr('Lore Pirri. All Rights Reserved.')); ?>

Fine.

Se questo articolo vi e’ stato utile, per favore premete il tasto Mi Piace o Condividi! Se avete dei suggerimenti o avete trovato un errore, per favore Commentate qua sotto, oppure Contattatemi!

Gioco di Simon

Mon, 03 Jul 2017 00:00:00 +0000

Questo e’ un progetto che ho fatto durante il freeCodeCamp per ottenere il mio FCC Front End Certificate.

Le specifiche complete sono sul FCC Simon Game.

Obiettivo

Costruire un’applicazione CodePen.io simile in funzionalita’ a questo demo.

Soddisfare le User Stories di sotto. Usare qualsiasi libreria o APIs che si voglia. Dare uno stile personale all’applicazione.

User Stories

Mi viene presentata una successione di pulsanti premuti casualmente.
Ogni volta che premo la serie di pulsanti correttamente, mi viene presentata la stessa serie di pulsanti premuti piu’ un passo aggiuntivo.
Sento un suono che corrisponde ad ogni bottone, sia quando la serie di bottoni viene mostrata, e sia quando premo personalmente un pulsante.
Se premo il bottone sbagliato ne ricevo notifica, e la serie di bottoni ricomincia da capo a farmi vedere il pattern di pulsanti e posso ricominciare da capo.
Posso vedere quanti passi ci sono nella serie corrente.
Se voglio ricominciare, posso premere un pulsante ed il gioco ricominciera’ da capo al passo iniziale.
Posso giocare in modalita’ strict mode, nella quale se sbaglio un pulsante vengo notificato dell’errore ed il giorno ricomincia da capo con una nuova sequenza di pulsanti.
Posso vincere il gioco azzeccando una sequenza di pulsanti lunga 20 passi correttamente. Vengo notificato della mia vittoria ed il gioco comincia nuovamente.

CodePen

Questa e’ la mia solutione, usando React su CodePen.

See the Pen React Simon Game by Lorenzo (@lorepirri) on CodePen.

Se questo articolo vi e’ stato utile, per favore premete il tasto Mi Piace o Condividi! Se avete dei suggerimenti o avete trovato un errore, per favore Commentate qua sotto, oppure Contattatemi!

Gioco del Tris

Fri, 30 Jun 2017 00:00:00 +0000

Questo e’ un progetto che ho fatto durante il freeCodeCamp per ottenere il mio FCC Front End Certificate.

Le specifiche complete sono sul FCC Tic Tac Toe Game.

Obiettivo

Costruire un’applicazione CodePen.io simile in funzionalita’ a questa.

Soddisfare le User Stories di sotto. Usare qualsiasi libreria o APIs che si voglia. Dare uno stile personale all’applicazione.

User Stories

Posso giocare il gioco del Tris contro il computer.
Il gioco si resetta appena uno dei due giocatori vince.
Posso scegliere se giocare con la X o con la O.

CodePen

Questa e’ la mia solutione, usando React su CodePen.

See the Pen React Tic Tac Toe Game by Lorenzo (@lorepirri) on CodePen.

Se questo articolo vi e’ stato utile, per favore premete il tasto Mi Piace o Condividi! Se avete dei suggerimenti o avete trovato un errore, per favore Commentate qua sotto, oppure Contattatemi!

Pomodoro Timer

Sat, 24 Jun 2017 00:00:00 +0000

Questo e’ un progetto che ho fatto durante il freeCodeCamp per ottenere il mio FCC Front End Certificate.

Le specifiche complete sono sul FCC Pomodoro Clock.

Obiettivo

Costruire un’applicazione CodePen.io simile in funzionalita’ a questa.

Soddisfare le User Stories di sotto. Usare qualsiasi libreria o APIs che si voglia. Dare uno stile personale all’applicazione.

User Stories

Posso far partire un pomodoro di 25 minuti, e un allarme deve suonare dopo che sono trascorsi 25 minuti.
Posso resettare il timer per il prossimo pomodoro.
Posso personalizzare la lunghezza in minuti del pomodoro.

CodePen

Questa e’ la mia solutione, usando React su CodePen.

See the Pen React Pomodoro Clock by Lorenzo (@lorepirri) on CodePen.

Se questo articolo vi e’ stato utile, per favore premete il tasto Mi Piace o Condividi! Se avete dei suggerimenti o avete trovato un errore, per favore Commentate qua sotto, oppure Contattatemi!

Calcolatrice Javascript

Fri, 23 Jun 2017 00:00:00 +0000

Questo e’ un progetto che ho fatto durante il freeCodeCamp per ottenere il mio FCC Front End Certificate.

Le specifiche complete sono sul FCC JavaScript Calculator.

Obiettivo

Costruire un’applicazione CodePen.io simile in funzionalita’ a questa.

Soddisfare le User Stories di sotto. Usare qualsiasi libreria o APIs che si voglia. Dare uno stile personale all’applicazione.

User Stories

Posso aggiungere, sottrarre, moltiplicare, e dividere due numeri.
Posso azzerare la calcolatrice con un pulsante.
Posso accumulare operazioni matematiche fino a che non viene premuto il pulsante per l’uguale, ed il calcolatore mostra il risultato corretto.

CodePen

Questa e’ la mia solutione, usando React su CodePen.

See the Pen React Calculator by Lorenzo (@lorepirri) on CodePen.

Se questo articolo vi e’ stato utile, per favore premete il tasto Mi Piace o Condividi! Se avete dei suggerimenti o avete trovato un errore, per favore Commentate qua sotto, oppure Contattatemi!

Twitchtv JSON API

Thu, 20 Apr 2017 00:00:00 +0000

Questo e’ un progetto che ho fatto durante il freeCodeCamp per ottenere il mio FCC Front End Certificate.

Le specifiche complete sono sul FCC Twitchtv JSON API.

Obiettivo

Costruire un’applicazione CodePen.io simile in funzionalita’ a questo demo.

Soddisfare le User Stories di sotto. Usare qualsiasi libreria o APIs che si voglia. Dare uno stile personale all’applicazione.

User Stories

Posso vedere se Free Code Camp sta trasmettendo su Twitch.tv.
Posso cliccare sullo stato utente ed essere rediretto al canale Twitch.tv di Free Code Camp.
Se un utente Twitch sta trasmettendo, posso vedere dettagli aggiuntivi riguardo a cio’ che stanno trasmettendo.

CodePen

Questa e’ la mia solutione, usando Bootstrap, jQuery, e Ajax su CodePen.

See the Pen freeCodeCamp Twitchtv JSON API by Lorenzo (@lorepirri) on CodePen.

Se questo articolo vi e’ stato utile, per favore premete il tasto Mi Piace o Condividi! Se avete dei suggerimenti o avete trovato un errore, per favore Commentate qua sotto, oppure Contattatemi!

Visualizzatore Wikipedia

Mon, 17 Apr 2017 00:00:00 +0000

Questo e’ un progetto che ho fatto durante il freeCodeCamp per ottenere il mio FCC Front End Certificate.

Le specifiche complete sono sul FCC Wikipedia Viewer.

Obiettivo

Costruire un’applicazione CodePen.io simile in funzionalita’ a questo demo.

Soddisfare le User Stories di sotto. Usare qualsiasi libreria o APIs che si voglia. Dare uno stile personale all’applicazione.

User Stories

Posso cercare argomenti su Wikipedia inserendo un termine di ricerca ed avere i risultati reali dal sito Wikipedia.
Posso cliccare su un bottone per vedere una pagina Wikipedia a caso.

CodePen

Questa e’ la mia solutione, usando Bootstrap, jQuery, e Ajax su CodePen.

See the Pen Wikipedia Viewer by Lorenzo (@lorepirri) on CodePen.

Se questo articolo vi e’ stato utile, per favore premete il tasto Mi Piace o Condividi! Se avete dei suggerimenti o avete trovato un errore, per favore Commentate qua sotto, oppure Contattatemi!

Mostra il Meteo Locale

Sat, 15 Apr 2017 00:00:00 +0000

Questo e’ un progetto che ho fatto durante il freeCodeCamp per ottenere il mio FCC Front End Certificate.

Le specifiche complete sono sul FCC Show the Local Weather.

Obiettivo

Costruire un’applicazione CodePen.io simile in funzionalita’ a questo demo.

Soddisfare le User Stories di sotto. Usare qualsiasi libreria o APIs che si voglia. Dare uno stile personale all’applicazione.

User Stories

Posso vedere che tempo fa nel posto dove mi trovo.
Posso vedere un’icona o un immagine di sfondo differente (e.g. montagna innevata, deserto caldo) a seconda del tempo.
Posso premere un pulsante per cambiare da Fahrenheit a Celsius, e viceversa.

CodePen

Questa e’ la mia solutione, usando Bootstrap, jQuery, e Ajax su CodePen.

Nota: l’applicazione scarica i dati da OpenWeatherMapProxy: un proxy che ho scritto appositamente, e si relaziona direttamente con le API OpenWeatherMap che richiedono una secret key.

See the Pen Show the Local Weather by Lorenzo (@lorepirri) on CodePen.

Se questo articolo vi e’ stato utile, per favore premete il tasto Mi Piace o Condividi! Se avete dei suggerimenti o avete trovato un errore, per favore Commentate qua sotto, oppure Contattatemi!

OpenWeatherMap Proxy

Fri, 14 Apr 2017 00:00:00 +0000

Questo e’ un progetto che ho fatto durante il freeCodeCamp per ottenere il mio FCC Front End Certificate.

OpenWeatherMapProxy e’ proxy che ho scritto per risolvere la challenge freeCodeCamp Show Local Weather. Agisce come passthrough alle APIs di OpenWeather Map che altrimenti richiederebbero una secret key, che dunque andrebbe esposta publicamente in un’applicazione front-end.

Non ho ancora tradotto tutto il testo in Italiano, potete leggere tutto sull’articolo in Inglese OpenWeatherMap Proxy.

Lore Pirri

OnePress: aggiungere un menu nel footer

OnePress Plus Theme

Installare il Child Theme

Aggiungere il menu

Styling del menu con CSS

WordPress Dashboard

TLTR - Riassumendo

OnePress: cambiare il Copyright nel footer

OnePress Plus Theme

Installare il Child Theme

Cambiare il Copyright

TLTR - Riassumendo

Gioco di Simon

Obiettivo

User Stories

CodePen

Gioco del Tris

Obiettivo

User Stories

CodePen

Pomodoro Timer

Obiettivo

User Stories

CodePen

Calcolatrice Javascript

Obiettivo

User Stories

CodePen

Twitchtv JSON API

Obiettivo

User Stories

CodePen

Visualizzatore Wikipedia

Obiettivo

User Stories

CodePen

Mostra il Meteo Locale

Obiettivo

User Stories

CodePen

OpenWeatherMap Proxy