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

พิมพ์ CSS

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

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

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

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

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

Safari - มุมมองการพิมพ์ใน Web Inspector

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

มุมมองการพิมพ์ WordPress

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

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

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

@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

    ดักลาสที่น่าสนใจฉันเพิ่งดูไซต์ชื่อ PrintFriendly เมื่อฉันอ่านโพสต์ของคุณ มันทำสิ่งนี้ได้มากมายสำหรับคุณและไซต์อื่น ๆ ที่คุณต้องการพิมพ์ สวยหวานลองดูสิ:

    http://www.printfriendly.com

  2. 2

คุณคิดอย่างไร?

ไซต์นี้ใช้ Akismet เพื่อลดสแปม เรียนรู้วิธีการประมวลผลข้อมูลความคิดเห็นของคุณ.