האם הבלוג של וורדפרס שלך ידידותי להדפסה?

הדפס CSS

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

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

כיצד להציג את גרסת ההדפסה שלך:

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

לספארי אפשרות קטנה ונחמדה להציג את גרסת ההדפסה של הדף שלך במפקח האינטרנט:

ספארי - תצוגת הדפסה במפקח האינטרנט

כיצד להפוך את הבלוג שלך ל- WordPress ידידותי להדפסה:

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

@media print {
     header, 
     nav, 
     aside { 
         display: none; 
     }
     #primary { 
         width: 100% !important 
     }
     .hidden-print, 
     .google-auto-placed, 
     .widget_eu_cookie_law_widget { 
         display: none; 
     }
}

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

  1. העלה גיליון סגנונות נוסף לספריית העיצוב שלך בשם print.css.
  2. הוסף הפניה לגיליון הסגנונות החדש שלך functions.php קוֹבֶץ. תרצה להבטיח שקובץ print.css נטען אחרי גיליון סגנונות ההורה והילד שלך, כך שהסגנונות שלו נטענים אחרון. העדפתי גם טעינה זו של 100 לטעינה זו כך שהיא תיטען לאחר התוסף. כך נראית ההתייחסות שלי:

function theme_enqueue_styles() {
    global $wp_version;
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
    wp_enqueue_style( 'child-style-print', get_stylesheet_directory_uri() . '/print.css', array(), $wp_version, 'print' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' , 100);

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

My print.css הקובץ נראה כך. שימו לב שהוספתי גם שוליים, שיטה המקובלת על הדפדפנים המודרניים:

header, 
nav, 
aside { 
    display: none; 
}
#primary { 
    width: 100% !important 
}
.hidden-print, 
.google-auto-placed, 
.widget_eu_cookie_law_widget { 
    display: none; 
}

איך נראית תצוגת ההדפסה

כך נראה תצוגת ההדפסה שלי אם היא מודפסת מ- Google Chrome:

תצוגת הדפסה של וורדפרס

עיצוב הדפסה מתקדם

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

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

@page { 
    size: 5.5in 8.5in;
    margin: 0.5in; 
}
@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "©  " attr(data-date) " DK New Media, LLC. All Rights Reserved.";
    font-size: 9pt;
    color: #333;
  }

  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }

  @top-right {
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}

תגובות 2

  1. 1
  2. 2

מה אתה חושב?

אתר זה משתמש Akismet כדי להפחית דואר זבל. למד כיצד הנתונים שלך מעובדים.