אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » שליטה על הצגת התוכן המודפס מהאתר שלכם

שליטה על הצגת התוכן המודפס מהאתר שלכם

רן בר-זיק פברואר 4, 2018 7:07 am 12 תגובות

תאמינו או לא, אבל יש כאלו שרוצים להדפיס את המאמרים שאתם מפרסמים באתר – כך תקלו עליהם

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

מה הבעיה? הבעיה היא שאתרים, במיוחד אתרים מודרניים, לא בנויים להדפסה. אבל אנחנו יכולים לקבוע בקלות רבה מאוד איך האתר שלנו יראה כאשר מישהו מדפיס אותו ל-PDF. תקן CSS תומך בכך כבר שנים. אנחנו יכולים לעשות את זה באמצעות קובץ CSS ייחודי או הוספת כלל בקובץ ה-CSS הרגיל שלנו.

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

אז איך עושים את זה? איך מייצרים כללי CSS ייחודיים להדפסה?

קובץ CSS ייחודי

כל מה שעלינו לעשות זה ליצור קובץ CSS רגיל ולקשר אותו כרגיל א-ב-ל להקפיד שב-media נכתוב print. למשל:


<link rel='stylesheet' id='responsive-il-print-css'  href='https://internet-israel.com/wp-content/themes/responsive-il/print.css?ver=4.9.2' type='text/css' media='print' />

כל מה שכתוב בקובץ הזה יהיה אך ורק רלוונטי כשמדפיסים אותו: לדף נייר או ל-PDF.

בקובץ ה-CSS הרגיל

אנחנו נעטוף את הכללים שאנו רוצים שיופעלו בהדפסה ב-media query ייחודי להדפסה:


@media print {
// Print only rules
}

כל מה שבתוך הסוגריים המסולסלות (כלומר ה-media query) יופעל אך ורק בהדפסה.

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

הוספת קובץ print בוורדפרס

כיוון שבקרב עמי אני חי, אני יודע שרוב העם משתמש בוורדפרס. אם יש לכם אתר בוורדפרס, צרו את קובץ print.css בתיקיה הראשית של התבנית שלכם (או תבנית הבת שלכם). איך יוצרים את הקישור? לא, לא ב-header.php אלא תשקיעו שלוש שניות ותוסיפו כמו בן אדם את ההפניה ב-functions.php. למשל:


// Load the theme stylesheets
function theme_styles() { 
      wp_enqueue_style( 'responsive-il-print', get_stylesheet_directory_uri() . '/print.css', array(), false, 'print' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

הארגומנט האחרון של wp_enqueue_scripts הוא בעצם ה-media. מה שהארגומנט הזה עושה זה בעצם ליצור הפניה לקובץ CSS עם media=print.

דיבוג

בטח תשמחו לשמוע שלא כל הזמן צריך ללחוץ ctrl+p כדי לבחון את הדף בתצוגה מקדימה להדפסה. בכלי המפתחים של כרום ממש קל לדבג את 'מצב ההדפסה' כדי לוודא שאתם מדפיסים ומציגים את מה שאתם רוצים להדפיס ומסתירים את כל מה שרלוונטי.

בכרום:

מדריך ויזואלי להפעלת מצב הדפסה באמצעות כלי המפתחים
מדריך ויזואלי להפעלת מצב הדפסה באמצעות כלי המפתחים

לוחצים על שלוש הנקודות כדי לחשוף עוד אפשרויות -> כלים נוספים -> rendering -> ומוצאים את Emulate CSS Media. אחרי שכיוונתם ל-print אפשר לראות את העמוד כפי שהוא נראה מ'עיני' המדפסת. אפשר גם לדבג אותו כמו כל עמוד ולראות איך הוא נראה.

בפיירפוקס:
בכלי המפתחים ללחוץ shift+f2 ואז להקליד "media emulate print" זה הכל. מעכשיו, אפשר לדבג כרגיל.

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

מה שמים בקובץ הזה?

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


/* Print Styles */
body #widgets, body .main-nav, body .wp_notice_message, body .custom-html-widget, body #navigation,
body .commentlist, body #comments, body #footer, body #respond, body .breadcrumb-list, body #header_section {
    display: none;
}
#content {
    width: 100%;
}
body #wrapper {
    border: none;
}
body #container {
    max-width: initial;
}
body #content::before, body #content::after { 
    content: "מאמר זה הודפס מאתר אינטרנט ישראל internet-israel.com. כל הזכויות שמורות למחבר רן בר-זיק. הפצה של מסמך זה כחלק מקורס ו/או הדרכה הנה הפרה של זכויות יוצרים. אם נתקלתם בהפרה, אנא פנו אל [email protected]";
}

ואם אתם בצד המדפיס

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
CSS

12 תגובות

  1. חיים הגב פברואר 4, 2018 בשעה 7:43 am

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

    • רן בר-זיק הגב פברואר 4, 2018 בשעה 8:59 am

      צודק 🙂 אני אתקן (מתישהו, מבטיח).

  2. אורן צור-שביט הגב פברואר 4, 2018 בשעה 8:15 am

    יש לזה משמעות מבחינת Google rank?
    ומאמר מעניין כתמיד, תודה ?

    • רן בר-זיק הגב פברואר 4, 2018 בשעה 8:59 am

      האמת שאין לי מושג…

      • מנשה אברמוב הגב פברואר 4, 2018 בשעה 10:54 am

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

  3. איתי נתנאל הגב פברואר 4, 2018 בשעה 8:44 am

    למה להסתיר תגובות?
    יש אתרים בהם התגובות מכילות דיונים מעניינים.
    יכול להיות שאפשר להציג אותן אבל להפריד אותן לעמוד הבא עם page-break-after

    • רן בר-זיק הגב פברואר 4, 2018 בשעה 9:43 am

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

  4. איציק הגב פברואר 4, 2018 בשעה 10:06 am

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

    • רן בר-זיק הגב פברואר 4, 2018 בשעה 4:32 pm

      רעיון טוב 🙂

  5. אודי הגב פברואר 4, 2018 בשעה 3:08 pm

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

    • רן בר-זיק הגב פברואר 4, 2018 בשעה 4:33 pm

      נו באמת – תוסף וורדפרסי בשביל זה? 🙂 אודי, אל תתעצל ותכתוב כמה שורות CSS 🙂

    • אורן צור שביט הגב אוקטובר 7, 2018 בשעה 10:48 am

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

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד