Endurhönnun WordPress vefsíðunnar þinnar (til að bæta við persónulegu sniði)

Enginn annar vettvangur veitir þér kraftinn til að sérsníða útlit og tilfinningu vefsíðunnar þinna eins og WordPress. Það er ein af ástæðunum fyrir því að WordPress er vinsælt hjá útgefendum og vefur verktaki.


Þú getur tekið grunn (og slæpt) WP þema, bætt við lógói, breytt nokkrum línum af kóða, breytt CSS og haft faglega (en samt persónulega) útlit vefsíðu á skömmum tíma. Þetta er auðveld vinna og þessi kennsla sýnir þér hvernig þú gerir það.

Ert þú tilbúinn? Byrjum á fyrstu hlutunum fyrst; litirnir.

Að hanna litaskema

Þegar þú þróar litasamsetningu fyrir WordPress síðuna þína er margt sem þarf að huga að. Hugsaðu um það sem að mála húsið þitt, eða stein- og steypuhrærabúðina þína. Þú verður að ákvarða litinn sem verður á veggjum þínum og hvaða lit þú vilt hafa hurðir þínar.

Hvernig þú málar að utan og innréttingu fer eftir nokkrum þáttum þar sem persónulegar óskir þínar eru.

Að lita WordPress síðuna þína er heldur ekki öðruvísi. Hvaða lit viltu hafa tenglana þína? Bakgrunnur þinn, hvernig ætlarðu að gera það aðlaðandi og láta samkeppnisaðila þína vera munnlega? Hvaða litir munu bæta við (eða jafnvel styrkja) skilaboðin þín? Hvernig viltu hafa textann þinn? Himinninn er takmörkin við val á litum sem þú getur notað á WP vefsvæðinu þínu.

Þú verður að ákvarða alla liti sem þú notar frá upphafi. Ég myndi mæla með að þú haldir þig aðeins við þrjá liti en þér er frjálst að nota eins marga liti og þú vilt.

Ekki ofleika það ekki, þá endarðu á að þynna út markaðsskilaboðin í öllum þeim lit. Þegar öllu er á botninn hvolft er umfram allt eitrað, svo það er sama hvaða litir þú velur, það er mikilvægt að tryggja að það sé sátt.

Best er að nota sem flesta liti þar sem meirihluti fólks mun sjá (og vonandi) elska þá. Ég er að tala um lógóið þitt og masthead. Þessi svæði eru nákvæmlega þar sem þú þarft mest litina; restin af vefsíðunni þinni getur verið minna litrík en fræðandi.

216 litir á móti 12 litum

Við þekkjum öll tólf grunnlitina en vefurinn er fullur af litum og mismunandi litbrigðum þeirra. Af þessari ástæðu, getur það verið krefjandi verkefni að velja litinn sem gefur frá sér persónulega hlýju og skapa faglegt útlit.

Þú ert þó heppin því ég fiskaði um allt internetið og fann eftirfarandi tæki til að koma þér af stað:

KULER

kuler

Kuler var hannað af Adobe til að hjálpa vefur verktaki að búa til fyrsta flokks litaval. Kuler er tæki á netinu sem þýðir að þú getur borið það um og notað það hvert sem er, en það er líka skrifborðsforrit til að hjálpa þér að þróa litaval beint frá skjáborðinu þínu. Að auki, ef þú ert með Adobe ID, geturðu vistað litasamsetninguna þína með einum smelli.

Það eru ýmsar litareglur sem hægt er að nota með Kuler, þar á meðal einlita, samsett, viðbót, hliðstætt og þrígang, meðal annarra.

Skoðaðu Kuler.

HTML litatafla

Að þekkja litina sem þú notar er aðeins hálft starfið. Til að útfæra litina þína verðurðu að þýða þá yfir í HTML kóða.

html litakort

Þetta er þar sem HTML litakortið kemur inn. Það er litríkt kort með yfir 200 (216 reyndar) veflitakóða. Vopnaðir töflunni ætti enginn litur undir sólinni að reynast erfiður í framkvæmd.

Kóðarnir munu virka með HTML, CSS, Adobe PhotoShop og öðrum grafískum verkfæratækjum, svo þú hefur allt frelsi í heiminum til að leika með litina þína eins mikið og þú vilt.

Skoðaðu HTML litakortið.

GENOPAL

Ef þú þarft hjálp við að velja liti er GenoPal það forrit sem þú vilt. Þetta er mjög einfalt vefforrit sem „pinnar“ litatöflur í vafragluggann þinn. Þegar þú velur litina þína birtast þeir í vafranum þínum í formi litaðra „límmiða“. ��

arfbera

Með GenoPal geturðu aukið birtustigið og stjórnað litbrigði litarins svo þú fáir nákvæmlega þann skugga sem þú vilt.

Á vefsíðu þeirra er farsímaforrit í bígerð. Þegar það hefur verið hleypt af stokkunum mun það láta þig bera appið og þróa liti í farsímann þinn. Hönnun þeirra er sniðug og sú staðreynd að þetta forrit virkar í raun er skýr merki um að GenoPal þýðir viðskipti.

COLORHEXA

ColorHexa er netútgáfan af málaplata listamannsins. Þessi vefsíða gefur þér möguleika á að blanda litum með því að slá bara inn litakóða. Forerunning appið þeirra er litblöndunartólið en þau eru einnig með halla rafala og litadráttara. Er ekki þessi hrein snillingur í vinnunni hérna?

litarhexa

Hvernig virkar ColorHexa Blender? Allt sem þú þarft að gera er að slá inn litakóðana þína aðskilin með „+“ og ColorHexa gerir það sem eftir er af verkinu. Ég reyndi til dæmis:

# ff0000 + # 0000ff + # ff00ff og ég fékk # aa00aa. Það sem meira er, þeir gefa þér heila síðu með litaupplýsingum (um endanlegan lit þinn t.d. # aa00aa). Þetta er eitt tæki sem þú þarft að prófa sjálfan þig til að upplifa litablöndun sem aldrei fyrr.

Skoðaðu ColorHexa.

ULTIMATE CSS GRADIENT Generator

fullkominn litahlutir rafall

Þetta er líklega besta tólið hvað það varðar að búa til litahlutfall. Það er alveg á netinu og hjálpar þér að búa til hressandi miðpunkta og samsvarandi CSS kóða þeirra. Þeir bjóða einnig Chrome og Firefox viðbætur til að gera þér kleift að samþætta forritið í vafrann þinn til að auðvelda og hraðari aðgang.

Það er forsýningarsvæði þar sem þú sérð halla þína, svo allt sem þú þarft að gera er að búa til halla þína eins og þér hentar og klippa líma CSS kóða mynda. Það er í raun svo auðvelt og þeir hafa fleiri liti en þú munt nokkurn tíma nota.

Skoðaðu Ultimate CSS Gradient Generator.

Að velja leturgerðir

Nú þegar ég hef sýnt þér hvernig á að velja og blanda litum eins og Picasso, skulum leika okkur að leturgerðum.

Litirnir þínir og vefhönnun munu draga fólk til sín, en það eru orð þín, þ.e.a.s síðurnar þínar og færslur sem munu gera fólkinu kleift að festast.

Við erum upptekin við að búa til okkar bestu sögur á öllum tímum, svo flestir gleyma því að letrið skiptir líka máli. En letrið sem þú velur hefur áhrif á það hvernig fólk hefur samskipti við vefsíðuna þína. Með réttum letri vill markhópur þinn halda sig við og smella að lokum á aðrar síðurnar þínar, það er nákvæmlega það sem þú vilt. Trúlofun.

Það eru milljón og ein letur þarna úti, en því miður mun notandi aðeins sjá letrið sem eru sett upp á vélinni sinni. Ef letrið sem þú notar er ekki sett upp á vélunum þeirra munu þeir sjá náið val (eða allt annað letur), sem mun ekki hafa sömu áhrif og þú vildir.

„Að leika með leturgerðir er eins og að leika með eld. Stundum getur það kviknað eldspýtu á vefsíðu, glitrandi af fallegum texta. Aðra sinnum getur það brennt allt húsið niður. “ – Lorelle af cameraontheroad.com.

Þú getur stjórnað leturgerðum þínum (og búið til áhrifin sem þú vilt) með sniðmátinu þínu. Í þemu þinni er stílsnið venjulega style.css skjal. Þú getur notað þessa skrá til að stjórna lit leturgerða, tegund letur / leturfjölskyldu, leturstærð og öðrum þáttum valins leturs.

Eftirfarandi er gott dæmi:

#menu {font-family: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; leturstærð: 0,8 em; litur: svartur;}

Ofangreindur kóði setur leturstærðina í valmyndinni þinni á 0,8 em og stillir litinn á svart. Það mun einnig stilla letrið á Arial, en ef notandinn er ekki með Arial á vélinni sinni, þá tekur Helvetica við. Ef þeir eru ekki með Helvetica eða Arial munu Verdana, Sans-serif eða Times New Roman taka við.

Með því að stjórna letri geturðu búið til stöðugra útlit og tilfinningu.

Hins vegar, til að leysa vandamálið á ósamræmi í letri í eitt skipti fyrir öll, getur þú notað innfellda leturgerðir. Með því að nota innfelld (eða ytri) letur þarf notandinn ekki að hafa letrið á vélinni sinni.

Að auki er það auðvelt peasy vinna.

Allt sem þú þarft að gera er að opna style.css og settu eftirfarandi kóða efst.

@ font-face {font-family: Museo300; src: url ("leturgerðir / museo300-regular.ttf") snið: ('sönn gerð'); leturþyngd: venjulegt;}

ATH: Þú verður að skilgreina nafn og staðsetningu letrið. Í dæminu hér að ofan er „Museo300“ letrið sem var vistað í möppu sem hét „letur“.

Til að nota letrið á vefsíðu þinni, til dæmis, getur þú skrifað:

líkami {font-family: Museo300;}

Þú getur notað innfellda leturgerð fyrir hvaða þætti sem er á vefsíðunni þinni. Til dæmis…

#menu {font-family: Museo300;}

… Mun setja Museo300 í valmyndina.

Ofangreind aðferð þýðir að þú verður að hlaða niður letri og senda það sama á netþjóninn þinn, sem ef þú spyrð mig er nokkuð leiðinlegur.

Samt sem áður, yþú þarft ekki að hala niður neinu ytri letri sem þú vilt nota.

Þú getur einfaldlega tengt letrið úr hausnum þínum (header.php) eins og svo:

Hvernig og hvar bætirðu við línunni hér að ofan? Þú verður að opna WordPress stjórnunarborð -> Útlit -> Ritstjóri -> header.php

Ef þú vilt ekki eða getur ekki breytt haus.php skránni þinni skaltu bara flytja letrið með því að slá eftirfarandi línu í style.css:

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

Dæmið hér að ofan gerir þér kleift að nota Yfir regnbogann leturgerð frá Google hvar sem er á síðunni þinni. Til dæmis, ef þú vildir nota Over The Rainbow á vefsíðu þinni, gætirðu notað þennan kóða:

líkami {font-family: "Over The Rainbow";}

Google veitir yfir 600 ókeypis leturfjölskyldur, spilaðu svo í burtu!

Uppfæra (07/12/13): Ef þú vilt bæta Google leturgerðum við WordPress síðuna þína auðveldlega geturðu notað Google typography viðbót. Annað en þú getur lært meira um Google leturgerðir og hvernig á að útfæra þau í þessari Bæta WordPress vefsíðutegund með Google leturgerðum eftir Tom Ewer.

Meira úrræði um að leika með leturgerðir

WordPress viðbætur til að bæta við leturgerðum

Og fyrir þá sem ekki vilja grafa sig inn í kóða gætirðu alltaf sett upp WordPress tappi til að gera eitthvað af þungum lyftingum fyrir þig. Hér eru nokkur vinsælari ókeypis font viðbætur frá WordPress.com:

Ertu að skemmta þér? Höldum áfram…

 Forsnið dagsetningu og tíma

Hefurðu farið á WordPress síðu sem sýndi dagsetninguna eða tímann í virkilega fallegum tón sem lét þér líða eins og algjört noob hvað vefsvæðið þitt varða? Eigendur þessara vefsvæða spiluðu bara með a stak kóðalína og nú geturðu ekki fengið nóg af dagsetningum þeirra. Haha.

Góðar fréttir, þú getur breytt þessi kóðalína og komið lesendum þínum á óvart líka.

Í þínum WP mælaborð, sigla til Útlit, og síðan til Ritstjóri eins og sýnt er hér að neðan:

snið dagsetning

Þegar þangað er komið munt þú geta séð lista yfir .php skrárnar lengst til hægri:

staka færslu

Smelltu á eina færslu (single.php) og þegar hún er opin, opnaðu leitarstikuna með því að ýta á Ctrl + F. Sláðu inn í leitarstikuna sem birtist:

tíminn

Þú munt strax sjá línu sem gæti litið út eins og:

Núna er svæðið sem þú vilt breyta (‘F Y’).

Leyfðu mér að fletta þessum kafla út til að gefa þér eitthvað holdlegra að bíta á.

„F“ í (‘F Y’) stendur fyrir Fullt nafn mánaðarins og „Y“ táknar Ár í 4 tölustafir. Þess vegna, ef þú notar (‘F Y’), mun dagsetningin þín líta út eins og:

September 2013

Ef þú kastar kommu á milli F og Y ættirðu að hafa eitthvað eins og:

September 2013

Ef þú vilt bæta við deginum og öðrum þáttum geturðu notað eftirfarandi stafi:

l = Fullt nafn dagsins (lágstafir L)

F = mánuður

j = Dagur mánaðarins (dagsetningin)

Y = Ár í 4 tölustöfum

y = Ár í 2 tölustöfum

Fleiri stafir er að finna í töflunni hér að neðan:

forsníða dagsetningartöflu

Og hér nokkur dæmi:

forsníða dagsetningardæmi

Man alltaf eftir því að breyta aðeins stöfunum innan sviga (‘F Y’) og, takið eftir, ekki eyða stöku tilvitnunarmerkjum. Ekki hika við að nota eins marga stafi og þú vilt ná þeim áhrifum sem þú vilt og mundu að spara allt þegar þú ert búinn.

Það sem meira er, þú getur losað þig við dagsetninguna með því að eyða …

… Eins og ég gerði á blogginu mínu fyrir ekki löngu. �� Núna er það eina sem ég fæ Sent af Fred í svona og svo flokknum… bla bla. Engar dagsetningar yfirleitt.

Ertu eldsneyti fyrir næsta hluta? Þú skalt vera betri.

Fann ekki the_time aðgerð?

Það er í lagi, vegna þess að mörg þemu á sólarhringum nota_date () aðgerðina í staðinn fyrir_time () aðgerðina, sem er í raun betri framkvæmd. Ef þemað þitt er að nota the_date () aðgerð þarftu ekki að gera neina klippingu vegna þess að þú getur einfaldlega breytt því hvernig gögnin þín birtast á stjórnborði þínu undir „Stillingar-> Almennt“.

Notkun mynda

Þetta er líklega auðveldasta (og stysta) hlutinn af þessari kennslu. En ef þú ert virkilega nýr í WordPress getur það verið erfitt að bæta við myndum.

WordPress gerir þér kleift að bæta við myndum í gegnum hleðslutækið eða (Bæta við fjölmiðlahnappi) þegar þú býrð til nýja færslu eða síðu. Allt sem þú þarft að gera er að setja bendilinn þar sem þú vilt að myndin sé í færslunni þinni eða síðu og smelltu síðan á „Bæta við miðli“.

bæta við fjölmiðlum

Þegar upphleðslan hefur opnast geturðu bætt við öðrum upplýsingum eins og myndatexta, stærð, tenglum og röðun.

hlaða gagnsemi

Þetta svæði er til hægri við upphleðslutólið.

Til að læra meira um að bæta við myndum skaltu skoða eftirfarandi úrræði:

Og ef þú ert ekki viss um hvar þú getur fundið nokkrar ógnvekjandi ókeypis myndir skaltu kíkja á færsluna sem við skrifuðum á forsíðurnar fyrir bestu myndheimildir WordPress.

Sjáðu til? Ég sagði þér að það verður stysta ��

Bætir við Favicon

Leyfðu okkur að búa til og bæta við favicon á WordPress síðuna þína áður en við gleymum okkur algerlega. Favicon (eða uppáhaldstákn) er táknið sem notað er til að setja bókamerki á vefsíðu.

Favicon hjálpar lesendum þínum að bera kennsl á vefsíðuna þína.

Almennt er favicon 16 x 16 pixla ferningur myndræn skrá með endingunni .ico. Viðbyggingin stendur fyrir táknmynd.

Hvernig á að búa til Favicon

Þú getur búið til favicon þitt á netinu eða notað myndvinnsluforrit eins og GIMP eða annað sem gerir þér kleift að vista .ico skrár. Flestar netþjónusturnar eru ókeypis.

Þó að myndin sé venjulega mjög lítil (16 með 16 punktar) ætti favicon að tákna bloggið þitt í heild sinni. Myndin eða textinn sem þú notar til að búa til favicon þinn ætti að tákna vefverslun þinn.

Ef þú ert að nota myndvinnsluforrit:

  • Skeraðu eða bættu við plássi í samræmi við það til að tryggja að myndin þín sé ferningur
  • Breyttu stærð myndarinnar í 16 x 16 pixla og
  • Vistaðu myndina sem favicon.ico

Netþjónusta sem þú getur notað til að búa til favicons fela í sér (en ekki takmarkað við):

Eftir að þú hefur búið til favicon þitt munu þeir láta þig hlaða því niður í tölvuna þína, svo ekki hafa áhyggjur.

Hvernig á að setja upp Favicon þitt í WordPress

Ef það er annað favicon í aðalmöppu þemans, verður þú að eyða því með FTP viðskiptavininum þínum eða hvaða aðferð sem er tiltæk fyrir þig. Mælt er með FTP viðskiptavinum vegna þess að þeir eru auðveldir í notkun og þú getur fljótt fundið hvaða skrá sem þú ert að leita að.

Fyrir þessa kennslu notaði ég faviconer.com til að búa til favicon fyrir bloggið mitt og Filezilla til að eyða núverandi favicons.

Með skránni favicon.ico í hendi skaltu hlaða því sama upp í aðal möppu þemans. Þetta er möppan þar sem núverandi þema er geymt.

Hladdu síðan upp öðru afriti af favicon þínum í rótarmöppuna (venjulega public_html) eða að aðalmöppu þar sem vefsvæðið þitt er geymt, svo þú getur séð faviconið þitt þegar þú slærð inn yoursite.com/favicon.ico. Þetta bætir sjálfkrafa favicon þínum við straumana þína.

Þegar þú ert búinn að hlaða upp er kominn tími til að láta favicon.ico virka. Þetta er það sem þú ættir að gera:

Bætir við Favicon þínum með viðbót

Besta leiðin til að bæta við favicon þínum er að nota viðbót. Ég myndi mæla með að nota „Allt í einu Favicon”Viðbót fyrir fullkomnari notkun fyrir mjög einfalda aðferð sem þú getur notað“Einfaldasta Favicon”Viðbót sem er ekki með neina aftanmöguleika, þú verður bara að hlaða inn skrá sem heitir favicon.ico á réttum stað á netþjóninum þínum.

allt í einu favicon

Bæti favicon handvirkt við sniðmátið þitt

Sumir gætu kosið (jafnvel þó það sé ekki besta leiðin) að bæta favicons sínum handvirkt við sniðmátið sitt til að gera þetta með eftirfarandi skrefum:

  • Skráðu þig inn á Mælaborð
  • Sigla til Útlit
  • Síðan til Ritstjóri (þema ritstjóri)
  • Finndu og opnaðu haus.php (haus) skjal

Bættu þessari línu við hausskrána (helst efst þar sem þú sérð aðra merkingar:

Vista einu sinni gert. 

Endurnærðu vafrann þinn til að sjá nýju breytingarnar þínar.

Á þessum tímapunkti ættir þú að geta breytt litum þínum, valið betri leturgerðir, sniðið dagsetningar og tíma, notað myndir og bætt við favicon.

Niðurstaða

Það er svo mikið að ræða um að endurhanna WordPress síðuna þína að það væri þjónusta (fyrir þig) að reyna að ná öllu í einni færslu.

Til að gagnast þér sem best er best að skipta kennsluefninu í nokkra hluta (þetta er hluti 1). Við munum deila fleiri endurhönnuðum brellum þegar líður á daga, svo vertu á varðbergi. Tilgangurinn með þessum námskeiðum er að hjálpa þér að búa til bestu WordPress síðu alltaf og láta þig líða ánægðari vegna þess að þú gerðir allt á eigin spýtur.

Ef þú vilt deila skoðunum þínum eða bæta eitthvað við umræðuna skaltu ekki hika við að skilja eftir athugasemd þína í athugasemdahlutanum hér að neðan!

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