תוֹכֶן
- צריך ידע: PHP בסיסי ו- CSS
- דורש: התקנת וורדפרס, עורך טקסט לבחירה
- זמן הפרויקט: 10 דקות
אם תירשם כמנוי לגרסת הדפוס של מגזין .net (אם לא, למה לא !?), תראה שבגיליון החודש מאמר מצוין בנושא "עיצוב רספונסיבי עם וורדפרס".
במאמר, המחבר ג'סי פרידמן מתאר עומס של טכניקות שימושיות באמת למיצוי הפונקציונליות הטמונה בוורדפרס ולהתגבר על מנת לייצר אתר רספונסיבי יעיל באמת. אם אתה חושב לייצר אתר רספונסיבי עם וורדפרס, אתה בהחלט צריך לקחת עותק של המאמר שלו. זה חובה לקרוא.
לאחר שבניתי לאחרונה את הבלוג האישי שלי בוורדפרס באמצעות גישה תגובה ניידת ראשונה, הכרתי כמה מהטכניקות שנסקרו במאמר. עם זאת, הפריט היחיד שבאמת בלט מבחינתי היה גישתו של ג'סי לאפשר תמונות נזילות באמצעות jQuery.
הבעיה עם וורדפרס ו"תמונות נזילות "
מכיוון שאני בטוח שכולכם מודעים ל'תמונות נוזליות '- המשתמשות ברוחב מקסימלי: 100% - דורשות כי לתמונות אין רוחב או גובה קבועים על מנת שיוכלו להתאים את גודל המכולה שלהן. לרוע המזל, וורדפרס מחשבת אוטומטית את ממדי התמונות שנוצרו מספריית המדיה ומוסיפה את מאפייני הרוחב והגובה המתאימים לכל תגיות img>.
זה נהדר למהירות עיבוד העמודים אבל זה זורק a מַסִיבִי ברגים בעבודה כשמדובר ביצירת פריסות רספונסיביות מכיוון שממדי התמונה כבר אינם מוגבלים לגודל המכולה שלהם.
זו בעיה.
הפתרון שאינו jQuery
במאמרו ג'סי מציע להשתמש ב- jQuery כדי להסיר את מאפייני הרוחב והגובה מכל תגיות img> בדף לאחר שהוא נטען. זה בהחלט עובד אבל בבניית האתר שלי לא אהבתי את הרעיון להסתמך על JavaScript כדי להשיג זאת, במיוחד אם היו הרבה תמונות בעמוד המדובר.
כאן נחלצו מסנני וורדפרס.
קודקס וורדפרס מגדיר מסנן כ:
"... ווים שוורדפרס משיקה כדי לשנות טקסט מסוגים שונים לפני שהוא מוסיף אותו למסד הנתונים או שולח אותו למסך הדפדפן."
כפי שמתברר זה בדיוק מה שאנחנו צריכים. על ידי הגדרת מסנן שיופעל על כל התמונות כפעולה הסופית לפני שהן מוצגות בדף, אנו יכולים להשתמש ב- PHP כדי להסיר את מאפייני הרוחב והגובה ובכך לעקוף את הצורך במניפולציה DOM יקרה (שעלולה להיות) באמצעות JavaScript.
הקוד
- /**
- * פונקציות תמונה מגיבות
- */
- add_filter ('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);
- add_filter ('image_send_to_editor', 'remove_thumbnail_dimensions', 10);
- פונקציה remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (רוחב
בקוד שלמעלה אנו מוסיפים שני פילטרים באמצעות פונקציית add_filter. הטיעון הראשון הוא המסנן שאנו רוצים להתחבר אליו והשני מציין את הפונקציה שאנו רוצים להפעיל כאשר קוראים למסנן.
בקוד שלנו אנו מתחברים לשתי פונקציות לא ברורות:
- post_thumbnail_html - תמונות שאוחזרו עם פוסט תמונה ממוזערת ()
- תמונה_שלוח_ לעורך - תמונות שנוספו לעורך
לאחר מכן אנו משתמשים בביטוי רגולרי כדי להסיר את תכונות הרוחב והגובה מתגי התמונה. כעת, כאשר התמונות שלנו נשלחות לדפדפן, הן יכולות להיות 'נזילות' לחלוטין, בדיוק כמו שמר מרקוט אמר לנו שהן צריכות.
וידוי
אני חייב להתוודות שהיה לי רעיון להשתמש תוסף_פילטר כדי להסיר תכונות שלא יכולתי לכל החיים לאתר את מסנני הוורדפרס הנכונים להתחבר אליהם.
לאחר חיפושים רבים נתקלתי סוף סוף בפוסט מועיל מאוד זה ב- Wordpress Stack Exchange של נתנאל טאנטור אשר סיפק את המידע על שני המסננים הדרושים לי.
אזהרות
ככל הידוע לי החיסרון העיקרי היחיד בגישה זו הוא שהוא אינו מסיר את מאפייני הרוחב והגובה מכל התמונות באתר שלך. מצאתי שזו בעיה, במיוחד עם התמונות של Gravatar בוורדפרס משתמש בתגובות.
אם למישהו יש פיתרון לבעיה זו אנא השאירו תגובה כדי שכולנו נהנים מכך.
אני מקווה שזה היה שימושי והדגים אלטרנטיבה להסתמך על JavaScript כדי להטמיע "תמונות נזילות" באתרי וורדפרס.
מילים: דייויד סמית '
דייב סמית 'הוא מעצב חזית שממוקם בסמוך לעיר היפה באת', בריטניה. כאשר הוא לא עובד על פרויקטים חדשים ומרתקים ברשת ניתן למצוא אותו מנגן בחצוצרה בכל דבר, החל מקבוצות ג'אז של ביג בנד וכלה בתזמורות סימפוניות. אתה יכול להתעדכן בדייב בטוויטר בשם @get_dave.
