Att lägga till element som stora begynnelsebokstäver i dina WordPress-inlägg kan förbättra läsbarheten och ge ditt innehåll ett professionellt, polerat utseende.
Stora begynnelsebokstäver är stora, dekorativa versaler som används i början av ett stycke. De drar läsarnas uppmärksamhet och ger en touch av elegans till din text.
Under åren har vi använt stora begynnelsebokstäver på våra personliga bloggar för att lägga till en estetisk touch. Många av våra läsare har märkt och kommenterat hur mycket de gillar den här funktionen och uppskattar den förbättrade visuella attraktionskraften den ger webbplatsens design.
I den här artikeln visar vi dig hur du enkelt lägger till stora begynnelsebokstäver i WordPress-inlägg, steg för steg.
Vad är en stor begynnelsebokstav?
En stor begynnelsebokstav är en stylingteknik som vanligtvis används i tryckta böcker och magasin som innehåller längre texter. Den första bokstaven i det inledande stycket i varje kapitel använder en stor teckenstorlek.
Normalt sträcker sig den stora versalen nedåt för att falla under de första raderna, vilket är anledningen till att den kallas en "stor begynnelsebokstav".
Att lägga till stora begynnelsebokstäver hjälper ditt innehåll att sticka ut och fånga dina besökares uppmärksamhet. De ger en mer formell och traditionell touch till din webbplats design.
Det finns flera sätt att lägga till stora begynnelsebokstäver på en WordPress-webbplats. Du kan använda det inbyggda alternativet i WordPress blockredigerare eller använda ett plugin.
Med det sagt, låt oss se hur du enkelt kan lägga till stora begynnelsebokstäver i WordPress-inlägg med olika metoder.
Klicka gärna på länkarna nedan för att hoppa till din föredragna metod:
- Metod 1: Lägg till stora begynnelsebokstäver med WordPress blockredigerare
- Metod 2: Lägg till stora begynnelsebokstäver med CSS-kod
- Metod 3: Lägg till stora begynnelsebokstäver med ett plugin
- Bonus: Ändra teckensnitt i dina WordPress-teman
Metod 1: Lägg till stora begynnelsebokstäver med WordPress blockredigerare
Om du vill lägga till initialer med standardinställningarna WordPress blockredigerare, då är den här metoden för dig. Tänk på att även om den här metoden fungerar, måste du manuellt lägga till initialer för varje inlägg.
Om du letar efter en automatisk metod, hoppa bara till metod 2.
Gå först till sidan Inlägg » Lägg till nytt från WordPress adminpanel. Klicka nu helt enkelt på knappen 'Lägg till block' (+) i det övre vänstra hörnet av skärmen.
Klicka därefter på blocket Stycke för att lägga till det i ditt inlägg.
Därefter måste du öppna panelen Blockinställningar i den högra kolumnen.
När du har gjort det, bläddra ner till avsnittet 'Typografi' och klicka på ikonen med tre punkter bredvid det. Detta öppnar en lista med fler alternativ, varav du måste välja 'Initial' för att lägga till det i din blockpanel.
När initialfunktionen har lagts till, växla helt enkelt omkopplaren bredvid alternativet 'Initial' för att visa en stor begynnelsebokstav i början av ett stycke.
Glöm inte att klicka på knappen 'Spara utkast' eller 'Publicera' högst upp för att spara dina ändringar.
Du har nu framgångsrikt lagt till en initial i ditt inlägg.
Så här såg det ut på vår demosida.
Notera att den inbyggda funktionen för initialer i blockredigeraren kommer att använda din WordPress-temas stil för färg, teckensnitt och storlek på den första bokstaven.
Om du vill ändra stilen på dina initialer i WordPress blockredigerare, måste du använda anpassad CSS-kod för att styla dina initialer.
Metod 2: Lägg till stora begynnelsebokstäver med CSS-kod
För den här metoden kommer vi att använda anpassad CSS-kod för att automatiskt lägga till initialer till det första stycket i varje inlägg. Du kan antingen lägga till CSS-koden i ditt temas stilmallar eller använda ett plugin för kodavsnitt.
Vi rekommenderar att använda WPCode eftersom det är den främsta kodsnuttpluginen som används av över 2 000 000 webbplatser globalt. Det gör det extremt enkelt att lägga till kod på din webbplats utan krångel.
Först måste du installera och aktivera pluginet WPCode. För fler instruktioner, se vår nybörjarguide om hur man installerar ett WordPress-plugin.
Notera: WPCode har också en gratisversion som du kan använda för den här handledningen. Att uppgradera till betalversionen kan dock låsa upp fler funktioner som ett molnbibliotek med kodavsnitt, villkorlig logik och mer.
Efter aktivering, besök sidan Kodavsnitt » +Lägg till avsnitt från WordPress admin sidomeny.
Härifrån, för muspekaren över alternativet ‘Lägg till din anpassade kod (nytt avsnitt)’. Detta kommer att visa knappen ‘Använd avsnitt’ som du behöver klicka på.
Nu när du är på sidan ‘Skapa anpassat avsnitt’, kan du börja med att ange en titel för ditt kodavsnitt. Det kan vara vad som helst som hjälper dig att identifiera avsnittet.
Därefter, välj ‘CSS-avsnitt’ som ‘Kodtyp’ från rullgardinsmenyn till höger.
Kopiera och klistra sedan helt enkelt in följande kod i rutan ‘Kodförhandsgranskning’:
<style type="text/css">
.entry-content p:first-child:first-of-type:first-letter {
font-size: 85px;
line-height: 1;
padding-top: 0px;
padding-right: 10px;
padding-left: 4px;
color: #000080;
float: left;
font-family: 'Tangerine', serif;
text-shadow: 4px 4px 4px #aaa;
</style>
}
Nu måste du skrolla ner till avsnittet Infogning och välja metoden ‘Automatisk infogning’ om du vill köra koden över hela din webbplats.
Du kan använda metoden ‘Kortkod’ om du bara vill lägga till initialer till specifika inlägg.
När du har sparat avsnittet får du en kortkod som du kan klistra in i blockredigeraren för de inlägg där du vill lägga till initialer.
Därefter, gå tillbaka till toppen av sidan och växla omkopplaren till ‘Aktiv’.
Slutligen, klicka på knappen 'Spara kodavsnitt'.
Ditt CSS-kodavsnitt kommer nu att vara live på din webbplats.
Så här såg initialerna ut på vår demosida med hjälp av CSS-avsnittet ovan.
Metod 3: Lägg till stora begynnelsebokstäver med ett plugin
Om du är tveksam till att lägga till anpassad CSS, kan du också lägga till initialer med pluginet Initial Letter.
Detta plugin låter dig också ändra storlek, färg och teckensnitt på de inledande stora bokstäverna.
Notera: Tänk på att pluginet Initial Letter inte har testats med den senaste versionen av WordPress och underhålls inte längre av utvecklaren.
Vi testade dock pluginet och det fungerar bra. Om du fortfarande är osäker, ta en titt på vår artikel om att använda föråldrade plugins.
Med det sagt, först måste du installera och aktivera pluginet Initial Letter. För fler instruktioner, se vår guide om hur man installerar ett WordPress-plugin.
Efter aktivering, navigera till sidan Inställningar » Initial Letter från administratörs sidofältet. Här kan du konfigurera inställningar för de inledande stora bokstäverna.
Först måste du välja om du vill att de inledande stora bokstäverna automatiskt ska tillämpas på nya inlägg. För att göra detta, välj alternativet 'Ja' från rullgardinsmenyn bredvid alternativet 'Standard för inlägg'.
Välj sedan ditt föredragna teckensnitt, färg, storlek och stoppning för de inledande stora bokstäverna.
Notera: Du kan behöva återgå till inställningarna efter att ha förhandsgranskat din webbplats för att justera dessa stilalternativ.
Kontrollera sedan rutan bredvid alternativet 'Aktivera för utdrag' om du vill att de inledande stora bokstäverna ska aktiveras för inläggsutdrag.
Du kan också kontrollera rutan bredvid alternativet 'Endast första stycket' om du bara vill att de inledande stora bokstäverna ska läggas till i det första stycket i ditt inlägg.
Slutligen, glöm inte att klicka på knappen 'Spara ändringar' för att spara dina inställningar.
Du kan nu besöka vilket inlägg som helst på din webbplats, och du kommer att se de inledande stora bokstäverna i aktion i det första stycket i ditt inlägg.
Om du vill ta bort initialer för ett inlägg kan du också göra det genom att öppna inlägget i blockredigeraren.
Väl där, scrolla ner till sektionen 'Initial Letter' och välj alternativet 'No' från rullgardinsmenyn. Detta kommer att inaktivera initialerna för det inlägget.
Bonus: Ändra teckensnitt i dina WordPress-teman
Förutom initialer kan du också ändra teckensnittet på din WordPress-webbplats för att göra ditt innehåll mer läsbart och estetiskt tilltalande.
För att göra detta kan du besöka sidan Utseende » Anpassa från WordPress-instrumentpanelen. Detta öppnar temaanpassaren, där du måste öppna fliken 'Global'.
Obs!: Inställningarna för temaanpassaren kan skilja sig beroende på vilket tema du använder. För den här handledningen använder vi Astra.
Du kommer nu att se några nya alternativ i den vänstra kolumnen, inklusive typografi, färger, behållare och knappar. Här måste du expandera fliken 'Typografi'.
Detta öppnar en lista över olika förinställningar som erbjuds av temat, och du kan välja ett typsnitt som du vill. När du är klar, glöm inte att klicka på knappen 'Publicera' högst upp för att spara dina inställningar.
Om du använder ett blocktema, kommer temaanpassaren inte att vara tillgänglig, och du måste ändra typsnittet med hjälp av redigeraren för hela webbplatsen.
För mer information om detta, se vår handledning om hur man ändrar typsnitt i WordPress-teman.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till droppkapsyler i WordPress-inlägg. Du kanske också vill titta på vår guide om hur man ändrar typsnitt i ditt WordPress-tema och vår lista över sätt att skapa en mobilvänlig WordPress-webbplats.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Jonas
Hej, finns det ett sätt eller ett skript för att se till att klassen .has-drop-cap automatiskt läggs till endast i det första stycket när du skapar en ny artikel? Jag tror att det skulle vara bäst och mycket mer naturligt för Wordpress.
WPBeginner Support
Vi har för närvarande ingen metod vi skulle rekommendera för det, vi skulle rekommendera att använda vår CSS-metod för något liknande.
Admin
Anna
Hej, jag har problem med att få droppbokstaven i min text. Jag har kontaktat personen som designade temat och han säger att det borde fungera bra. Snälla hjälp mig, jag har provat allt, till och med att lägga till det manuellt. Hälsningar, Anna
anamika
jag använder det här pluginet men på min bloggsida fungerar det inte [alla sidor, även enskilda sidor fungerar]
Mehmood Ul Hassan
Tack så mycket för att du hjälpte mig i den här frågan. De flesta kända webbplatser använder droppbokstäver i inlägg och jag har alltid velat ha det på min egen WordPress-webbplats också. Jag är så glad över det här pluginet. Mina blogginlägg ser nu professionella ut.
James Carter
En vanlig typografisk konvention är att följa den tappade bokstaven genom att sätta de återstående bokstäverna i det första ordet med små versaler. Detta ser bättre ut, hjälper ögat att göra övergången från den stora tappade bokstaven till brödtexten.