• Skip to primary navigation
  • Skip to main content

Kerem SARI

Sadelik, karmaşık düşünceleri süsler.

  • ツ Bu Bloğu Takip Et
  • Webmaster
    • WM Genel
    • Genesis
    • Digitalocean
    • WordPress
  • Kişisel
  • Diğer
    • Film
    • Farklı Konular
    • Kitap
  • Araçlar
    • Arşiv
    • Son Yorumlar
    • Kelime Sayacı
  • İletişim
Buradasınız: Ana Sayfa / Wordpress / Wordpress AMP Sayfalara Açılır Yan Menü Eklemek

WordPress AMP Sayfalara Açılır Yan Menü Eklemek

Yazar: Kerem SARI - 24 Eylül 20175 Yorum

Oldukça basit ve kısa bir işlemle bütün AMP sayfalarımıza AMP kurallarına uygun, testlerde hata almayan bir yapıyla açılır yan menü ekleyeceğiz. Sadece WordPress AMP eklentisi ile AMP sayfalar oluşturan siteler için gerekli bir işlemdir çünkü eklentinin AMP sayfaları farklı konulara veya ana sayfaya yönlendiren belirgin bir bağlantısı ve menüsü yok.

Bu işlemi daha önceki AMP konularımda kullandığımız single.php sayfası ile yapacağız. Detaylar için Navigating your site sayfasını ziyaret edebilirisiniz.

AMP Açılır Yan Menü Ekleme

Eklentiler > WordPress AMP DÜZENLE > Sağ tarafta bulunan amp/templates/html-start.php sayfasını açın.

Bul:

</head>

Üstüne ekle:

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

amp/templates/single.php dosyasın Bul:

</header>

Altına Ekle:

<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰</div>
<div class="site-name">Açılır Yan Menü</div>
</header>
<amp-sidebar id="sidebar1" layout="nodisplay" side="left">
<div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">✕</div>
<ul class="sidebar">
<li><a href="#">Sayfa 1</a></li>
<li><a href="#">Sayfa 2</a></li>
<li><a href="#">Sayfa 3</a></li>
</ul>
</amp-sidebar>

Bu şekilde AMP sayfalarımıza açılır yan menü eklemiş olduk. Gayet kullanışlı bir tasarıma sahip olacaktır. Yinede bu tasarımı değiştirmek isterseniz yukarıda verdiğim kodlamanın üstüne aşağıdaki CSS stillerini yapıştırabilirsiniz. Açılır yan menünün sağında solunda ufak boşluklar oluşacaktır. Daha şık bir görüntü kazandırmak için CSS de değişiklikler yapabilirsiniz.

<style rel="stylesheet" type="text/css">
.hamburger {
padding-left: 10px; }

.sidebar {
 padding: 10px; margin: 0; }

.sidebar > li {
 list-style: none; margin-bottom:10px; }

.sidebar a {
 text-decoration: none; }

.close-sidebar {
 font-size: 1.5em; padding-left: 5px; }
 </style>

AMP açılır yan menü için farklı yollar olsa da bu en sağlıklısıdır. CSS bilginiz varsa zaten diğer yan menü uygulamalarına ihtiyac duymayacaksınız.

Yazar Kerem SARI

Çalışıyor, geziyor, okuyor, öğreniyor ama en çok; içerik odaklı SEO çalışmalarıyla ilgileniyor. Beni Takip Edin!

Size para kazanabileceğiniz profesyonel blog sitesi açalım mı?
com uzantılı alan adınıza beraber karar verelim. En gelişmiş sunucularda en iyi yazılımları kullanalım ve tam anlamıyla kusursuz ayarlamalarla mükemmel bir site oluşturalım. Uygun fiyatlara, bir haftada teslim. Detaylara bakmayı unutmayın.
Mail: info@keremsari.com Whatsapp: 0532 744 2058 - Detaylar

Reader Interactions

Bu konuya 5 yorum yapılmış.

  1. Sema yazdı

    26 Ağustos 2018

    Merhaba, nasılsınız?

    Yazıdaki açıklamaları takip ettim ama AMP Testi hata veriyor bu durumda. Acaba güncelleme var mı?

    Ayrıca salt CSS ile yapma şansım var mı? Teşekkürler.

    Cevapla
    • Kerem SARI yazdı

      26 Ağustos 2018

      Farklı bir hata olabilir. Site adresinizi info@keremsari.com mail adresime gönderin kontrol edeyim.

      Cevapla
    • Kerem SARI yazdı

      26 Ağustos 2018

      Sema Hanım pardon, eklentiye son gelen güncellemeden sonra dosya yapıları değişmişti. Konuyu revize ederek güncel haline uygulanabilir şekle getirdim.

      Cevapla
  2. Sema yazdı

    27 Ağustos 2018

    Merhaba hocam, verdiğiniz bilgiler için çok teşekkür ederim. Ne var ki yönergeleri takip ettiğim halde yine sorun oluyor. Yan menü açılıyor, işlem tamam; fakat AMP Testi sorunlu çıkıyor. Dilerseniz kendi sitenizde uygulayın, hata verdiğini göreceksiniz.

    Emeğinize sağlık, takipteyim efendim.

    Cevapla
    • Kerem SARI yazdı

      27 Ağustos 2018

      Deneyeceğim Sema Hanım, hata hatayı da bulup düzeltirim.

      Cevapla

Bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak.

© 2014–2019 keremsari.com

  • Gizlilik Politikası
  • Kullanım Koşulları