Jak sprawić, by Twoja witryna WordPress była przyjazna dla drukarki w mgnieniu oka?

Czy Twoja witryna WordPress jest przyjazna dla drukarki? Jeśli nie masz pojęcia, do czego zmierza to pytanie, może to nie być…

Podczas gdy niektórzy twórcy motywów WordPress wbudowują obsługę treści przyjaznych dla drukarki, w większości przypadków tak nie jest. A to oznacza, że ​​jeśli chcesz, aby ludzie mogli drukować Twoje treści w sposób, który jest rzeczywiście czytelny, musisz wziąć sprawy w swoje ręce… o czym będę dzisiaj mówił.

W tym poście dowiesz się, co sprawia, że ​​strona internetowa jest przyjazna dla drukarki, a także jak możesz stworzyć własną witrynę WordPress przyjazną dla drukarki za pomocą CSS lub wtyczki.

Co sprawia, że ​​strona internetowa jest przyjazna dla drukarki?

Twoja witryna zawiera mnóstwo elementów, które ułatwiają użytkownikom przeglądanie całej witryny. Menu nawigacyjne, wewnętrzne hiperłącza, paski boczne… wszystko to jest dobre dla osób odwiedzających Twoją witrynę w Internecie, ponieważ umożliwia im znajdowanie nowych informacji i poruszanie się między różnymi stronami.

Ale jeśli chodzi o drukowanie określonego fragmentu treści z Twojej witryny, te elementy po prostu przeszkadzają. Pomyśl o tym… ludzie nie mogą kliknąć menu nawigacyjnego ani wchodzić w interakcje z paskiem bocznym na drukowanej stronie, więc wydrukowanie górnego menu nawigacyjnego nie jest szczególnie pomocne, gdy czytają treść na kartce papieru.

Ponadto czasami czcionki i rozmiar czcionki używane w Twojej witrynie nie przekładają się również na wymiary drukowanej strony.

I wreszcie, wiele osób będzie drukować Twoje treści w czerni i bieli (a kolorowy atrament jest drogi!), więc przyjęcie bardziej szarego wyglądu dla treści przyjaznych dla drukarki jest zawsze dobrym pomysłem.

Z tego powodu, aby Twoja witryna była przyjazna dla drukarki, obejmuje głównie:

• Zmiana czcionek, rozmiaru i odstępów, aby ułatwić czytanie na normalnym rozmiarze strony
• Usuwanie zbędnych elementów, takich jak reklamy, nawigacja i paski boczne, które nie są przydatne na drukowanej stronie
• Wytłumienie kolorów, jeśli użyjesz wielu elementów innych niż czarno-białe

Jak więc możesz to zrobić? Dowiedzmy Się…

Jak sprawić, by Twoja witryna była przyjazna dla drukarki dzięki CSS?

W następnej sekcji pokażę kilka wtyczek WordPress, które pomogą Ci uczynić Twoją witrynę przyjazną dla drukarki bez konieczności zagłębiania się w CSS. Jeśli jednak chcesz mieć pełną kontrolę nad wyglądem wersji drukowanej witryny, możesz użyć selektorów multimediów, aby nadać styl drukowanej wersji strony.

Podstawowy blok konstrukcyjny CSS dla treści przyjaznych dla drukarki jest następujący:

 @drukowanie mediów {
/* Tutaj znajdziesz style specyficzne dla drukarki */
}

Wszelkie style CSS dodane do tej deklaracji mediów będą miały wpływ tylko na wydrukowaną wersję strony.

Skąd idziesz stamtąd? Cóż, trudno jest podać dokładną odpowiedź, ponieważ wiele z nich zależy od twoich konkretnych preferencji i motywu.

Ale ogólnie rzecz biorąc, oto kilka rzeczy, które będziesz chciał zrobić z CSS:

• Użyj display:none, aby usunąć elementy, takie jak paski boczne, menu nawigacyjne, formularze wyszukiwania i wszystko, co nie jest pomocne na wydrukowanej stronie.
• Ustaw czytelny rozmiar czcionki. Wykres Points to Pixels firmy Reed Design jest pomocny w ustaleniu, w jaki sposób piksele odnoszą się do rozmiarów czcionek, które znasz w bardziej przyjaznych dla drukarki programach, takich jak Microsoft Word lub Google Docs.
• Użyj czcionki szeryfowej dla stylów drukarki, ponieważ większość ludzi łatwiej czyta na wydrukowanej stronie.
• Zmień kolory, zwłaszcza jeśli używasz koloru tła z dużą ilością atramentu. Większość przeglądarek w wielu sytuacjach domyślnie używa białego tła – ale warto się upewnić, ponieważ każdy problem może oznaczać mnóstwo zmarnowanego atramentu.

Wykonując tylko cztery powyższe czynności, powinieneś już mieć dość przyjazną dla drukarki stronę internetową. Ale jeśli chcesz pójść jeszcze dalej, możesz również zastosować bardziej zaawansowaną taktykę. Na przykład możesz użyć :after, aby wydrukować adres URL dowolnego łącza. Usuwa to niepotrzebne media z postów (takich jak filmy – niezbyt przydatne w druku) i nie tylko.

Jeśli potrzebujesz bardziej szczegółowych przykładów stylów CSS przyjaznych dla drukarki w akcji, dobrym postem do przeczytania jest ten ze Smashing Magazine, ponieważ przechodzą one przez całą przykładową stronę.

Niektóre wtyczki WordPress, dzięki którym Twoja witryna jest przyjazna dla drukarki

Jeśli wolisz nie brudzić sobie rąk CSS, możesz, jak zwykle, zwrócić się o pomoc do wtyczki WordPress. Masz wiele różnych opcji, ale oto kilka zaleceń.

Zanim jednak zacznę, chcę zaznaczyć, że te wtyczki działają tylko wtedy, gdy użytkownicy klikają dedykowany przycisk Drukuj to , który jest dostępny w każdej wtyczce. Nie wpłyną one na styl drukarki w Twojej witrynie, jeśli użytkownik przejdzie bezpośrednio do opcji drukowania w swojej przeglądarce.

WP-Drukuj

WP-Print to popularna darmowa wtyczka, która pomoże Ci stworzyć przyjazną dla drukarki witrynę WordPress. Oprócz dodania dedykowanego przycisku Print This , wtyczka zapewnia również przyjazny dla użytkownika interfejs. To zawsze możesz dostosować wiele ustawień, które omówiłem w poprzedniej sekcji CSS.

Byłem ciekawy, jak ta wtyczka działa z Divi i Divi Builder. Tak więc przygotowałem szybki post testowy, aby zobaczyć, jak to działa. Oto jak wygląda internetowa wersja mojego posta testowego:

A oto jak wygląda wersja tego posta przyjazna dla drukarki ( pamiętaj – możesz dostosować sposób działania obrazów – mój przykład używa tylko wartości domyślnych ):

Szczególnie fajną rzeczą we wtyczce jest to, że automatycznie dodaje cytaty z linków w treści. Usuwa również wszystkie opcje nawigacji.

Pamiętaj tylko, że musisz się swobodnie przekopywać do plików szablonu swojego motywu, aby dodać przycisk „Drukuj to” . To w zasadzie tylko zadanie kopiowania i wklejania – ale początkujący mogą uznać to za nieco mylące.

Cena: za darmo | Więcej informacji

Drukuj, PDF, e-mail przez PrintFriendly

Zanim przejdę dalej, chcę przedstawić główne zastrzeżenie tej wtyczki – darmowa wersja jest wspierana reklamami. Nie idealne… ale sama wtyczka jest całkiem fajna, a reklamy nie są specjalnie nachalne.

Jeśli to nie jest przełom lub jeśli chcesz przejść na wersję pro, czytaj dalej…

Wtyczka PrintFriendly WordPress integruje usługę PrintFriendly z Twoją witryną. Jest to fajna usługa, która oprócz usuwania obcych części motywu WordPress daje również użytkownikom pewną kontrolę nad wyglądem ich wydrukowanej strony.

Podobnie jak WP-Print, wtyczka daje przycisk drukowania. Po kliknięciu ten przycisk otwiera okno lightbox. W tym miejscu użytkownicy mogą wyświetlić podgląd wersji drukowanej, a także dostosować rozmiar obrazu i tekstu:

Nie ma fajnej funkcji cytowania linków z WP-Print, ale myślę, że jest świetna ze względu na kontrolę, jaką oferuje odwiedzającym. Kolejną fajną rzeczą jest to, że ułatwia to czytelnikom udostępnianie lub pobieranie postów w formacie PDF lub e-mail.

Cena: bezpłatnie z obsługą reklam. Wersja Pro zaczyna się od 4 USD miesięcznie | Więcej informacji

Zawijanie rzeczy

Chociaż prawdą jest, że większość odwiedzających będzie konsumować Twoje treści online, nie oznacza to, że powinieneś całkowicie ignorować ludzi, którzy chcą wydrukować Twoje treści na papierze. Stworzenie strony internetowej przyjaznej drukarce to sprawa jednorazowa. A gdy już to zrobisz, odwiedzający mogą w razie potrzeby wydrukować Twoje treści, zachowując przy tym wspaniałe wrażenia.

Teraz do Ciebie – czy kiedykolwiek drukujesz treści ze strony internetowej? Co Ci się podoba i/lub nie podoba w większości stron internetowych w wersjach do druku?

Obraz miniatury artykułu autorstwa AVIcon / shutterstock.com