Czy Twój blog WordPress można drukować?

Drukuj CSS

Jak skończyłem wczorajszy post na Zwrot z inwestycji w media społecznościowe, Chciałem wysłać podgląd do prezesa Dotster Clinta Page'a. Jednak kiedy wydrukowałem do pliku PDF, na stronie był bałagan!

Wciąż jest wielu ludzi, którzy lubią drukować kopie stron internetowych, aby je udostępnić, odwołać się później lub po prostu złożyć notatki. Zdecydowałem, że chcę, aby mój blog był przyjazny dla drukarki. To było o wiele łatwiejsze niż myślałem.

Jak wyświetlić wersję do druku:

Aby to osiągnąć, musisz zrozumieć podstawy CSS. Najtrudniejszą częścią jest użycie konsoli programisty przeglądarki do przetestowania wyświetlania, ukrywania i dostosowywania treści, abyś mógł napisać CSS. W przeglądarce Safari musisz włączyć narzędzia programistyczne, kliknąć stronę prawym przyciskiem myszy i wybrać opcję Sprawdź zawartość. Spowoduje to wyświetlenie skojarzonego elementu i CSS.

Safari ma fajną małą opcję wyświetlania wersji wydruku strony w inspektorze sieci:

Safari - widok wydruku w Inspektorze sieci

Jak dostosować swój blog WordPress do druku:

Istnieje kilka różnych sposobów określania stylizacji do druku. Jednym z nich jest po prostu dodanie sekcji w aktualnym arkuszu stylów, która jest właściwa dla typu mediów „drukuj”.

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

Innym sposobem jest dodanie określonego arkusza stylów do motywu potomnego, który określa opcje drukowania. Oto jak:

  1. Prześlij dodatkowy arkusz stylów do katalogu z motywami o nazwie print.css.
  2. Dodaj odniesienie do nowego arkusza stylów w pliku functions.php plik. Będziesz chciał upewnić się, że twój plik print.css jest ładowany po twoim nadrzędnym i podrzędnym arkuszu stylów, aby jego style były ładowane jako ostatnie. Położyłem również priorytet 100 na to ładowanie, aby ładowało się po wtyczce Oto jak wygląda moja referencja:

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

Teraz możesz dostosować plik print.css i zmodyfikować wszystkie elementy, które chcesz ukryć lub wyświetlić w inny sposób. Na przykład w mojej witrynie ukrywam całą nawigację, nagłówki, paski boczne i stopki, aby drukowana była tylko treść, którą chcę wyświetlić.

My print.css plik wygląda następująco. Zauważ, że dodałem również marginesy, metodę akceptowaną przez nowoczesne przeglądarki:

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

Jak wygląda widok wydruku

Oto jak wygląda mój widok wydruku po wydrukowaniu z przeglądarki Google Chrome:

Widok wydruku WordPress

Zaawansowana stylizacja druku

Należy pamiętać, że nie wszystkie przeglądarki są sobie równe. Możesz przetestować każdą przeglądarkę, aby zobaczyć, jak wygląda w nich Twoja strona. Niektóre obsługują nawet niektóre zaawansowane funkcje strony, umożliwiające dodawanie treści, ustawianie marginesów i rozmiarów stron, a także szereg innych elementów. Smashing Magazine ma bardzo szczegółowy artykuł na temat tych zaawansowanych wydruków Opcje.

Oto kilka szczegółów układu strony, które umieściłem, aby dodać wzmiankę o prawach autorskich w lewym dolnym rogu, licznik stron w prawym dolnym rogu i tytuł dokumentu w lewym górnym rogu każdej strony:

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

Komentarze 2

  1. 1
  2. 2

Co o tym myślisz?

Ta strona używa Akismet do redukcji spamu. Dowiedz się, jak przetwarzane są dane komentarza.