- WordPress tags: WordPress, מדריכים
חלק מהחוליים הרעים של העיצוב ברשת נובעים מהקלות הרבה שבה אפשר להוסיף את התג img (שיבוץ של תמונה בדף). זה עוד יותר גרוע כשמדובר ב־GIF animations: תחשבו על הרשת של החצי השני של שנות התשעים. כדי לקבל מושג עד כמה זה רע, תנסו לחפש 'בית ספר' במנוע־החיפוש החביב עליכם: אתרים של בתי־ספר בדרך־כלל עושים את כל השגיאות הכי נוראיות בעיצוב, כולל כל מני חיות שמקפצות בעמוד הראשי…
אבל גראפיקה זה לא בהכרח דבר רע, ממש לא. אם לצטט את פנגולוד,
וצלילים אלו [בלשונותיהם של בני־הלילית. י.ר.] מעטים במספר. היות והאלדאר היו מוכשרים במלאכה, הם לא פעלו בבזבזנות, והעדיפו שימוש מושכל והרמוני במספר מצומצם של צלילים על בליל נטול־סדר.
האנלוגיה ברורה.
עד אתמול היו באתר הזה רק שלושה קבצי־גראפיקה שהוצגו בכל דף: הכותרת, העט, והעיניים. לא כולם אוהבים מינימאליזם, אבל מבחינתי זה בדיוק מה שמצא חן בתבנית Conestoga Street, שעליה מבוסס האתר הזה אחרי התאמה ושינויים מצטברים.
החלטתי להוסיף עוד קצת גראפיקה לאתר, אבל באופן כזה שלא יעמיס או יהיה מיותר, אלא דווקא יועיל לאסתטיקה ול־usability של האתר: להוסיף ריבוע קטן של גראפיקה יחודית לכל פוסט. בחיפוש אחר plugins ל־WordPress שיעשו את זה מצאתי כמה דברים, אבל אף אחד מהם לא היה מספק או מתאים. זה דבר מאוד מאוד פשוט, להתאים קובץ גראפיקה קטן לפוסט ולהציג אותו, אבל נראה שה־plugins הקיימים מנסים לפתור את הבעיה בדרכים מסורבלות יותר מהמינימום הנדרש. לכן, כתבתי את הפתרון בעצמי.
הדרך שבה בחרתי היא פשוטה מאוד: WordPress בודק אם יש בספריה מסויימת קובץ עם תבנית מסויימת שמתאים למספר של הפוסט (לכל פוסט או דף ב־WordPress יש מספר מזהה יחודי) — באתר הזה, נגיד, files/POSTID-icon.png — ואם כן, אז הוא מציג את הקובץ סמוך לכותרת; אחרת הוא מציג רק את הכותרת. לכן, כדי להוסיף קובץ גראפיקה לפוסט, כל מה שצריך זה לזרוק אותו לספריה המתאימה ולקרוא לו בשם עם פורמט מתאים. אם הספריה שנבחרה היא ספרית־ההעלאה הדיפולטיבית של WordPress, אפשר בקלות להעלות קובץ עם שם בפורמט המתאים מרחוק.
אז איך זה נראה בפועל? הדרך הקלה להוסיף קובץ גראפיקה לצד שורת־הכותרת של הפוסט היא ליצור טבלה בת שורה אחת ושתי עמודות כך שקובץ הגראפיקה נמצא בתא אחד, והכותרת באחר. בתוך ה־Loop, בקובץ המתאים ב־theme (לעריכה מגיעים דרך Presentation → Theme Editor במסך הקונפיגורציה), צריך להוסיף לפני הכותרת (בדרך־כלל מסומנת ב־h3, או hX אחר; הפקודה the_title מציגה אותה) קוד דומה לקוד הבא:
<?
if (file_exists('files/'.strval($wp_query->post->ID).'-icon.png')) $showThumb = TRUE;
else $showThumb = FALSE;
if ($showThumb) {
?>
<table><tr><td>
<a href="<?php the_permalink() ?>" style="text-decoration:none; border-bottom: none;"><img src="<? print('files/'.strval($wp_query->post->ID).'-icon.png'); ?>" style="border: 1px solid #ccc"/></td><td width="100%"></a>
<? } ?>
הקוד תפור לעיצוב של האתר הזה, אבל אפשר לשנות אותו בקלות. אחרי הכותרת (ש, כאמור, תחומה ב־h3), צריך להוסיף את הקוד הבא, שסוגר את הטבלה:
<? if ($showThumb) { ?>
</td></tr></table>
<? } ?>
זהו, עכשיו אפשר להוסיף בקלות תמונות קטנות לפוסטים.
זה סוג של metadatum מעניין מבחינה סמיולוגית. הוא מתייחס לטקסט ונפרד ממנו, בדומה לכותרת. בכמה מובנים זה מזכיר קלאסיפיירים מצריים, גם במידע הנוסף שניתן וגם באופי הגראפי.