WordPress Menü Öğelerine İlk ve Son CSS Sınıfı Nasıl Eklenir

Hiç benzersiz bir şekilde stil verilmiş ilk ve son menü öğelerine sahip web siteleri fark ettiniz mi? Bu tesadüf değil – bu akıllı CSS'nin işi. Bu teknik, iletişim sayfanız veya özel bir teklif gibi önemli bağlantıları vurgulayabilir.

Okuyucularımızın birçoğu özel sınıfları menü öğelerine eklemeyi denedi, ancak menülerini yeniden düzenlediklerinde stilin bozulduğunu fark ettiler. 'İlk' ve 'son' olarak etiketlenen öğeler artık o konumlarda değil, menünün tutarsız görünmesine neden oluyor.

İşte bu nedenle bu kılavuz, menü öğelerinizi daha sonra karıştırsanız bile menü öğelerinize yapışacak bir .first ve .last sınıfı eklemeyi gösterecektir. İki yöntemi ele alacağız: klasik temalar için bir filtre ve blok temalar dahil tüm temalar için CSS seçiciler.

İlk ve Son Gezinme Öğelerini Neden Farklı Şekilde Stilize Etmeli?

Bazen, bir navigasyon menüsündeki ilk ve son öğelere özel stil eklemeniz gerekebilir. Bu, sitenizin iletişim formu veya WooCommerce sepet sayfası gibi önemli bağlantılarını öne çıkarabilir.

Bu durumda, ilk ve son menü öğelerine özel bir CSS sınıfı ekleyebilirsiniz. Ancak, menünün sırasını herhangi bir noktada değiştirirseniz, bu özel stilin tamamen bozulmasına neden olabilir.

Bu nedenle, bunun yerine filtreleri kullanmanızı öneririz.

Bu kılavuzda, gezinme menünüzün ilk ve son öğelerini nasıl stilize edeceğinizi göstereceğiz, böylece özel stili bozmadan menüyü yeniden düzenleyebilirsiniz. Kullanmak istediğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanın:

• Yöntem 1: Filtre Kullanarak İlk ve Son Sınıf Ekleme (Önerilen)
• Yöntem 2: CSS Seçiciler Kullanarak İlk ve Son Öğeleri Stilize Etme (Tüm Temalarla Çalışır)

Yöntem 1: Filtre Kullanarak İlk ve Son Sınıf Ekleme (Önerilen)

Not: Bu yöntem yalnızca klasik bir WordPress teması ile çalışır. Eğer bir blok teması kullanıyorsanız, Yöntem 2'ye gidin.

Gezinme menüsü öğelerinizi stilize etmenin en kolay yolu, temanıza bir filtre eklemektir.

Genellikle WordPress eğitimlerinde, kod parçacıklarını temanızın functions.php dosyasına ekleme talimatlarıyla bulursunuz.

En büyük sorun, özel kod parçacığındaki küçük bir hatanın bile WordPress sitenizi bozabilmesi ve erişilemez hale getirebilmesidir. WordPress temanızı güncellerseniz, tüm özelleştirmelerinizi kaybedeceğinizden bahsetmiyorum bile.

İşte tam da bu noktada WPCode devreye giriyor.

Bu ücretsiz eklenti, sitenizi riske atmadan WordPress'e özel CSS, PHP, HTML ve daha fazlasını eklemeyi kolaylaştırır.

Yapmanız gereken ilk şey, ücretsiz WPCode eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için, WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra Kod Parçacıkları » Parçacık Ekle'ye gidin.

Burada, fare imlecini ‘Özel Kodunuzu Ekleyin’ üzerine getirin.

Göründüğünde, ‘Alıntıyı kullan’ seçeneğine tıklayın.

Başlamak için özel kod parçacığına bir başlık yazın. Bu, parçacığı WordPress kontrol panelinde tanımlamanıza yardımcı olacak herhangi bir şey olabilir.

Bundan sonra, 'Kod Türü' açılır menüsünü açın ve 'PHP Kod Parçacığı'nı seçin.

Ardından kod kutusuna aşağıdaki PHP'yi ekleyebilirsiniz:

function wpb_first_and_last_menu_class($items) {
    $items[1]->classes[] = 'first';
    $items[count($items)]->classes[] = 'last';
    return $items;
}
add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');

Bundan sonra, ekranın üstüne kaymaya ve 'Etkin Değil' geçişini tıklayarak 'Etkin' olarak değişmesini sağlamaya hazırsınız.

Son olarak, PHP kod parçasını canlı hale getirmek için ‘Snippet Kaydet’e tıklayın.

Bu, ilk ve son menü öğeleriniz için .first ve .last CSS sınıfları oluşturur. Artık bu sınıfları özel gezinme menünüzdeki bu öğelere benzersiz stil uygulamak için kullanabilirsiniz.

Bunu yapmak için WordPress web sitenize ikinci bir kod parçacığı eklemeniz gerekecek. Başlamak için, yukarıda açıklanan aynı işlemi izleyerek yeni bir özel kod parçacığı oluşturun.

Bundan sonra, özel kod parçacığı için bir başlık yazın.

Ardından, ‘Kod Türü’ açılır menüsünü açın, ancak bu sefer ‘CSS Parçacığı’nı seçin.

Bu rehber için, kod kutusuna aşağıdaki CSS biçimlendirmesini ekleyerek ilk ve son menü öğelerini basitçe kalınlaştıracağız:

.first a {font-weight: bold;}

.last a {font-weight: bold;}

Bu işlem tamamlandıktan sonra, ‘Etkin’ olarak değişmesi için ‘Etkin Değil’ geçişine tıklayın.

Son olarak, CSS parçasını canlı hale getirmek için ‘Parçayı Kaydet’e tıklayın.

Şimdi web sitenizi ziyaret ettiğinizde, yeni stil verilmiş menüyü canlı olarak göreceksiniz.

Yöntem 2: CSS Seçiciler Kullanarak İlk ve Son Öğeleri Stilize Etme (Tüm Temalarla Çalışır)

Kod parçacığı eklentisi kullanmak istemiyorsanız, ilk ve son menü öğelerini CSS seçiciler kullanarak stilleyebilirsiniz. Ancak, bu yöntem Internet Explorer gibi bazı eski tarayıcılarda çalışmayabilir.

Bunu akılda tutarak, WordPress web sitenizi farklı tarayıcılarda test etmek iyi bir fikirdir.

Bu yöntemi izlemek için temanızın stil sayfasına veya WordPress Tema Özelleştirici'nin 'Ek CSS' bölümüne kod eklemeniz gerekecektir.

Daha önce bunu yapmadıysanız, WordPress sitenize özel CSS ekleme kılavuzumuza bakın.

İlk adım, temanızın style.css dosyasını düzenlemek veya Görünüm » Özelleştir bölümüne gidip ‘Ek CSS’ seçeneğine tıklamaktır.

Bundan sonra, sitenize aşağıdaki kod parçasını ekleyin:

ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }

'yourmenuid' kısmını kendi menünüzün kimliği ile değiştirmeniz gerekeceğini unutmayın.

Seçicilerin ‘ilk-çocuk’ ve ‘son-çocuk’ öğeleri, bunların üst öğesinin ilk ve son çocuğunu, yani navigasyon menüsündeki ilk ve son öğeleri seçer.

Örneğin, WordPress blogumuzda ilk ve son gezinme menüsü öğelerini kalın yapmak için bu kodu kullandık: WordPress blogumuzda

ul#primary-menu-list > li:first-child a {
    font-weight: bold;
}
ul#primary-menu-list > li:last-child a {
    font-weight: bold;
}

Bir WordPress blok teması kullanıyorsanız, Tema Özelleştirici WordPress yönetici alanınızda eksik olacaktır. Tema Özelleştiriciye erişmek için tarayıcınıza bu URL'yi girmeniz gerekir:

https://yourdomainname.com/wp-admin/customize.php

Alan adını web sitenizin alan adıyla değiştirdiğinizden emin olun.

Bundan sonra, daha önce olduğu gibi 'Ek CSS' sekmesini açın ve aşağıdaki kodu ekleyin. Menü kimliğinizi eklemeniz gerekmediği için kodun biraz farklı göründüğüne dikkat edin.

li:first-child a,
li:last-child a {
    background-color: black;
    border: none;
    color: white !important; /* Ensures the color white is prioritized */
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
}

İhtiyaçlarınıza göre kodu özgürce özelleştirebilirsiniz. Aşağıdaki örnekte, ilk ve son bağlantıları düğmelere dönüştürdük.

Görünüşü şöyledir:

Bu eğitimde, WordPress gezinme menülerine .first ve .last sınıflarını nasıl ekleyeceğinizi öğrendiğinizi umuyoruz. Ayrıca WordPress'te dikey bir gezinme menüsü oluşturma ve WordPress sitesinde açılır menü oluşturma hakkındaki başlangıç kılavuzumuza da bakmak isteyebilirsiniz.

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