WordPress Amp Kurulumu Detaylı (Reklam Ekleme, Google Analytics)

AMP, Hızlandırılmış Mobil Sayfalar’ı (Accelerated Mobile Pages) ifade eder. AMP özellikle mobil cihazlarda hafif ve hızlı bir şekilde yüklenebilen web sayfaları oluşturmanın en iyi yöntemidir. Google Webmaster bölümünde Hızlandırılmış Mobil Sayfalar bölümünde dizine eklenen sayfalarınızı görebilirsiniz.

Hızlı ve akıcı bir bağlantı sağlayıp, ziyaretçileri yormayan site hitinizde bariz yükselme sağlayan bir özellik olarak karşımıza çıkmaktadır. Bu yazımızda sizlere WordPress Amp Kurulumunu detaylı olarak anlatmaya çalışacağım. Bunu kodlarla uğraşmadan wordpress automattic tarafından geliştirilen WordPress AMP eklentisi ile yapacağız.

WordPress Amp Kurulumu Detaylı (Reklam Ekleme, Google Analytics) Anlatım

  • Yukarıda yer alan WordPress AMP eklentisini sitenize kurup, etkinleştiriniz.
  • AMP eklentisini etkinleştirdikten sonra küçük çaplı tasarım ayarlarını  Wordperss Admin paneli Görünüm AMP ekranından yapabilirsiniz.

WordPress Amp Adsense Reklam Ekleme Anlatımı

  • WordPress Admin Panelinden Eklentiler bölümünden AMP eklentinizi bulun ve Düzenle bölümüne tıklayınız.
  • Açılan sayfadan Eklenti Dosyaları bölümünden amp/templates/single.php dosyasını açınız.
  • </head> etiketini bulun ve hemen üstüne; <script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js”></script> kodunu yapıştırın.
  • Sayfanın En Üstüne Reklam Eklemek İçin;
  • <div class=”amp-wp-article-content”> kodunu bulun ve hemen altına;
  • <amp-ad height=100
    type=”adsense”
    data-ad-client=”ca-pub-7972872227504077“
    data-ad-slot=”3934325143“>
    </amp-ad> kodunu yapıştırın. Burada dikkat etmeniz gereken nokta data-ad-client ve data-ad-slot alanında tıknak içinde kodları kendi adsense reklam biriminize ait kod ile değiştirmek.
  • Sayfanın En Altına Reklam Eklemek İçin;
  • <?php echo $this->get( ‘post_amp_content’ ); // amphtml content; no kses ?> kodunu bulun ve hemen altına;
  • <amp-ad height=250 width=300
    type=”adsense”
    data-ad-client=”ca-pub-7972872227504077“
    data-ad-slot=”3934325143“>
    </amp-ad> kodunu yapıştırın. data-ad-client ve data-ad-slot alanında tıknak içinde kodları kendi adsense reklam biriminize ait kod ile değiştirmeyi unutmayınız.
  • İlgili eklentiyi etkinleştirdikten belirli bir zaman sonra Google Webmaster sayfanıza girin, sitenizi seçin sonra Arama Görünümü, Hızlandırılmış Mobil Sayfalar kısmında google tarafından index alan amp sayfalarınız görünmeye başlanacaktır.

 

WordPress Amp Google Analytics Kodunu Ekleme

  • WordPress Amp sayfanızın istatistiklerini incelemek için Google Analytics kodunu yukarıda yer alan açıklamaya göre aynı şekilde;
  • Eklenti Dosyaları bölümünden amp/templates/single.php dosyasını açıp, <body class=”<?php echo esc_attr( $this->get( ‘body_class’ ) ); ?>”> kodunu bulun ve hemen altına;
  • <amp-analytics type=”googleanalytics”> <script type=”application/json”> { “vars”: { “account”: “UA-xxxxx-x” }, “triggers”: { “trackPageview”: { “on”: “visible”, “request”: “pageview” } } } </script> </amp-analytics> kodu ekleyiniz.
  • Yukarıdaki kod içinde yer alan “UA-xxxxx-x“ kısmını kendi Google Analytics JS izleme kodunuz ile değiştiriniz.  İşlem bu kadar.