Omdesign din WordPress-webbplats (för att lägga till en personlig touch)

Ingen annan plattform ger dig kraften att anpassa utseendet och känslan på din webbplats som WordPress. Det är en av anledningarna till att WordPress är populärt bland både publicister och webbutvecklare.


Du kan ta ett grundläggande (och tråkigt) WP-tema, lägga till en logotyp, redigera några kodrader, ändra din CSS och ha en professionell (men personifierad) snygg webbplats på kort tid. Det är enkelt att arbeta och den här tutorialen visar hur du gör det.

Är du redo? Låt oss börja med första saker först; färgerna.

Designa ett färgschema

När du utvecklar ett färgschema för din WordPress-webbplats är det många saker att tänka på. Tänk på det som att måla ditt hus eller din sten-och-murbruk. Du måste bestämma vilken färg som kommer att gå på dina väggar och vilken färg du vill ha dina dörrar.

Hur du målar ditt exteriör och interiör beror på ett par faktorer som är dina personliga preferenser.

Att färga din WordPress-webbplats är inte annorlunda heller. Vilken färg vill du ha dina länkar? Din bakgrund, hur kommer du att göra det mest tilltalande och lämna dina konkurrenter munnen agape? Vilka färger kommer att komplettera (eller till och med stärka) ditt meddelande? Hur vill du ha din text? Himlen är gränsen för valet av färger du kan använda på din WP-webbplats.

Du måste bestämma alla färger du kommer att använda från början. Jag rekommenderar att du bara håller dig till tre färger, men du kan använda så många färger du vill.

Överdriv inte, annars kommer du att utspäda ditt marknadsföringsmeddelande i all den färgen. När allt kommer omkring är alltför giftigt, så oavsett vilka färger du väljer är det viktigt att se till att det finns harmoni.

Det är bäst att använda de flesta färger där en majoritet av människor kommer att se (och förhoppningsvis) älska dem. Jag pratar om din logotyp och masthead. Dessa områden är exakt där du behöver flest färger; resten av din webbplats kan vara mindre färgglad men mer informativ.

216 färger kontra 12 färger

Vi är alla bekanta med de tolv elementära färgerna, men webben är full av färger och deras olika nyanser. Av just denna anledning kan det vara en utmanande uppgift att välja färg som utstrålar personlig värme samtidigt som du skapar ett professionellt utseende.

Du har dock tur, för jag fiskade över hela internet och hittade följande verktyg för att komma igång:

Kuler

Kuler

Kuler designades av Adobe för att hjälpa webbutvecklare skapa toppklassklassfärger. Kuler är ett onlineverktyg, vilket innebär att du kan bära det runt och använda det var som helst, men det finns också ett skrivbordsapplikation som hjälper dig att utveckla färgscheman direkt från skrivbordet. Om du har ett Adobe-ID kan du dessutom spara dina färgscheman med ett enda klick.

Det finns olika färgregler att använda med Kuler inklusive monokromatisk, sammansatt, komplementär, analog och triad bland andra.

Kolla in Kuler.

HTML FÄRGKART

Att känna till färgerna du använder är bara halva jobbet. För att implementera dina färger måste du översätta dem till HTML-koder.

html färgkarta

Det är här HTML-färgkarta kommer in. Det är ett färgstarkt diagram med över 200 (216 faktiskt) webbfärgkoder. Beväpnad med diagrammet bör ingen färg under solen vara svår att implementera.

Koderna fungerar med HTML, CSS, Adobe PhotoShop och andra grafiska manipuleringsverktyg, så du har all frihet i världen att spela med dina färger så mycket du vill.

Kolla in HTML-färgkarta.

GENOPAL

Om du behöver hjälp med att välja färger är GenoPal det program du vill ha. Det är en mycket enkel webbapplikation som “stifter” färgpaletter till webbläsarfönstret. När du väljer dina färger visas de i din webbläsare i form av färgade “klisterlappar”. ��

genopal

Med GenoPal kan du öka ljusstyrkan och kontrollera färgtonens mättnad, så att du får exakt den nyans du vill ha.

På deras webbplats finns en mobilapp på väg. När den har lanserats kommer den att låta dig bära appen och utveckla färger på din mobila enhet. Deras design är genial, och det faktum att den här applikationen faktiskt fungerar är ett tydligt tecken på att GenoPal betyder affärer.

COLORHEXA

ColorHexa är onlineversionen av konstnärens färgplatta. Denna webbplats ger dig möjligheten att blanda färger genom att bara ange färgkoder. Deras förutgående app är färgblandningsverktyget men de har också en lutningsgenerator och en färgundersökare. Är inte det rena geni på jobbet här?

colorhexa

Hur fungerar ColorHexa Blender? Allt du behöver göra är att skriva in dina färgkoder separerade med en “+” och ColorHexa gör resten av arbetet. Till exempel försökte jag:

# ff0000 + # 0000ff + # ff00ff och jag fick # aa00aa. Dessutom ger de dig en hel sida med färginformation (på din slutliga färg t.ex. # aa00aa). Detta är ett verktyg du måste prova själv för att uppleva färgblandning som aldrig förr.

Kolla in ColorHexa.

ULTIMATE CSS GRADIENT GENERATOR

ultimat färggradientgenerator

Detta är förmodligen det bästa verktyget när det gäller att generera färggradienter. Det är helt online och hjälper dig att generera uppfriskande mittpunkter och motsvarande CSS-koder. De tillhandahåller också Chrome och Firefox-tillägg för att låta dig integrera appen i din webbläsare för enklare och snabbare åtkomst.

Det finns ett förhandsgranskningsområde där du ser din lutning, så allt du behöver göra är att generera din lutning som du anser vara lämplig och kopiera klistra in CSS-koden genereras. Det är verkligen så enkelt och de har fler färger än du någonsin kommer att använda.

Kolla in Ultimate CSS Gradient Generator.

Plocka typsnitt

Nu när jag har visat dig hur du väljer och blandar färger som Picasso, låt oss leka med teckensnitten.

Dina färger och webbdesign drar in människor, men det är dina ord, det vill säga dina sidor och inlägg som får folket att hålla sig kvar.

Vi är upptagna med att skapa våra bästa historier hela tiden, så de flesta av oss glömmer att teckensnitten också betyder något. Men det teckensnitt du väljer påverkar hur människor interagerar med din webbplats. Med rätt teckensnitt vill din målgrupp hålla sig fast och så småningom klicka igenom till dina andra sidor, vilket är exakt vad du vill. Engagemang.

Det finns en miljon och ett teckensnitt där ute, men tyvärr ser en användare bara de teckensnitt som är installerade på sin maskin. Om det teckensnitt du använder inte är installerat på deras maskiner ser de ett nära alternativ (eller ett helt annat teckensnitt), som inte har samma effekt som du ville ha.

”Att spela med teckensnitt är som att spela med eld. Ibland kan det tändas en tändsticka på en webbsida, en gnista av vacker text. Andra gånger kan det bränna ner hela huset. ” – Lorelle från cameraontheroad.com.

Du kan styra dina teckensnitt (och skapa den effekt du vill ha) med ditt formatmall. I ditt tema är stilarket vanligtvis style.css fil. Du kan använda den här filen för att kontrollera färgen på dina teckensnitt, typ av typsnitt / typsnitt, typstorlek och andra aspekter av ditt valda teckensnitt.

Följande är ett bra exempel:

#menu {font-family: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; typstorlek: 0,8em; svart färg;}

Ovanstående kod ställer in teckensnittstorleken i din meny till 0,8em och ställer in färgen på svart. Det ställer också teckensnittet till Arial, men om användaren inte har Arial på sin maskin kommer Helvetica att ta över. Om de inte har Helvetica eller Arial kommer Verdana, Sans-serif eller Times New Roman att ta över.

Genom att styra teckensnitten kan du skapa ett mer konsekvent utseende och känsla.

Men för att lösa problemet med inkonsekvens i typsnitt en gång för alla kan du använda inbäddade teckensnitt. Genom att använda inbäddade (eller externa) teckensnitt behöver inte användaren ha typsnittet på sin maskin.

Dessutom är det lätt ärtligt arbete.

Allt du behöver göra är att öppna din style.css och lägg följande kod överst.

@ font-face {font-family: Museo300; src: url ("fonts / museo300-regular.ttf") format: ('truetype'); font-weight: normal;}

OBS! Du måste definiera namnet och platsen för ditt teckensnitt. I exemplet ovan är “Museo300” teckensnittet som sparades i en mapp med namnet “teckensnitt”.

För att använda teckensnittet på din webbplats, till exempel, kan du skriva:

body {font-family: Museo300;}

Du kan använda ett inbäddat teckensnitt för alla element på din webbplats. Till exempel…

#menu {font-family: Museo300;}

… ställer in Museo300 i din meny.

Ovanstående metod betyder att du måste ladda ner teckensnittet och ladda upp detsamma till din server, vilket om du frågar mig är ganska tråkigt.

i alla fall, ydu behöver inte ladda ner något externt teckensnitt du vill använda.

Du kan helt enkelt länka till teckensnitt från ditt huvud (header.php) på så sätt:

Hur och var lägger du till raden ovan? Du måste öppna din WordPress Administration Panel -> Utseende -> Editor -> header.php

Om du inte vill eller inte kan redigera din header.php-fil importerar du bara teckensnitten genom att skriva följande rad i din style.css:

@import url (http://fonts.googleapis.com/css?family=over+the+rainbow);

Exemplet ovan låter dig använda Över regnbågen typsnitt från Google var som helst på din webbplats. Om du till exempel vill använda Over The Rainbow på hela din webbplats kan du använda den här koden:

body {font-family: "Over The Rainbow";}

Google tillhandahåller över 600 gratis fontfamiljer, så lek bort!

Uppdatering (12/12/13): Om du enkelt vill lägga till Google-teckensnitt på din WordPress-webbplats kan du använda Googles typografi-plugin. Annars kan du lära dig mer om Google-teckensnitt och hur du implementerar dem i denna Förbättra din WordPress-typografi med Google-teckensnitt av Tom Ewer.

Fler resurser för att spela med teckensnitt

WordPress-plugins för att lägga till teckensnitt

Och för dig som inte vill gräva i kod kan du alltid installera ett WordPress-plugin för att göra något av det tunga lyftet åt dig. Här är några av de mer populära gratis typsnittet plugins från WordPress.com:

Har du kul? Låt oss gå vidare…

 Formatera datum och tid

Har du varit på en WordPress-webbplats som visade datum eller tid i en riktigt trevlig ton som fick dig att känna dig som en komplett noob när din webbplats var berörd? Ägarna till dessa webbplatser spelade bara med en enda kodraden och nu kan du inte få tillräckligt med deras datum. Haha.

Goda nyheter, du kan redigera den här raden med kod och överraska dina läsare också.

I din WP-instrumentpanelen, navigera till Utseende, och sedan till Redaktör enligt nedanstående:

formateringsdatum

När du är där kommer du att kunna se en lista över dina .php-filer längst till höger:

enda inlägg

Klicka på ett enda inlägg (single.php) och när det är öppet öppnar du sökfältet genom att trycka på Ctrl + F. Skriv i sökfältet som visas:

tiden

Du kommer omedelbart att hitta en linje som kan se ut som:

Nu är området du vill redigera (‘F Y’).

Låt mig köpa ut detta avsnitt för att ge dig något köttigare att bita på.

”F” in (‘F Y’) står för Månadens fulla namn och “Y” representerar År med 4 siffror. Därför, om du använder (‘F Y’), kommer ditt datum att se ut:

September 2013

Om du kastar in ett komma mellan F och Y, bör du ha något som:

September 2013

Om du vill lägga till dagen och andra element kan du använda följande tecken:

l = Dagens fullständiga namn (gemener L)

F = månad

j = Månadens dag (datumet)

Y = År med fyra siffror

y = År med 2 siffror

Fler tecken finns i tabellen nedan:

formatera datumtabell

Och här några exempel:

exempel på datumformat

Kommer alltid ihåg att bara redigera tecknen inom parenteserna (‘F Y’) och, notera, ta inte bort de enda citatmärkena. Använd gärna så många tecken som du vill uppnå den effekt du vill och kom ihåg att spara allt när du är klar.

Dessutom kan du bli av med datumet genom att ta bort …

… som jag gjorde på min blogg för inte så länge sedan. �� Allt jag får är nu Upplagt av Fred i kategorin så och så … bla bla. Inga datum alls.

Är du tankad till nästa del? Du borde vara bättre.

Hittade inte funktionen_tid?

Det är ok, eftersom många teman nu en dag använder funktionen_datum () i stället för funktionen_tid (), vilket faktiskt är bättre övning. Om ditt tema använder funktionen_datum () behöver du inte göra någon redigering eftersom du helt enkelt kan ändra hur dina data visas i instrumentpanelen under “Inställningar-> Allmänt”.

Använda bilder

Detta är förmodligen den enklaste (och kortaste) delen av denna tutorial. Men om du verkligen är ny inom WordPress kan lägga till bilder vara en utmaning.

Med WordPress kan du lägga till bilder via uppladdningsverktyget eller (Lägg till medieknapp) när du skapar ett nytt inlägg eller en sida. Allt du behöver göra är att placera markören där du vill att bilden ska vara i ditt inlägg eller sida och klicka sedan på “Lägg till media”.

lägg till media

När överföringsverktyget öppnas kan du lägga till andra detaljer som bildtexter, storlek, länkar och justering.

ladda upp verktyget

Det här området finns till höger om uppladdningsverktyget.

För att lära dig mer om hur du lägger till bilder, kolla in följande resurser:

Och om du inte är säker på var du kan hitta några fantastiska gratisbilder, kolla in det inlägg vi skrev omslagen med de bästa bildresurserna för WordPress.

Ser? Jag sa att det kommer att vara den kortaste ��

Lägga till en Favicon

Innan vi helt glömmer bilder, låt oss skapa och lägga till ett favicon till din WordPress-webbplats. En favoritikon (eller favoritikon) är ikonen som används för att bokmärka en webbplats.

En favorit hjälper dina läsare att identifiera din webbplats visuellt.

I allmänhet är en favorit en 16 x 16 pixlar kvadratisk grafikfil med förlängningen .ico. Tillägget står för ikonen.

Hur man skapar en Favicon

Du kan skapa din favorit online eller använda bildredigeringsprogram som GIMP eller något annat som låter dig spara .ico-filer. De flesta onlinetjänster är gratis.

Även om bilden vanligtvis är väldigt liten (16 med 16 pixlar), bör favikonet representera din blogg i sin helhet. Bilden eller texten du använder för att skapa din favorit ska representera ditt onlineföretag.

Om du använder en bildredigerare:

  • Skär eller lägg till utrymme därefter för att säkerställa att din bild är fyrkantig
  • Ändra storlek på bilden till 16 x 16 pixlar och
  • Spara bilden som favicon.ico

Onlinetjänster som du kan använda för att skapa favoriter inkluderar (men inte begränsat till):

När du har skapat ditt favicon låter de dig ladda ner det till din dator, så oroa dig inte.

Hur du installerar din Favicon i WordPress

Om det finns en annan favorit i huvudmappen för ditt tema måste du ta bort det med din FTP-klient eller någon annan tillgänglig metod. FTP-klienter rekommenderas eftersom de är enkla att använda och du kan snabbt hitta vilken fil du letar efter.

För denna handledning använde jag faviconer.com för att skapa ett favicon för min blogg och Filezilla för att ta bort befintliga favicons.

Med filen favicon.ico i handen, ladda upp samma till huvudmappen för ditt tema. Det här är den mapp där ditt aktuella tema lagras.

Ladda upp sedan en annan kopia av din favicon till rotmappen (vanligtvis public_html) eller huvudkatalogen där din webbplats är lagrad, så att du kan se din favicon när du skriver yoursite.com/favicon.ico. Detta lägger automatiskt till ditt favicon till dina flöden.

När du är klar med uppladdningen är det dags att få din favicon.ico att fungera. Det här är vad du bör göra:

Lägga till din Favicon med ett plugin

Det bästa sättet att lägga till din favorit är att använda ett plugin. Jag rekommenderar att du använder “Allt i ett Favicon”Plugin för mer avancerad användning för en mycket enkel metod som du kan använda”Den enklaste favoriten”Plugin som inte har några backend-alternativ du behöver bara ladda upp en fil som heter favicon.ico på rätt plats på din server.

allt-i-ett-favicon

Lägga till favikonet manuellt i din mall

Vissa människor kanske föredrar (även om det inte är det bästa sättet) att lägga till sina favoriter manuellt till sin mall för att göra detta enligt följande steg:

  • Logga in på din instrumentbräda
  • Navigera till Utseende
  • Sedan till Editor (Theme Editor)
  • Hitta och öppna header.php (header) fil

Lägg till den här raden i din rubrikfil (helst överst där du ser andra tags:

Spara en gång gjort. 

Uppdatera webbläsaren för att se dina nya ändringar.

Vid denna tidpunkt bör du kunna ändra dina färger, välja bättre teckensnitt, formatera datum och tid, använda bilder och lägga till ett favicon.

Slutsats

Det finns så mycket att diskutera om att omarbeta din WordPress-webbplats att det skulle vara en björntjänst (för dig) att försöka täcka allt i ett enda inlägg.

För att gynna dig mest är det bäst att dela in lektionen i flera delar (detta är del 1). Vi kommer att dela fler omdesign trick när dagar kommer, så se upp. Syftet med dessa självstudier är att hjälpa dig skapa den bästa WordPress-webbplatsen någonsin och att du känner dig lyckligare eftersom du gjorde allt på egen hand.

Om du vill dela dina åsikter eller lägga till något i diskussionen, vänligen lämna gärna din kommentar i kommentaravsnittet nedan!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map