האם אתה רוצה ללמוד כיצד להוסיף קוד jQuery ב- WordPress? אז המשך לקרוא כדי ללמוד עוד.

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

אז ננסה להבהיר את הדברים.

מכיוון ש-jQuery היא מסגרת ה-JavaScript הנפוצה ביותר, אנו נראה לך כיצד להוסיף אותה לערכת נושא או התוסף וורדפרס.

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

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

מצב תאימות JQuery

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

גלה אם הוא האם יש להסיר את jQuery מהנושאים והתוספים שלך וורדפרס ?

המשמעות היא שאתה לא יכול להשתמש ישירות בסימן הדולר כפי שהיה עושה בפרויקטים אחרים. בעת כתיבת jQuery בוורדפרס, עליך להשתמש ב- jQuery במקום זאת.

עיין בקוד שלהלן כדי לראות למה אני מתכוון:

/ * מצב רגיל * / $ ('. ניתן להסתיר'). מופעל ('לחץ', פונקציה () {$ (זה) .הסתר ();}) / * מצב תאימות * / jQuery ('. ניתן להסתיר'). מופעל ('לחץ', פונקציה () {jQuery (זה). הסתר ();})

מה שאתה צריך לדעת הוא שעם מספר שינויים אתה יכול להשתמש שוב בסימן הדולר. השימוש בכל פעם ב- "jQuery" בכל הקוד שלך מסבך כתיבה רבה.

עזיבה עורכי קוד 10 עבור WordPress למפתחים

רק כדי לסכם מחדש, אם אתה מכיר את jQuery, סימן $ הוא רק כינוי ל- jQuery (), ואז כינוי לפונקציה. התחביר הבסיסי הוא: $ (בורר) .action () :

• שלט דולר להגדרת jQuery
• A (בורר) ל"מציאת "אלמנטים של HTML
• פעולה jQuery () לביצוע על אלמנטים אלה

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

(function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})}) (jQuery);

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

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

jQuery (document) .ready (function ($) {$ ('. hideable'). on ('click', function () {$ (this). hide ();})});

כיצד לקשר את הסקריפטים שלך ל- jQuery

כעת כשתוכלו לכתוב קוד jQuery תקף בוורדפרס, נקשר את העבודה שלנו לאתר שלנו. ב- WordPress התהליך נקרא ' enqueueing "(מערכת זנב). עבור אתר HTML רגיל, עלינו להשתמש בתגיתתסריט> להוסיף סקריפטים.

WordPress יכול לעשות את אותו הדבר, אך אנו נשתמש בתכונות המיוחדות של WordPress כדי להשיג זאת. באופן זה, וורדפרס מנהלת עבורנו את כל התלות שלנו.

אם אתה עובד על נושא, אתה יכול להשתמש בפונקציה wp_enqueue_script () בתוך הקובץ שלך functions.php קוֹבֶץ. כך תוכל לעשות זאת:

פונקציה my_theme_scripts () {wp_enqueue_script ('my-great-script', get_template_directory_uri (). '/js/my-great-script.js', array ('jquery'), '1.0.0', נכון); } add_action ('wp_enqueue_scripts', 'my_theme_scripts');

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

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

גלה גם אופן טעינת JavaScript על WordPress

הפרמטר הרביעי הוא מספר גרסה והחמישי מאפשר לוורדפרס לדעת היכן לשים את התסריט. כברירת מחדל, סקריפטים יוטענו בכותרת, וזה לא נהוג, מכיוון שהוא מאט את טעינת דף האתר שלך (דפדפנים עוצרים את כל טעינת העמודים בכל פעם שחוסמים est rencontré). עליך לטעון את כל הסקריפטים לכותרת התחתונה, במידת האפשר על ידי ביצוע הפרמטר החמישי " נָכוֹן ".

כיצד להוסיף סקריפט על לוח המחוונים

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

function my_admin_scripts () {wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', מערך ('jquery'), '1.0.0', נכון); } add_action ('admin_enqueue_scripts', 'my_admin_scripts');

במקום להשתמש wp_enqueue_scripts עלינו להשתמש admin_enqueue_scripts, וזה הכל !

השימוש בתגים מותנים

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

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

תסתכל על בתיעוד admin_enqueue_scripts בקודקס וורדפרס לקבלת מידע נוסף.

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

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

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

1. מפות אינטראקטיביות

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

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

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

2. טופס יצירת קשר עם AJAX

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

המאפיינים העיקריים שלו הם בין היתר: a fעבור דוא"ל, את התמיכה של מתמטיקה CAPTCHA על צורות, התאמה אישית ותצורה דרך לוח המחוונים של וורדפרס, האפשרות של דהגדירו משיב רשויות מותאם אישית, תמיכה ב- CSS מותאם אישית, ועוד

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

3. PayPal סטנדרטי תשלום Gateway עבור טפסים Ninja

PayPal Standard Gateway for Ninja Forms מאפשר לך ליצור טפסים המשתלבים בצורה חלקה עם שער התשלומים של PayPal. 

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

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

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

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

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

סיכום

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

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

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

...