Blog WordPress của bạn có thân thiện với máy in không?

In CSS

Như tôi đã hoàn thành bài đăng ngày hôm qua trên ROI trên mạng xã hội, Tôi muốn gửi bản xem trước của nó cho Clint Page, CEO của Dotster. Tuy nhiên, khi tôi in ra PDF, trang này rất lộn xộn!

Vẫn còn nhiều người thích in ra các bản sao của một trang web để chia sẻ, tham khảo sau này hoặc chỉ tập tin với một số ghi chú. Tôi quyết định muốn làm cho blog của mình thân thiện với máy in. Nó dễ dàng hơn nhiều so với tôi nghĩ.

Cách Hiển thị Phiên bản In của Bạn:

Bạn sẽ cần hiểu những điều cơ bản về CSS để thực hiện điều này. Phần khó nhất là sử dụng bảng điều khiển dành cho nhà phát triển của trình duyệt của bạn để kiểm tra hiển thị, ẩn và điều chỉnh nội dung để bạn có thể viết CSS của mình. Trong Safari, bạn cần bật các công cụ dành cho nhà phát triển, nhấp chuột phải vào trang của bạn và chọn Kiểm tra nội dung. Điều đó sẽ hiển thị cho bạn phần tử và CSS được liên kết.

Safari có một tùy chọn nhỏ rất hay để hiển thị phiên bản in của trang của bạn trong trình kiểm tra web:

Safari - Chế độ xem bản in trong Trình kiểm tra web

Cách làm cho blog WordPress của bạn thân thiện với máy in:

Có một số cách khác nhau để chỉ định kiểu in của bạn. Một là chỉ thêm một phần trong biểu định kiểu hiện tại của bạn dành riêng cho loại phương tiện “in”.

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

Cách khác là thêm một biểu định kiểu cụ thể vào chủ đề con của bạn để chỉ định các tùy chọn in. Đây là cách thực hiện:

  1. Tải lên một biểu định kiểu bổ sung vào thư mục chủ đề của bạn có tên print.css.
  2. Thêm tham chiếu đến biểu định kiểu mới trong functions.php tập tin. Bạn sẽ muốn đảm bảo tệp print.css của mình được tải sau biểu định kiểu mẹ và con của bạn để các kiểu của nó được tải sau cùng. Tôi cũng đặt ưu tiên 100 cho lần tải này để nó tải sau khi plugin Đây là phần tham chiếu của tôi trông như thế nào:

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);

Giờ đây, bạn có thể tùy chỉnh tệp print.css và sửa đổi tất cả các phần tử mà bạn muốn ẩn hoặc hiển thị theo cách khác. Ví dụ: trong trang web của tôi, tôi ẩn tất cả điều hướng, tiêu đề, thanh bên và chân trang để chỉ nội dung tôi muốn hiển thị mới được in.

My print.css tệp trông như thế này. Lưu ý rằng tôi cũng đã thêm lề, một phương pháp được các trình duyệt hiện đại chấp nhận:

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

Chế độ xem bản in trông như thế nào

Đây là giao diện của chế độ xem in của tôi nếu được in từ Google Chrome:

Chế độ xem in WordPress

Tạo kiểu in nâng cao

Điều quan trọng cần lưu ý là không phải tất cả các trình duyệt đều được tạo ra như nhau. Bạn có thể muốn kiểm tra từng trình duyệt để xem trang của bạn trông như thế nào trên chúng. Một số thậm chí còn hỗ trợ một số tính năng trang nâng cao để thêm nội dung, đặt lề và kích thước trang, cũng như một số yếu tố khác. Tạp chí Smashing có rất bài viết chi tiết về những bản in nâng cao này tùy chọn.

Dưới đây là một số chi tiết bố cục trang mà tôi đã kết hợp để thêm đề cập đến bản quyền ở phía dưới bên trái, bộ đếm trang ở phía dưới bên phải và tiêu đề tài liệu ở phía trên bên trái của mỗi trang:

@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;
  }
}

2 Comments

  1. 1
  2. 2

Bạn nghĩ gì?

Trang web này sử dụng Akismet để giảm spam. Tìm hiểu cách xử lý dữ liệu nhận xét của bạn.