Mükemmel bir menü The Quest for ...
Bu öğretici Bölüm 1
Bu yazının 2. Bölüm yatay bir dikey menü + koyu renk paleti oluşturmak için nasıl öğretir
Almaya karar verdi Tez tema benim müşteri Tez ve benim arasındaki uyumluluk sorunları hakkında beni bilgilendirdi, çünkü wordpress üyelik site eklentisi MemberWing. Sabit ve ardından Tez yakından bakmak karar verdi ve gerçekten rahatsız ana Tez sitenin ön sayfasında videosu - Diythemes.com .
Beni etkileyen en ayrıntılara dikkat, kullanıcı dostu ve en önemlisi - SEO özellikleri çok iyi düşünce.
MemberWing üyelik eklentisi üyelik siteleri için mümkün olduğunca çok SEO suyu çekme gerekir yere kadar tasarlandı. Yani ben MemberWing SEO geliştirmeleri çokluğu ve mükemmellikler çok ilgi ödedi. Birçok benim kendi müşterilerinin kullanımı için farklı temalar hakkında soran ve derin iç SEO ile optimize edilmiş tema çok iyi oldu. Üyelik portal girişimciler için mükemmel bir uyum olacaktır.
SEO güçleri ve SEO güçleri ile MemberWing birleştiren Tez tema rütbeli fırsatları müşterilerine en iyi verecekti. Bu yüzden Tez var ve bir gün onunla oynadı.
Tüm yolları mükemmel bir tema. Navigasyon parçası olsa da, işlevi sınırlı bir parçasıdır. Tez itibaren 1.5 + sadece bir düzey menü. Benim her zamanki arzusu çok ihtiyaç duyduğu gibi navigasyon özelleştirmek için muktedir. Bazı siteler sadece birkaç sayfa var, diğerleri ton statik sayfalar + + makaleler / mesaj katrilyonlar bir çok kategori var.
Bu nedenle, ideal bir dünyada güzel görünümlü hiyerarşik olarak organize edilmiş kullanıcı dostu navigasyon menüsü oluşturmak için bir şans olan bir zorunluluktur. Yarasa kapalı Tez hakkı iyi görünümlü navigasyon var ama ben tüm Tez tabanlı web siteleri ikizler gibi olduğunu fark ettim. Pek çok insan olduğu gibi bırakmak, böylece Tez navigasyon menüsü özelleştirme gerçekten kolay değildir. Menüsünde kategorilerin sırasını değiştirmek ya da sayfaları arasında onları konumlandırmak için bir yol yoktur. Ve yine, iç içe geçmiş menü yapısını oluşturmak için yeteneği eksik. Bu yüzden bu konuda ne yapılabileceğini görmek için karar verdi.
Yarım düzine menü / navigasyon eklentileri hakkında denedikten sonra benim seçimim Wordpress Navigasyon Listesi Plugin NAVT .
NAVT eklentisi süper fantezi aslında liste jeneratör sırasız ve biraz zor untraditional yönetici arayüzü rakam. Ne hakkında yanıltıcı aslında kendisi tarafından fantezi görünümlü menüler oluşturabilirsiniz değildir. Ama işin zor kısmı - Sırasız Liste görsel bir araya getirmek ve üretmek için bir yetenek verir - iskelet menü-to-be. Ve çok menüler oluşturabilirsiniz. Wordpress şeyler her türlü navigasyon menüsü içine çekebilir sayfaları, mesaj, makaleler, kategori, kullanıcıları, kod blokları, dış bağlantılar, bölücüler, ayırıcılar ve karışımı ve maç ve yuva ve düzenlemek ve bunları özelleştirmek, herhangi bir ağaç gibi yapısı içinde istiyorum.
HTML Sırasız Liste sonuçlandı NAVT üretir. NAVT İkinci güzelliği onu ünlü JQuery tabanlı mantık ile ancak tema içine herhangi bir kod değiştirmeye gerek kalmadan yeni bir menü eklemek için yardımcı olmasıdır! : "Benim yeni NAVT menü ile bu # elemanını değiştirin" NAVT belirlemenize olanak tanır. # Eleman geçerli tema tarafından üretilen mevcut menü veya div öğesi etiketi yolun bir id veya sınıf olabilir. Yani NAVT tema koduna gitmek ve zaten daha fazla dağınık olun zorlamadan bu sizin için yerine. Eğer anlamsız gibi tüm sesleri merak etmeyin yakında adım adım rehberlik edeceğiz. Herkes için zorlu bir parçası NAVT menü kendiniz için gerçek CSS + görüntü + javascript kodu ile gelip gerekir. Ve nerede ve nasıl bu dosyaları entegre etmek ve bu malzeme düzgün bir şekilde birbirine bağlı yapmak anlamaya size kalmış.
Saygılarımızla JQuery bilmeden + bazı PHP + CSS + Wordpress ile iyi bir deneyime sahip - bu şey çekmek için zordur.
Mermi ve kılavuz insanlığın özgürlüğü, Wordpress için en iyi navigasyon menüleri iyi bina ısırmaya karar verdim seve seve ben bu şeyleri biraz biliyorum. Ben sadece bazı güzel görünümlü CSS yatay menüler için kaynak bulmak gerekiyordu. Ben aldım dinamik sürücü web sitesi en iyi seçimleri, demolar ve kaynaklar .
Tez çalışması ve NAVT eklentisi ile oynamak için bir gün adamıştır. Sonunda ben gururla özel, esnek, SEO için optimize edilmiş, benim Wordpress + Tez tabanlı bir site için çok seviyeli, iç içe geçmiş nagivation yapısı oluşturdu.
Çok seviyeli, iç içe geçmiş Wordpress navigasyon menüsü özellikleri Listesi Tez Tema
(Bu şeyler sevgi GOT):
- Profesyonel, temiz bir görünüm ve his.
- MSIE 6,7, Opera, Safari, Firefox 3.x, javascript hem Google Chrome ve non-javascript modları da dahil olmak üzere tüm modern tarayıcılar için destek.
- -Javascript olmayan tarayıcılar için nazikçe downgradable. Menü, kullanışlı, görsel olarak benzer ve Javascript'in devre dışı olduğu tarayıcılar için bile (gerçi sadece üst düzey gezinme görünür olacak ve javascript tarafından yapılan hiçbir kameralar ve açılır pencereler elbette olur) olacak.
- SEO dostu özellikler - sırasız liste menü kodu HTML içinde oluşturulur. Google ve diğer arama motoru örümcekleri dizine gezinti yapısını ve iç sayfalarına bağlantılar göreceksiniz.
- Destek sınırsız iç içe düzeyleri ve alt düzlemlere.
- Herhangi bir sipariş veya sayfaları ileti (kullanıcı tanımlı URI'leri yoluyla), kategori, kullanıcıları, özel kod blokları ve menü içinde dış bağlantılar için destek.
- Destek metin yanı sıra görüntü tabanlı menü öğeleri. (Ben bu olsa denemek için henüz).
- Menü yapısı ve içeriği NAVT admin alanı ile görsel olarak ayarlanabilir.
- Kompakt: iç içe düzeyleri için JQuery tabanlı kameralar ve açılır pencereler.
- Hızlı: menü JQuery Google sunucularına (Tez kendisini yerel çekerek yerine aynı şeyi isteriz) yüklenir. Bu işler biraz hızlandırmak.
- Ölçeklenebilirlik - Bu tür menü düzenlenebilir NAVT eklenti ayarları üzerinden herhangi bir zamanda ve her yerde kodlama ihtiyaç duymadan yapılandırılabilir.
Ben kullanılan dinamik bir sürüş Bu mükemmel bir menü bir üs olarak portal . Ben biraz yanı sıra Tez ile çalışmasını sağlamak için custom_functions.php PHP yığın özelleştirmek için javascript kodu vardı. Ayrıca önceden var olan sayfalar, kategoriler ve siteme gelen mesajlar menü yapısı oluşturmak için kullanılır. Sitenizin özellikleri farklı olacaktır, ama kavramlar aynı olacak.
Öyleyse devam edelim, olur mu?
Kurmak için adım adım yönergeler NAVT tabanlı çok düzeyli, özelleştirilebilir, iç içe, SEO dostu
ve Wordpress ve sadece düz seyir serin navigasyon menüsü Tez Tema
- Wordpress admin panelinden. Plugins-> Yeni ekle "navt" için arama. Eklentisi gösterilecektir. [Install], [Şimdi Yükle], "Plugin Etkinleştir".
- Araçlar-> NAVT listeler içinde "Gezinti Grubu" alan "grup adını" bulmak ve girin: alanında "menu1" tuşuna basın [Oluştur] düğmesine basın. "Menu1" dikdörtgen alan var.
Bu "menu1" alanında menü yapımı için temel oyun alanı olacaktır. Sürükleyerek ve burada menü öğeleri bırakarak olacak. - "Varlıklar" alan "diğer" liste ve "Ev" seçeneği üzerine tıklayın. "Ev" thingie "atanmamış" alan içinde görünecektir. Tuhaf, değil mi? Sürece çalışır gibi Endişeye gerek yok, ve bu bizim için.
- Bu "Ev" thingie "varlıklar" alanından "menu1" dikdörtgen alan içine sürükleyin. Bu menüde "Home" kalemi haline gelecektir.
- "Sayfalar" alanında bazı sayfaları için 3-4 adımları tekrarlayın yanı sıra, "kategorilerinde" alanında kategorileri için. "Menu1" dikdörtgen içinde menüsünden istediğiniz diğer öğeleri sürükleyin. Bu sayfalar, kategoriler, kullanıcılar ve "listesinde bölücü" ve "kod bloğu" gibi bazı özel öğeleri tıklayabilirsiniz. Kod bloğu menü içinde özel parçacıkları eklemek için serin bir yoludur.
- Kendi sırasını yeniden düzenlemek için menü öğeleri "menu1" alanı içine sürükleyebilirsiniz.
- "<" Ve ">" okları ile her bir menü öğesi hiyerarşik konumunu ayarlamak.
- Her bir menü öğesi metin adı üzerine tıklayarak, bu öğe için zihin boggling ekstra özelleştirme iletişim açılır. Ben daha çok zaman varsayılanlar kullanılır, ancak teknik olarak go crazy ve görüntü tabanlı menü seçenekleri yapmaya başlamak ve içine HTML kodu parçalarını ekleyin. Ancak dikkatli bir şekilde ilerleyin.
- Linkless unclikable alt menüler için "Kod blok" tipi kullanılan diğer "alt çocuklar" için "veli" olarak hizmet verecek. = "<a Href='#'> MemberWing </ a>" Örneğin: "Menü öğesi takma" = "MemberWing" ve "kod bloğu girin" gibi kod bloğu öğesi özelleştirme girdi. Olması href = "#" tıklanabilir ama geçerli bir "üst" menü seçeneği olarak hareket yapacaktır.
- Neredeyse benim NAVT 'menu1' inşa yapısı tamamlanmış gibi görünüyordu nasıl:
- Ilk bina Son'u ve sonra menü yapısı özelleştirmek için "vites" simgesine tıklayın:
- Seçenekler Ekran, CSS, Tema: 4 sekme ile iletişim açılacaktır.
- "Options" sekmesine gidin ve her şeyi kontrolsüz ve "grup adını" emin olun diyor: "menu1"
- Sekmesinde "Görüntü" ve "göster navigasyon grup ..." her şeyin alanı [x] kontrol edilir. Varsayılanları geri kalanı bırakın.
- "CSS" sekmesine gidin ve (x) "CSS sınıfları geçerli değildir" radyo düğmesini seçin.
- "Tema" sekmesine gidin ve bu gibi doldurun:
"Önce etiketler ekleyin ..." içine alan bu kodu ekleyin:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
"Ekle etiketleri sonra ..." yerleştirin alan bu kodu:
<br style='clear: left' /></div> - Basın [kaydetmek / kapatmak] düğmesine
- Bu noktada menü binasında NAVT eklenti seçenekleri içinde tamamlanır.
Şimdi bunun için küçük bir ayar yapmak için zamanı Tez tema hazır olsun. Bunun için bir kaç özel dosya eklemek gerekir - CSS ve JavaScript menü aittir ve güncelleme Tez 'custom_functions.php - Burada dosyaları komple set indirin .
- Arşiv unzip. Özelleştirmeleri custom_functions.php güncellenen varsa benim malzeme ile bunları birleştirmek gerekiyor. Ben size o kadar bırakacağız.
Bunu dokunulmaz varsa benim üzerine yazmak için çekinmeyin. Lütfen dikkat: web sitesi başlığı altında (varsayılan Yukarıda) menüsü konumunu tercih benim ayarı yanı sıra bu tercihi böylece. - Yükleme altındaki tüm alt dizinleri ve dosyaları da dahil olmak üzere arşiv Tez tema bu gibi 'özel' listesi:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Ben custom.css dokunulmaz değil menü belirli CSS custom.css iç karışıklık yaratmaktan kaçınmak için kendi konumları altında tutmayı tercih - Bu noktada, web sitenize yeniden ve yeni yeni güzel çok seviyeli, iç içe, SEO optimize bir menü görebilirsiniz.
- Her zaman, ayarlar NAVT ve daha fazla seçenek menüsünü özelleştirmek veya bir şey yeniden konumlandırmak için geri gidebilir. Canlı sitesinde otomatik olarak yansıtılacaktır.
Önümüzdeki yol ...
Bu öğretici menü bir tür yaratıcı bir örnek. Ben başka bir ile oynanan renkli menü gibi nasıl görüneceğini karanlık görmek için:
Tez tema - çok düzeyli iç içe CSS menü - koyu renkler
Ben oldukça güzel olduğunu düşünüyorum. Mevcut çok daha seyir örnekleri vardır Dynamic Drive - hepsi, biraz çaba ile Tez ve diğer Wordpress temaları özelleştirmek için mümkündür :
Dinamik Sürücü Yatay Menüler
Bu öğretici yararlı ve kullanışlı bulacağınızı umuyoruz. Dediğim gibi, bu menülerden herhangi birini Tez için özelleştirmek için - zaman ve ne yapmak isteği verilir.
Ben bir sözleşmeye dayalı olarak sizin için bu işi yapabilirdi. Sadece sizin gibi menü almak bana ulaşın ve web siteniz için kod ve talimatları çalışacağız.
20 $
Ve tabii ki süper SEO optimize premium wordpress üyelik portalı bina iseniz bunun için en iyi çözüm:
Tez Tema + MemberWing üyelik eklentisi + kendi kendine barındırılan Wordpress elbette.
