Har detta någonsin hänt dig? Du installerar ett plugin, det har exakt den funktionalitet du letar efter, men... det fungerar inte korrekt. Även efter att ha ändrat alla inställningar, anpassar sig den senare inte alltid till din Wordpress tema. Så på grund av denna lilla brist överväger du förmodligen att välja en annan lösning. Hur man lägger till Wordpress CSS-kod 1

Ändå, om du är lite DIY, och du kanske har kunnat lägga till CSS-kod här och där för att lösa ett problem på din blogg, kan du fixa den, särskilt om i plugin som inte fungerar inte korrekt, utvecklaren erbjuder inte CSS-avsnitt, du måste göra det själv.

Denna handledning låter dig uppnå detta genom att lägga till en kod korrekt på din Wordpress plugin.

Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg.

Sedan, tillbaka till varför vi är här.

Anpassade CSS-stilar = Mer kontroll över utseende

Anpassade CSS-stilar låter dig manipulera utseendet på olika element utöver vad utvecklaren avsåg. Idag innehåller många avancerade plugins anpassade stylingsalternativ, men gratis plugins är inte alltid noggranna i detta avseende.

Ta ett av de mest populära pluginsna: Kontaktformulär 7. Det erbjuder mycket liten manövrerbarhet på CSS-sidan. Men tack vare den personliga CSS kan du ändra alla aspekter av dina formulär helt.

Men ändå ger till och med plugins med detaljerade alternativ inte alltid möjligheten att anpassa CSS-kod.

Så att lära sig lite CSS, och lägga till det säkert, gör att du kan för att kunna modellera vad besökare kan se

Varför behöver du lägga till CSS-kod korrekt?

Du vill verkligen inte lägga till smutsiga CSS på din webbplats. Som många utvecklare tror, ​​det finns ett bra och dåligt sätt att lägga till CSS-kod till din blogg.Hur man lägger till Wordpress CSS-kod 2

Upptäck vårt 4 WordPress-plugins för att anpassa CSS på din blogg

När du lägger till CSS-stilar på rätt sätt kommer de alltid att vara säkra, även om du uppdaterar din Wordpress tema, och du kommer enkelt att kunna kopiera och klistra in dem i ett nytt tema om du någonsin bestämmer dig för att ändra ditt.

Se också Hur du anpassar CSS på din WordPress-webbplats

Omvänt, genom att lägga till dem på fel sätt, kommer din CSS-kod att bli mycket mer exponerad och kanske inte vara effektiv. Några av er använder Wordpress tema Divi. Så jag kommer att visa dig hur du lägger till CSS-kod till detta WordPress-tema.

Var lägger jag till en CSS-stil på Divi

För att säkert lägga till en CSS-kod på Divi måste du komma åt " Tema Alternativ I din Divi-meny:

add-a-code-css-on-theme-wordpress

Sedan på fliken "Allmänt" (som är fliken laddad som standard), måste du bläddra till botten av sidan. Där hittar du ett avsnitt som heter " Anpassad CSS »:

Code-css-skräddarsy-divi

Tekniskt är allt du behöver göra att ange din anpassade CSS-kod här och klicka på " Spara ändringar ". Men eftersom vi vill att det ska vara väldigt enkelt att flytta eller kopiera kommer vi att ta det ett steg längre. Upptäck andra handledning om Divi genom att konsultera våra bästa resurser på Divi

Eftersom du kanske redan har lagt till några anpassade koder till Divi, hjälper det dig att organisera anpassad CSS i det här avsnittet. För att göra detta måste du lägga till en kommentar som säger något som " CSS-stilar Starta här Plugin ". Sedan kan du lägga till den anpassade CSS-koden i det här avsnittet.

För att lägga till en kommentar, allt du behöver göra är att kopiera och klistra in den här koden:

/ * Plugin CSS-format Börja här * /

add-a-css-kod anpassar-divi

Kommentaren påverkar inte något, men hjälper dig att organisera dina olika anpassade CSS-stilar. Divi kommer också att hålla dina anpassade CSS-stilar säkra under uppdateringar, så att du inte kan oroa dig för att förlora dem.

Var lägger jag till CSS-kod för andra WordPress-teman

Om du använder ett annat WordPress-tema måste du lägga till dina anpassade CSS-koder till ditt barntema. Om du inte använder ett barntema eller inte vet vad det är, inbjuder jag dig att läsa den här lektionen: Hur man installerar ett barntema på WordPress

Förutsatt att du har ditt barntema konfigurerat kan du redigera det direkt i din WordPress-instrumentpanel genom att gå till " Utseende> Redaktör "

Anpassning-of-theme-wordpress

Se till att du ändrar rätt barntema. Dina ändringar måste göras i filen " styles.css ".

Då behöver du bara lägga till din anpassade CSS precis som du gjorde tidigare. Skapa först ett kommentarblock och lägg till din kod:

flera add-blocket-of-code-css-on-wordpress

För att sammanfatta

Innan du börjar med detta äventyr måste du ha lite kunskap om CSS. Du hittar olika kurser på nätet. Du måste också veta att lägga till en kod inte bara handlar om att lägga till kod. För att hitta dig själv i dina ändringar måste du till exempel använda kommentarblock för att ange en anledning till eventuella CSS-ändringar.

Upptäck också några premium WordPress-plugins  

Du kan använda andra Wordpress plugins för att ge ett modernt utseende och för att optimera hanteringen av din blogg eller hemsida.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. Pro reglaget

Slider Pro är en av CodeCanyons tre bästa säljare. Det ger ett rent och intuitivt användargränssnitt i administrationsområdet och en smidig surfupplevelse för användare och besökare.Slider pro-responsivt wordpress-skjutreglage-plugin

Det undviker onödiga fantasier, som ofta är ett hinder för användare som letar efter den information de behöver. Dessutom fokuserar det på enkelhet och prestanda, samtidigt som det erbjuder ett brett utbud av anpassningsmöjligheter.

Upptäck också Hur man skapar ett bildspel med Slider Revolution på WordPress

Dess hantering av webbadresser i webbläsarens sökfält är en av funktionerna som markerade oss på den senare. Som namnet antyder är detta den professionella lösningen du behöver.

Läs också vår 5 WordPress-plugins för att skapa vanliga frågor på en blogg

Dess funktioner är:optimerad utnyttjande av bilder, penkel anpassning,Flödande nimationer, sidmånga layouter et mer.

Ladda ner | Demo | webbhotell

2. ARMember

ARMember är en Wordpress plugin innehållsskydd. Det är en unik lösning som låter dig sälja prenumerationer på vilken webbplats som helst. Den har en hel rad verktyg som låter dig skydda helt eller delvis innehållet.

Armember wordpress plug-in för medlemskap

En annan av dess funktioner är det faktum att den erbjuder ett gratis alternativ som är lite begränsad när det gäller funktionalitet. På tal om funktioner, denna kraftfulla Wordpress plugin erbjuder bland annat: Möjligheten till planera dess innehåll, stöd för flera prenumerationsplaner, enkel konfiguration, migrering mellan olika prenumerationsplaner, WooCommerce-stöd, flera modeller av formerOch mycket mer.

Det är också en referens i denna nisch.

Ladda ner | demo | webbhotell 

3. WooCommerce kundvagn baserad frakt

Vagn baserad sjöfart låter dig ställa in olika fraktpriser baserat på de varor en kund har i kundvagnen. Det finns tre beräkningsmetoder: av det totala priset, av antalet artiklar i korgen och av vikten. WooCommerce-cart-baserade-shipping-plugin-WooCommerce-shipping BASERAD-on-cart

Till exempel, ju större delsumman eller vikten på korgen, eller ju fler varor kunden köper, desto högre fraktpris.

Se även vår 10 WooCommerce-plugins för att skapa leveransscenarier

Du kan också ställa in den här funktionen så att den endast är tillgänglig i vissa länder.

Ladda ner | demo | webbhotell

Rekommenderade resurser

Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.

Slutsats

Det är det! Det är det för den här tutorialen som visar hur du säkert kan lägga till anpassad CSS-kod till WordPress. Om du har commentaires eller förslag, tveka inte att meddela oss i det reserverade avsnittet.

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk