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.

“WordPress AMP Sayfalara Açılır Yan Menü Eklemek” üzerine 5 yorum

  1. 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
  2. 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

Yorum yapın