Είναι το WordPress Blog σας κατάλληλο για εκτυπωτές;

Εκτύπωση CSS

Όπως ολοκλήρωσα τη χθεσινή ανάρτηση στο ROI κοινωνικών μέσων, Ήθελα να στείλω μια προεπισκόπηση του στον Διευθύνοντα Σύμβουλο της Dotster Clint Page Όταν εκτύπωσα σε PDF, η σελίδα ήταν χάος!

Εξακολουθούν να υπάρχουν πολλοί άνθρωποι που θέλουν να εκτυπώσουν αντίγραφα ενός ιστότοπου για κοινή χρήση, αναφορά αργότερα ή απλώς αρχειοθέτηση με μερικές σημειώσεις. Αποφάσισα ότι ήθελα να κάνω το blog μου φιλικό προς τον εκτυπωτή. Ήταν πολύ πιο εύκολο από ό, τι νόμιζα ότι θα ήταν.

Τρόπος εμφάνισης της εκτυπωμένης έκδοσης:

Θα πρέπει να κατανοήσετε τα βασικά του CSS για να το επιτύχετε. Το πιο δύσκολο μέρος είναι να χρησιμοποιήσετε την κονσόλα προγραμματιστή του προγράμματος περιήγησής σας για να δοκιμάσετε την εμφάνιση, την απόκρυψη και την προσαρμογή του περιεχομένου, ώστε να μπορείτε να γράψετε το CSS σας. Στο Safari, θα πρέπει να ενεργοποιήσετε τα εργαλεία προγραμματιστή, να κάνετε δεξί κλικ στη σελίδα σας και να επιλέξετε Επιθεώρηση περιεχομένου. Αυτό θα σας δείξει το σχετικό στοιχείο και το CSS.

Το Safari έχει μια ωραία μικρή επιλογή για να εμφανίσει την έντυπη έκδοση της σελίδας σας στον επιθεωρητή ιστού:

Safari - Προβολή εκτύπωσης στο Web Inspector

Πώς να κάνετε το WordPress Blog σας κατάλληλο για εκτυπωτές:

Υπάρχουν δύο διαφορετικοί τρόποι καθορισμού του στυλ σας για εκτύπωση. Το ένα είναι απλώς να προσθέσετε μια ενότητα στο τρέχον φύλλο στυλ που είναι συγκεκριμένη για τον τύπο πολυμέσων "εκτύπωση".

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

Ο άλλος τρόπος είναι να προσθέσετε ένα συγκεκριμένο φύλλο στυλ στο θέμα του παιδιού σας που καθορίζει τις επιλογές εκτύπωσης. Ιδού πώς:

  1. Ανεβάστε ένα επιπλέον φύλλο στυλ στον κατάλογο θεμάτων που ονομάζεται print.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 print.css το αρχείο μοιάζει με αυτό. Παρατηρήστε ότι πρόσθεσα επίσης περιθώρια, μια μέθοδο που έγινε αποδεκτή από τα σύγχρονα προγράμματα περιήγησης:

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

Πώς φαίνεται η προβολή εκτύπωσης

Δείτε πώς φαίνεται η προβολή εκτύπωσης εάν εκτυπώνεται από το Google Chrome:

Προβολή εκτύπωσης WordPress

Προηγμένο στυλ εκτύπωσης

Είναι σημαντικό να σημειωθεί ότι δεν δημιουργούνται όλα τα προγράμματα περιήγησης ίσα. Μπορεί να θέλετε να δοκιμάσετε κάθε πρόγραμμα περιήγησης για να δείτε πώς φαίνεται η σελίδα σας σε αυτά. Ορισμένοι υποστηρίζουν ακόμη και ορισμένες προηγμένες δυνατότητες σελίδας για προσθήκη περιεχομένου, καθορισμό περιθωρίων και μεγεθών σελίδας, καθώς και πλήθος άλλων στοιχείων. Το Smashing Magazine έχει ένα πολύ αναλυτικό άρθρο για αυτές τις σύνθετες εκτυπώσεις επιλογές.

Ακολουθούν ορισμένες λεπτομέρειες διάταξης σελίδας που ενσωμάτωσα για να προσθέσω μια αναφορά πνευματικών δικαιωμάτων κάτω αριστερά, έναν μετρητή σελίδων κάτω δεξιά και τον τίτλο εγγράφου επάνω αριστερά κάθε σελίδας:

@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 Σχόλια

  1. 1

    Ενδιαφέρον τον Ντάγκλας, απλώς έβλεπα έναν ιστότοπο που ονομάζεται PrintFriendly όταν διάβασα την ανάρτησή σας. Κάνει πολλά από αυτά για εσάς και για οποιονδήποτε άλλο ιστότοπο θέλετε να εκτυπώσετε. Πολύ γλυκό, ρίξτε μια ματιά:

    http://www.printfriendly.com

  2. 2

Ποια είναι η γνώμη σας;

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.