İnsanların en hayırlısı, insanlara faydalı olanıdır. (hadis-i şerif)

Kerem’in Kişisel Blogu
≡ Menu

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/single.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>

Bul:

</head>

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.



Sizde katılın!
E-posta adresinizi giriniz: Onay e-postası gönderilecektir. Gizliliğiniz Google FeedBurner ile güvence altında.

Yazar: Ç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 konularda bir fikre hayat vermek üzere olan denemeler var.

{ 0 yorum yapıldı… add one }

Bana yazın

#Mail adresiniz geçerli ise yorumunuz onaylandığında ve yorumunuza cevap verildiğinde mail yoluyla bilgilendirilirsiniz.

#Gönder butonuna tıkladığınız an yorumunuzun bana ulaşır. Onay beklediğine dair bilgilendirme mesajında geçici bir hata var.