תזת הדרכה נושא - הוספת תפריט מדורגת, מקונן, SEO ידידותי לניווט וורדפרס

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

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

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

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

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

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

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

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

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

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

1. עבור לפנל הניהול וורדפרס. Plugins-> הוספה חדשה, חיפוש אחר "navt". התוסף יוצג. לחץ על [התקן], [התקן כעת], "הפעל תוסף".
2. Tools-> רשימות NAVT, בתוך שטח "ניווט הקבוצה" למצוא "שם קבוצה" והזן: "menu1" בשדה, לחץ על כפתור [יצירה]. אזור "menu1" מלבן יש נוצר.
   אזור זה "menu1" יהיה מגרש המשחקים העיקריים לבניית תפריט. אתה תהיה גרירה ושחרור האלמנטים כאן התפריט שלך.
3. באזור של "נכסים" למצוא listbox "אחרת" ולחץ על בחירה "בית". מהמה "הבית" תופיע בתוך האזור "מוקצה". מוזר, אה? אין דאגות, כל עוד זה עובד - וזה יהיה עבורנו.
4. גרור thingie זה "הבית" מאזור "נכסים" לאזור "menu1" מלבן. הוא יהפוך לפריט "הבית" בתפריט.
   • חזור על צעדים 3-4 לכמה דפים מהאזור "עמודים", כמו גם לקטגוריות באזור "קטגוריות". גרור כל הפריט אחר שאתה רוצה להיות על התפריט בתוך מלבן "menu1" שלך. אתה יכול ללחוץ על דפים, קטגוריות, משתמשים וכמה אלמנטים מותאמים אישית, כגון "מחיצת רשימה" ו "בלוק קוד". בלוק קוד הוא דרך מגניבה להוסיף קטעים מותאמים אישית בתוך התפריט.
   • אתה יכול לגרור את פריטים בתפריט בתוך שטח "menu1" כדי לארגן מחדש את הסדר שלהם.
   • אתה יכול להתאים את המיקום היררכי של כל פריט בתפריט עם חצים "<" ו ">".
   • לחיצה על שם טקסט של כל פריט בתפריט - פותחת את דעת שיח התאמה אישית נוסף משגע עבור פריט זה. אני משמש בעיקר כברירת מחדל, אבל מבחינה טכנית אתה יכול להשתגע ולהתחיל להרוויח אפשרויות תפריט מבוססות תמונה ולהוסיף נתחי קוד HTML לתוכו. אם להתקדם בזהירות.
   • לתפריטי משנה unclikable linkless שישמשו "הורים" ל" תת ילדים "אחרים שאני משמש סוג" קוד בלוק ". לדוגמה, כאשר התאמה אישית של פריט בלוק קוד כזה שאני נכנסתי ל" MemberWing "" פריט בתפריט הכינוי "= ול" הזן קוד בלוק:" = "MemberWing href='#'> </ 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 - צבעים כהים

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

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

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

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

20 $

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

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