334-7156315 info@cinaliano.it
Traduzione e interpretariato cinese e italiano

Personalizzare AMP su WordPress

Creare e cancellare file da WP

Le specifiche AMP applicate a WordPress hanno trovato numerosi sviluppatori pronti a proporre plugin per le più svariate personalizzazioni, anche perché il plugin ufficiale di Automattic non lascia quasi alcuno spazio alle modifiche (coerentemente con l’idea di fondo, quella di semplificare e alleggerire al massimo la pagina).

Uno dei limiti più evidenti della versione AMP di WordPress è la scomparsa del menu, dei sidebar e la comparsa dell’icona avatar accanto al nome dell’autore dell’articolo: in questo blog si è deciso di provvedere autonomamente per correggere il primo e il terzo di questi punti.

Per aggiungere il menu si è optato per un menu del tutto statico inserito nel footer, sostituendo e integrando nel file amp/templates/footer.php questo codice:

<footer class="amp-wp-footer">
	<div>
		<h2><a href="<?php echo esc_url( $this->get( 'home_url' ) ); ?>"><?php echo esc_html( $this->get( 'blog_name' ) ); ?></a></h2>
<p><a href="http://www.cinaliano.it/">Home</a></p>
<p><a href="http://www.cinaliano.it/interprete_cinese_traduzioni_servizi.html">Servizi</a></p>
<p><a href="http://www.cinaliano.it/interprete_cinese_traduzioni_collaborazioni.html">Chi sono</a></p>
<p><a href="http://www.cinaliano.it/interprete_cinese_traduzioni_mappa.html">Dove sono</a></p>
<p><a href="http://www.cinaliano.it/interprete_cinese_traduzioni_contatti.php">Contatti</a></p>
<p><a href="http://www.cinaliano.com/">中文版</a></p>
<p><a href="http://www.cinaliano.net/">Cinaliano?</a></p>
		<a href="#top" class="back-to-top"><?php _e( 'Back to top', 'amp' ); ?></a>
	</div>
</footer>

Allo stesso tempo si è deciso di personalizzare leggermente anche l’header aggiungendo la tagline. Per fare questo si è modificato il file amp/templates/header-bar.php e inserendovi direttamente la tagline appena prima del tag

</a>

.

Il codice completo è:

<header id="#top" class="amp-wp-header">
	<div>
		<a href="<?php echo esc_url( $this->get( 'home_url' ) ); ?>">
			<?php $site_icon_url = $this->get( 'site_icon_url' );
				if ( $site_icon_url ) : ?>
				<amp-img src="<?php echo esc_url( $site_icon_url ); ?>" width="32" height="32" class="amp-wp-site-icon"></amp-img>
			<?php endif; ?>
			<?php echo esc_html( $this->get( 'blog_name' ) ); ?>
		 - Traduzione e interpretariato cinese e italiano </a>
</br>
☎ <a href="tel:+393347156315">(+39) 334-7156315</a> - ✉ info@cinaliano.it
	</div>
</header>

Un’altra modifica riguarda il fatto che nelle pagine AMP accanto all’autore dell’articolo si trova l’icona dell’avatar, e che questa, in mancanza di account Gravatar è del tutto arbitraria e slegata rispetto all’identità del sito.

Non volendo aprire un ulteriore account né far ricorso a plugin, ma preferendo gestire in proprio l’avatar, bisogna creare un’icona PNG di tipo avatar (per esempio 160×160), caricarla via FTP nella cartella del tema utilizzato (o in una sua sottocartella), e aggiungere il seguente codice al file functions.php del tema utilizzato. Con il tema Firmness il file modificato direttamente da editor è firmness-functions.php che si trova all’interno della sottocartella functions. Il codice da inserire alla fine di quello preesistente è:

/* Custom Default Avatar Start */
add_filter( 'avatar_defaults', 'newCustomGravatar' );
function newCustomGravatar ($avatar_defaults) {
    $myavatar = get_bloginfo('template_directory') . 'INDIRIZZO_IMMAGINE.png';
    $avatar_defaults[$myavatar] = "NOME AVATAR";
    return $avatar_defaults;
}
/* Custom Default Avatar End */

La limitazione è che questo codice l’avatar è la medesima per i diversi autori del sito, un problema da valutare nei siti con numerosi autori o collaboratori.

Una volta caricata l’icona all’interno della cartella del tema, ed abilitata la funzione per l’utilizzo della propria icona, bisogna attivarla dal menu sinistro: Impostazioni -> Discussione -> Visualizzazione Avatar e poi nell’elenco “Avatar predefinito”.

Se poi la funzione di Google “Strumento di test per i dati strutturati” dovesse dare l’errore relativo al logo, bisogna inserire sempre nel fine functions.php il seguente codice:

add_filter( 'amp_post_template_data', 'xyz_amp_set_site_icon_url' );

function xyz_amp_set_site_icon_url( $data ) {
    // Ideally a 32x32 image
    $data[ 'site_icon_url' ] = get_stylesheet_directory_uri() . '/images/logo.png';
    return $data;
}

add_filter( 'amp_post_template_metadata', 'amp_modify_json_metadata', 10, 2 ); // Adding custom metadata
function amp_modify_json_metadata( $metadata, $post ) {

   if( 'post'=== $post->post_type  ){

    $metadata['@type'] = 'Article';

   $metadata['publisher']['name'] = ' Zhu Sha - Cinaliano ';

    $metadata['publisher']['logo'] = array(
        '@type' => 'ImageObject',
        'url' => get_stylesheet_directory_uri().'/images/logo.png',
        'height' => 50,
        'width' => 50,
    );

   return $metadata; 

  } 
}

Naturalmente il nome del Publisher, la URL (all’interno della cartella del tema attivo) e le dimensioni del logo devono essere adattate alle proprie esigenze.