האם אתה רוצה ליצור תפריט רספונסיבי בבלוג הוורדפרס שלך?

משתמשים ניידים עולים על מספר משתמשי מחשבים שולחניים בימינו. הוספת תפריט נייד רספונסיבי מקלה על המשתמשים לנווט באתר שלך.

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

אבל לפני כן, אם מעולם לא התקנת גילוי וורדפרס כמה תוספים להתקין בוורדפרס. et איך למצוא, להתקין ולהפעיל WordPress נושא בבלוג שלך 

ואז חזרה למה אנחנו כאן.

כאן זו תהיה שאלה של עומק על ידי הצגתכם גם את השיטה עם תוסף למתחילים וגם את שיטת הקידוד למשתמשים מתקדמים.

שיטה ראשונה: צור תפריט נייד עם תוסף וורדפרס

שיטה זו קלה ומומלצת למתחילים מכיוון שהיא אינה דורשת שום כישורי קידוד מיוחדים.

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

הדבר הראשון שעליך לעשות הוא להתקין ולהפעיל את תוסף תפריט רספונסיבי של WordPress . לפרטים נוספים, עיין במדריך שלנו להתקנת תוסף וורדפרס .

לאחר הפעלת התוסף, התוסף יוסיף פריט חדש בתפריט, שכותרתו " תפריט Responsive ". לחיצה עליו תעביר אותך לדף ההגדרות של התוסף וורדפרס.

תחילה עליך להזין את הגודל שממנו תפריט הנייד אמור להופיע. ברירת המחדל היא 800 פיקסלים, שאמור לעבוד ברוב האתרים.

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

האפשרות האחרונה על המסך מאפשרת לך לספק שיעור CSS לתפריט שלך. זה יאפשר לפלאגין להסתיר את התפריט הלא מגיב שלך על מסכים קטנים.

אל תשכח ללחוץ על « אפשרויות עדכון לשמירת ההגדרות שלך.

אנו גם ממליצים לך לגלות את שלנו 10 תוספי וורדפרס ליצירת תפריטים בבלוג שלך

כעת אתה יכול לבקר באתר שלך ולשנות את גודל מסך הדפדפן כדי לראות את התפריט הרספונסיבי בפעולה.

התוסף « תפריט Responsive »מציע אפשרויות רבות אחרות המאפשרות לשנות את ההתנהגות והמראה של התפריט הרספונסיבי שלך. אתה יכול לבחון אפשרויות אלה בדף ההגדרות של התוסף ולהתאים אותו לפי הצורך.

שיטת 2: כיצד להוסיף תפריט נייד באופן ידני

אחת השיטות הנפוצות ביותר להצגת תפריט על גבי מסכי הנייד היא שימוש במינוף.

שיטה זו מחייבת להוסיף קוד בהתאמה אישית לקבצי וורדפרס שלך.

באחד מהמדריכים הקודמים שלנו אנו מראים לך כיצד ליצור תוסף וורדפרס - -.

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

(פונקציה () {nav var = document.getElementById ('ניווט באתר'), כפתור, תפריט; אם (! nav) {return;} כפתור = nav.getElementsByTagName ('כפתור') [0]; menu = nav. getElementsByTagName ('ul') [0]; אם (כפתור!) {חזרה;} // לחצן הסתר אם התפריט חסר או ריק אם (! תפריט ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = פונקציה () {if (-1 === menu.className.indexOf ('nav-menu')) {menu.className = 'nav-menu';} if (- 1! == button.className.indexOf ('toggled-on')) {button.className = button.className.replace ('toggled-on', ''); menu.className = menu.className.replace ('toggled -on ',' ');} else {button.className + =' toggled-on '; menu.className + =' toggled-on ';}};}) (jQuery);

כעת עליך לשמור את הקובץ בשם " navigation.js על שולחנך.

אז אתה צריך לפתוח לקוח FTP כדי להוריד קובץ זה למיקום "/ wp-content / נושאים / your-theme / js /" באתר WordPress שלך.

החלף את הביטוי " ב"נושא שלך » עם שם התיקיה שלך וורדפרס נוֹכְחִי. אם בספריית ערכות הנושא שלך אין תיקיית js, עליך ליצור אחת.

לאחר העלאת קובץ ה- JavaScript, השלב הבא הוא לוודא שאתר הוורדפרס שלך יטען את קבצי ה- JavaScript. יהיה עליך להוסיף את הקוד הבא ל" functions.php " שלך וורדפרס.

לגלות משהו אחר מה אתה יכול לעשות עם הקובץ features.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', array (" JQuery '), 20160909', נכון.);

כעת עלינו להוסיף את תפריט הניווט שלנו וורדפרס. בדרך כלל תפריט הניווט מתווסף ב" header.php מנושא הוורדפרס שלך.

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

אנו מניחים שמיקום התפריט שהוגדר על ידי נושא הוורדפרס שלך נקרא " יְסוֹדִי ". אחרת, השתמש במיקום שהוגדר על ידי ערכת הנושא של וורדפרס שלך.

השלב האחרון הוא להוסיף קצת CSS כך שהתפריט שלנו ישתמש בכיתות CSS הנכונות כדי לעבור כאשר הוא נצפה במכשירים ניידים.

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
    color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: inline-block;
}

// CSS to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #636363;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
    
    }

כעת תוכל לבקר באתר שלך ולשנות את גודל מסך הדפדפן כדי לראות אם התפריט הרספונסיבי שלך מתחלף.

גלה גם כמה תוספי וורדפרס מובחרים  

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

אנו מציעים לכם כאן כמה תוספי וורדפרס מובחרים שיעזרו לכם לעשות זאת.

1. UberMenu

UberMenu הוא א התוסף וורדפרס מוקדש ליצירת מגה-תפריט הניתן להתאמה אישית, מגיב ונגיש למשתמש. הוא פונקציונלי לאחר התקנתו, ללא צורך בתצורה מסוימת.

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

ראה גם שלנו 9 תוספי וורדפרס ליצירת רשתות מחירים בבלוג

תוכלו למצוא בין היתר: 3 תבניות תפריטים, פריסה מגיבה לחלוטין, תאימות למכשירים ניידים (אייפון, אייפד, אנדרואיד), תמיכה במגע וכו '...

הורד | הדגים | אירוח אתרים

2. LMM

Liquida Mega Menu הנקרא גם LMM הוא א התוסף וורדפרס מיועד למשתמשים ולמפתחים. יש לו ממשק פשוט ואינטואיטיבי, משולב בלוח המחוונים של WP, המאפשר לך ליצור ולהתאים אישית כמות בלתי מוגבלת של מגה תפריטים, ללא כל כישורי תכנות.

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

הורד | הדגים | אירוח אתרים

3. 8Degree תפריט טוס

תפריט 8Degree Fly הוא תוסף וורדפרס פרימיום שמאפשר להוסיף תפריט קנבס באתר האינטרנט שלך, על מנת לתת לו מראה המדגיש ובקלות את המידע שלך. היא משתמשת בפונקציית תפריט וורדפרס המוגדרת כברירת מחדל כדי ליצור את התפריטים שלה.

תוכל להוסיף אלמנטים נוספים לפריטי ברירת המחדל של התפריט, כגון סמלים, סיסמאות בתפריט, כותרת קיבוץ פסאודו ותיאור ארוך.

קראו גם: 10 תוספי וורדפרס למיטוב סרגל הצד וכותרות דביקים

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

הורד | הדגים | אירוח אתרים

משאבים מומלצים אחרים

אנו מזמינים אתכם להתייעץ עם המשאבים להלן בכדי להתקדם ולשלוט באתר ובבלוג שלכם.

• כיצד לבצע שינוי שם תמונות על בלוג וורדפרס
• כיצד ליצור תפריט צף על וורדפרס
• 8 תוספי וורדפרס ליצירת מגנמו בבלוג שלך
• כמה טיפים ליצירת תפריטים מודרניים עבור הבלוג שלך
• 6 וורדפרס תוספים לנהל קטגוריות ותתי קטגוריות בבלוג שלך

סיכום

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

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

אבל בינתיים ספר לנו על שלך commentaires והצעות בחלק המוקדש.

...