wmaraci reklam
lidertakipci

Wordpress Menüye İcon Ekleme

8 Mesajlar 9.459 Okunma
advertseo
wmaraci reklam

ufukt ufukt Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 19.12.2012
  • Yaş/Cinsiyet 33 / E
  • Meslek Lojistik Operasyon Elemanı
  • Konum İstanbul Avrupa
  • Ad Soyad ** **
  • Mesajlar 270
  • Beğeniler 143 / 45
  • Ticaret 1, (%100)
Merhaba arkadaşlar daha önce çeşitli eklentilerle uğraştığım ama eklentileri kullanmaktan vazgeçtiğim bir olay. Wordpress'de menüye icon eklemek istiyorum. Nasıl yapabilirim sizce ?
 

 

wmaraci
reklam

mrshn mrshn Felix Themes (technoesh) Kullanıcı
  • Üyelik 21.07.2011
  • Yaş/Cinsiyet 32 / E
  • Meslek Öğretmen
  • Konum Konya
  • Ad Soyad E** Ş**
  • Mesajlar 1011
  • Beğeniler 46 / 146
  • Ticaret 14, (%100)
http://www.wpexplorer.com/adding-images-wordpress-menu/

Burada bir anlatım mevcut.
Dilerseniz ben size kısaca Türkçeleştireyim.

1) Güzel ikonlar indirin.
2) Menüler bölümünden ekran tercihlerine girerek css sınıflarını etkinleştirin.
3) İkon eklemek istediğiniz menüye css kodunuzu ekleyin.
Örneğin: anasayfa linki için 'home-link-icon' kodunu ekleyin, hakkımızda için hakkimizda-link-icon
4) Style.css dosyamıza kodlarımızı ekliyoruz.

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

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


Not: 1. basamakta indirdiğiniz resimlerin tema dosyaları içindeki images klasörüne kopyalandığından emin olunuz.

Umarım anlatabilmişimdir. İyi çalışmalar dilerim.
 

 

ufukt ufukt Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 19.12.2012
  • Yaş/Cinsiyet 33 / E
  • Meslek Lojistik Operasyon Elemanı
  • Konum İstanbul Avrupa
  • Ad Soyad ** **
  • Mesajlar 270
  • Beğeniler 143 / 45
  • Ticaret 1, (%100)

technoesh adlı üyeden alıntı

http://www.wpexplorer.com/adding-images-wordpress-menu/

Burada bir anlatım mevcut.
Dilerseniz ben size kısaca Türkçeleştireyim.

1) Güzel ikonlar indirin.
2) Menüler bölümünden ekran tercihlerine girerek css sınıflarını etkinleştirin.
3) İkon eklemek istediğiniz menüye css kodunuzu ekleyin.
Örneğin: anasayfa linki için 'home-link-icon' kodunu ekleyin, hakkımızda için hakkimizda-link-icon
4) Style.css dosyamıza kodlarımızı ekliyoruz.

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

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


Not: 1. basamakta indirdiğiniz resimlerin tema dosyaları içindeki images klasörüne kopyalandığından emin olunuz.

Umarım anlatabilmişimdir. İyi çalışmalar dilerim.


Anlatım çok sade ve gerçekten çok başarılı. Hatasız bir şekilde ilk seferde tamamladım.
Bkz: http://ufuktuten.com/blog/
 

 

SunucuBilgim SunucuBilgim Web Master Kullanıcı
  • Üyelik 21.04.2013
  • Yaş/Cinsiyet 34 / E
  • Meslek Web Master
  • Konum İstanbul Anadolu
  • Ad Soyad M** K**
  • Mesajlar 372
  • Beğeniler 78 / 71
  • Ticaret 5, (%100)
Böyle bir anlatıma benimde ihtiyacım vardı teşekkürler, aynısını bende kendi blog sitemde uygulayacağım tekrar teşekkürler hocam
 

 

www.sanalkarga.com - Bilgi Paylaştıkça Çoğalır...
wmaraci
wmaraci

mrshn mrshn Felix Themes (technoesh) Kullanıcı
  • Üyelik 21.07.2011
  • Yaş/Cinsiyet 32 / E
  • Meslek Öğretmen
  • Konum Konya
  • Ad Soyad E** Ş**
  • Mesajlar 1011
  • Beğeniler 46 / 146
  • Ticaret 14, (%100)
Yararlı olabildiysem ne mutlu bana. :)
ufukt

kişi bu mesajı beğendi.

ufukt ufukt Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 19.12.2012
  • Yaş/Cinsiyet 33 / E
  • Meslek Lojistik Operasyon Elemanı
  • Konum İstanbul Avrupa
  • Ad Soyad ** **
  • Mesajlar 270
  • Beğeniler 143 / 45
  • Ticaret 1, (%100)
Bi tek üzerine gelince resimlerin kaybolması sıkıntılı.
 

 

mrshn mrshn Felix Themes (technoesh) Kullanıcı
  • Üyelik 21.07.2011
  • Yaş/Cinsiyet 32 / E
  • Meslek Öğretmen
  • Konum Konya
  • Ad Soyad E** Ş**
  • Mesajlar 1011
  • Beğeniler 46 / 146
  • Ticaret 14, (%100)
.islamiyet-link-icon a:hover {
background-image: url("images/islamiyet.png") !important;
background-position: left center !important;
background-repeat: no-repeat !important;
background-color: #dbdbdb !important;
height: 46px !important;
}


Bu şekilde düzgün çalışıyor ancak resimler beyaz olduğu için hover arkaplan rengini değiştirmek zorunda kaldım.

1) İsterseniz ikinci ikon (üstüne gelince çıkan ikon) rengini değiştirebilir ve "images/islamiyet.png" yerine mesela "images/islamiyet-mavi.png" koyabilirsiniz. Ve background-color: #dbdbdb !important; satırını silebilirsiniz. Böylece üstüne gelince (hover) ikinci ikon mavi olan gözükecektir.

2) İsterseniz ikonların rengini ne mavi ne de beyaz yaparsınız aynı resim ikisinde de gözükür.

3) İsterseniz menü böyle kalır istediğiniz hover rengini background-color: #dbdbdb !important; satırındaki #dbdbdb koduyla belirleyebilirsiniz.

İyi çalışmalar dilerim...
 

 

MuhammedEKSi MuhammedEKSi Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 29.12.2012
  • Yaş/Cinsiyet 27 / E
  • Meslek Öğrenci
  • Konum İstanbul Avrupa
  • Ad Soyad ** **
  • Mesajlar 168
  • Beğeniler 110 / 18
  • Ticaret 1, (%100)
Merhaba.

Ben bu işi yapamadım. Css ekleme yeri yok menülerde
 

 

wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al