תפריט מדורגת אנכי מקונן הירארכי Wordpress

הוספת מדורגת, תפריט מקונן, ניווט ידידותי SEO Wordpress - חלק 2

על ידי gesman על 10 יולי 2009

החיפוש אחר בתפריט אנכי מושלם ...

חלק 1 של מדריך זה מתאר שלב אחר שלב בתהליך של בניית תפריט אופקי מקונן מדורגת עבור נושא Wordpress תזה . חלק 2 תימשך על מנת לשפר את הפונקציונליות הזו. כאן נוסיף גרסה "כהה" של תפריט הניווט האופקי אני אלמד אותך איך לעבור בין "בהיר" וגם גרסה "כהה". חלק 2 הוא קבוצת של חלק 1. הוא כולל כל חלק מן 1 + מוסיף עוד דברים מגניבים.

הרעיון המרכזי שאני רוצה להציג הוא הוספת תפריט אנכי (וגם Wordpress באופן כללי). חיפשתי גמיש באמת, SEO ידידותית ורב הדפדפן בתפריט אנכי תואם שיאפשר ליצור רמות קינון ללא הגבלה.

אינטרנט יש טונות של עמודים בנושא אבל כשהתחלתי לנסות את כל אלה דוגמאות - הם גם נשבר, מתרסק, נתמך רק מספר מוגבל של רמות או התנהג לא יפה באופן גייטס + junksplorer באלמר של 6. לבסוף חזרתי המנוסה והנאמן תפריטים כונן דינמי כמו דגימות אנכיים שלהם הוכיח את עצמו במקרה נחמד שמתאים לדרישות המחמירות שלי. הייתי צריך לשנות אותם באופן משמעותי אם כי כדי לוודא שהוא מתאים למודל תזה.
השאיפה לשלמות ממשיך ...

ביליתי כ 16 שעות חיפוש, הרכבה, בדיקה, תיקון, ליטוש כוונון CSS התפריט האנכי של ו. קוד JS ו 3/4 מהזמן הוקדש מה שהופך אותו לעבוד MSIE 6.
בכל אופן, אני שמח עם התוצאה הסופית. הביא תפריט הניווט האנכי יש את כל היתרונות אותם כי יש תפריט אופקי.

לאחר היכולת להוסיף לתפריט אנכי חשוב מאוד על 70-80% של פורטלים באינטרנט. תפריטים אופקיים באופן מוגבל "שטח" כדי להכיל תפריט אפשרויות רבות, אבל התפריט האנכי אין את המגבלה ויעזור מאוד. אז הנה זה בא.

הרבה צעדים כדי לגרום לזה לקרות מתוארים כבר חלק 1 של הדרכה אז זה יעשה את זה אחד קצר קצת, אבל עם תוצאות תכונה הרבה יותר עשירים.

אז הנה זה הולך:

בניית אתרים ידידותיים, אנכי תפריט מדורגת, מקוננות באופן היררכי על Wordpress ואת . צעד אחר צעד
(... מה אתה אף פעם לא חשבתי שאפשר ...)

  1. התקנת תוסף exec PHP ולהפעיל אותו. נצטרך את זה כי אני אשתמש PHP בתוך ווידג'ט טקסט לפלוט קוד HTML תפריט 'אנכי.
  2. האם שלבים 1 - 6 מתוך חלק 1 של המדריך . בעיקרון אתה צריך להתקין ולהפעיל את התוסף להשתמש NAVT + חזותית לבנות את התפריט שלך. ודא קבוצת התפריט שם ​​הוא "menu1". שם זה hardcoded ב custom_functions.php
  3. לחץ על הסמל 'הילוך' עבור הקבוצה שלך "menu1" כדי לערוך את המאפיינים של זה:
    navt_customize_menu
  4. בעקבות צעדים של 7.1 -7.3 הדרכה חלק 1 כדי להגדיר את "אפשרויות", "הצג" ו "CSS" הגדרות טאבים.
  5. כעת לחץ על לשונית "ערכת נושא" של שיח זה. אנו להחליף מספר הגדרות שם (אם אתה עוקב אחרי שלב 1). זה בסדר - לא תאבד דבר - אך שינויים אלה יש צורך כי שיניתי קצת קוד משלב 1.
    כך שיח הזה צריך להיות מלא ב:
    1. בתוך "נושאים של XPath:" אזור הזן את הקוד (זה מצווה להחליף כל תג עם כיתות אלה):
      .jquerycssmenu, .jqueryslidemenu
    2. הגדרת "פעולה" ל "החלף"
    3. בתוך "הוספת תגים לפני ניווט קבוצת" מרחב להזין את הקוד הזה:
      <div class='jquerycssmenu' style='margin-top:5px;'>
    4. בתוך "הוסף תגי לאחר ניווט קבוצת" מרחב להזין את הקוד הזה:
      <br style='clear: left' /></div>
    5. לחץ על [שמור / קרוב] כפתור.
  6. עכשיו, עבור אל לוח admin Wordpress - מראה <-> יישומונים.
  7. גרור "טקסט" יישומון (מאזור גדול "יישומונים זמין") לאזור "הסרגל הצידי 1" מימין. אנחנו נהיה הוספת קוד יישומון את הטקסט יעזור לנו להתממש תפריט אנכי.
    הערה: אני מניח שיש לך "הסרגל הצידי 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. כעת עבור אל וורדפרס מנהלה-> כלים-> רשימות NAVT ולחץ על הסמל הנ"ל "הילוך" כדי לערוך את המאפיינים של הקבוצה שלך "menu1".
    3. לחץ על לשונית "ערכת נושא".
    4. בתוך "הוספת תגים לפני ניווט קבוצת" מרחב להזין את הקוד הזה:
      <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. עכשיו - לטעון מחדש את הדף שלך - ואת תפריט הניווט האופקי העיקרי שלך "באורח פלא" הפך כהה, משהו כזה:
      Thesis theme - multilevel nested CSS menu - dark palette

      - תפריט מקונן מדורגת CSS - צבעים כהים

      פלטת הצבעים הכהה עשוי להיות מתאים יותר עבור אתרים מסוימים מזו בצבע בהיר. אז עכשיו יש לך חופש בחירה בחיים שלך!

    6. לחזור לתוכנית "בהיר" צבע - פשוט לבטל את הפעולות הנ"ל "בונוס".
  16. מסקנה:
    אני אוהב את , אני אוהב את וורדפרס ואני אוהבת את העובדה שיש לנו דרכים להוסיף תפריטי ניווט הגונים כדי הפורטלים שלנו.

20 $


תהנו!

גלב אזמאן

השאירו תגובה

קודם לכתוב: