התאמת הפוסט להדפסה

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

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

שלב ראשון: מציאת המבנה

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

שלב שני: עריכת CSS

ראשית, יש לפתוח את קובץ ה CSS של הערכה (הקובץ style.css) לגלול אל תחתיתו ולהוסיף בו את השורות הללו:

@media print {
}

יצרנו למעשה תת מחלקה בקובץ ה CSS שאומרת לדפדפן כיצד להתנהג כשאנחנו רוצים להדפיס את העמוד. משלד ה Xhtml אפשר לראות יחסית בקלות שאיזור הפוסט נמצא תחת content וזהו למעשה האיזור היחיד שאנחנו רוצים להדפיס, כל השאר – ההדר, ברי הניווט או הפוטר מיותרים לחלוטין. לכן, כל אובייקט שאנחנו לא רוצים שיוצג נשתמש עבורו ב display:none. זה גם הזמן לשחק עם הקרע, צבעי הפונטים ורוחב העמודה על מנת לוודא שהתוכן יודפס למלוא רוחב העמוד.

כך זה יכול להראות בסוף:

@media print {
#body { background:white; color:black; margin:0;  direction:rtl; }
#page
#header {display:none }
#navbar {display:none }
#sidebar {display:none }
#content {width: 100%}	
#respond {display:none }
#footer {display:none }
}

אפשר לראות שבשורה 7 שיניתי את רוחב העמודה ל 100% ולא קבעתי מספר פיקסלים סופי, זה נעשה על מנת להבטיח התאמה מלאה לרוחב העמוד ללא קשר לרוחב הדף עליו מדפיס המשתמש.

שלב שלישי: אקטיבציה

כל שיש לעשות עכשיו זה לרענן את קריאת ה CSS כך שיודיע לדפדפן להתיחס לקובץ גם במקרה של הדפסה, חפשו בקוד המקור שלכם (קרוב לוודאי בקובץ header.php) את השורה הזו:

ושנו אותה כדי שתראה כך:

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

מה הלאה

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

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