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. 테마 디렉토리에 추가 스타일 시트를 업로드하십시오. 인쇄.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 인쇄.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) " 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;
  }
}