Gendesign dit WordPress-websted (for at tilføje et personligt touch)

Ingen anden platform giver dig styrken til at tilpasse udseendet og følelsen af ​​dit websted som WordPress. Det er en af ​​grundene til, at WordPress er populær blandt både udgivere og webudviklere.


Du kan tage et grundlæggende (og trist) WP-tema, tilføje et logo, redigere et par kodelinjer, ændre din CSS og have et professionelt (endnu personligt) udseende websted på kort tid. Det er let arbejde, og denne tutorial viser dig, hvordan du gør det.

Er du klar? Lad os starte med de første ting først; farverne.

Design af et farveskema

Når du udvikler et farveskema til dit WordPress-sted, er der mange ting, du skal overveje. Tænk på det som at male dit hus eller din sten-og-mørtelbutik. Du skal bestemme den farve, der vil gå på dine vægge, og den farve, du vil have dine døre.

Den måde, du maler dine ydre og interiører på, afhænger af et par faktorer, der øverste er dine personlige præferencer.

At farve dit WordPress-sted er heller ikke anderledes. Hvilken farve vil du have dine links? Din baggrund, hvordan vil du gøre det mest tiltalende og efterlade dine konkurrenter munden agape? Hvilke farver vil komplementere (eller endda styrke) din besked? Hvordan vil du have din tekst? Himmelen er grænsen for valget af farver, du kan bruge på dit WP-sted.

Du skal bestemme alle de farver, du vil bruge fra starten. Jeg vil anbefale dig kun at holde dig til tre farver, men du kan frit bruge så mange farver, som du gerne vil.

Bare overdriv ikke, ellers vil du ende med at fortynde din marketingmeddelelse i al den farve. Når alt kommer til alt er et overskud af noget giftigt, så uanset hvilke farver du vælger, er det vigtigt at sikre, at der er harmoni.

Det er bedst at bruge de fleste farver, hvor et flertal af mennesker vil se (og forhåbentlig) elske dem. Jeg taler om dit logo og dit hoved. Disse områder er præcis, hvor du har brug for mest farver; resten af ​​dit websted kan være mindre farverigt, men mere informativt.

216 farver versus 12 farver

Vi er alle fortrolige med de tolv elementære farver, men internettet er fuld af farver og deres forskellige nuancer. Af denne grund kan det være en udfordrende opgave at vælge den farve, der udstråler personlig varme, mens du skaber et professionelt look.

Du er dog heldig, fordi jeg fiskede over hele internettet og fandt følgende værktøjer til at komme i gang:

Kuler

Kuler

Kuler blev designet af Adobe til at hjælpe webudviklere med at oprette top-of-the-class farveskemaer. Kuler er et online-værktøj, hvilket betyder, at du kan bære det rundt og bruge det hvor som helst, men der er også et desktop-program, der hjælper dig med at udvikle farveskemaer lige fra dit skrivebord. Hvis du desuden har et Adobe-ID, kan du gemme dine farveskemaer med et enkelt klik.

Der er forskellige farveregler, der skal bruges med Kuler, herunder monokromatisk, sammensat, komplementær, analog og triad blandt andre.

Tjek Kuler.

HTML FARVEKART

At kende de farver, du vil bruge, er kun halve jobbet. For at implementere dine farver skal du oversætte dem til HTML-koder.

html farvekort

Det er her HTML-farvekortet kommer ind. Det er et farverigt diagram med over 200 (216 faktisk) webfarvekoder. Bevæbnet med kortet, bør ingen farver under solen vise sig vanskelige at implementere.

Koderne fungerer med HTML, CSS, Adobe PhotoShop og andre grafiske manipuleringsværktøjer, så du har al friheden i verden til at lege med dine farver så meget som du gerne vil.

Tjek HTML-farvekortet.

GENOPAL

Hvis du har brug for hjælp til at vælge farver, er GenoPal det program, du ønsker. Det er en meget simpel webapplikation, der “benytter” farvepaletter til dit browservindue. Når du vælger dine farver, vises de i din browser i form af farvede “sticky notes”. ��

genopal

Med GenoPal kan du øge lysstyrken og kontrollere farvemætning, så du får nøjagtigt den skygge, du ønsker.

På deres hjemmeside er en mobilapp i pipeline. Når den er lanceret, giver den dig mulighed for at bære appen og udvikle farver på din mobile enhed. Deres design er genialt, og det faktum, at denne applikation faktisk fungerer, er et klart tegn på, at GenoPal betyder forretning.

COLORHEXA

ColorHexa er onlineversionen af kunstnerens malingsplade. Dette websted giver dig muligheden for at blande farver ved blot at indtaste farvekoder. Deres forerunning-app er værktøjet til blanding af farver, men de har også en gradientgenerator og en farvesubtraktion. Er ikke det rene geni på arbejdet her?

colorhexa

Hvordan fungerer ColorHexa Blender? Alt hvad du skal gøre er at indtaste dine farvekoder adskilt med en “+” og ColorHexa udfører resten af ​​arbejdet. For eksempel prøvede jeg:

# ff0000 + # 0000ff + # ff00ff og jeg fik # aa00aa. Derudover giver de dig en hel side med farveoplysninger (på din endelige farve f.eks. # Aa00aa). Dette er et værktøj, du skal prøve dig selv for at opleve farveblanding som aldrig før.

Tjek ColorHexa.

ULTIMATE CSS GRADIENT GENERATOR

ultimativ farvegradientgenerator

Dette er sandsynligvis det bedste værktøj, når det gælder generering af farvegradenter. Det er helt online og hjælper dig med at generere forfriskende midtpunkter og deres tilhørende CSS-koder. De leverer også tilføjelser til Chrome og Firefox, så du kan integrere appen i din browser for lettere og hurtigere adgang.

Der er et preview-område, hvor du ser din gradient, så alt hvad du skal gøre er at generere din gradient, som du finder passende og kopier indsæt den genererede CSS-kode. Det er virkelig så let, og de har flere farver, end du nogensinde vil bruge.

Tjek Ultimate CSS Gradient Generator.

Valg af skrifttyper

Nu hvor jeg har vist dig, hvordan du vælger og blander farver som Picasso, lad os lege med skrifttyperne.

Dine farver og webdesign trækker folk ind, men det er dine ord, dvs. dine sider og indlæg, der får folk til at holde sig rundt.

Vi har travlt med at skabe vores bedste historier på alle tidspunkter, så de fleste af os glemmer, at skrifttygerne også betyder noget. Men den skrifttype, du vælger, påvirker, hvordan folk interagerer med dit websted. Med de rigtige skrifttyper vil din målgruppe holde sig rundt og til sidst klikke videre til dine andre sider, hvilket er nøjagtigt, hvad du ønsker. Engagement.

Der er en million og en skrifttype derude, men desværre vil en bruger kun se de skrifttyper, der er installeret på deres maskine. Hvis den skrifttype, du bruger, ikke er installeret på deres maskiner, vil de se et tæt alternativ (eller en helt anden skrifttype), som ikke har den samme effekt, du ønskede.

”At lege med skrifttyper er som at lege med ild. Nogle gange kan det lyse en kamp på en webside, en gnist af smuk tekst. Andre gange kan det brænde hele huset ned. ” – Lorelle fra cameraontheroad.com.

Du kan kontrollere dine skrifttyper (og oprette den ønskede effekt) med dit typografiark. I dit tema er typografien normalt style.css fil. Du kan bruge denne fil til at kontrollere farven på dine skrifttyper, type font / font-familie, skriftstørrelse og andre aspekter af din valgte font.

Følgende er et godt eksempel:

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

Ovenstående kode indstiller fontstørrelsen i din menu til 0,8 em og indstiller farven til sort. Det vil også indstille skrifttypen til Arial, men hvis brugeren ikke har Arial på deres maskine, overtager Helvetica. Hvis de ikke har Helvetica eller Arial, overtager Verdana, Sans-serif eller Times New Roman.

Ved at kontrollere skrifttyperne kan du skabe et mere konsistent udseende.

For at løse problemet med fontinkonsekvens en gang for alle kan du dog bruge indlejrede skrifttyper. Ved at bruge indlejrede (eller eksterne) skrifttyper behøver brugeren ikke at have skrifttypen på deres maskine.

Derudover er det let-peasy arbejde.

Alt hvad du skal gøre er at åbne din style.css og sæt følgende kode øverst.

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

BEMÆRK: Du skal definere navnet og placeringen af ​​din font. I eksemplet ovenfor er “Museo300” skrifttypen, der blev gemt i en mappe med navnet “skrifttyper”.

For at bruge skrifttypen på tværs af dit websted kan du f.eks. Skrive:

body {font-family: Museo300;}

Du kan bruge en indlejret skrifttype til ethvert element på dit websted. For eksempel…

#menu {font-family: Museo300;}

… indstiller Museo300 i din menu.

Ovenstående metode betyder, at du skal downloade skrifttypen og uploade den samme til din server, som hvis du spørger mig er ret kedelig.

Imidlertid, ybehøver du ikke at downloade nogen ekstern font, du vil bruge.

Du kan blot linke til skrifttyperne fra dit hoved (header.php) sektion på en sådan måde:

Hvordan og hvor tilføjer du linjen ovenfor? Du skal åbne din WordPress Administration Panel -> Udseende -> Editor -> header.php

Hvis du ikke ønsker eller ikke kan redigere din header.php-fil, skal du bare importere skrifttyperne ved at indtaste følgende linje i din style.css:

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

Ovenstående eksempel giver dig mulighed for at bruge Over regnbuen font fra Google hvor som helst på dit websted. Hvis du f.eks. Ville bruge Over The Rainbow på hele dit websted, kan du bruge denne kode:

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

Google leverer over 600 gratis fontfamilier, så leg væk!

Opdatering (07/12/13): Hvis du gerne let vil tilføje Google-skrifttyper til dit WordPress-sted, kan du bruge Google Typografi-plugin. Bortset fra det kan du lære mere om Google-skrifttyper, og hvordan du implementerer dem i denne Forbedr din WordPress-webstedstypografi med Google-skrifttyper af Tom Ewer.

Flere ressourcer til at lege med skrifttyper

WordPress-plugins til tilføjelse af skrifttyper

Og for dem, der ikke ønsker at grave i kode, kan du altid installere et WordPress-plugin til at gøre noget af det tunge løft for dig. Her er et par af de mere populære gratis font plugins fra WordPress.com:

Har du det sjovt? Lad os gå videre…

 Formatering af dato og tid

Har du været på et WordPress-sted, der viste datoen eller klokkeslættet i en rigtig dejlig tone, der fik dig til at føle dig som en komplet noob, hvor dit websted var bekymret? Ejere af disse websteder har lige spillet med en enkelt kode og nu kan du ikke få nok af deres datoer. haha.

Gode ​​nyheder, du kan redigere denne kodelinje og overrask dine læsere også.

I din WP Dashboard, navigere til Udseende, og derefter til Editor som vist nedenfor:

formateringsdato

Når du først er der, vil du kunne se en liste over dine .php-filer helt til højre:

enkelt indlæg

Klik på enkelt indlæg (single.php), og når det er åbent, skal du åbne søgefeltet ved at trykke på Ctrl + F. Skriv i søgefeltet, der vises:

tiden

Du vil straks få øje på en linje, der kan se ud som:

Nu er det område, du vil redigere (‘F Y’).

Tillad mig at udskille dette afsnit for at give dig noget kødligere at bide på.

“F” i (‘F Y’) står for Månedens fulde navn og “Y” repræsenterer År med 4 cifre. Derfor, hvis du bruger (‘F Y’), vil din dato se ud:

September 2013

Hvis du kaster et komma mellem F og Y, skal du have noget som:

September 2013

Hvis du gerne vil tilføje dagen og andre elementer, kan du bruge følgende tegn:

l = Dagens fulde navn (små bogstaver L)

F = Måned

j = Månedens dag (datoen)

Y = År med 4 cifre

y = År med 2 cifre

Flere tegn kan findes i nedenstående tabel:

formatering af datatabel

Og her et par eksempler:

eksempler på dato

Husker altid kun at redigere tegnene inden for parentesen (‘F Y’) og, tage til efterretning, slet ikke de enkelte citatmærker. Brug gerne så mange tegn som du vil opnå den effekt, du ønsker, og husk at gemme alt, når du er færdig.

Hvad mere er, du kan slippe af med datoen ved at slette …

… som jeg gjorde på min blog for ikke længe siden. �� Nu, alt hvad jeg får er Indsendt af Fred i kategorien… og bla. Ingen datoer overhovedet.

Er du brændstof til den næste del? Du skal være bedre.

Fandt ikke funktionen_tid?

Det er ok, fordi mange temaer nu om dagen bruger funktionen_dato () i stedet for funktionen_tid (), som faktisk er bedre praksis. Hvis dit tema bruger funktionen_date () behøver du ikke foretage nogen redigering, fordi du simpelthen kan ændre den måde, dine data vises på dit dashboard under “Indstillinger-> Generelt”.

Brug af billeder

Dette er sandsynligvis den nemmeste (og korteste) del af denne tutorial. Men hvis du virkelig er ny med WordPress, kan tilføjelse af billeder være en udfordring.

WordPress giver dig mulighed for at tilføje billeder via upload-værktøjet eller (Tilføj medieknap), når du opretter et nyt indlæg eller en side. Alt hvad du skal gøre er at placere din markør, hvor du vil have billedet i dit indlæg eller din side, og klik derefter på “Tilføj medier”.

tilføj medier

Når upload-værktøjet åbnes, kan du tilføje andre detaljer, såsom din billedtekst, størrelse, links og justering.

upload-værktøj

Dette område findes til højre for upload-værktøjet.

Hvis du vil lære mere om tilføjelse af billeder, skal du tjekke følgende ressourcer:

Og hvis du ikke er sikker på, hvor du kan finde nogle fantastiske gratis billeder, skal du tjekke det indlæg, vi skrev dækkene, til de bedste billedressourcer til WordPress.

Se? Jeg sagde, det vil være den korteste ��

Tilføjelse af en Favicon

Inden vi helt glemmer billeder, lad os oprette og tilføje en favorit til dit WordPress-sted. Et favoritikon (eller favoritterikon) er det ikon, der bruges til at bogmærke et websted.

En favorit hjælper dine læsere med at identificere dit websted visuelt.

Generelt er en favorit en 16 x 16 pixels firkantet grafisk fil med udvidelsen .ico. Udvidelsen står for ikon.

Sådan opretter du en Favicon

Du kan oprette din favorit online eller ved hjælp af billedredigeringsprogrammer som GIMP eller et hvilket som helst andet, der giver dig mulighed for at gemme .ico-filer. De fleste af de online tjenester er gratis.

Selvom billedet normalt er meget lille (16 x 16 pixels), skal favoritnumre repræsentere din blog i sin helhed. Det billede eller tekst, du bruger til at oprette din favorit, skal repræsentere din online forretning.

Hvis du bruger en billedredigerer:

  • Beskær eller tilføj plads i overensstemmelse hermed for at sikre, at dit billede er firkantet
  • Ændre størrelsen på billedet til 16 x 16 pixels og
  • Gem billedet som favicon.ico

Onlinetjenester, som du kan bruge til at oprette favoritter inkluderer (men ikke begrænset til):

Når du har oprettet din favorit, giver de dig mulighed for at downloade den til din computer, så rol ikke.

Sådan installeres din Favicon i WordPress

Hvis der er en anden favorit i dit temas hovedmappe, bliver du nødt til at slette det ved hjælp af din FTP-klient eller en hvilken som helst metode tilgængelig for dig. FTP-klienter anbefales, fordi de er lette at bruge, og du kan hurtigt finde den fil, du leder efter.

Til denne tutorial brugte jeg faviconer.com til at oprette en favorit til min blog og Filezilla for at slette eksisterende favicons.

Med filen favicon.ico i hånden, upload det samme til dit temas hovedmappe. Dette er den mappe, hvor dit aktuelle tema er gemt.

Upload derefter en anden kopi af dit favicon til rodmappen (normalt public_html) eller hovedkataloget, hvor dit websted er gemt, så du kan være i stand til at se din favorit, når du indtaster yoursite.com/favicon.ico. Dette tilføjer automatisk din favorit til dine feeds.

Når du er færdig med at uploade, er det tid til at få din favicon.ico til at fungere. Dette skal du gøre:

Tilføjelse af din Favicon ved hjælp af et plugin

Den bedste måde at tilføje dit favicon på er at bruge et plugin. Jeg vil anbefale at bruge “Alt i én Favicon”Plugin til mere avanceret brug til en meget enkel tilgang, du kan bruge“Den enkleste favorit”Plugin, der ikke har nogen back-end-indstillinger, du skal bare uploade en fil kaldet favicon.ico på det rigtige sted på din server.

alt-i-én-favicon

Føje favicon manuelt til din skabelon

Nogle mennesker foretrækker måske (selv om det ikke er den bedste måde) at føje deres favoritter manuelt til deres skabelon for at gøre dette, følg følgende trin:

  • Log ind på din instrumentbræt
  • Naviger til Udseende
  • Så til Editor (Temaeditor)
  • Find og åben header.php (header) fil

Føj denne linje til din headerfil (helst øverst, hvor du ser en anden tags:

Gem, når du er færdig. 

Opdater din browser for at se dine nye ændringer.

På dette tidspunkt skal du være i stand til at ændre dine farver, vælge bedre skrifttyper, formatere datoer og klokkeslæt, bruge billeder og tilføje en favorit.

Konklusion

Der er så meget at diskutere om at redesigne dit WordPress-websted, at det ville være en bjørnetjeneste (for dig) at forsøge at dække alt i et enkelt indlæg.

For at gavne dig mest, er det bedst at opdele selvstudiet i flere dele (dette er del 1). Vi vil dele flere redesign-tricks, når der kommer dage, så vær på udkig. Formålet med disse tutorials er at hjælpe dig med at oprette det bedste WordPress-site nogensinde og forlade dig følelse gladere, fordi du gjorde det hele på egen hånd.

Hvis du gerne vil dele din mening (er) eller tilføje noget til diskussionen, er du velkommen til at give din kommentar i kommentarsektionen herunder!

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