≡ Menu

Kerem Sarı

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

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 Hakkında: Çalışıyor, geziyor, okuyor, öğreniyor ama en çok; içerik odaklı seo çalışmalarıyla ilgileniyor! Bu yüzdendir ki; bu blogda bu konuların ne işi var demeyin! O konular bir fikre hayat veriyor.


{ 5 Yorum… add one }
  • Sema

    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.

    • Kerem SARI

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

    • Kerem SARI

      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.

  • Sema

    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.

    • Kerem SARI

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

Bir yorum yazın