WordPress 사이트를 즉시 프린터 친화적으로 만드는 방법

귀하의 WordPress 웹사이트는 프린터 친화적입니까? 그 질문이 무엇을 얻고 있는지 모른다면, 아닐 수도 있습니다…

일부 WordPress 테마 개발자는 프린터 친화적인 콘텐츠를 지원하지만 대부분의 경우 그렇지 않습니다. 즉, 사람들이 실제로 읽을 수 있는 방식으로 콘텐츠를 인쇄할 수 있게 하려면 직접 처리해야 합니다. 바로 오늘 제가 이야기할 내용입니다.

이 게시물에서는 웹사이트를 프린터 친화적으로 만드는 방법과 CSS 또는 플러그인을 사용하여 자신의 WordPress 웹사이트를 프린터 친화적으로 만드는 방법을 배우게 됩니다.

웹사이트 프린터를 친화적으로 만드는 것은 무엇입니까?

귀하의 웹사이트에는 사람들이 귀하의 사이트 전체를 쉽게 탐색할 수 있는 수많은 요소가 있습니다. 탐색 메뉴, 내부 하이퍼링크, 사이드바 등 인터넷에서 귀하의 사이트를 방문하는 사람들에게 유용한 모든 것입니다. 새로운 정보를 찾고 다른 페이지 사이를 이동할 수 있기 때문입니다.

그러나 사이트에서 특정 콘텐츠를 인쇄할 때 이러한 요소가 방해가 됩니다. 생각해 보세요... 사람들은 탐색 메뉴를 클릭하거나 인쇄된 페이지에서 사이드바와 상호 작용할 수 없으므로 상단 탐색 메뉴를 인쇄하도록 하는 것은 종이에 있는 콘텐츠를 읽을 때 특히 도움이 되지 않습니다.

또한 웹 사이트에 사용된 글꼴 및 글꼴 크기가 인쇄된 페이지의 크기로 번역되지 않는 경우도 있습니다.

그리고 마지막으로 많은 사람들이 귀하의 콘텐츠를 흑백으로 인쇄할 것이므로(컬러 잉크는 비쌉니다!) 프린터 친화적인 콘텐츠에 더 회색조 모양을 채택하는 것은 항상 좋은 생각입니다.

이러한 이유로 웹 사이트를 프린터 친화적으로 만드는 데는 주로 다음이 포함됩니다.

• 일반 페이지 크기에서 읽기 쉽게 글꼴, 크기 및 간격 변경
• 인쇄된 페이지에 도움이 되지 않는 광고, 탐색 및 사이드바와 같은 관련 없는 요소 제거
• 흑백이 아닌 요소를 많이 사용하는 경우 색상 감소

그렇다면 실제로 어떻게 할 수 있습니까? 알아 보자…

CSS를 사용하여 웹 사이트 프린터를 친숙하게 만드는 방법

다음 섹션에서는 CSS를 파헤칠 필요 없이 사이트를 프린터 친화적으로 만드는 데 도움이 되는 몇 가지 WordPress 플러그인을 보여 드리겠습니다. 그러나 사이트의 프린터 버전이 어떻게 보이는지 완전히 제어하려면 실제로 미디어 선택기를 사용하여 페이지의 인쇄 버전 스타일을 지정할 수 있습니다.

프린터 친화적인 콘텐츠를 위한 기본 CSS 빌딩 블록은 다음과 같습니다.

 @미디어 인쇄 {
/* 프린터 고유의 스타일은 여기로 이동 */
}

이 미디어 선언에 추가하는 CSS 스타일은 페이지의 인쇄 버전 에만 영향을 미칩니다.

거기에서 어디로 가나요? 글쎄요, 많은 부분이 귀하의 특정 취향과 주제에 달려 있기 때문에 정확한 답변을 드리기 어렵습니다.

그러나 일반적으로 CSS로 하고 싶은 몇 가지 사항은 다음과 같습니다.

• display:none 을 사용하여 사이드바, 탐색 메뉴, 검색 양식 및 인쇄된 페이지에서 도움이 되지 않는 모든 요소를 ​​제거합니다.
• 읽기 쉬운 글꼴 크기를 설정합니다. Reed Design의 픽셀 포인트 차트는 픽셀이 Microsoft Word 또는 Google 문서와 같은 프린터 친화적인 프로그램에서 익숙한 글꼴 크기와 어떤 관련이 있는지 파악하는 데 도움이 됩니다.
• 대부분의 사람들이 인쇄된 페이지에서 읽기가 더 쉽기 때문에 프린터 스타일에 세리프 글꼴을 사용합니다.
• 특히 잉크가 많은 배경색을 사용하는 경우 색상을 변경합니다. 대부분의 브라우저는 많은 상황에서 기본적으로 흰색 배경을 사용합니다. 그러나 문제가 발생하면 엄청난 양의 잉크가 낭비될 수 있으므로 확인하는 것이 좋습니다.

위의 4가지 작업만 수행하면 이미 프린터 친화적인 웹사이트가 구축되어 있을 것입니다. 그러나 더 나아가고 싶다면 더 고급 전술을 구현할 수도 있습니다. 예를 들어 :after를 사용하여 링크의 URL을 인쇄할 수 있습니다. 이렇게 하면 게시물에서 불필요한 미디어(예: 비디오 – 인쇄물에는 별로 도움이 되지 않음) 등을 제거할 수 있습니다.

작동 중인 프린터 친화적인 CSS 스타일에 대한 보다 구체적인 예를 보려면 전체 예제 페이지를 거치기 때문에 Smashing Magazine에서 읽어보면 좋은 게시물입니다.

사이트를 프린터 친화적으로 만드는 몇 가지 WordPress 플러그인

CSS로 손을 더럽히지 않으려면 평소와 같이 WordPress 플러그인을 사용하여 도움을 받을 수 있습니다. 다양한 옵션이 있지만 여기에 몇 가지 권장 사항이 있습니다.

하지만 시작하기 전에 이 플러그인은 사용자가 각 플러그인에서 제공하는 전용 Print This 버튼을 클릭할 때만 작동한다는 것을 밝히고 싶습니다. 사용자가 브라우저에서 인쇄 옵션으로 바로 이동하면 사이트의 프린터 스타일에 영향을 주지 않습니다.

WP-프린트

WP-Print는 프린터 친화적인 WordPress 사이트를 만드는 데 도움이 되는 인기 있는 무료 플러그인입니다. 전용 Print This 버튼을 추가하는 것 외에도 플러그인은 사용자 친화적인 인터페이스를 제공합니다. 이것은 항상 이전 CSS 섹션에서 논의한 많은 설정을 사용자 정의할 수 있습니다.

이 플러그인이 Divi 및 Divi Builder와 어떻게 작동하는지 궁금했습니다. 그래서 어떻게 작동하는지 알아보기 위해 빠른 테스트 게시물을 설정했습니다. 내 테스트 게시물의 웹 버전은 다음과 같습니다.

다음은 해당 게시물의 프린터 친화적 버전이 어떻게 생겼는지입니다( 기억하십시오. 이미지 작동 방식을 사용자 정의할 수 있습니다. 제 예제에서는 기본값만 사용함 ).

플러그인에 대한 한 가지 특히 좋은 점은 콘텐츠 내 링크에 대한 인용을 자동으로 추가한다는 것입니다. 또한 모든 탐색 옵션을 제거합니다.

주의하세요 – "이것 인쇄" 버튼을 추가하려면 테마의 템플릿 파일을 편안하게 파헤쳐야 합니다 . 거의 복사하여 붙여넣기 작업입니다. 하지만 초보자는 다소 혼란스러울 수 있습니다.

가격: 무료 | 추가 정보

PrintFriendly에서 인쇄, PDF, 이메일

더 진행하기 전에 이 플러그인의 주요 경고를 안내하고 싶습니다. 무료 버전은 광고가 지원됩니다. 이상적이지는 않지만... 플러그인 자체는 매우 훌륭하고 광고가 특히 방해가 되지 않습니다.

그것이 딜 브레이커가 아니거나 프로로 업그레이드할 의향이 있다면 계속 읽으십시오…

PrintFriendly의 WordPress 플러그인은 PrintFriendly 서비스를 사이트에 통합합니다. 이것은 WordPress 테마의 불필요한 부분을 제거하는 것 외에도 사용자에게 인쇄된 페이지가 어떻게 보이는지 제어할 수 있는 멋진 서비스입니다.

WP-Print와 마찬가지로 플러그인은 인쇄 버튼을 제공합니다. 클릭하면 해당 버튼이 라이트박스 창을 엽니다. 여기에서 사용자는 인쇄 버전을 미리 보고 이미지 및 텍스트 크기를 조정할 수 있습니다.

WP-Print의 멋진 링크 인용 기능은 없지만 방문자에게 제공하는 제어 기능 때문에 훌륭하다고 생각합니다. 또 다른 좋은 점은 독자가 게시물을 PDF나 이메일로 쉽게 공유하거나 다운로드할 수 있다는 것입니다.

가격: 광고 지원이 포함된 무료. Pro 버전은 월 $4부터 시작합니다 | 추가 정보

정리하기

대부분의 방문자가 온라인에서 귀하의 콘텐츠를 소비하는 것은 사실이지만, 그렇다고 해서 콘텐츠를 종이에 인쇄하려는 사람들을 완전히 무시해야 하는 것은 아닙니다. 프린터 친화적인 웹사이트를 만드는 것은 일회성입니다. 그리고 일단 준비되면 방문자는 훌륭한 경험을 하면서 필요에 따라 콘텐츠를 인쇄할 수 있습니다.

이제 여러분에게 넘어갑니다. 웹사이트에서 콘텐츠를 인쇄한 적이 있습니까? 대부분의 웹사이트의 프린터 친화적인 버전에 대해 무엇을 좋아하거나 싫어합니까?

AVIcon/Shutterstock.com의 기사 축소판 이미지