מה הדרך הטובה ביותר להוסיף js חיצוניים מותאמים אישית ל- wordpress

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

במאמץ זה להפוך את אתר האינטרנט המתוק והפשוט שלך לאתר CMS מורכב וביצועי ביצועים גבוהים, אנשים נתקעים בצעד בסיסי מאוד ושואלים את השאלה: למען האהבה, איך אוכל להשיג קובץ JavaScript חיצוני זה (.js) עובד בנושא זה של וורדפרס? גם אתה זה ששואל את אותה שאלה? ובכן amigos, סוף סוף אתם נמצאים במקום הנכון: אני כאן כדי להדריך אתכם צעד אחר צעד בדרך הפשוטה ביותר להשגת משימה זו!

כעת בהנחה שיש לכם את וורדפרס כולם מותקנים ומאושרים עם JS חיצונית מוכנה, בואו ניכנס למשימה של הכללת הקובץ!

הערה: אני משתמש בקובץ הבא (testrun.js) להדרכה זו והנושא שעליו אני עובד הוא Twenty Sixteen.

התראה ('שלום');

בואו נתחיל!

כל הסקריפטים וגיליונות הסגנון נטענים מתוך הפונקציות .php . זוהי הדרך הנכונה לטעון אותם בתוך וורדפרס כדי להימנע מתנגשות עם כל סקריפט אחר שנטען על ידי וורדפרס עצמה או על ידי שימוש בתוספים שלך. אם אתה נותן לוורדפרס לנהל את כל הקבצים הכלולים, אתה צריך ליידע אותו שאתה רוצה שהקובץ הזה ייכלל בכותרת (התחל) או כותרת תחתונה (סוף) של הקובץ. לכל תבנית / נושא יש פונקציות .php משלה ולכן קשה להכליל את שם הפונקציות המדויק הכולל את כל הקבצים שייכללו. מכיוון שאני לוקח עשרים ושש עשרה כנושא, להלן תמונת המצב של הפונקציות שלי. Php (המשמש לכלילת קבצים). שלך צריך להיות דומה במידה זו:

הפונקציה wp_enqueue_script מקשרת קובץ סקריפט לדף שנוצר בזמן הנכון בהתאם לתלות הסקריפט, אם הסקריפט לא נכלל ואם כל התלות נרשמו. אתה יכול לקשר סקריפט עם ידית שנרשמה בעבר באמצעות הפונקציה wp_register_script (), או לספק לפונקציה זו את כל הפרמטרים הדרושים לקישור סקריפט.

ה- wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer) לוקח את הפרמטרים הבאים:

$ ידית

(מחרוזת) (חובה) שם התסריט.

$ src

(מחרוזת | bool) (אופציונלי) נתיב לתסריט מתוך ספריית השורשים של וורדפרס. דוגמה: '/js/myscript.js'.

ערך ברירת מחדל: שווא

$ deps

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

ערך ברירת מחדל: מערך ()

$ ver

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

ערך ברירת מחדל: שווא

$ in_footer

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

ערך ברירת מחדל: שווא

אתה יכול להתעלם מפונקציית wp_register_script () להדרכה זו. מטרתנו היא לכלול JS חיצוני בלבד. זה אמור לעבוד מצוין בלעדיו!

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

wp_enqueue_script ('הדרכה', get_template_directory_uri (). '/js/testrun.js', מערך ('jquery'), '1.0', שקר);

אם שמתם לב, השתמשתי ב- get_template_directory_uri (), אז המחרוזת שרוכזת אחרי הפונקציה, כלומר “ /js/testrun.js ” היא למעשה הנתיב של הקובץ עם קובץ האינדקס של התבנית .

אז התכונה $ src, שהיא מקור קובץ ה- js שלך הופכת להיות: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.

לכן הפונקציות הסופיות. Php נראות כך:

תחזיקו שם, כמעט סיימנו! פשוט שמור את זה עכשיו והקש רענן באתר האינטרנט שלך … אתה אמור לראות את JS עובד! הנה שלי:

מכיוון שהגדרנו את אפשרות in_footer $ לשקרית, הסקריפט נטען לפני העמסת העמוד, אך לאחר טעינת JQuery כפי שנוספה כתלות!

וגם .. וואלה! הנה לך .. כללת בהצלחה קובץ JS מותאם אישית חיצוני בנושא WP שלך!

קידוד שמח !!

הפניה: פונקצית Enqueue: קודקס וורדפרס