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

זה חלק 1 של הדרכה
חלק 2 של הדרכה זו מלמדת איך לבנות תפריט אנכי + לוח צבעים כהים על אחד אופקי

החלטתי להוציא נושא תזה, כי אחד הלקוחות שלי הודיע לי על בעיות תאימות בין תזה אתר חברות WordPress שלי תוסף MemberWing. סידרתי ואז החליט לקחת מבט קרוב יותר תזה ממש טרח לצפות Videos בעמוד הראשון של האתר הראשי תזה - Diythemes.com.
מה שהרשים אותי ביותר הוא תשומת לב לפרטים, ידידותיות למשתמש ויותר מכול - תכונות SEO כי הם חשבו על כך היטב.
MemberWing תוסף החברות תוכננה מהיסוד עבור אתרי החברות כי היה צורך למשוך כמו מיץ SEO רב ככל האפשר. שילמתי כל כך הרבה תשומת לב רב של שיפורים SEO ו perfections ב MemberWing. לקוחות רבים שלי שואלים על נושאים שונים לשימוש אחרי נושא זה היה כל כך טוב SEO אופטימיזציה מבפנים עמוק יהיה בכושר מצוין עבור חברות ויזמים הפורטל.

שילוב כוחות של SEO SEO MemberWing עם סמכויות של נושא עבודת הגמר היה לתת את הטוב ביותר של הזדמנויות הדירוג ללקוחות שלי. אז יש לי תזה ושיחקו עם זה במשך יום.

זהו נושא מעולה מכל הבחינות. החלק של ניווט זה אף הוא קצת מוגבל בתפקוד. החל מ תזה 1.5 + זה רק רמה אחת בתפריט. הרצון הרגיל שלי הוא להיות מסוגל להתאים ניווט ככל הצורך. באתרים מסוימים יש רק כמה דפים, ועוד רבים אחרים יש טונות של דפים סטטיים + zillions של מאמרים / הודעות + המון קטגוריות.
אז בעולם אידיאלי שיש הזדמנות ליצור נחמדה מאורגן בצורה היררכית תפריט ניווט ידידותי למשתמש הוא חייב. נכון תזה את המחבט יש נאה ניווט אבל שמתי לב שכל תזה אתרי אינטרנט מבוססי מחפשים כמו תאומים. התאמה אישית של תפריט ניווט תזה היא לא ממש קלה ולכן רוב האנשים פשוט להשאיר אותו כפי שהוא. אין דרך לשנות את הסדר של קטגוריות בתפריט או מיקום אותם בין הדפים. ושוב, את היכולת ליצור מבנים תפריט מקוננים חסר. אז החלטתי לראות מה ניתן לעשות על זה.
לאחר שניסה כחצי תריסר תפריט / ניווט plugins בנושא אוכל להגדיר הבחירה שלי ב Wordpress Plugin הניווט רשימת NAVT.
תוסף NAVT היא למעשה מחולל רשימת Unordered עם סופר מפוארת וקצת קשה ל-דמות ממשק מנהל untraditional. מה מטעה על זה כי זה לא ממש ליצור תפריטים מבט מפוארת בפני עצמה. זה החלק הקשה של העבודה אף - נותן לך את היכולת למשוך חזותית יחד, וליצור רשימה Unordered - שלד של התפריט שלך לעתיד. ואתה יכול ליצור תפריטים רבים מדי. אתה יכול למשוך כל סוג של חומר לתוך וורדפרס תפריט ניווט: דפים, הודעות, מאמרים, קטגוריות, משתמשים, בלוקים קוד, קישורים חיצוניים, מחיצות, מפרידי ו לשלב ולהתאים ואת הקן ומסדרים אותם ולהתאים אישית כל עץ מבנה דמוי אותך לרצות.
NAVT מייצר לך כתוצאה רשימת ה-HTML Unordered. יופי של NAVT השנייה היא כי זה עוזר לך להוסיף בתפריט החדש שלך לתוך הנושא שלך באמצעות jquery המפורסם מבוסס ההיגיון אבל ללא צורך לשנות את כל הקוד! NAVT מאפשר לך לציין: "להחליף את האלמנט הזה # NAVT עם התפריט החדש שלי". # יכול להיות אלמנט ID או מעמד של הנתיב של תפריט קיים או תג div רכיב זה הופקו על ידי ערכת הנושא הנוכחית שלך. אז NAVT עושה זה מחליף לך מבלי לאלץ אותך להיכנס קוד נושא ולהפוך אותו מבולגן יותר ממה שזה כבר. אם כל זה נשמע כמו ג 'יבריש - אל תדאג - אני ידריך אותך צעד אחר צעד בקרוב. החלק המאתגר של NAVT לכולם כי היא תצטרך לעלות עם CSS בפועל + תמונות + קוד ה-JavaScript עבור התפריט שלך בעצמך. וזה תלוי בך להבין היכן וכיצד לשלב קבצים אלה ולהפוך החומר הזה להתחבר יחד.
בכבוד רב, מבלי לדעת כמה jQuery + PHP + CSS + ניסיון שיש הגון עם וורדפרס - זה דבר קשה למשוך.
בשמחה אני יודע את החומר הזה קצת אז החלטתי לנשוך את הכדור האנושות מדריך לחופש בבניין הטוב ביותר של תפריטי הניווט הטובה ביותר עבור Wordpress. אני רק צריך למצוא את המקורות כמה נחמד אופקי מבט תפריטים ב CSS. לקחתי כונן אתר דינאמי עבור הבחירות הטובות ביותר שלהם, הדגמות ומקורות.

הקדשתי יום ללמוד תזה ולשחק עם תוסף NAVT. בסוף אני בגאווה נוצר מותאם אישית, גמיש, SEO אופטימיזציה, מדורגים, מבנה nagivation מקוננים באתר וורדפרס + תזה שלי מבוסס.

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

• מקצועית, נראה נקי מרגיש.
• תמיכה עבור כל הדפדפנים המודרניים, כולל MSIE 6,7, אופרה, ספארי, Firefox 3.x, Google Chrome ב-JavaScript והן שאינם מצבי JavaScript.
• בחן downgradable עבור דפדפנים שאינם JavaScript. את התפריט יהיה שמיש, דומה ויזואלית ועבודה אפילו עבור דפדפני JavaScript מושבת (אם כי רק הניווט ברמה העליונה יהיו גלויים ולא flyouts יקרה כמובן כאשר הם מבוצעים על ידי JavaScript).
• תכונות SEO ידידותית - תפריט רשימה Unordered נוצר בתוך קוד ה-HTML. גוגל ו עכבישים של מנועי חיפוש אחרים יוכלו מדד מבנה הניווט שלך למצוא קישורים לדפים הפנימיים.
• תמיכה עבור רמות קינון sublevels ללא הגבלה.
• תמיכה עבור כל סדר או דפים, הודעות (דרך המשתמש הגדיר URIs), קטגוריות, משתמשים, בלוקים קוד מותאמים אישית קישורים חיצוניים בתוך התפריט.
• תמיכה של טקסט כמו גם תמונת מבוססי אלמנטים בתפריט. (יש לי עדיין לנסות כי אלה).
• מבנה התפריטים ואת תוכן חזותית מתכוונן דרך אזור NAVT admin.
• קומפקט: flyouts jQuery מבוסס על רמות מקוננות.
• מהר: jQuery לתפריט נטען מהשרתים של Google (אני אשמח תזה עצמו לעשות את אותו הדבר במקום מושך אותה באופן מקומי). זה היה להאיץ את הדברים קצת.
• יכולת הרחבה - סוג זה של התפריט הוא להגדרה הניתנים לעריכה בכל עת באמצעות הגדרות NAVT תוסף ללא כל צורך של קידוד בכל מקום.

נהגתי תפריט זה מצוין מ הפורטל כונן דינמי כבסיס. הייתי צריך להתאים קוד JavaScript קצת כמו גם כוללות נתח של PHP לתוך custom_functions.php כדי לגרום לזה לעבוד עם תזה. גם את מספר הדפים הקיימים מראש, קטגוריות הודעות מהאתר שלי שימשו להרכיב מבנה התפריטים. פרטי האתר שלך יהיה שונה - אבל המושגים יהיה אותו דבר.
אז בואו להמשיך, בסדר?

צעד אחר צעד אל הוראות NAVT ההתקנה מבוססי-SEO מקוננות, להתאמה אישית, מדורגים, ידידותי
וסתם מגניב מבט תפריט ניווט עבור Wordpress ו תזה נושאים

1. עבור פאנל Wordpress admin. Plugins-> הוסף חדש, לחפש "navt". The plugin יוצגו. לחץ על [התקן], [התקן עכשיו], "הפעלת תוסף".
2. Tools-> רשימות NAVT, בתוך השטח "קבוצת הניווט" למצוא "שם קבוצה" והזן: "menu1" בשדה, הקש [צור] כפתור. "Menu1" שטח מלבן יש יצר.
   זה "menu1" האזור יהיה מגרש המשחקים העיקרי לבניית התפריט. אתה תהיה גרירה ושחרור כאן אלמנטים בתפריט שלך.
3. ב "נכסים" באזור למצוא "אחרים" ListBox ולחץ על "בית הבחירה". "הבית" thingie יופיע בתוך "מוקצים" באזור. מוזר, אה? אל דאגה, כל עוד זה עובד - וזה יהיה עבורנו.
4. גרור זה "הבית" thingie מן "הנכסים" לתוך השטח "menu1" שטח מלבן. זה יהיה "הבית" פריט בתפריט.
   • חזור על שלבים 3-4 עבור כמה דפים מן "דפים שטח", כמו גם עבור קטגוריות ב "קטגוריות" באזור. גרור כל פריט אחר שאתה רוצה להיות בתפריט שלך בתוך "menu1" מלבן. ייתכן לחץ על דפים, קטגוריות, משתמשים כמה רכיבים מותאמים אישית כמו "רשימת המחיצה" ולחסום "קוד". לחסום היא דרך קוד מגניב להוסיף קטעי מותאמים אישית בתוך תפריט.
   • אתה יכול לגרור פריטים בתפריט בתוך "menu1" השטח כדי לארגן מחדש את סדר שלהם.
   • אתה יכול להתאים את מיקום היררכי של כל פריט בתפריט עם "<" ו ">" חיצים.
   • לחיצה על שם טקסט של כל פריט בתפריט - פותח מבלבלים את המוח שיח התאמה אישית נוספת עבור פריט זה. אני בעיקר בשימוש המחדל אבל מבחינה טכנית אתה יכול להשתגע ולהתחיל לעשות תמונת מבוססי האפשרויות בתפריט ומוסיפים חתיכות של קוד ה-HTML לתוך זה. להתקדם בזהירות פי.
   • תפריטי משנה עבור unclikable linkless כי ישמש "ההורים" משנה עבור אחרים "ילדים" נהגתי "לחסום קוד" סוג. לדוגמה, כאשר התאמה אישית לחסום קוד פריט כזה אני נכנס עבור "כינוי פריט תפריט" = "MemberWing" ועל "הזן קוד לחסום:" = "<a href='#'> MemberWing </ a>". לאחר href = "#" זה לא יגרום ללחיצה אבל בפועל כהורה חוקי "" בחירה בתפריט.
5. הנה כמה NAVT 'שלי menu1' לבנות מבנה שנראה כמו כמעט הושלם:
   
6. סיום הבנייה הראשונית ולאחר מכן לחץ על הציוד "" סמל כדי להתאים אישית את מבנה התפריטים שלך:
   
7. זה יפתח שיח עם 4 כרטיסיות: אפשרויות, תצוגה, CSS, נושאים.
   1. יש להקליק על "אפשרויות" כרטיסייה לוודא שהכול מסומנת "שם קבוצה" אומר: "menu1"
   2. עבור "הצגת הכרטיסייה" וכן לוודא שהכול על "קבוצה הצג ניווט ב ..." הוא בדק את השטח [x]. השאירו את השאר על ברירת המחדל.
   3. עבור "CSS הכרטיסייה" ואת לחצן האפשרויות לבחור (X) "אל חלים שיעורי CSS".
   4. עבור "ערכת נושא הכרטיסייה" ולמלא את זה ככה:
      
      הכנס אל "הוספת תגים לפני ..." בתחום זה הקוד:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      הכנס אל "הוספת תגים אחרי ..." בתחום זה הקוד:
      <br style='clear: left' /></div>
   5. הקש [לשמור / קרוב] לחצן
8. בבניין זה הצבע מתוך תפריט האפשרויות NAVT תוסף הושלמה.
   כעת הגיע הזמן לעשות קצת מנגינה ל נושא תזה מוכנה לקבל את זה. בשביל זה אנחנו צריכים להוסיף כמה קבצים מותאמים אישית - CSS ו-JavaScript ששייך בתפריט ולעדכן תזה 'custom_functions.php
9. הורד את סט שלם של קבצים כאן.
10. ארכיון פרוס. אם עדכנת custom_functions.php שלך עם ההתאמות האישיות שלך - אתה צריך למזג אותם עם הדברים שלי. אני אשאיר את זה תלוי בך.
    אם לא נגעתי בו - אל תהסס להחליף אותו עם שלי. שים לב: אני מעדיף עמדת בתפריט תחת הכותרת באתר (ברירת המחדל היא לעיל) - כך ההסתגלות שלי כללה גם העדפה זו.
11. להעלות את כל הארכיון כולל תיקיות המשנה והקבצים תחת נושא תזה 'שלך בספרייה אישית ", כמו זו:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    לא נגעתי custom.css - אני מעדיף לשמור על התפריט-CSS תחת מיקומים ספציפיים שלהם, כדי למנוע יצירת בלאגן בתוך custom.css
12. בשלב זה אתה עשוי לטעון מחדש את אתר האינטרנט שלך, לראות את התפריט החדש יפה חדשה מרובת רמות, מקוננת, SEO אופטימיזציה.
13. תוכל תמיד לחזור להגדרות NAVT אישית בתפריט שלך עם הבחירה למקם מחדש או יותר כלום. זה יתבטא באתר הפעיל באופן אוטומטי.

הדרך שלפנינו ...

הדרכה זו כללה למשל יצירתי של סוג אחד של תפריט. שיחקתי עם אחד אחר - רק כדי לראות איך בצבע כהה התפריט ייראה כמו:

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

אני חושב שזה די נחמד. ישנן עוד דוגמאות רבות בניווט זמין ב Dynamic Drive - כל אחד מהם אפשר להתאים אישית עבור תזה נושאים אחרים Wordpress במאמץ מסוים:

Dynamic Drive אופקי תפריטים

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

אני יכול לעשות את העבודה הזאת בשבילך על בסיס חוזה. תבחרי את התפריט שאתה רוצה, לפנות אלי ואני אעבוד על הקוד והוראות עבור אתר האינטרנט שלך.

$ 20

וכמובן, אם אתה עד בניין סופר אופטימיזציה SEO WordPress הפורטל פרמיה לחברות - הפתרון הטוב ביותר זה:
נושא תזה + MemberWing תוסף חברות + עצמית אירח וורדפרס כמובן.

Tagged as: תפריט ב CSS עבור WordPress, נושא התזה, נושא התזה תפריטים היררכי, בתפריט נושא התזה מדורגים, nagivation נושא התזה, נושא התזה תפריטים מקוננים, נושא התזה הדרכה, בתפריט CSS WordPress, WordPress תפריט מקוננים