איך לגלות אילו תוספים מותקנים בכל אתר וורדפרס: המדריך המלא לכלי המפתחים (F12)

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

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

למה חשוב לדעת לבצע מחקר טכנולוגי על אתרים?

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

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

ההבדל בין מה שמותקן בשרת לבין מה שנטען בדפדפן

טעות נפוצה של מתחילים היא לחשוב שמה שרואים ב-F12 זה כל מה שיש באתר. זה לא מדויק. כלי המפתחים מציגים לנו רק את מה ש"הוגש" לצד הלקוח (Client Side). אם מותקן באתר תוסף אבטחה כבד שרץ רק בשרת ולא טוען שום קובץ CSS או סקריפט בדפדפן, לא נוכל לראות אותו שם. זהו כלי לזיהוי סימנים, לא לאימות מוחלט של 100% מהתוספים.

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

מדריך מעשי: כך תזהו תוספים ותבניות באמצעות F12

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

שלב 1: פתיחת כלי המפתחים וניווט ללשונית Sources

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

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

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

שלב 2: חיפוש בתיקיית Plugins

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

דוגמה: אם ראיתם תיקייה בשם elementor, אתם יודעים שהאתר בנוי עם אלמנטור. אם ראיתם contact-form-7, ברור לכם באיזה תוסף טפסים הם משתמשים.

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

שלב 3: זיהוי התבנית (Theme)

באותו אופן, תחת תיקיית wp-content, תמצאו תיקייה בשם themes. שם יופיע שם התבנית הפעילה. זה מעולה אם אתם רואים אתר עם עיצוב שאתם אוהבים ורוצים לדעת על איזה בסיס הוא נבנה – האם זה Astra, Hello Elementor או אולי תבנית מותאמת אישית (Custom Theme).

דוגמה: אתר שמשתמש בתבנית אסטרה יציג נתיב כמו /wp-content/themes/astra/.

טיפ מקצועי: חפשו את קובץ ה-style.css בתוך תיקיית התבנית, לעיתים בראש הקובץ מופיעים קרדיטים למעצבים או למפתחים.

שלב 4: שימוש בקיצור הדרך Ctrl+F לחיפוש גלובלי

לפעמים התוספים לא מופיעים בבירור בעץ התיקיות בגלל שימוש ב-CDN או קבצים חיצוניים. במקרה כזה, לחצו על Ctrl+U כדי לראות את קוד המקור המלא, ואז על Ctrl+F וחפשו מילות מפתח כמו "plugin" או "uploads".

דוגמה: אם אתם חושדים שמותקן תוסף נגישות, חפשו את המילה "accessibility" או "pojo" ותראו אם מופיעים לינקים לקבצי JS של תוספי נגישות נפוצים.

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

מתי הבדיקה הזו עלולה להטעות אתכם?

חשוב להבין שחלק מהאתרים משתמשים בטכנולוגיות "הסוואה". לדוגמה, אתרים שמשתמשים בתוספי אופטימיזציה אגרסיביים עשויים לאחד את כל קבצי ה-CSS וה-JS לקובץ אחד אנונימי. במצב כזה, בתיקיית plugins לא יופיע כלום, למרות שהאתר מלא בתוספים. זה קורה הרבה כשרוצים לשפר את ציון ה-Core Web Vitals בגוגל.

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

כלים משלימים לבדיקת טכנולוגיות

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

אם אתם רוצים לקחת את הבדיקה צעד קדימה, אתם יכולים להשתמש בתוספים כמו QuickSEO כדי להבין לא רק מה מותקן, אלא איך זה משפיע על הנראות של האתר בתוצאות החיפוש החדשות של ה-AI (GEO).

סיכום ומסקנות

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

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