WordPress maakt het gemakkelijk om digitale inhoud te publiceren. Om uw tekst er echter uit te laten zien als traditioneel drukwerk, is een beetje codeerkennis vereist.
In het bijzonder hoe u de eerste regel van een WP-bericht kunt laten inspringen in plaats van een hele alinea.
Wanneer u de knoppen Inspringen en Uitspringen in de WordPress-werkbalk van ofwel de Klassieke Editor of het Klassieke Paragraaf-blok in Gutenberg gebruikt, wordt de inspringing standaard toegepast op de hele alinea.
Om alleen de eerste regel van een nieuwe alinea te laten inspringen, moet CSS-code worden toegevoegd aan uw Cascading Style Sheet (stylesheet.css).
De eerste regel van een WordPress-bericht laten inspringen
Gebruik CSS om een 'custom-indent'-klasse te maken en roep deze vervolgens op met HTML door toe te voegen. De inspringing wordt alleen gemaakt wanneer de HTML wordt toegevoegd aan het begin van een nieuwe alinea. Als u de tag 'article' in CSS target, springt in plaats daarvan de eerste regel van elke nieuwe alinea in.
Waarom de WP-inspringknoppen niet werken voor inspringingen van één regel
Door de knoppen inspringen en uitspringen in de WP-editor op de pagina te gebruiken, wordt de inspringing op de hele alinea toegepast.
Kijk in je teksteditor en je ziet de opvulling-links-styling die wordt toegepast op de HTML-code.
Standaard voegt de inspringschakelaar 40px van een inspringing toe.
<p style="padding-left: 40px;">
vice-president binay laatste nieuws
Dat aantal (40px) kan worden verhoogd of verlaagd.
Als u de eindcode (
) verplaatst, wordt de alinea gesplitst. Het past de inspringing niet alleen toe op de eerste regel van de alinea.Hetzelfde gebeurt als je een
in HTML gebruikt om de inspringing aan te passen, zoals
<p style="margin-left:10%">
of vergelijkbaar.
De standaard voor de
-tag in HTML is om het stijlelement op de hele alinea toe te passen.
Om een inspringing toe te passen op de eerste regel van een alinea, moet u een inspringklasse toevoegen aan uw aangepaste CSS.
U kunt dit toevoegen aan uw stylesheet.css-bestand, of de veel eenvoudigere route is om de aanvullende CSS in uw WP-beheerpaneel te gebruiken.
Een aangepaste inspringing toevoegen in CSS (de gemakkelijke manier)
Ga naar het menu Uiterlijk in de linkerzijbalk, selecteer Aanpassen en selecteer vervolgens de optie Extra CSS.
Voer de volgende code in:
p.custom-indent {
text-indent:40px;
} 
Druk vervolgens op publiceren.
Zolang de wijzigingen niet zijn gepubliceerd, worden ze niet toegepast. Eenmaal toegepast, is het voor de hele site van toepassing op waar de HTML ook wordt gebruikt.
Met de wijzigingen toegevoegd, in plaats van het toevoegen van het
-element in de HTML, zou u het
-element invoegen.
<p class=”custom-indent”>
Een inspringing toepassen op de eerste regel van elke nieuwe alinea
Om de aangepaste inspringing op alle alinea's toe te passen, zou het vervelend zijn om het element
aan het begin van elke alinea in te voegen.
U kunt ervoor zorgen dat elke nieuwe alinea een gelijke inspringafstand heeft, alleen toegepast op de eerste regel van elke alinea zonder de hele alinea te laten inspringen.
De CSS-code die daarvoor moet worden gebruikt, is vergelijkbaar met ...
article p {
text-indent:40px;
}De reden dat wordt vermeld dat de codes vergelijkbaar zijn met het bovenstaande, is dat elk thema verschillende namen heeft om verschillende elementen in de stylesheet te identificeren.
Op deze site is het blogposts “body” element gelabeld met de “entry-content mvt-content”.
Op onze testsite heet dit “blog-post-single-content”.
Het element is afhankelijk van uw themasjabloon. Gebruik uw browserinspecteur om de klasse te identificeren.
advocatenkantoor atty lou tancinco
Gebruik Chrome, klik met de rechtermuisknop en selecteer vervolgens de optie 'inspecteren'.
Net als bij de aangepaste inspringing, kan het aantal pixels waarmee u de tekst vanaf de linkermarge laat inspringen, worden vergroot of verkleind.