बहुस्तरीय ऊर्ध्वाधर Wordpress के लिए पदानुक्रमित नेस्टेड मेनू

Wordpress बहुस्तर, नेस्टेड, एसईओ दोस्ताना नेविगेशन मेनू जोड़ना - भाग 2

July 10, 2009 पर gesman द्वारा

सही कार्यक्षेत्र मेनू के लिए खोज ...

इस ट्यूटोरियल के भाग 1 क्षैतिज के लिये बहुस्तरीय नेस्टेड मेनू के निर्माण के कदम प्रक्रिया द्वारा कदम का वर्णन Wordpress थीसिस विषय. भाग 2 पर जारी रखने के लिए इस कार्यक्षमता में वृद्धि होगी. यहाँ हम क्षैतिज नेविगेशन मेनू के "अंधेरे" संस्करण जोड़ सकते हैं और मैं तुम्हें सिखाने कैसे "उज्ज्वल" और "अंधेरे" संस्करण के बीच स्विच करने के लिए होगा. भाग 2 के भाग 1 के superset है. यह भाग 1 से सभी शामिल हैं + अधिक शांत सामान कहते हैं.

मुख्य विचार है कि मैं पेश करना चाहता था ऊर्ध्वाधर थीसिस विषय (और सामान्य में Wordpress के लिए ). मैं वास्तव में लचीला, एसईओ दोस्ताना और बहु ​​ब्राउज़र संगत ऊर्ध्वाधर मेनू कि असीमित घोंसले के शिकार के स्तर बनाने के लिए अनुमति होगी के लिए देख रहा था.

वेब इस विषय पर पृष्ठों की टन है, लेकिन जब मैं इन सभी नमूनों की कोशिश शुरू कर दिया - वे या तो टूट गया, के अलावा गिर, समर्थित स्तरों के केवल सीमित संख्या या गेट्स + बाल्मर 6 junksplorer में दुर्व्यवहार किया. अंत में मैं कोशिश की और विश्वसनीय वापस मिल गतिशील ड्राइव मेनू के रूप में उनके ऊर्ध्वाधर नमूने के लिए एक अच्छा मामला है कि मेरे कठोर आवश्यकताओं फिट बैठता है साबित. मैं काफी उन्हें संशोधित हालांकि यकीन है कि यह थीसिस मॉडल फिट बैठता है बनाने के लिए किया था.
पूर्णता के लिए खोज जारी है ...

मैं खोज, कोडांतरण, परीक्षण, फिक्सिंग, चमकाने के बारे में 16 घंटे बिताए और सीएसएस ऊर्ध्वाधर मेनू ट्यूनिंग और js और समय का कोड / 3 4 6 MSIE में काम करने के लिए खर्च किया गया था..
वैसे भी, मैं अंतिम परिणाम के साथ खुश था. परिणामस्वरूप ऊर्ध्वाधर नेविगेशन मेनू है सभी एक ही लाभ है कि क्षैतिज मेनू है.

ऊर्ध्वाधर मेनू को जोड़ने की क्षमता करने के बाद वेब पर पोर्टल्स के बारे में 70-80% के लिए बहुत महत्वपूर्ण है. क्षैतिज मेनू "अंतरिक्ष" के कई मेनू विकल्पों लेकिन ऊर्ध्वाधर मेनू इस सीमा नहीं है और काफी मदद होता को समायोजित सीमित है. तो यहाँ हम चले.

कदम के लिए ऐसा करना बहुत पहले से ही में वर्णित हैं ट्यूटोरियल के भाग 1 , तो यह थोड़ा कम एक के लिए कर देगा, लेकिन बहुत अधिक सुविधा संपन्न परिणाम के साथ.

तो यहाँ यह जाता है:

बिल्डिंग एसईओ दोस्ताना, ऊर्ध्वाधर, बहुस्तर, पदानुक्रम WordPress और के लिए नेस्टेड मेनू . उत्तरोत्तर
(... क्या तुम सोचा था कि संभव नहीं है ...)

  1. Exec php प्लगइन स्थापित है और इसे सक्रिय . हम इसे ज़रूरत है क्योंकि मैं पाठ विजेट के अंदर PHP का उपयोग करने के लिए ऊर्ध्वाधर मेनू HTML कोड फेंकना होगा.
  2. कदम 1 - 6 से क्या ट्यूटोरियल के भाग 1 . असल में आप को स्थापित और उपयोग NAVT प्लगइन सक्रिय + नेत्रहीन अपने मेनू बनाने की जरूरत है. सुनिश्चित करें कि आपके मेनू समूह नाम menu1 '. इस नाम custom_functions.php में hardcoded है
  3. अपने 'menu1' समूह के लिए 'गियर' आइकन पर क्लिक करने के लिए यह गुण संपादित करें:
    navt_customize_menu
  4. 7.1 का हिस्सा एक ट्यूटोरियल -7.3 करने के लिए "विकल्प" सेट चरण, "प्रदर्शन" और "सीएसएस" टैब सेटिंग्स निम्नानुसार है.
  5. अब इस संवाद के "थीम" टैब पर क्लिक करें. हम सेटिंग्स की संख्या वहाँ अधिलेखित (यदि आप चरण 1 के बाद किया गया है). यह ठीक है - आप कुछ नहीं खो देंगे, लेकिन इन परिवर्तनों है क्योंकि मैं चरण 1 से कुछ कोड बदल दिया है की जरूरत है.
    यहाँ कैसे इस संवाद में भरा होना चाहिए:
    1. के अंदर "थीम xpath:" इस क्षेत्र कोड (यह करने के लिए इन वर्गों के साथ कोई टैग की जगह आज्ञाओं) दर्ज करें:
      .jquerycssmenu, .jqueryslidemenu
    2. "क्रिया" "के साथ बदलें" सेट
    3. के अंदर "टैग जोड़ें नेविगेशन समूह क्षेत्र" से पहले इस कोड को दर्ज करें:
      <div class='jquerycssmenu' style='margin-top:5px;'>
    4. अंदर के "टैग जोड़ें नेविगेशन समूह क्षेत्र" के बाद इस कोड को दर्ज करें:
      <br style='clear: left' /></div>
    5. [बचाने / बंद] बटन पर क्लिक करें.
  6. रूप -> -> विजेट अब Wordpress व्यवस्थापक पैनल के लिए जाना.
  7. दाईं तरफ "1 साइडबार" क्षेत्र में "पाठ" विजेट बड़ा "उपलब्ध विगेट्स" क्षेत्र से खींचें. हम पाठ विजेट में कोड जोड़ने हो जाएगा कि हमें ऊर्ध्वाधर मेनू को अमल में लाना करने में मदद करेगा.
    नोट: मुझे आशा है की आप अस्तित्व में "एक साइडबार" है. थीसिस विकल्प आप इसे बंद की अनुमति देता है - लेकिन इस ट्यूटोरियल के लिए बनाने के लिए यह.
  8. एक बार जब आप घसीटा और इस विजेट गिरा दिया - यह एक फूल (मैं अब रोमांटिक है कि MSIE संघर्ष खत्म हो गया है महसूस हो रहा है) की तरह खुलती है.
  9. "शीर्षक" क्षेत्र में "विश्व के सर्वश्रेष्ठ ऊर्ध्वाधर मेनू" में प्रवेश ... खैर, अपनी रचनात्मकता का उपयोग करने के लिए स्वतंत्र लग रहा है - उस पाठ को अपने नवजात ऊर्ध्वाधर मेनू से ऊपर जाना होगा.
  10. पाठ के लिए एक बड़ा क्षेत्र में - इस PHP कोड दर्ज करें:
    <?php
    if (function_exists('navt_getlist'))
    $menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"');
    else
    $menu_html = "";
    $menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html);
    echo $menu_html;
    ?>
  11. प्रेस [सहेजें] बटन, "बंद" लिंक पर क्लिक करें.
  12. डाउनलोड फ़ाइलों के यहाँ सेट अद्यतन .
    इस संग्रह में शामिल हैं:


    • "उज्ज्वल" क्षैतिज मेनू कोड के अद्यतित संस्करण
    • क्षैतिज मेनू के संस्करण "अंधेरे"
    • कार्यक्षेत्र मेनू कोड
    • Custom_functions.php के अद्यतित संस्करण
  13. अब तुम इस संग्रह खोलना और अपने कस्टम निर्देशिका में अपलोड की जरूरत है.
    नोट: यदि आप custom_functions.php अंदर किसी भी अनुकूलन किया है - आप उन्हें मर्ज की आवश्यकता होगी. यदि नहीं - यह मेरे संस्करण के साथ अधिलेखित करने के लिए स्वतंत्र महसूस.
  14. देखा! अब आप अपनी वेबसाइट लोड और "उज्ज्वल" एक ही क्षैतिज + neato बाएं साइडबार में ऊर्ध्वाधर मेनू मेनू देख सकते हैं.
  15. बोनस कार्य: "अंधेरे" रंग योजना पर "उज्ज्वल" क्षैतिज मेनू बदल.
    1. Custom_functions.php फ़ाइल के अंदर:
      इस कोड की जगह:
      echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      //echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu

      इस कोड के साथ:
      //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu

      असल में हम एक पंक्ति टिप्पणी कर रहे हैं और एक दूसरे uncommenting.
    2. अब Wordpress व्यवस्थापक>> उपकरण> NAVT सूचियाँ के लिए जाओ और अपने 'menu1' समूह के गुणों को संपादित करने के लिए abovementioned "गियर" आइकन पर क्लिक करें.
    3. "थीम" टैब पर क्लिक करें.
    4. के अंदर "टैग जोड़ें नेविगेशन समूह क्षेत्र" से पहले इस कोड को दर्ज करें:
      <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. अब - अपने पृष्ठ पुनः लोड और अपने मुख्य क्षैतिज नेविगेशन मेनू "जादुई" अंधेरे बन गया है, ऐसा कुछ:
      Thesis theme - multilevel nested CSS menu - dark palette

      - बहुस्तर नेस्टेड सीएसएस मेनू - अंधेरे पैलेट

      डार्क रंग पैलेट प्रकाश रंग एक से कुछ साइटों के लिए अधिक उपयुक्त हो सकता है. तो अब तुम अपने जीवन में पसंद की स्वतंत्रता है!

    6. "उज्ज्वल" रंग योजना को वापस पाने के बस "बोनस" कदम ऊपर पूर्ववत.
  16. निष्कर्ष:
    मैं प्यार करता हूँ , मैं Wordpress प्यार करता हूँ और मैं तथ्य यह है कि हम एक हमारे पोर्टल के लिए सभ्य नेविगेशन मेनू जोड़ने के तरीके प्यार करता हूँ.

$ 20


आनंद लें!

Gleb Esman

एक टिप्पणी छोड़ दो

पिछला पोस्ट: