• Anasayfa
  • Nesne
  • Genel
  • WordPress ve AMP Nasıl Kurulur: Hızlandırılmış Mobil Sayfalar: Kurulum Analizi, AdSense, Sosyal Medya Kılavuzu Ekli

WordPress ve AMP Nasıl Kurulur: Hızlandırılmış Mobil Sayfalar: Kurulum Analizi, AdSense, Sosyal Medya Kılavuzu Ekli

Yayınlanan: 2016-09-25
kurulum-amp-ve-wordpress-hepsi bir arada-kılavuzu

Son günlerde Google AMP hakkında çok fazla vızıltı vardı. Google, Mobil Arama sayfasının bir parçası olarak AMP sayfaları desteğini resmi olarak duyurdu. Bu gerçekten ilginç. Şimdiye kadar bir nedenden dolayı AMP'yi Crunchify'a uygulamaktan kaçındım ve bunun önemini hiç hissetmedim.

Ama Barry'nin tweetine baktıktan sonra AMPlify Crunchify'a da karar verdim.

AMP ve wordpress ipuçları mı arıyorsunuz? Google'ın Hızlandırılmış Mobil Sayfaları ile WordPress Sitenizi AMP'lemek ister misiniz? Yoksa WordPress'e AMP kurmak mı istiyorsunuz? Bu eğitimde, tüm ayrıntılı adımlarla WordPress sitenizi nasıl AMPlify yapacağınıza ilişkin adımların üzerinden geçeceğiz.

Hızlandırılmış Mobil Sayfalar (AMP) nedir?

Accelerated Mobile Pages (AMP) Projesi, mobil cihazlar için optimize edilmiş içeriği bir kez oluşturan ve her yerde anında yüklenmesini sağlayan, hız göz önünde bulundurularak oluşturulmuş açık kaynaklı bir projedir. Sayfada hiç JavaScript yüklemesi yok. Sıkı kısıtlamalarla çok az CSS yüklemesi vardır. Fark ettiğim gözlemlerden biri, CSS'de !important kullanamadığınızı bile.

Aşağıdaki sorulardan herhangi biri var mı?

  • Google AMP: WordPress Web Siteniz için Nedir ve Doğru mu?
  • AMP için WordPress'i kurmanın en iyi yolu
  • Google AMP sayfaları ve WordPress ile nasıl başlanır?
  • Hızlandırılmış mobil sayfalar wordpress eklentisi.
  • WordPress amfi sayfaları
  • Yoast amp yapıştırıcı ve wordpress sorguları

Haydi başlayalım: WordPress Gönderileriniz için AMP'yi etkinleştirin

Aşama 1

Resmi AMP eklentisini yükleyin.

install-official-amp-plugin-crunchify-ipuçları
  • Etkinleştirildiğinde, hazırsınız. Herhangi bir seçenek menüsü görmeyeceksiniz.
  • Settings -> Permalinks menüsüne gitmeniz gerekiyor. Herhangi bir değişiklik yapmadan Save Changes tıklayın.

Resmi AMP Eklentisi, temel işlevsellik sağlar ve tüm gönderileriniz otomatik olarak AMPlify olur. Herhangi bir Gönderi URL'sinin sonuna /amp/ ekleyerek gönderilerinizin AMPlified sürümünü ziyaret edebilirsiniz.

Örneğe bir göz atın:

  • Original Gönderi URL'si: https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/
  • AMPlify Gönderi URL'si: https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/

Adım 2

Yoast SEO ve AMP eklentisi için Glue yükleyin. 0.4 AMP WordPress version başlayarak, AMP ile ilgili başka bir eklentiye ihtiyacınız olmadığına inanıyorum.

Şimdi:

  • Appearance -> AMP gidin.
  • Header ve Background rengini sağlayın ve Save .
amp-wordpress-eklenti-özelleştirme seçeneği

Aşama 3

Bu eklentiyle ilgili gördüğüm tek sorun, sayfanın altına Powered by WordPress bağlantısı eklemesi. Bunu değiştirmek için footer.php sayfasını aşağıdaki kodla değiştirmek isteyebilirsiniz.

  • Plugins -> Editor gidin
  • Eklenti AMP seçin
  • amp/templates/ footer.php dosyasını seçin
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 >

Telif hakkı satır kodunu ihtiyacınıza göre değiştirin

crunchify-amp-footer-ve-sosyal-paylaşım-düğmeleri

4. Adım

AMP sayfalarınıza Analytics ve Social Media simgeleri ekleyin.

  1. crunchify_amp_add_analytics_social_ads_js işlevi, gerekli analizleri ve sosyal medya javascript kodunu amp sayfanıza ekleyecektir.
  2. crunchify_amp_add_analytics_social_code işlevi, gerçek analitik kodunuzu ve sosyal medya simgelerinizi ekleyecektir.
  3. Aşağıda Google Analytics Universal tracking ID ve Facebook App ID güncellediğinizden emin olun.
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 ~~~~~~~~~~~~~~~~~~~

Adım 5

AMP sayfanıza Google Adsense Kodu ekleyin. Benim durumumda, öne çıkan resmin altına 300x250 Adsense kodunu eklemek istedim. Kullanılabilecek resmi bir kanca yok, bu yüzden <AMP Plugin directory>/ amp/templates/single.php bulunan single.php dosyasını değiştirdim.

modifiye-amp-eklentileri-tek-php-dosyası
  • Plugins Menüsüne Git
  • Editor tıklayın
  • AMP Eklentisini Seçin
  • single.php dosyasına gidin
  • Adsense kodunu aşağıdaki kod parçasında gösterildiği gibi ekleyin. Sadece look for line featured-image ve bundan sonra Adsense kodunu ekleyin.
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" >

Ve hepiniz hazırsınız. Sadece site önbelleğinizi temizleyin ve canlı AMP sayfasına bakın. Tüm Google Analytics, Adsense ve Sosyal Medya simgelerinin düzgün çalıştığını göreceksiniz.

Şimdi ne olacak?

AMP sayfanızı doğrulayıp herhangi bir sorun olup olmadığını kontrol edelim. https://validator.ampproject.org/ adresine gidin ve sonucu kontrol edin.

ampproject-validation-page-crunchify-ipuçları

Google, AMP Gönderi sayfalarını nasıl tarayacak?

Artık sayfalarınızın hem AMP and non-AMP versions sahipsiniz, AMP Eklentisi aşağıdaki ilişki meta etiketini her iki sayfanıza da otomatik olarak ekleyecektir.

Bunu AMP olmayan sayfada kontrol edin

Google ve diğer platformların bu konuda bilgi sahibi olması için sayfanın AMP sürümünün referansını görmelisiniz:

<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-amp-page-crunchify-ipuçları

AMP sayfasında bunu kontrol edin

AMP olmayan standart sürümüne atıfta bulunmak için metni görmelisiniz:

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

rel-canonical-html-meta-tag-in-amp-page-crunchify-ipuçları

Şimdi birkaç gün veya en az bir hafta bekleyelim ve Google Search Console'da AMPlify sayfalarını görmelisiniz. Benim için sadece 4 gün ve AMP sonucu için zaten dizine eklenmiş neredeyse 500 sayfa görüyorum

wordpress-ve-amp-kurulum-kılavuzu-crunchify-istatistikleri

Canlı sonuç nasıl kontrol edilir?

Sadece mobil tarayıcıda Google'da gönderi arayın ve Arama Sonucu Sayfasında AMP result görmelisiniz.

crunchifys-amp-sonuç-in-google-mobil-arama sayfası

Ayrıca, öğrendiklerime göre zaman içinde bu öğreticiyi güncellemeye devam edeceğim için bu sayfayı ziyaret etmeye veya yer imlerine eklemeye devam edin. Mutlu bloglama ve ağı hızlandırmaya yardımcı olun.