Share
Het toevoegen van een print stylesheet aan uw Wordpress-site is een verstandige zet. De omgeving zal je bedanken voor het toepassen van dit artikel op je website. Het is zo'n eenvoudige functie om te implementeren en de meeste mensen zien het gewoon over het hoofd. Ik zal u laten zien hoe eenvoudig het is om een eenvoudige afdrukstijl toe te voegen aan uw Wordpress-site. Ik ga je een goede basis geven die je direct op je site kunt gebruiken en laat je een paar tips zien zodat je hem naar een hoger niveau kunt tillen.
U moet het header.php-bestand van uw thema bijwerken om het te laten weten dat de stylesheet die we zullen updaten ook voor afdrukken zal worden gebruikt. Open header.php, zoek naar:
We moeten het media-attribuut bijwerken met afdrukken. Scherm vertelt de browser "Dit is het stylesheet dat u moet gebruiken om te weten hoe de elementen in de browser worden weergegeven". We moeten het zeggen "U kunt dit stylesheet ook gebruiken wanneer de gebruiker aan het afdrukken is". Dus nu ziet het er als volgt uit:
Open vervolgens uw stylesheet, style.css. Voeg aan het einde van het document:
@import "print.css";
Het is belangrijk dat de code onder aan het stylesheet staat om er zeker van te zijn dat uw schermstijlen geen stijlen overnemen die we gebruiken voor het afdrukken en zodat de afdrukstijlen niet worden overschreven met de stijlen van uw site. Maak daarna een bestand in dezelfde map met de naam print.css. Dit is waar we al onze stijl voor afdrukken zullen toevoegen.
Hieronder staat een aangepaste versie van de afdrukstijl voor Wordpress 'Standaardthema "TwentyTen". Veel websites delen dezelfde elementen, dus het is niet nodig om het wiel opnieuw uit te vinden door er een te ontwikkelen. Wat ik ga doen is de belangrijkste elementen opsplitsen, zodat je weet waarom ze zijn opgenomen en op welke stijlen je moet letten om het toe te voegen aan je eigen aangepaste elementen.
@media print body background: #fff none! important; kleur: # 000; #wrapper duidelijk: beide! belangrijk; display: block! belangrijk; zweven: geen! belangrijk; positie: relatief! belangrijk; #header border-bottom: 2pt solid # 000; padding-bottom: 18pt; #colophon border-top: 2pt solid # 000; # sitetitel, # site-beschrijving float: none; regelhoogte: 1,4em; marge: 0; opvulling: 0; # sitetitel font-size: 13pt; .entry-content font-size: 14pt; regelhoogte: 1,6em; .entry-title font-size: 21pt; #access, #branding img, #respond, .comment-edit-link, .edit-link, .navigation, .page-link, .widget-area display: none! important; #container, #header, #footer margin: 0; breedte: 100%; #content, .one-column #content margin: 24pt 0 0; breedte: 100%; .wp-caption p font-size: 11pt; # site-info, # site-generator float: none; breedte: auto; #colophon width: auto; img # wpstats display: none; # site-generator a marge: 0; opvulling: 0; # entry-auteur-info border: 1px solid # e7e7e7; #main display: inline; .home .sticky border: none;
Eerst zou je moeten opmerken hoe al je printstijlen erin verpakt zijn:
@media print
Alle objecten die overeenkomen met de afdrukfunctionaliteit zijn opgemaakt tussen deze haakjes. Als u een stijl toevoegt, zorg dan dat deze tussen deze haakjes staat. Als het buiten is, weet CSS niet beter en neemt het aan dat het deel uitmaakt van de schermmedia.
body background: #fff none! important; kleur: # 000;
Dit is een van de belangrijkste elementen voor het maken van een afdrukstijl. Normaal gesproken moet elke afdrukvriendelijke achtergrond geen achtergrond hebben en moet alle kleuren zwart en wit zijn.
#wrapper clear: both! important; display: block! belangrijk; zweven: geen! belangrijk; positie: relatief! belangrijk;
Dit zijn basisstijlen die ervoor zorgen dat alles op de voorgrond staat. Als u dit wist, zorgt u ervoor dat alles in #wrapper onder het vorige element valt en dat alles na het wrapper achter de wrapper valt, zodat de dingen niet naast elkaar worden geschoven. Het mag geen drijfvermogen hebben en de positie moet relatief blijven. Wat dit zal doen is ervoor zorgen dat de inhoud van links naar rechts wordt gelezen en dat er geen objecten elkaar overlappen; het zal een vloeiend document zijn.
#header border-bottom: 2pt solid # 000; padding-bottom: 18pt;
U zult enkele eigenschappen opmerken die het element in het gehele print stylesheet in model brengen. Deze zijn absoluut acceptabel. Vaak scheidt kleur elementen in een ontwerp. Omdat alles in zwart en wit is, is het moeilijk om dat te doen. Dingen als het toevoegen van een zwarte rand aan de onderkant van een element en het toevoegen van wat ruimte eronder, helpen om ze duidelijk van elkaar te scheiden.
.entry-content font-size: 14pt; regelhoogte: 1,6em; .entry-title font-size: 21pt;
Het is een goed idee om rekening te houden met de tekstgrootte van de inhoud die u afdrukt. De grootte die je op het scherm ziet in vergelijking met wat ogen kunnen lezen, is heel anders. Overweeg een kleinere lettergrootte, 14 pt is genoeg dat ik voel. Ik mag overwegen om zelfs kleiner te worden dan dat. Een lijnhoogte hebben die de inhoud helpt stromen, is ook erg nuttig. Zorg ervoor dat er wat ruimte tussen uw lijnen overblijft, zodat de afgedrukte tekst niet onleesbaar is. Als u titels een grotere lettergrootte geeft, kunt u ze beter onderscheiden van de inhoud.
#access, #branding img, #respond, .comment-edit-link, .edit-link, .navigation, .page-link, .widget-area display: none! important;
Dit is een van de meest gebruikte elementattributen. 'display: none' zal het element volledig verbergen. De afgedrukte pagina zal het behandelen alsof het er in het begin niet eens was, dus als je al je afbeeldingen verbergt, zal het geen lege plek tonen waar ze normaal zouden zijn; het element wordt volledig verwijderd van de lay-out en de volgende beschikbare inhoud wordt gerenderd. Ik gebruik dit vaak om onnodige elementen op te nemen in mijn afdrukachtige afbeeldingen, navigatie en zijbalken.
#container, #header, #footer margin: 0; breedte: 100%;
Dit element zorgt ervoor dat al uw elementen die de inhoud van de pagina omwikkelen een breedte van 100% hebben, zodat ze de volledige beschikbare marge op het afgedrukte document in beslag nemen. Soms stellen ontwerpers een breedte in van 900 px of de vind-ik-leuk daar van, waardoor alleen afdrukken mogelijk is in een gebied van 900 px.
#content, .one-column #content margin: 24pt 0 0; breedte: 100%;
In het scherm stylesheet zou dit het linkerdeel van de inhoud zijn. Het zou een zijbalk aan de rechterkant hebben. U zult nu merken dat het niet langer een breedte heeft die beperkt is tot die ruimte, het zal de volledige beschikbare marge op het afgedrukte document in beslag nemen. Het heeft een breedte van 100% en de zijbalk kan er niet meer naast passen. In feite zou de zijbalk een weergave moeten hebben: geen ergens in het afdrukstijlblad. Er is ook een margeattribuut dat het scheidt van de inhoud er omheen zodat het opvalt.
img # wpstats display: none;
Dit is een goed voorbeeld van het verbergen van afbeeldingen met de ID van "wpstats". U kunt uw eigen klasse genaamd hideInPrint maken om toe te voegen aan afbeeldingen die u wilt verwijderen tijdens het afdrukken. De code daarvoor zou er als volgt uitzien:
img.hideInPrint display: none;
Dit artikel is slechts een fundament - u kunt hier uiteraard uw eigen unieke merkstijlen aan toevoegen om een aangepaste printstijl te creëren. Hier hebben we u de elementen getoond die u in gedachten moet houden bij het implementeren van een afdrukstijlblad in uw eigen project; De rest van de styling is aan jou in je eigen project! Het kennen van de gedachte achter "waarom" bepaalde attributen werden gebruikt, zal u helpen inzicht te krijgen in wat uw project nodig heeft.
Accentsconagua