קטגוריות
וורדפרס

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

פעם בכמה זמן אני מוצא את עצמי נאלץ להדפיס פוסט מבלוג כלשהו. לפעמים כי אני לוקח אותו כחומר קריאה למקום שאליו אני לא לוקח לפטופ, לפעמים כי עשיתי שינוי כזה או אחר בקבצי ההגדרות ועכשיו המחשב שלי עובד במוד טקסטואלי בלבד – כך או כך – לפעמים אני צריך להדפיס וקרוב לוודאי שאני לא היחיד.
מי שטורח להיכנס אל הבלוג שלי ולא קורא אותי רק דרך 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 פיקסלים בתצוגה. לכן, מומלץ להמיר את כל גדלי התיבות לרוחב יחסי וכך להתאים את התוכן לכל סוגי הניידים.

לדרג את הפוסט
0

10 תגובות על “התאמת הפוסט להדפסה”

לפחות עבור פיירפוקס עדיף לבצע את הCSS בקובץ נפרד בשביל לחסוך רוחב פס (כמה שנת 2000 מצידי ….) מאחר שהוא כנראה לא טוען קבצים במדיה שלא מתאימה ל"תצוגה".

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

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

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

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

לגבי הדיון על ההבדלים בין גרסאות ההדפסה, היתרון של תכונה אחת הוא גם החסרון שלה.

מתוך עניין, הדפסתי את 2 הגרסאות לקבצי PDF.

הקובץ בגרסת ההדפסה שלך

הקובץ בגרסת ההדפסה של התוסף

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

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

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

ושוב: תודה!
דותן

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

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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *