אחד מיתרונותיה הגדולים של וורדפרס הוא כמובן בהיותה מערכת קוד פתוח, מה שבאופן תיאורטי מאפשר לכל אחד ואחד מאיתנו לפתח (ולהפיץ) תוספים והרחבות לכל צורך באשר הוא. לא מעט ממפתחי התוספים, גם הגדולים שבהם, מתעלמים מנושאי יעילות וביצועים, כך שבסופו של דבר התקנה של תוספים מרובים עלולה לגרום לאתר שלנו לעבוד באיטיות ואף לאבד נקודות במבחני הביצועים המוכרים של גוגל, GTmetrix ודומיהם.
נציג דוגמה: תוסף Contact Form 7, שנכון לרגע כתיבת המאמר עומד על למעלה מ-5 מיליון התקנות פעילות, מוסיף לקוד של האתר שלנו לפחות שני נכסים (סקריפטים וגליונות עיצוב). אולם, התוסף המאד פופולארי הזה לא בוחן האם עליו להטמיע את שני הנכסים הללו או לא. כלומר, גם אם בעמוד מסוים באתר שלנו אין בכלל טופס, הנכסים הללו נטענים בכל מקרה. במקרה של CF7 זה אולי לא כל-כך נורא, אך ישנם תוספים שטוענים גם שבעה ושמונה נכסים ללא בקרה, וכאן זה כבר הופך להיות בעייתי.
החדשות הטובות: אפשר לטפל בזה. מנוע טעינת הנכסים של וורדפרס מאפשר לנו לשלוט באופן ידני ברשימת הנכסים שתיטען לכל עמוד ועמוד. כך, נוכל למשל לקבוע שהנכסים של Contact Form 7 ותוספים אחרים לא ייטענו היכן שלא צריך אותם. החדשות הרעות: זו עשויה להיות משימה לא פשוטה בכלל באתרים קיימים שמפעילים עשרות תוספים.
וכך גם לסקריפטים ולגליונות העיצוב שנטענים לאתר שלכם על ידי הפלאגינים. מנוע טעינת הנכסים של וורדפרס מחייב את המפתחים להעניק שם ייחודי לכל נכס שהם מבקשים לטעון, וזה היסוד שמאפשר לנו לקבל שליטה מלאה על רשימת הנכסים הנטענים לכל עמוד באתר. במאמר זה נציג שתי שיטות פעולה, האחת באמצעות קטעי קוד שנכתוב בעצמנו לתוך התבנית, והשנייה היא באמצעות, איך לא… תוסף.
שימו לב: לאחר ביצוע הפעולות שיופיעו מטה, תהיו חייבים לבדוק שהאתר שלכם מתפקד כראוי! אם תעשו זאת בצורה שגויה, ביטול טעינת הנכסים עלול לפגוע בפעילותם של תוספים. אם אינכם בטוחים במה שאתם עושים, פנו לסיוע מקצועי.
לפני שנכתוב את הקוד, נצטרך לאתר את שמות הנכסים שברצוננו לבטל את טעינתם. נמשיך בדוגמה של Contact Form 7 וננסה לאתר את שמות הנכסים שלו. כדי לעשות זאת, נצטרך לכתוב קטע קוד מקדים (וזמני) שיסייע לנו:
function discover_page_assets(){
if(current_user_can('manage_options')){
echo '<pre>';
var_dump(wp_styles()->queue);
var_dump(wp_scripts()->queue);
echo '</pre>';
}
}
add_action( 'wp_enqueue_scripts', 'discover_page_assets', 100 );
שמרו את הקובץ והיכנסו לאתרכם. שימו לב: בקוד הנ"ל הוגדר אמנם להציג את הרשימה רק עבור גולשים המחוברים למשתמש בעל הרשאות ניהול, אך עדיין מומלץ לבצע זאת בסביבת פיתוח ולא על אתר פעיל. כעת, בראש האתר תופיע רשימת כל הנכסים הנטענים לעמוד בו ביקרתם, כאשר הרשימה הראשונה היא של גליונות עיצוב, והשנייה היא של סקריפטים.
ברשימה הראשונה נוכל להבחין בשתי מחרוזות הקשורות ל-Contact Form 7:
לעומת זאת, ברשימה השנייה נוכל לאתר מחרוזת אחת בלבד: contact-form-7. קודם לכן צוין שלכל נכס ישנו שם ייחודי, אך כאן ניתן לשים לב שלנכס ברשימה השנייה יש שם זהה לאחד הנכסים מהרשימה הראשונה, וזה בסדר. הראשון הוא קובץ עיצוב (CSS) והשני הוא קובץ סקריפט (JS).
כעת, לאחר שיש בידינו את שמות הנכסים ש-Contact Form 7 טוען לעמוד, נוכל למחוק את הקוד שהוצג מעלה ולכתוב במקומו את הקוד שלשמו התכנסנו:
function dequeue_wordpress_plugin_assets(){
if(is_front_page()){
wp_dequeue_style('contact-form-7');
wp_dequeue_style('contact-form-7-rtl');
wp_dequeue_script('contact-form-7');
}
}
add_action('wp_enqueue_scripts','dequeue_wordpress_plugin_assets',100);
באמצעות הקוד הזה שכתבנו, הסרנו את כל הנכסים של Contact Form 7 מעמוד הבית. את גליונות העיצוב הסרנו באמצעות הפונקציה wp_dequeue_style, ואת קבצי הסקריפט באמצעות הפונקציה wp_dequeue_script. ניתן כמובן להסיר נכסים גם מעמודים אחרים על ידי שינוי התנאי שבשורה 2.
עוד יודגש כי באמצעות שני קטעי הקוד שנכתבו מעלה הוספנו פעולה לתהליך wp_enqueue_scripts של וורדפרס, שאחראי על טעינת הנכסים של הפלאגינים והתבנית אל הקוד. שימו לב שהענקנו לפעולה עדיפות 100, בתקווה שהיא תתבצע לאחר שכל הפלאגינים כבר ביקשו לטעון את הנכסים שלהם.
מי מכם שמעדיף לא להתעסק עם שינויים בקבצי התבנית או בכלל בכתיבת קוד, יכול לנסות את הפלאגין WordPress Assets Manager שמציג בצורה ויזואלית את רשימת הנכסים ומאפשר לבחור מי מהם ייטען איפה. הוא לא מושלם, אך הוא עושה את העבודה בבסיסה.