Ingen annen plattform gir deg kraften til å tilpasse utseendet og følelsen på nettstedet ditt som WordPress. Det er en av grunnene til at WordPress er populært blant publisister og nettutviklere.


Du kan ta et grunnleggende (og trist) WP-tema, legge til en logo, redigere noen få linjer med kode, endre CSS og ha et profesjonelt (men personifisert) nettsted på kort tid. Det er enkelt arbeid, og denne opplæringen viser deg hvordan du gjør det.

Er du klar? La oss begynne med første ting først; fargene.

Designing A Color Scheme

Når du utvikler et fargevalg for WordPress-nettstedet ditt, er det mange ting du bør vurdere. Tenk på det som å male huset ditt, eller din stein- og mørtelbutikk. Du må bestemme fargen som skal gå på veggene dine og hvilken farge du vil ha dørene dine.

Måten du maler utvendig og interiør på, avhenger av et par faktorer som er dine personlige preferanser.

Å fargelegge WordPress-nettstedet ditt er heller ikke annerledes. Hvilken farge vil du ha linkene dine? Bakgrunnen din, hvordan vil du gjøre det mest tiltalende og la konkurrentene dine miste agape? Hvilke farger vil komplettere (eller til og med styrke) budskapet ditt? Hvordan vil du ha teksten din? Himmelen er grensen for valg av farger du kan bruke på WP-nettstedet.

Du må bestemme alle fargene du vil bruke fra begynnelsen. Jeg vil anbefale deg å holde deg til tre farger, men du kan bruke så mange farger du vil.

Bare ikke overdriv, ellers vil du ende opp med å utvanne markedsføringsbudskapet i all den fargen. Tross alt er et overskudd av noe giftig, så uansett farger du velger, er det viktig å sikre at det er harmoni.

Det er best å bruke flest farger der et flertall av mennesker vil se (og forhåpentligvis) elske dem. Jeg snakker om logoen din og motehodet. Disse områdene er akkurat der du trenger mest farger; resten av nettstedet ditt kan være mindre fargerikt, men mer informativt.

216 farger versus 12 farger

Vi er alle kjent med de tolv elementærfargene, men nettet er fullt av farger og deres forskjellige nyanser. Av denne grunn kan det være en utfordrende oppgave å velge farge som vil utstråle personlig varme mens du skaper et profesjonelt utseende.

Du er heldig, for jeg fisket over hele Internett og fant følgende verktøy for å komme i gang:

Kuler

Kuler

Kuler ble designet av Adobe for å hjelpe nettutviklere med å lage topp farger. Kuler er et online verktøy, noe som betyr at du kan bære det rundt og bruke det hvor som helst, men det er også et skrivebordsprogram for å hjelpe deg med å utvikle fargeskjemaer direkte fra skrivebordet. I tillegg, hvis du har en Adobe ID, kan du lagre fargeskjemaene dine med et enkelt klikk.

Det er forskjellige fargeregler å bruke med Kuler, inkludert monokromatisk, sammensatt, komplementær, analog og triade blant andre.

Sjekk Kuler.

HTML-fargekart

Å kjenne til fargene du vil bruke er bare halve jobben. For å implementere fargene dine, må du oversette dem til HTML-koder.

html fargekart

Det er her HTML-fargekartet kommer inn. Det er et fargerikt diagram med over 200 (216 faktisk) nettfargekoder. Bevæpnet med diagrammet, bør ingen farger under solen være vanskelig å implementere.

Kodene fungerer med HTML, CSS, Adobe PhotoShop og andre grafiske manipuleringsverktøy, slik at du har all friheten i verden til å leke med fargene dine så mye du vil.

Sjekk ut HTML-fargekartet.

GENOPAL

Hvis du trenger hjelp med å plukke farger, er GenoPal det programmet du ønsker. Det er et veldig enkelt nettapplikasjon som “pinner” fargepaletter i nettleservinduet. Når du velger fargene dine, vises de i nettleseren din i form av fargede “klistrelapper”. ��

genopal

Med GenoPal kan du øke lysstyrken og kontrollere fargemetningen, slik at du får akkurat den skyggen du ønsker.

På deres hjemmeside er en mobilapp i gang. Når den er lansert, vil den la deg ta med deg appen og utvikle farger på din mobile enhet. Designet deres er genialt, og det at denne applikasjonen faktisk fungerer, er et tydelig tegn på at GenoPal betyr virksomhet.

COLORHEXA

ColorHexa er den elektroniske versjonen av kunstnerens malingsplate. Denne nettsiden gir deg muligheten til å blande farger ved å bare legge inn fargekoder. Deres forerunning-app er fargeblandingsverktøyet, men de har også en gradientgenerator og en fargesubtraktor. Er ikke så rent geni på jobb her?

colorhexa

Hvordan fungerer ColorHexa Blender? Alt du trenger å gjøre er å skrive inn fargekodene dine atskilt med en “+” og ColorHexa gjør resten av arbeidet. For eksempel prøvde jeg:

# ff0000 + # 0000ff + # ff00ff og jeg fikk # aa00aa. Dessuten gir de deg en hel side med fargeinformasjon (på den endelige fargen din, f.eks. # Aa00aa). Dette er et verktøy du må prøve deg selv for å oppleve fargeblanding som aldri før.

Sjekk ut ColorHexa.

ULTIMATE CSS GRADIENT GENERATOR

ultimate fargegradientgenerator

Dette er sannsynligvis det beste verktøyet så langt som å generere fargestigenter. Det er helt online og hjelper deg å generere forfriskende midtpunkter og tilhørende CSS-koder. De tilbyr også Chrome og Firefox tillegg som lar deg integrere appen i nettleseren din for enklere og raskere tilgang.

Det er et forhåndsvisningsområde der du ser gradienten din, så alt du trenger å gjøre er å generere gradienten din som du synes passer og Kopier og lim inn CSS-koden generert. Det er virkelig så enkelt, og de har flere farger enn du noen gang vil bruke.

Sjekk ut Ultimate CSS Gradient Generator.

Velge skrifter

Nå som jeg har vist deg hvordan du kan velge og blande farger som Picasso, la oss leke med skriftene.

Fargene og webdesignet ditt vil trekke inn folk, men det er ordene dine, det vil si sidene og innleggene dine som får folk til å holde seg rundt.

Vi er opptatt med å lage de beste historiene våre til enhver tid, så de fleste av oss glemmer at skriftene også betyr noe. Men skriften du velger, påvirker hvordan folk samhandler med nettstedet ditt. Med riktige skrifter vil målgruppen ønske å holde seg rundt og til slutt klikke seg videre til de andre sidene, noe som er akkurat det du ønsker. engasjement.

Det er en million og en font der ute, men dessverre vil en bruker bare se skriftene som er installert på maskinen sin. Hvis skrifttypen du bruker ikke er installert på maskinene sine, vil de se et nært alternativ (eller en helt annen skrift), som ikke vil ha den samme effekten du ønsket.

“Å spille med skrifter er som å spille med ild. Noen ganger kan det lyse en fyrstikk på en webside, en gnist av pen tekst. Andre ganger kan det brenne ned hele huset. ” – Lorelle av cameraontheroad.com.

Du kan kontrollere skriftene dine (og opprette den effekten du ønsker) med stilarket. I temaet ditt er stilarket vanligvis style.css fil. Du kan bruke denne filen til å kontrollere fargen på skriftene, type font / font-family, font-størrelse og andre aspekter av den valgte font.

Følgende er et godt eksempel:

#menu {font-family: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; skriftstørrelse: 0,8 em; farge svart;}

Koden over vil sette skriftstørrelsen i menyen til 0,8 em og sette fargen til svart. Den vil også sette skrifttypen til Arial, men hvis brukeren ikke har Arial på maskinen sin, vil Helvetica ta over. Hvis de ikke har Helvetica eller Arial, vil Verdana, Sans-serif eller Times New Roman ta over.

Ved å kontrollere skriftene kan du skape et mer konsistent utseende.

For å løse problemet med inkonsekvens i font en gang for alle, kan du imidlertid bruke innebygde skrifter. Ved å bruke innebygde (eller eksterne) skrifter, trenger ikke brukeren å ha skriften på maskinen sin.

I tillegg er det lett peasy arbeid.

Alt du trenger å gjøre er å åpne din style.css og legg følgende kode øverst.

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

MERKNAD: Du må definere navnet og plasseringen til skriften. I eksemplet over er “Museo300” skrifttypen, som ble lagret i en mappe med navnet “fonter”.

For å bruke skriften på nettstedet ditt, for eksempel, kan du skrive:

body {font-family: Museo300;}

Du kan bruke en innebygd font for ethvert element på nettstedet ditt. For eksempel…

#menu {font-family: Museo300;}

… vil sette Museo300 i menyen.

Ovennevnte metode betyr at du må laste ned skriften og laste den opp til serveren din, som hvis du spør meg er ganske kjedelig.

derimot, ytrenger du ikke å laste ned noen ekstern font du vil bruke.

Du kan ganske enkelt koble til skrifttypene fra hodet (header.php) på en slik måte:

Hvordan og hvor legger du til linjen over? Du må åpne din WordPress Administrasjonspanel -> Utseende -> Editor -> header.php

Hvis du ikke vil eller ikke kan redigere header.php-filen, importerer du skriftene ved å skrive følgende linje i style.css:

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

Eksemplet ovenfor lar deg bruke Over regnbuen font fra Google hvor som helst på nettstedet ditt. Hvis du for eksempel ville bruke Over The Rainbow på hele nettstedet ditt, kan du bruke denne koden:

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

Google leverer over 600 gratis fontfamilier, så spill unna!

Oppdatering (07/12/13): Hvis du enkelt vil legge til Google Font på WordPress-nettstedet ditt, kan du bruke Google Typography-plugin. Annet enn det, kan du lære mer om Google-skrifter og hvordan du implementerer dem i denne Forbedre din WordPress-typografi med Google-skrifter av Tom Ewer.

Flere ressurser om å spille med skrifter

WordPress-plugins for å legge til skrifter

Og for de som ikke ønsker å grave i kode, kan du alltid installere en WordPress-plugin for å gjøre noe av det tunge løftet for deg. Her er noen av de mer populære gratis fonttilleggene fra WordPress.com:

Har du det moro? La oss gå videre…

 Formaterer dato og tid

Har du vært på et WordPress-nettsted som viste datoen eller klokkeslettet i en veldig fin tone som fikk deg til å føle deg som en komplett noob der nettstedet ditt var bekymret? Eierne av disse nettstedene spilte nettopp med en enkelt kodelinje og nå kan du ikke få nok av datoene deres. Ha ha.

Gode ​​nyheter, kan du redigere denne kodelinjen og overrask leserne dine også.

I din WP Dashboard, navigere til Utseende, og deretter til Redaktør som vist under:

formateringsdato

Når du er der, vil du kunne se en liste over .php-filene helt til høyre:

enkelt innlegg

Klikk på enkelt innlegg (single.php), og når det er åpent, åpner du søkefeltet ved å trykke Ctrl + F. Skriv inn følgende i søkefeltet:

tiden

Du vil umiddelbart se en linje som kan se ut som:

Nå er området du vil redigere (‘F Y’).

Tillat meg å kødde ut dette avsnittet for å gi deg noe kjøligere å bite på.

“F” i (‘F Y’) står for Månedens fulle navn og “Y” representerer År på 4 sifre. Derfor, hvis du bruker (‘F Y’), vil datoen din se slik ut:

September 2013

Hvis du kaster inn komma mellom F og Y, bør du ha noe sånt som:

September 2013

Hvis du vil legge til dagen og andre elementer, kan du bruke følgende tegn:

l = Fullt navn på dagen (små bokstaver L)

F = Måned

j = Månedens dag (datoen)

Y = År med 4 sifre

y = År med 2 sifre

Flere tegn finner du i tabellen nedenfor:

formatering av datatabell

Og her, noen få eksempler:

formatering av datoeksempler

Husker alltid å redigere bare tegnene i parentesene (‘F Y’) og, ta notat, ikke slett de eneste sitatmerkene. Bruk gjerne så mange tegn du vil oppnå den effekten du ønsker, og husk å lagre alt når du er ferdig.

Dessuten kan du bli kvitt datoen ved å slette …

… som jeg gjorde på bloggen min for ikke lenge siden. �� Nå, alt jeg får er Skrevet av Fred i kategorien… og bla. Ingen datoer i det hele tatt.

Drives du til neste del? Du bør være.

Fant ikke_time-funksjonen?

Det er ok, fordi mange temaer nå om dagen bruker funksjonen_datum () i stedet for funksjonen_tid (), som faktisk er bedre praksis. Hvis temaet ditt bruker funksjonen_date (), trenger du ikke å gjøre noen redigering fordi du ganske enkelt kan endre måten dataene vises på dashbordet ditt under “Innstillinger-> Generelt”.

Bruke bilder

Dette er sannsynligvis den enkleste (og korteste) delen av denne opplæringen. Men hvis du virkelig er ny på WordPress, kan det være en utfordring å legge til bilder.

WordPress lar deg legge til bilder via opplastingsverktøyet eller (Legg til medieknapp) når du oppretter et nytt innlegg eller side. Alt du trenger å gjøre er å plassere markøren der du vil at bildet skal være i innlegget eller siden din, og klikk deretter på “Legg til medier”.

legg til medier

Når opplastingsverktøyet åpnes, kan du legge til andre detaljer som bildetekst, størrelse, lenker og justering.

laste opp verktøyet

Dette området finner du på høyre side av opplastningsverktøyet.

For å lære mer om å legge til bilder, vennligst sjekk ut følgende ressurser:

Og hvis du ikke er sikker på hvor du kan finne noen fantastiske gratis bilder, sjekk innlegget vi skrev omslagene dekker de beste bildressursene for WordPress.

Se? Jeg fortalte deg at det vil være den korteste ��

Legge til en Favicon

Før vi glemmer bilder helt, la oss lage og legge til en favoritt til ditt WordPress-nettsted. Et favorittikon (eller favorittikon) er ikonet som brukes til å bokmerke et nettsted.

En favoritt vil hjelpe leserne dine til å identifisere nettstedet ditt visuelt.

Generelt er et favicon en 16 x 16 piksler kvadrat grafisk fil med utvidelsen .ico. Utvidelsen står for ikon.

Hvordan lage et Favicon

Du kan opprette favorittene dine online eller ved hjelp av bilderedigeringsprogrammer som GIMP, eller et hvilket som helst annet som lar deg lagre .ico-filer. De fleste av nettjenestene er gratis.

Selv om bildet vanligvis er veldig lite (16 x 16 piksler), skal favoritten representere bloggen din i sin helhet. Bildet eller teksten du bruker for å lage favorittene, skal representere din online virksomhet.

Hvis du bruker en bilderedigerer:

  • Beskjær eller legg til plass tilsvarende for å sikre at bildet ditt er kvadratisk
  • Endre størrelse på bildet til 16 x 16 piksler, og
  • Lagre bildet som favicon.ico

Internett-tjenester som du kan bruke til å opprette favoritter inkluderer (men ikke begrenset til):

Etter at du har opprettet favorittene dine, lar de deg laste den ned til datamaskinen din, så ikke bekymre deg.

Slik installerer du Favicon i WordPress

Hvis det er en annen favoritt i hovedmappen til temaet ditt, må du slette det ved å bruke FTP-klienten eller en hvilken som helst metode som er tilgjengelig for deg. FTP-klienter anbefales fordi de er enkle å bruke, og du raskt kan finne hvilken fil du leter etter.

For denne opplæringen brukte jeg faviconer.com for å lage et favicon for bloggen min og Filezilla for å slette eksisterende favicons.

Med favicon.ico-filen i hånden, kan du laste den opp i hovedmappen til temaet. Dette er mappen der ditt nåværende tema er lagret.

Last deretter opp en annen kopi av favikonet ditt til rotmappen (vanligvis public_html) eller hovedkatalogen der nettstedet ditt er lagret, slik at du kan se favikonet ditt når du skriver yoursite.com/favicon.ico. Dette vil automatisk legge til favorittene dine i innmatingene dine.

Når du er ferdig med å laste opp, er det på tide å få favicon.ico til å fungere. Dette er hva du bør gjøre:

Legge til din Favicon ved hjelp av en plugin

Den beste måten å legge til favorittene dine er å bruke en plugin. Jeg vil anbefale å bruke “Alt i ett Favicon”Plugin for mer avansert bruk for en veldig enkel tilnærming du kan bruke“Den enkleste favoritten”Plugin som ikke har noen back-end alternativer, du trenger bare å laste opp en fil som heter favicon.ico på riktig sted på serveren din.

alt-i-ett-favicon

Legger favicon manuelt til malen din

Noen mennesker foretrekker (selv om det ikke er den beste måten) å legge favicons manuelt til malen deres for å gjøre dette, følg følgende trinn:

  • Logg inn på din dashbord
  • Navigere til Utseende
  • Så til Editor (Theme Editor)
  • Finn og åpne header.php (header) fil

Legg til denne linjen i overskriftsfilen din (helst øverst der du ser andre tags:

Lagre når du er ferdig. 

Oppdater nettleseren for å se de nye endringene dine.

På dette tidspunktet bør du være i stand til å endre fargene dine, velge bedre skrifter, formatere datoer og klokkeslettet, bruke bilder og legge til en favoritt.

Konklusjon

Det er så mye å diskutere om å utforme WordPress-nettstedet ditt at det vil være en bjørnetjeneste (for deg) å prøve å dekke alt i et enkelt innlegg.

For å være mest fordelaktig for deg, er det best å dele opplæringen i flere deler (dette er del 1). Vi kommer til å dele flere redesigntriks når dagene kommer, så vær på utkikk. Formålet med disse opplæringsprogrammene er å hjelpe deg med å lage det beste WordPress-nettstedet noensinne og la deg føle deg lykkeligere fordi du gjorde alt på egen hånd.

Hvis du vil dele din mening (er) eller legge til noe i diskusjonen, kan du gjerne legge igjen kommentaren din i kommentarfeltet nedenfor!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me