บล็อก WordPress ของคุณเป็นมิตรกับเครื่องพิมพ์หรือไม่?

เมื่อฉันโพสต์เมื่อวานนี้เมื่อ ROI ของโซเชียลมีเดียฉันต้องการส่งภาพตัวอย่างไปยัง Dotster CEO Clint Page เมื่อพิมพ์เป็น PDF แต่หน้าก็เละ!

ยังมีคนจำนวนมากที่ชอบพิมพ์สำเนาของเว็บไซต์เพื่อแชร์อ้างอิงในภายหลังหรือเพียงแค่ยื่นบันทึกบางส่วน ฉันตัดสินใจว่าต้องการทำให้บล็อกเป็นมิตรกับเครื่องพิมพ์ มันง่ายกว่าที่ฉันคิดไว้มาก

วิธีแสดงเวอร์ชันพิมพ์ของคุณ:

คุณจะต้องเข้าใจพื้นฐานของ CSS ก่อนจึงจะสำเร็จ ส่วนที่ยากที่สุดคือการใช้คอนโซลนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์เพื่อทดสอบการแสดง การซ่อน และการปรับเนื้อหาเพื่อให้คุณสามารถเขียน CSS ได้ ใน Safari คุณจะต้องเปิดใช้งานเครื่องมือสำหรับนักพัฒนา คลิกขวาที่หน้าของคุณ และเลือกตรวจสอบเนื้อหา ที่จะแสดงให้คุณเห็นองค์ประกอบและ CSS ที่เกี่ยวข้อง

Safari มีตัวเลือกเล็ก ๆ น้อย ๆ ที่ดีในการแสดงเวอร์ชันพิมพ์ของหน้าของคุณในตัวตรวจสอบเว็บ:

วิธีสร้างบล็อก 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:

สไตล์การพิมพ์ขั้นสูง

สิ่งสำคัญคือต้องสังเกตว่าเบราว์เซอร์บางตัวไม่ได้ถูกสร้างขึ้นมาเท่ากัน คุณอาจต้องการทดสอบแต่ละเบราว์เซอร์เพื่อดูว่าหน้าเว็บของคุณมีลักษณะอย่างไร บางตัวรองรับคุณสมบัติขั้นสูงของหน้าเพื่อเพิ่มเนื้อหา กำหนดระยะขอบและขนาดหน้า ตลอดจนองค์ประกอบอื่นๆ จำนวนหนึ่ง Smashing Magazine มีมาก บทความโดยละเอียดเกี่ยวกับการพิมพ์ขั้นสูงเหล่านี้ ตัวเลือก

ต่อไปนี้คือรายละเอียดเค้าโครงหน้าบางส่วนที่ฉันรวมไว้เพื่อเพิ่มการกล่าวถึงลิขสิทธิ์ที่ด้านล่างซ้าย ตัวนับหน้าที่ด้านล่างขวา และชื่อเอกสารที่ด้านบนซ้ายของทุกหน้า:

@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) " Highbridge, 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;
  }
}