mintik

Bu aralar nedendir bilmiyorum bir türlü konuları anlatma kısmına başlayamıyorum. Aslında neyi nasıl anlatacağım işin basit kısmı yalnız Google emmi ve spam tehlikesini düşünmek konulara giriş yapmamı engelliyor çoğu zaman. Benzer içerikler yayınlarken bir konu yükselirken diğer konu da düşüşe geçer. Bu yüzden konulara giriş yapma kısmı ve devamı baya önemli seo açısından. Buda size birazcık seo dersi olsun 🙂

Evet şimdi  gelelim asıl konumuz  olan  animasyonlu, bootstrap ile  hazırlanmış menü örneğine. Tamamen Css kullanılanılarak yapılmış ve herhangi bir resim dosyası olmayan bir  tasarım örneğidir.. Her türlü  site için kullanılabilir  özelliğe  sahip ve  bu aralar  oldukça da popüler  olan çalışmalardan biridir. Ayrıca  Wordpress  için hazırlandığından dolayı kolaylıkla WordPress  temalarınızda kullanabilirsiniz.  Bilgisayarımda wamp ve xampp serverleri bozduğumdan localhost üzerinden denemesini yapamadım. Size yanlış bilgi vererek yönlendirmek de istemiyorum açıkçası. Dilimin döndüğünce  Wordpress sitenize  nasıl entegre edeceğinizi  anlatıcam yinede ama öncesinden şuradaki yazıda temaya özellik  ekleme konusundaki menü oluşturma kısmını  uygulamanızı  tavsiye ediyorum.  Kendi özel menünüzü  oluşturup çağırma kodunu anlatacağım şekilde  eklemeniz gerekiyor.

Menüyü WordPress’e entegre etme

Uyarı: Temanızın yedeğini almadan  sakın başlamayın.

Header.php dosyasında <header> </header> etiketleri arasına eklemeniz gereken bölümler.

Bootstrap  ile yapıldığından css adresini öncelikle eklemeniz gerekiyor.

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

Menümüzün  normalde kullanılması gereken kodları aşağıdaki gibidir. Bu şekilde  herhangi bir siteye bu html kodları ekleyerek kullanabilirsiniz.

        <nav role="navigation">
            <div class="top-header">
                <div class="navBurger">
                    <div class="burger"></div>
                </div>
            </div>

            <ul id="menu-vertical-menu" class="nav">
                <li><a href="https://www.mintik.com/category/wp-arsivi">Wordpress</a>
                </li>
                <li><a href="https://www.mintik.com/category/jquery-eklentileri">jQuery</a>
                </li>
                <li><a href="https://www.mintik.com/category/css-ornekleri">Css</a>
                </li>
                <li><a href="https://www.mintik.com/category/ders">Öğreticiler</a>
                </li>
                <li><a href="https://www.mintik.com/category/seo-makaleleri">Seo</a>
                </li>
                <li><a href="https://www.mintik.com/category/php-scriptler">Php Scriptler</a>
                </li>
                 <li><a href="https://www.mintik.com/category/adobe-photoshop-dersleri">Photoshop</a>
                </li>
                 <li><a href="https://www.mintik.com/kod-deneme">Araçlar</a>
                </li>
            </ul>
        </nav>

Bizim temamızda kullanacağımız ise  aşağıdaki gibidir.

        <nav role="navigation">
            <div class="top-header">
                <div class="navBurger">
                    <div class="burger"></div>
                </div>
            </div>

            <ul id="menu-vertical-menu" class="nav">
<!-- Buraya  oluşturduğunuz  menünün çağırma kodunu ekleyin. -->
            </ul>
        </nav>

Stil kodları:

Evet header etiketleri arasına ekleyeceğimiz bölümler  bu kadar, sıra  geldi Css kodlarına. Css kodlarını da temanın style.css  dosyasına  yada varsa  custom.css  dosyasına aşağıdaki kodları  ekleyin.