• Pagina principala
  • Articole
  • General
  • Cum să configurați WordPress și AMP: Pagini mobile accelerate: Configurați Analytics, AdSense, Ghid pentru rețelele sociale atașat

Cum să configurați WordPress și AMP: Pagini mobile accelerate: Configurați Analytics, AdSense, Ghid pentru rețelele sociale atașat

Publicat: 2016-09-25
ghid de configurare-amp-și-wordpress-tot-în-unul

În ultimele zile, s-a făcut o mulțime de discuții despre Google AMP. Google a anunțat oficial suport pentru paginile AMP ca parte a paginii de căutare mobilă. Este chiar interesant. Până acum am evitat să implementez AMP pe Crunchify dintr-un motiv oarecare și nu am simțit niciodată vreo importanță.

Dar după ce m-am uitat la tweet-ul lui Barry, m-am hotărât AMPlify Crunchify.

Căutați sfaturi AMP și wordpress? Doriți să vă îmbunătățiți site-ul WordPress cu paginile mobile accelerate ale Google? Sau vrei să instalezi AMP în WordPress? În acest tutorial, vom trece peste pași despre cum să AMPlifică site-ul tău WordPress cu toți pașii detaliați.

Ce este un Accelerated Mobile Pages (AMP)?

Proiectul Accelerated Mobile Pages (AMP) este un proiect open source creat ținând cont de viteza, care creează conținut optimizat pentru mobil o singură dată și îl face să se încarce instantaneu peste tot. Nu se încarcă JavaScript deloc pe pagină. Există o încărcare CSS foarte minimă, cu restricții stricte. Una dintre observațiile am observat că nici măcar nu poți folosi !important în CSS.

Ai vreuna dintre întrebările de mai jos?

  • Google AMP: Ce este și este potrivit pentru site-ul dvs. WordPress
  • Cel mai bun mod de a configura WordPress pentru AMP
  • Cum să începeți cu paginile Google AMP și WordPress
  • Plugin wordpress pentru pagini mobile accelerate
  • Pagini de amplificare WordPress
  • Yoast amp glue și interogări wordpress

Să începem: activați AMP pentru postările dvs. din WordPress

Pasul 1

Instalați pluginul oficial AMP.

instalare-oficial-amp-plugin-crunchify-tips
  • Odată activat, ești gata. Nu veți vedea niciun meniu de opțiuni.
  • Trebuie să accesați meniul Settings -> Permalinks -uri. Faceți clic pe Save Changes fără a face nicio modificare.

Pluginul oficial AMP oferă funcționalități de bază și toate postările tale vor fi AMPlify automat. Puteți vizita versiunea AMPlified a postărilor dvs. adăugând /amp/ la sfârșitul oricărei adrese URL a postării.

Aruncă o privire la exemplu:

  • Adresa URL a postării Original : https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/
  • Adresa URL a postării AMPlify : https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/

Pasul 2

Instalați pluginul Glue pentru Yoast SEO și AMP. Versiunea de pornire 0.4 AMP WordPress version cred că nu aveți nevoie de niciun alt plugin legat de AMP.

Acum:

  • Accesați Appearance -> AMP .
  • Furnizați culoarea Header și a Background și faceți clic pe Save .
amp-wordpress-plugin-opțiune-personalizare

Pasul 3

Singura problemă pe care o văd cu acest plugin este că adaugă linkul Powered by WordPress în partea de jos a paginii. Pentru a o schimba, poate doriți să schimbați pagina footer.php cu codul de mai jos.

  • Accesați Plugins -> Editor
  • Selectați Plugin AMP
  • Selectați fișierul amp/templates/ footer.php
1
2
3
4
5
6
7
8
9
< footer class = "amp-wp-footer" >
< div >
< h2 > <?php echo esc_html ( $this - > get ( 'blog_name' ) ) ; ?> < / h2 >
< p >
Copyright < i class = "fa fa-copyright" aria - hidden = "true" > < / i > 2012 - 16 < a href = "https://crunchify.com" > Crunchify , LLC . < / a > &nbsp; • &nbsp; < a href = "https://crunchify.com/sitemap/" target = "_blank" > Archives < / a > &nbsp; • &nbsp; < a href = "https://crunchify.com/advertise/" target = "_blank" > Advertise < / a >
< / p >
< a href = "#top" class = "back-to-top" > <?php _e ( 'Back to top' , 'amp' ) ; ?> < / a >
< / div >
< / footer >

Modificați codul de linie pentru drepturi de autor conform nevoilor dvs

butoane-amp-footer-și-partajare-socială-crunchify

Pasul-4

Adăugați pictograme Analytics și Social Media în paginile dvs. AMP.

  1. Funcția crunchify_amp_add_analytics_social_ads_js va adăuga informațiile necesare și codul javascript al rețelelor sociale pe pagina dvs. amp.
  2. Funcția crunchify_amp_add_analytics_social_code va adăuga codul dvs. de analiză și pictogramele rețelelor sociale.
  3. Asigurați-vă că actualizați mai jos ID- Google Analytics Universal tracking ID Facebook App ID .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes Start ~~~~~~~~~~~~~~~~~~~
add_action ( 'amp_post_template_head' , 'crunchify_amp_add_analytics_social_ads_js' ) ;
function crunchify_amp_add_analytics_social_ads_js ( $ amp_template ) {
$ post_id = $ amp_template - > get ( 'post_id' ) ;
? >
<script async custom-element = "amp-analytics" src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js" > </script>
<script async custom-element = "amp-social-share" src = "https://cdn.ampproject.org/v0/amp-social-share-0.1.js" > </script>
<?php
}
add_action ( 'amp_post_template_footer' , 'crunchify_amp_add_analytics_social_code' ) ;
function crunchify_amp_add_analytics_social_code ( $amp_template ) {
     $post_id = $amp_template - > get ( 'post_id' ) ;
     ?>
< amp - analytics type = "googleanalytics" id = "analytics1" >
<script type = "application/json" >
{
   "vars" : {
"account" : "UA-43876549-1"      // Modify universal tracking ID
   } ,
   "triggers" : {
"trackPageview" : {
   "on" : "visible" ,
   "request" : "pageview"
}
   }
}
</script>
< / amp - analytics >
 
   // Social Media Code
   < div align = "center" >
     < amp - social - share type = "twitter"
         width = "30"
         height = "30" > < / amp - social - share >
     < amp - social - share type = "gplus"
         width = "30"
         height = "30" > < / amp - social - share >
     < amp - social - share type = "facebook"
         width = "30"
         height = "30"
         data - param - app_id = "509582389234904" > < / amp - social - share >    // Modify your App ID
   < / div >
     < ? php
}
// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes End ~~~~~~~~~~~~~~~~~~~

Pasul-5

Adăugați codul Google Adsense pe pagina dvs. AMP. În cazul meu, am vrut să adaug un cod Adsense de 300x250 sub imaginea prezentată. Nu există niciun cârlig oficial disponibil pentru utilizare, așa că am modificat fișierul single.php situat în <directorul pluginului AMP> amp/templates/single.php .

modify-amp-plugins-single-php-file
  • Accesați meniul Plugins
  • Faceți clic pe Editor
  • Alegeți pluginul AMP
  • Accesați fișierul single.php
  • Adăugați codul AdSense, așa cum se arată în fragmentul de cod de mai jos. Doar look for line featured-image și adăugați codul Adsense după aceea.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php $this - > load_parts ( array ( 'featured-image' ) ) ; ?>
 
// Adsense code START
< br > < div align = "center" >
< amp - ad width = 300 height = 250
type = "adsense"
data - ad - client = "ca-pub-xxxxxxxxxxxxxxxx"
data - ad - slot = "0110036438" >
< div placeholder > < / div >
< div fallback > < / div >
< / amp - ad >
< / div >
// Adsense code END
 
< div class = "amp-wp-article-content" >

Și ești gata. Pur și simplu curățați memoria cache a site-ului și verificați pagina AMP live. Veți vedea toate pictogramele Google Analytics, Adsense și Social Media funcționând corect

Acum ce?

Să verificăm și să verificăm pagina AMP pentru orice problemă. Accesați https://validator.ampproject.org/ și verificați rezultatul.

ampproject-validation-page-crunchify-tips

Cum merge Google să acceseze cu crawlere paginile AMP Post?

Acum aveți atât AMP and non-AMP versions paginilor dvs., pluginul AMP va adăuga automat metaeticheta de relație de mai jos la ambele pagini.

Verificați acest lucru pe pagina non-AMP

Ar trebui să vedeți referința la versiunea AMP a paginii pentru a informa Google și alte platforme despre aceasta:

<link rel="amphtml" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/">

rel-amphtml-html-tage-for-non-amp-page-crunchify-tips

Verificați acest lucru pe pagina AMP

Ar trebui să vedeți text pentru a face referire la versiunea canonică non-AMP:

<link rel="canonical" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/">

rel-canonic-html-meta-tag-in-amp-page-crunchify-tips

Acum, să așteptăm câteva zile sau cel puțin o săptămână și ar trebui să vedeți paginile AMPlify în Google Search Console. Pentru mine sunt doar 4 zile și văd aproape 500 de pagini deja indexate pentru rezultatul AMP

ghid de configurare pentru wordpress și amplificator prin statistici crunchify

Cum se verifică rezultatul live?

Doar căutați postarea în Google pe browserul mobil și ar trebui să vedeți AMP result în Pagina cu rezultatele căutării.

crunchifys-amp-result-in-google-mobile-search-page

De asemenea, continuați să vizitați această pagină sau marcați-le, deoarece voi continua să actualizez acest tutorial în timp, conform învățării mele. Blogging fericit și ajutați la accelerarea rețelei.