Είναι το 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) " 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;
  }
}

2 Σχόλια

  1. 1

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

    http://www.printfriendly.com

  2. 2

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

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