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.