WordPress Temalarına Özel Gezinme Menüleri Nasıl Eklenir


WordPress temanıza özel gezinme menüleri eklemek ister misiniz? Gezinme menüleri, çoğu web sitesinin üstünde görüntülenen yatay bağlantı listesidir.

Varsayılan olarak, WordPress temaları önceden tanımlanmış menü konumları ve düzenleriyle birlikte gelir, ancak ya kendi özel gezinme menülerinizi eklemek isterseniz?

Bu makalede, WordPress'te nasıl kolayca özel gezinme menüleri oluşturacağınızı ve ekleyeceğinizi göstereceğiz, böylece bunları temanızda herhangi bir yerde görüntüleyebilirsiniz.

Adding custom navigation menus in WordPress themes

Bu WordPress Gezinme Menüsü eğitimine ne zaman ihtiyacınız var?

Çoğu WordPress teması, sitenizin gezinme bağlantılarını bir menüde görüntüleyebileceğiniz en az bir nokta ile birlikte gelir.

Menü öğelerini WordPress yönetici alanınızdaki kullanımı kolay bir arayüzden yönetebilirsiniz.

Web sitenize yalnızca gezinme menüleri eklemek istiyorsanız, WordPress'te gezinme menüsünün nasıl ekleneceğine ilişkin başlangıç ​​kılavuzumuzu izlemeniz yeterlidir.

Bu öğreticinin amacı, kendin yap / orta düzey kullanıcıların WordPress temalarına özel gezinme menüleri eklemelerine yardımcı olmaktır.

Bu yazıda aşağıdaki konuları ele alacağız:

  • WordPress temalarında özel bir gezinme menüsü oluşturma
  • WordPress temasında özel gezinme menüsü gösteriliyor
  • Sayfa oluşturucuyu kullanarak WordPress'e özel bir gezinme menüsü ekleme
  • WordPress'te mobil uyumlu duyarlı menüler oluşturma
  • WordPress gezinme menüleriyle yapabileceğiniz daha fazla şey

Bunu söyledikten sonra, temanıza özel WordPress gezinme menülerini nasıl ekleyeceğinize bir göz atalım.

WordPress Temalarında Özel Gezinme Menüleri Oluşturma

Gezinme menüleri, WordPress temalarının bir özelliğidir. Her tema kendi menü konumlarını ve menü desteğini tanımlayabilir.

Özel bir gezinme menüsü eklemek için yapmanız gereken ilk şey, bu kodu temanızın function.php dosyasına ekleyerek yeni gezinme menünüzü kaydetmek.

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Artık WordPress yöneticinizdeki Görünüm » Menüler sayfasına gidebilir ve yeni bir menü oluşturmayı veya düzenlemeyi deneyebilirsiniz. Tema konumu seçeneği olarak 'Özel Menüm'ü göreceksiniz.

Custom navigation menu added to the theme

Birden fazla yeni gezinme menüsü konumu eklemek istiyorsanız, aşağıdaki gibi bir kod kullanmanız gerekir:

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Menü konumunu ekledikten sonra, yeni başlayanlar için gezinme menülerinin nasıl ekleneceğine ilişkin eğiticimizi izleyerek WordPress yöneticisine bazı menü öğeleri ekleyin.

Bu, temanızdaki menüyü görüntüleyen bir sonraki adıma geçmemizi sağlayacaktır.

WordPress Temalarında Özel Gezinme Menülerini Görüntüleme

Ardından, WordPress temanızda yeni gezinme menüsünü görüntülememiz gerekiyor. Gezinme menülerinin genellikle yerleştirildiği en yaygın yer, bir web sitesinin başlık bölümünde, site başlığından veya logosundan hemen sonradır.

Ancak navigasyon menünüzü istediğiniz yere ekleyebilirsiniz.

Bu kodu, menünüzü görüntülemek istediğiniz temanızın şablon dosyasına eklemeniz gerekecek.

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

Tema konumu, bir önceki adımda seçtiğimiz isimdir.

Konteyner sınıfı, gezinme menünüze eklenecek CSS sınıfıdır. Menünüz, web sitenizde düz madde işaretli bir liste olarak görünecektir.

Custom displayed as plain list

Menülerinize stil vermek için CSS sınıfını .custom_menu_class kullanabilirsiniz. İşte başlamanıza yardımcı olacak örnek bir CSS:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline;
} 
div.custom-menu-class a { 
    color:#FFFFFF;
}

Custom menu styled

Gezinme menüsünün stili hakkında daha fazla bilgi edinmek için WordPress gezinme menülerinin nasıl şekillendirileceğine ilişkin ayrıntılı eğitimimize bakın.

Sayfa Oluşturucu Kullanarak WordPress'te Özel Gezinme Menüsü Ekleme

Özel bir açılış sayfası veya ana sayfa düzeni oluşturuyorsanız, bir WordPress sayfa oluşturucu eklentisi kullanmak her şeyi çok daha kolay hale getirecektir.

Piyasadaki en iyi WordPress sayfa oluşturucu olan Beaver Builder'ı kullanmanızı öneririz. Basit sürükle ve bırak araçlarını kullanarak (kodlama gerektirmez) her türlü sayfa düzenini oluşturmanıza olanak tanır.

Bu, sayfa düzeninize özel bir gezinme menüsü eklemeyi de içerir.

İlk olarak, Beaver Builder eklentisini kurmanız ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Aktivasyon üzerine, navigasyon menüsünü eklemek istediğiniz yerde yeni bir sayfa oluşturmanız veya mevcut bir sayfayı düzenlemeniz gerekir. Yayın düzenleyici ekranında, 'Beaver Builder'ı Başlat' düğmesine tıklayın.

Launch Beaver Builder

Yeni bir sayfaysa, Beaver Builder ile birlikte gelen hazır şablonlardan birini kullanabilirsiniz. Ayrıca, çıkan sayfanızı hemen düzenleyebilirsiniz.

Choose a template

Ardından, Menüler modülünü eklemeniz ve sayfanızda menüyü görüntülemek istediğiniz yere sürükleyip bırakmanız gerekir.

Add menu module to your page

Bu, bir açılır pencerede Menü modülü ayarlarını getirecektir. İlk olarak, kullanmak istediğiniz navigasyon menüsünü seçmeniz gerekir. WordPress yönetici alanındaki Görünüm » Menüler sayfasını ziyaret ederek her zaman yeni menüler oluşturabilir veya mevcut bir menüyü düzenleyebilirsiniz.

Menu module settings

Diğer ayarları da inceleyebilirsiniz. Beaver Builder, menünüz için özel renkler, arka plan ve diğer stil özelliklerini seçmenize olanak tanır.

İşiniz bittiğinde, Kaydet düğmesine tıklayabilir ve menünüzü önizleyebilirsiniz.

Preview of a custom navigation menu added with Beaver Builder

WordPress'te Mobil Dostu Duyarlı Menüler Oluşturma

Mobil cihazların kullanımının artmasıyla birlikte birçok popüler efektten birini ekleyerek menülerinizi mobil uyumlu hale getirmek isteyebilirsiniz.

Responsive menu example

Mobil menüler için kaydırma efekti (yukarıda), açılır efekt ve hatta geçiş efekti ekleyebilirsiniz.

Mobil uyumlu WordPress menülerinin nasıl oluşturulacağı konusunda adım adım ayrıntılı bir kılavuzumuz var.

WordPress Gezinme Menüleriyle Daha Fazlasını Yapın

Gezinme menüleri güçlü bir web tasarım aracıdır. Kullanıcıları web sitenizin en önemli bölümlerine yönlendirmenizi sağlar.

WordPress, menünüzde yalnızca bağlantıları görüntülemekten çok daha fazlasını yapmanıza olanak tanır. WordPress sitenizdeki gezinme menülerinin işlevselliğini genişletmek için bu faydalı öğreticileri deneyin.

  • WordPress'te gezinme menüleriyle görüntü simgeleri nasıl eklenir
  • WordPress'teki menülere koşullu mantık nasıl eklenir
  • WordPress temanıza menü açıklamaları nasıl eklenir?
  • WordPress'te tam ekrana duyarlı bir menü nasıl eklenir
  • WordPress sitenize mega menü nasıl eklenir

Hepsi bu kadar, umarız bu nihai kılavuz, WordPress'e nasıl gezinme menüsü ekleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca, en kullanışlı 25 WordPress widget listemizi ve olması gereken WordPress eklentileri listemizi de görmek isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook'ta da bulabilirsiniz.

Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.

Check Also

Divi's Theme Builder ile Özel Global Başlık Nasıl Oluşturulur

Artık Tema Oluşturucu burada olduğuna göre, web sitenizi A'dan Z'ye kurmanıza yardımcı olacak yeni eğitimlere dalmak için sabırsızlanıyoruz. Buna Divi'nin yerleşik seçeneğini kullanarak özel başlıklar oluşturma da dahildir. Bu eğitimde Divi's Theme Builder'ı kullanarak global bir başlık oluşturmaya odaklanacağız. Bu sayfaya veya gönderiye farklı bir başlık atamadıysanız, web sitenizin her yerinde genel bir başlık görünecektir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir