Tirer le meilleur parti de AMP pour WordPress

La localisation mobile sur votre site et son activation permettent en fait à Google d’utiliser la version AMP de votre page pour les aperçus de recherche et d’autres emplacements sur sa plateforme. De plus, de nombreux experts en référencement recommandent l’adoption d’AMP, car Google pourrait récompenser ceux qui le font en termes de positionnement.
J’ai récemment implémenté AMP sur mon site personnel et je veux partager mes premières impressions et une partie du Code que j’ai écrit pour le personnaliser. La configuration est aussi simple que l’installation de deux plug – ins, mais je veux personnaliser la barre supérieure et ajouter des menus et des liens de partage social dans la vue AMP. Pour obtenir AMP sur le site, vous devez installer le plug – in automatique AMP et si vous utilisez yoast WordPress SEO, vous devez également installer le plug – in AMP. Pour être honnête, vous avez peut – être fini. Lorsque vous ajoutez « \/ amp » à un lien permanent, Google découvre par magie la version AMP, car le plug – in ajoute la métabalise « amftml » au titre d’une page non amp avec une version amp disponible.
Comme je l’ai dit, je vais vous montrer quelques personnalisations que j’ai faites. Avant cela, il est important de noter que le trafic mobile n’est pas automatiquement dirigé vers la version AMP de votre message. Si vous voulez que cela se produise, vous devez ajouter une règle de réécriture au fichier. Htaccess. Le plug – in CSS Custom amp fournit suffisamment de css pour rendre les messages attrayants avec une mise en page minimale. C’est – à – dire que la barre supérieure du post utilise le bleu foncé sur WordPress. Format générique de nom de domaine. Mon site personnel utilise des thèmes en noir et blanc, pas beaucoup de couleurs, donc je veux que la barre supérieure utilise le noir comme couleur de fond.
En plus d’ajouter des CSS personnalisés, j’ai ajouté des règles pour trier les listes parce que je savais que je créerais des listes pour les menus et le partage social. Pour ajouter CSS, j’ai utilisé le filtre \
\
? >
Navigation. Amp WP title Block {background: # 000;}
UL. JP amp List
Styles de liste: aucun;
Affichage: inline;
}
UL. JP amp List li {
Affichage: inline;
Marge: 0 8px;
}
<?php
}); Modificare il modello Aggiunta di un'immagine in primo piano Sebbene il plug-in AMP ti consenta di utilizzare modelli personalizzati, non ho seguito questa strada perché volevo solo aggiungere alcune cose al modello. Tutte e tre le cose che ho aggiunto – immagine in primo piano, menu e collegamenti social – sono state eseguite utilizzando il filtro standard "the_content", ma poiché volevo solo che venissero eseguite su pagine AMP, ho aggiunto questi filtri solo quando veniva utilizzato AMP. Per ottenere ciò, ho inserito questi filtri in una funzione collegata all'azione "pre_amp_render_post".

La prima cosa che voglio fare è aggiungere l'immagine in primo piano. L'unica cosa importante da notare su AMP è che un tag immagine standard non funzionerà. Invece, devi usare il loro tag immagine speciale. Il plug-in AMP trasformerà automaticamente l'immagine in primo piano nel markup corretto per te. Ecco come ho aggiunto l'immagine in primo piano: add_action( 'pre_amp_render_post', function() {
add_filter( 'the_content', function( $contenuto ){
if ( has_post_thumbnail() ) {
$image = sprintf( '

% Art.

‘, Get _ post miniature ();
$content = $image $ Contenu
}
Renvoie $content;
}, 3);
}); Notez que j’ai utilisé une très faible priorité sur le crochet et mis l’image dans le premier plan, avant le contenu préexistant, ce qui assure que l’image du premier plan est en haut du post. J’ai utilisé l’approche complètement opposée pour ajouter des menus et des liens de partage social au bas du post.
Ajouter un menu téléchargement rapide et une vue mobile minimale d’un billet est bon, mais sans barre latérale ou menu, je crains que les visiteurs ne parcourent pas le reste du site. Cela m’a permis d’ajouter un menu personnalisé au bas de la page. Voici un exemple de code pour générer un menu amp spécial que j’a i créé. Le Code est très standard et ne mérite pas d’être vérifié. La seule chose à noter est que j’ai utilisé amp _ get Permalink () au lieu de get Permalink (). Cela fournira, dans la mesure du possible, un lien spécial vers le SAP, par exemple lorsque le lien pointe vers un type de poste qui supporte le SAP, qui par défaut est seulement un poste ou un type de poste par défaut.
Add _ action (‘pre amp render post’, Function () {
Ajouter un filtre (‘The _ content’, Function ($content) {
$menu name = ‘amp’;
$menu = WP _ get NAV menu Object ($Menu Name);
Si (! Empty ($menu)
$menu _ items = WP get NAV menu items ($menu – > term ID);
$menu _ list = sprintf (‘

Menu: ‘, ESC _ ATTR (‘ amp JP menu – ‘. $Menu Name);
Foreach ($menu item as $key
Ou ajoutez le support Google Analytics, ou ajoutez mes pixels de suivi Twitter et Facebook, mais ils sont pris en charge: Assurez – vous que la documentation de référence est analysée et ajoutez des pixels de suivi. De plus, gardez à l’esprit que le plug – in ne s’applique pas aux types de messages personnalisés prêts à l’emploi, mais vous pouvez facilement ajouter du soutien. Cependant, soyez prudent, plus les AMP sont utilisées, plus il est probable qu’elles rencontrent leurs limites. Par exemple, j’aimerais ajouter le support AMP à mon site de cours d’api rest, mais il n’y a actuellement aucun moyen de le rendre facile à télécharger numériquement. Étant donné la mise en page personnalisée que j’utilise sur ce site, un modèle de SAP personnalisé est nécessaire pour qu’il fonctionne correctement. Toutefois, les avantages de la disponibilité des appareils mobiles sont vastes et peuvent donc valoir le temps d’investir.