WordPress

WordPress Menüye Resim Ekleme

Bu yazı 3 ay veya daha önce yayınlanmış olduğundan görülen linklerde, resimlerde veya kodlarda hata olabilir. Herhangi bir hata ile karşılaşırsanız bana buradan bildirebilirsiniz. Anlayışınız için teşekkür eder, keyifli okumalar dilerim.

1. Adım:  Resim Seçme

Merhaba arkadaşlar, makalemin ilk adımında sitemize eklemek üzere menüye uygun güzel resim/ikon/simge seçelim. Ben Google’da küçük bir arama yaptım isterseniz sizde aşağıdaki butonu kullanarak o aramadan devam edebilirsiniz.

Google Araması

2. Adım: WordPress Menüde CSS Sınıflarını Aktif Etme

  1. WordPress sitemizde siteadı.com/wp-admin yaparak admin paneline giriyoruz.
  2. Sol taraftaki menüden Görünüm > Menüler işlemlerini yaparak Menüler sayfasını açıyoruz.
  3. Sağ üst köşedeki Ekran Tercihleri ‘ne tıklayarak Ekran Tercihleri bölümünü açıyoruz.
  4. Gelişmiş menü özelliklerini göster başlığı altındaki CSS Sınıfları ‘nı aktif ediyoruz.

CSS Sınıfları

3. Adım: Menüye Still Vermeansayfa menu

  1. Still vereceğimiz menünün ismine tıklayarak açıyoruz.
  2. Karşımıza şunlar geliyor; URL, Dolaşım etiketi, Başlık özelliği, CSS sınıfları (seçime bağlı)
  3. CSS sınıfları (seçime bağlı) ‘nın ait olduğu inputa vermek istediğimiz CSS ismini yazıyoruz. Ör: Ben Anasayfa menüsünü ele alayım, buna anasayfa-simge ismini vereceğim.

4. Adım: Menümüz İçin CSS Ayarları

Kendi çalışmam üzerinden devam edeceğim anlatmaya. Aşağıda verdiğim CSS kodu kendi menüme aittir. Sizde kendinize göre düzenleyebilirsiniz.

.anasayfa-simge a{
padding-left: 30px !important;
background-image: url(images/home.png);
background-position: left;
background-repeat: no-repeat;
}

Sonuç:anasayfa-simge-son

27 comments
  1. Serhat

    WordPress default 23 temasında olmuyor. Kodları css dosyasına ekledim. Resim adı vs doğru ama neden çıkmıyor olabilir ?

      1. serhat

        farklı farklı işlemleri denemek amacıyla kurduğum bir alt sitedir. Asıl site bu değildir.

        İconu anasayfa ve iletişim sayfalarına ekledim ama olmadı.
        Teşekkürler.

        1. Burak ŞAHİN

          Aşağıdaki gibi yaptığınız zaman simge çıkıyor.

          li.anasayfa-simge a {
          padding-left: 30px !important;
          background-image: url(http://www.siteadi.com/deneme/anasayfa.png);
          background-position: left;
          background-repeat: no-repeat;
          }
          1. serhat

            Merhabalar rica etsem şu iletişim sayfasında bulunan mavi duyuru pencere kısmının duyuru alanının css ve kodlarını paylaşır mısın? Yapmaya çalıştık ama İ ikonunu bir türlü çıkartamadık.

  2. Sesli

    Hocam vallahi çok teşekkür ederim. Sohbet tadında anlattığınız konu ile istediğim menüyü oluşturdum. Kolay gelsin, sizi takipteyim. 🙂

  3. Ahmet Selim

    Peki bu menülerdeki CSS sınıflarına Onmouseover eventi tanımlayabilir miyiz?
    Mesela menümüzde tanımladığımız “ozelmenu” CSS sınıfında üzerine gelince bir div açtırsak. Menüden ayrı bir katman.

    1. Burak SAHİN

      Anasayfa, Hakkımızda ve İletişim Sayfası için örnek vericek olursak;
      anasayfa-simge, hakkimizda-simge ve iletisim-simge css isimlerini atayalım daha sonra style.css’de aşağıdaki kodları yazarak yapabilirsiniz.

      .anasayfa-simge a{
      padding-left: 30px !important;
      background-image: url(images/anasayfa.png);
      background-position: left;
      background-repeat: no-repeat;
      }
      .hakkimizda-simge a{
      padding-left: 30px !important;
      background-image: url(images/hakkimda.png);
      background-position: left;
      background-repeat: no-repeat;
      }
      .iletisim-simge a{
      padding-left: 30px !important;
      background-image: url(images/iletisim.png);
      background-position: left;
      background-repeat: no-repeat;
      }
      
  4. Burak İşci

    Öğrendiğim çok iyi oldu, artık divler ile menü yapmak yerine temaları kullananları bu şekilde menü oluşturmaları yönünde yönlendireceğim. Çok güzel anlatmışsın abi, bende konu hakkında bir video ders hazırlayabilirim.

Bir Cevap Yazın

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

PREMIUM WORDPRESS TEMALARI
wordpress emlak teması
wordpress rent a car teması v2
%d blogcu bunu beğendi: