• Strona główna
  • Artykuły
  • Ogólny
  • Jak skonfigurować WordPress i AMP: Przyspieszone strony mobilne: Konfiguracja Analytics, AdSense, w załączeniu przewodnik po mediach społecznościowych

Jak skonfigurować WordPress i AMP: Przyspieszone strony mobilne: Konfiguracja Analytics, AdSense, w załączeniu przewodnik po mediach społecznościowych

Opublikowany: 2016-09-25
konfiguracja-amp-and-wordpress-wszystko w jednym przewodniku

W ostatnich dniach wokół Google AMP było dużo szumu. Google oficjalnie ogłosiło obsługę stron AMP w ramach strony Mobile Search. To jest naprawdę interesujące. Do tej pory z jakiegoś powodu unikałem implementacji AMP na Crunchify i nigdy nie czułem, że ma to jakiekolwiek znaczenie.

Ale po obejrzeniu tweeta Barry'ego zdecydowałem, że AMPlify Crunchify też.

Szukasz wskazówek dotyczących AMP i wordpress? Czy chcesz wzmocnić swoją witrynę WordPress za pomocą przyspieszonych stron mobilnych Google? A może chcesz zainstalować AMP w WordPressie? W tym samouczku omówimy kroki, jak AMplify swoją witrynę WordPress ze wszystkimi szczegółowymi krokami.

Co to są przyspieszone strony mobilne (AMP)?

Projekt Accelerated Mobile Pages (AMP) to projekt typu open source stworzony z myślą o szybkości, który raz tworzy treści zoptymalizowane pod kątem urządzeń mobilnych i natychmiast ładuje się wszędzie. Na stronie w ogóle nie ładuje się JavaScript. Wczytywanie CSS jest bardzo minimalne z rygorystycznymi ograniczeniami. Zauważyłem jedną z obserwacji, że nie możesz nawet użyć !important w CSS.

Masz któreś z poniższych pytań?

  • Google AMP: co to jest i czy jest odpowiednie dla Twojej witryny WordPress
  • Najlepszy sposób na konfigurację WordPressa dla AMP
  • Jak zacząć od stron Google AMP i WordPress
  • Przyspieszona wtyczka Wordpress stron mobilnych
  • Strony wzmacniaczy WordPress
  • Zapytania dotyczące kleju Yoast i wordpress

Zacznijmy: Włącz AMP dla swoich postów WordPress

Krok 1

Zainstaluj oficjalną wtyczkę AMP.

zainstaluj-oficjalne-wtyczki-wzmacniacza-porady-crunchify
  • Po aktywacji wszystko gotowe. Nie zobaczysz żadnego menu opcji.
  • Musisz przejść do menu Settings -> Permalinks . Kliknij Save Changes bez wprowadzania zmian.

Oficjalna wtyczka AMP zapewnia podstawową funkcjonalność, a wszystkie Twoje posty będą automatycznie AMPlify. Możesz odwiedzić wersję AMPlified swoich postów, dodając /amp/ na końcu dowolnego adresu URL posta.

Spójrz na przykład:

  • Original adres URL posta: https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/
  • AMPlify Post URL: https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/

Krok 2

Zainstaluj wtyczkę Glue for Yoast SEO & AMP. Począwszy od wersji 0.4 AMP WordPress version wierzę, że nie potrzebujesz żadnej innej wtyczki związanej z AMP.

Ale już:

  • Przejdź do Appearance -> AMP .
  • Podaj kolor Header i Background i kliknij Save .
amp-wordpress-plugin-opcja-dostosowania

Krok 3

Jedynym problemem, jaki widzę w tej wtyczce, jest dodanie linku Powered by WordPress na dole strony. Aby to zmienić możesz zmienić stronę footer.php z poniższym kodem.

  • Przejdź do Plugins -> Editor
  • Wybierz wtyczkę AMP
  • Wybierz plik 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 >

Zmodyfikuj kod linii praw autorskich zgodnie z potrzebami

crunchify-amp-footer-and-social-sharing-buttons

Krok 4

Dodaj ikony Analytics i Social Media do swoich stron AMP.

  1. Funkcja crunchify_amp_add_analytics_social_ads_js doda wymagane dane analityczne i kod javascript w mediach społecznościowych do Twojej strony amp.
  2. Funkcja crunchify_amp_add_analytics_social_code doda Twój kod analityczny i ikony mediów społecznościowych.
  3. Upewnij się, że zaktualizowałeś poniżej swój 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 ~~~~~~~~~~~~~~~~~~~

Krok-5

Dodaj kod Google Adsense do swojej strony AMP. W moim przypadku chciałem dodać kod Adsense 300x250 pod polecanym obrazem. Nie ma żadnego oficjalnego hooka do użycia, więc zmodyfikowałem plik single.php znajdujący się w <katalogu wtyczek AMP> amp/templates/single.php .

modyfikuj-amp-plugins-pojedynczy-plik-php
  • Przejdź do menu Plugins
  • Kliknij Editor
  • Wybierz wtyczkę AMP
  • Przejdź do pliku single.php
  • Dodaj kod AdSense, jak pokazano na poniższym fragmencie kodu. Po prostu look for line featured-image , a następnie dodaj kod Adsense.
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 wszystko gotowe. Po prostu wyczyść pamięć podręczną witryny i sprawdź stronę AMP na żywo. Zobaczysz, że wszystkie ikony Google Analytics, Adsense i Social Media działają poprawnie

Co teraz?

Zweryfikujmy i sprawdźmy Twoją stronę AMP pod kątem jakiegokolwiek problemu. Wejdź na https://validator.ampproject.org/ i sprawdź wynik.

ampproject-validation-page-crunchify-tips

W jaki sposób Google indeksuje strony AMP Post?

Teraz masz obie AMP and non-AMP versions , wtyczka AMP automatycznie doda poniższy metatag relacji do obu stron.

Sprawdź to na stronie innej niż AMP

Powinieneś zobaczyć odniesienie do wersji AMP strony, aby poinformować o tym Google i inne platformy:

<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

Sprawdź to na stronie AMP

Powinieneś zobaczyć tekst odwołujący się do jego wersji kanonicznej innej niż AMP:

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

rel-canonical-html-metatag-in-amp-page-crunchify-tips

Teraz poczekajmy kilka dni lub przynajmniej tydzień i powinieneś zobaczyć strony AMPlify w Google Search Console. Dla mnie to tylko 4 dni i widzę prawie 500 stron już zindeksowanych pod kątem wyników AMP

wordpress-and-amp-setup-guide-by-crunchify-stats

Jak sprawdzić wynik na żywo?

Po prostu wyszukaj post w Google w przeglądarce mobilnej, a powinieneś zobaczyć AMP result na stronie wyników wyszukiwania.

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

Odwiedzaj również tę stronę lub dodaj zakładki, ponieważ będę aktualizować ten samouczek z biegiem czasu, zgodnie z moją nauką. Miłego blogowania i pomóż przyspieszyć działanie sieci.