כאשר בונים אתר מקצועי, חשוב לשים לב גם לפרטים הקטנים – כמו אופן פתיחת קישורים חיצוניים. חוויית משתמש טובה שומרת את הגולש באתר שלך, מבלי לנתב אותו החוצה בלי כוונה. אחת הדרכים לעשות זאת היא לוודא שכל קישור חיצוני נפתח בטאב חדש – פעולה פשוטה שיכולה למנוע נטישה ולהאריך את זמן השהייה באתר.
במדריך הזה נציג קוד PHP קצר שתוכל להוסיף לקובץ functions.php
של תבנית הוורדפרס שלך. הקוד מזהה אוטומטית כל קישור שמוביל לאתר חיצוני, ומוסיף לו את ההגדרות הדרושות כדי להיפתח בטאב חדש – ללא צורך לשנות כל קישור ידנית.
הקוד שיש לשלב ב־functions.php
phpCopyEdit// פותח קישורים חיצוניים בטאב חדש
function open_external_links_in_new_tab() {
?>
<script>
document.addEventListener("DOMContentLoaded", function () {
const links = document.querySelectorAll('a[href^="http"]');
links.forEach(link => {
if (!link.href.includes(window.location.hostname)) {
link.setAttribute("target", "_blank");
link.setAttribute("rel", "noopener noreferrer");
}
});
});
</script>
<?php
}
add_action('wp_footer', 'open_external_links_in_new_tab');
איך זה עובד?
הקוד מבצע את הפעולות הבאות:
- מאזין לטעינת הדף: מוודא שהקישורים נטענו בדפדפן.
- סורק את כל הקישורים שמתחילים ב־http.
- בודק אם הקישור שייך לדומיין אחר (כלומר קישור חיצוני).
- מוסיף את התכונה
target="_blank"
כך שהקישור ייפתח בטאב חדש. - מוסיף גם
rel="noopener noreferrer"
– לשיפור אבטחה וביצועים.
למה זה חשוב?
- שיפור חוויית המשתמש: הגולש לא עוזב את האתר שלך בלי לשים לב.
- שמירה על מעורבות באתר: הגולש ממשיך לדפדף באתר שלך תוך כדי שהוא פותח עמודים חיצוניים.
- ביצועים ואבטחה: שימוש ב־
rel="noopener noreferrer"
מונע בעיות אבטחה אפשריות והאטה בטעינה.
למי זה מתאים?
- אתרי תדמית עם הרבה הפניות לספקים, לקוחות או קישורי מדיה.
- אתרי תוכן, בלוגים ואתרי חדשות שמרבים לקשר למקורות חיצוניים.
- כל מי שרוצה שליטה מדויקת על חוויית הגלישה באתר שלו.
טיפ מקצועי לסיום
אם אתה עובד עם תבנית בת (Child Theme) – תמיד עדיף לשלב את הקוד שם כדי להימנע מאובדן שינויים בעדכונים עתידיים של התבנית הראשית.