WordPress

WordPress Menüye Resim Ekleme

25 Mayıs 2013

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

Sevgiler.
Bir önceki yazımız olan Code Beautifier İle CSS Kodlarınızı Düzenleyin başlıklı makalemizi de okumanızı öneririz.

Merhaba! Ben Burak. 2016 yılında Karadeniz Teknik Üniversitesi Harita Mühendisliği Bölümü’nden mezun oldum. Lise yıllarında HTML & CSS‘e, Üniversite yıllarında WordPress ve Matlab‘e adım attım. Lisans tezimi Matlab üzerinden program yazarak teslim ettim. Çeşitli projeler için WordPress tabanlı yazılımlar geliştirdim.

Benzer İçerikler

wordpress eklentisiz iletişim sayfası yapımı

WordPress Eklentisiz iletişim Sayfası Yapımı

22 Ocak 2013

WordPress’de Kategoriye Özel Simge Koyma

7 Haziran 2013

WordPress Yazar Profil Adresini Değiştirme

13 Ocak 2014

28 Yorum

  • Serhat

    2 Temmuz 2014 at 13:53

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

    Cevapla

      • serhat

        2 Temmuz 2014 at 19:30

        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.

        Cevapla

        • Burak ŞAHİN

          6 Temmuz 2014 at 01:39

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

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

          • serhat

            27 Temmuz 2014 at 00:12

            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.

  • Sesli

    6 Haziran 2014 at 11:03

    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. 🙂

    Cevapla

  • Ahmet Selim

    14 Şubat 2014 at 01:20

    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.

    Cevapla

  • Arfienel

    28 Mayıs 2013 at 13:44

    Gerçekten çok başarılı bir anlatım olmuş. Anlatımı görsel ögelerle desteklemeniz, işi daha da kolaylaştırmış. Elinize sağlık.

    Cevapla

    • Burak SAHİN

      28 Mayıs 2013 at 11:02

      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;
}
      Cevapla

  • Burak İşci

    27 Mayıs 2013 at 16:03

    Öğ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.

    Cevapla

    • Burak SAHİN

      27 Mayıs 2013 at 16:31

      Yazılı anlatım kadar görsel anlatımda önemli hatta görsellik daha önemli akılda daha kalıcı olur ve hata yaptığında dönüp bakar tekrar. Güzel fikir (Y)

      Cevapla

Bir cevap yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.