WordPressi veebisaidi ümberkujundamine (isikupära lisamine)

Ükski teine ​​platvorm ei anna teile volitust kohandada oma veebisaidi ilmet ja moodust nagu WordPress. See on üks põhjusi, miks WordPress on nii kirjastajate kui ka veebiarendajate seas populaarne.


Võite võtta tavalise (ja ühtlase) WP-teema, lisada logo, redigeerida mõnda koodirida, muuta CSS-i ja omada professionaalset (veel isikupärast) välimusega veebisaiti. See on lihtne töö ja see õpetus näitab teile, kuidas seda teha.

Oled sa valmis? Alustame kõigepealt kõigepealt asjadest; värvid.

Värviskeemi kujundamine

Oma WordPressi saidi värviskeemi väljatöötamisel tuleb arvestada paljude asjadega. Mõelge sellele kui oma maja või oma kivi- ja mördipoe maalimisele. Peate määrama värvi, mis teie seintel läheb, ja värvi, mida soovite oma ustele.

Välis- ja sisekujunduse viis sõltub paarist tegurist, mis lisaks on teie isiklikud eelistused.

Teie WordPressi saidi värvimine ei erine samuti. Mis värvi soovite oma linke? Teie taust, kuidas saate selle kõige ahvatlevamaks muuta ja konkurentidele suu kinni jätta? Millised värvid teie sõnumit täiendavad (või isegi võimendavad)? Kuidas soovite oma teksti? Taevas piirab teie WP-saidil kasutatavate värvide valikut.

Peate määrama kõik värvid, mida te algusest peale kasutate. Ma soovitaksin teil kinni pidada ainult kolmest värvist, kuid võite vabalt kasutada nii palju värve kui soovite.

Ärge üle pingutage, vastasel juhul lahjendate oma turundussõnumit selle värviga. Lõppude lõpuks on üleliigne miski mürgine, nii et hoolimata valitud värvitoonidest, on oluline tagada harmoonia.

Parim on kasutada kõige rohkem värve seal, kus enamus inimesi neid näeb (ja loodetavasti) armastab. Ma räägin teie logost ja mastipeast. Need alad on täpselt seal, kus vajate kõige rohkem värve; ülejäänud teie veebisait võib olla vähem värvikas, kuid informatiivsem.

216 värvi versus 12 värvi

Me oleme kõik kaheteistkümne põhivärviga tuttavad, kuid veeb on täis värve ja nende erinevaid toone. Just sel põhjusel võib professionaalse ilme loomiseks erilise värvi valimine olla keeruline ülesanne.

Teil on siiski õnne, sest ma kalasin kogu Internetis ja leidsin teie alustamiseks järgmised tööriistad:

KULER

kuler

Kuleri töötas välja Adobe, et aidata veebiarendajatel luua tipptasemel värvilahendusi. Kuler on võrgutööriist, mis tähendab, et saate seda kaasas kanda ja kasutada ükskõik kust, kuid seal on ka töölauarakendus, mis aitab teil värvilahendusi otse töölaual välja töötada. Kui teil on Adobe ID, saate lisaks oma värviskeemid salvestada ühe klõpsuga.

Kuleri jaoks on erinevaid värvireegleid, sealhulgas monokromaatiline, liit-, täiendav, analoogne ja triaadiline.

Tutvu Kuleriga.

HTML-värvikaart

Kasutatavate värvide tundmine on vaid pool tööd. Oma värvide rakendamiseks peate need tõlkima HTML-koodidesse.

html värvikaart

Siit tuleb HTML-värvikaart. See on värvikas diagramm, millel on üle 200 (tegelikult 216) veebikollektsiooni. Diagrammiga relvastatud ei tohiks ühegi päikese all oleva värvi rakendamine olla keeruline.

Koodid töötavad koos HTML, CSS, Adobe PhotoShop ja muude graafiliste manipulatsioonivahenditega, nii et teil on kogu maailmas vabadus mängida oma värvidega nii palju kui soovite.

Vaadake HTML-värvikaarti.

ÜLDINE

Kui vajate abi värvide valimisel, on GenoPal soovitud rakendus. See on väga lihtne veebirakendus, mis “seob” teie brauseriaknasse värvipaletid. Värvide valimisel ilmuvad need teie brauseris värviliste kleepitavate märkmete kujul. ��

genopaal

GenoPali abil saate heledust suurendada ja reguleerida värviküllastust, nii et saate täpselt soovitud tooni.

Nende veebisaidil on ettevalmistamisel mobiilirakendus. Kui see on käivitatud, võimaldab see teil rakendust kaasas kanda ja mobiilseadmes värve arendada. Nende disain on leidlik ja asjaolu, et see rakendus tegelikult töötab, on selge märk sellest, et GenoPal tähendab äri.

COLORHEXA

ColorHexa on veebisaidi versioon kunstniku maaliplaat. See veebisait annab teile võimaluse värve segada, sisestades lihtsalt värvikoodid. Nende eelkäiv rakendus on värvide segamise tööriist, kuid neil on ka gradientgeneraator ja värvi lahutaja. Kas siin pole mitte nii puhas geenius?

värviheksa

Kuidas ColorHexa segisti töötab? Kõik, mida peate tegema, on tippida oma värvikoodid eraldatud tähega “+” ja ColorHexa teeb ülejäänud töö. Näiteks proovisin:

# ff0000 + # 0000ff + # ff00ff ja sain # aa00aa. Veelgi enam, need annavad teile terve värvilise teabe lehe (teie lõpliku värvi kohta, nt # aa00aa). See on üks tööriist, mida peate proovima ise, et kogeda värvi segunemist nagu kunagi varem.

Tutvuge ColorHexaga.

ULTIMATE CSS GRADIENT GENERATOR

ülim värvigradientide generaator

See on ilmselt parim vahend, kui värvusgradiente luuakse. See on täiesti võrgus ja aitab teil luua värskendavaid keskpunkte ja neile vastavaid CSS-koode. Samuti pakuvad need Chrome’i ja Firefoxi lisandmooduleid, mis võimaldavad teil rakenduse hõlpsamaks ja kiiremaks brauserisse integreerida.

Seal on eelvaateala, kus näete oma gradienti, nii et peate vaid genereerima oma gradiendi, kui peate sobivaks ja kopeeri kleebi loodud CSS-kood. See on tõesti nii lihtne ja neil on rohkem värve, kui te kunagi kasutate.

Tutvuge Ultimate CSS gradientgeneraatoriga.

Fontide valimine

Nüüd, kui ma näitasin teile, kuidas valida ja segada värve, nagu Picasso, mängime fondidega ringi.

Teie värvid ja veebikujundus tõmbavad inimesi ligi, kuid just teie sõnad, st teie lehed ja postitused panevad inimesed kinni.

Oleme kogu aeg hõivatud oma parimate lugude loomisega, nii et enamik meist unustab, et ka fontil on tähtsus. Kuid teie valitud font mõjutab seda, kuidas inimesed teie veebisaidiga suhtlevad. Õigete fondide korral soovib teie sihtrühm ringi liikuda ja klõpsata oma teistele lehtedele, mis on täpselt see, mida soovite. Kihlus.

Seal on miljon ja üks font, kuid kahjuks näeb kasutaja ainult neid fonte, mis on nende arvutisse installitud. Kui teie kasutatavat fonti pole nende masinatesse installitud, näevad nad lähedast alternatiivi (või hoopis teistsugust fonti), millel pole teie soovitud efekti.

“Fontidega mängimine on nagu tulega mängimine. Mõnikord võib see sütitada veebilehe vaste, ilusa teksti sädeinimese. Muul ajal võib see kogu maja maha põletada. ” – Lorelle saidilt cameraontheroad.com.

Oma stiililehe abil saate oma fonte juhtida (ja soovitud efekti luua). Teie teemas on stiilileht tavaliselt stiil.css faili. Selle faili abil saate kontrollida oma fontide värvi, fondi tüüpi / fondiperekonda, fondi suurust ja muid valitud fondi aspekte.

Hea näide on järgmine:

#menu {font-family: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; kirjasuurus: 0,8em; värv: must;}

Ülaltoodud kood seab teie menüü kirjasuuruseks 0,8em ja värvi mustaks. See seab fondi ka Arial, kuid kui kasutajal pole Arialit nende masinas, võtab Helvetica selle üle. Kui neil pole Helvetica või Arialit, võtavad üle Verdana, Sans-serif või Times New Roman.

Fonte juhtides saate luua ühtlasema ilme ja tunde.

Fontide ebajärjepidevuse probleemi lõplikuks lahendamiseks võite siiski kasutada manustatud fonte. Manustatud (või väliseid) fonte kasutades ei pea kasutaja oma arvutis fonti olema.

Lisaks on see hõlbus töö.

Kõik, mida peate tegema, on avada oma stiil.css ja pange järgmine kood ülaossa.

@ font-face {font-family: Museo300; src: url ("fonts / museo300-regular.ttf") vorming: ('truetype'); kirjasuurus: tavaline;}

MÄRKUS. Peate määratlema oma fondi nime ja asukoha. Ülaltoodud näites on “Museo300” font, mis salvestati kausta nimega “fonts”.

Näiteks fondi kasutamiseks kogu oma veebisaidil võite kirjutada:

keha {font-family: Museo300;}

Manustatud fonti saate kasutada oma veebisaidi mis tahes elemendi jaoks. Näiteks…

#menu {font-family: Museo300;}

… Seab Museo300 teie menüüsse.

Ülaltoodud meetod tähendab, et peate fondi alla laadima ja selle oma serverisse üles laadima, mis on minu käest üsna tüütu.

Kuid, yte ei pea alla laadima ühtegi välist fonti, mida soovite kasutada.

Saate lihtsalt linkida oma peast (header.php) olevate fondidega, näiteks nii:

Kuidas ja kuhu te ülaltoodud rea lisate? Peate avama oma WordPressi halduspaneel -> Välimus -> Redaktor -> header.php

Kui te ei soovi või ei saa oma header.php-faili redigeerida, importige lihtsalt fondid, kirjutades oma stiil.css:

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

Ülaltoodud näide võimaldab teil kasutada Üle vikerkaare Google’i font teie saidil kõikjal. Näiteks kui soovite kasutada kogu oma veebisaidil rakendust Over The Rainbow, võite kasutada seda koodi:

keha {font-family: "Üle vikerkaare";}

Google pakub üle 600 tasuta fondiperekonna, nii et mängi ära!

Värskendus (07.12.13): Kui soovite oma WordPressi saidile hõlpsalt Google Fonte lisada, saate seda kasutada Google’i tüpograafia pistikprogramm. Lisaks saate lisateavet Google’i fondide ja nende juurutamise kohta järgmises artiklis: Parandage oma WordPressi veebisaidi tüpograafiat Google Fontsi abil Tom Ewer.

Rohkem ressursse fontidega mängimisel

WordPressi pluginad fontide lisamiseks

Ja neile, kes ei soovi koodi süveneda, võite alati installida WordPressi pistikprogrammi, et teie jaoks raskusi tõsta. Siin on mõned populaarsemad WordPress.com tasuta font-pistikprogrammid:

Kas sul on lõbus? Liigume edasi…

 Kuupäeva ja kellaaja vormindamine

Kas olete käinud WordPressi saidil, kus kuvati kuupäev või kellaaeg tõeliselt mõnusal toonil, mis pani teid tundma end täieliku noobina saidi suhtes? Nende saitide omanikud mängisid lihtsalt a üherealine kood ja nüüd ei saa te nende kuupäevadest piisavalt aru. Haha.

Hea uudis, saate redigeerida see koodirida ja üllatage ka oma lugejaid.

Oma WP armatuurlaud, navigeeri Välimus, ja siis Toimetaja nagu allpool näidatud:

vormindamise kuupäev

Seal olles näete paremas servas oma .php-failide loendit:

üksikpostitus

Klõpsake üksikut postitust (single.php) ja kui see on avatud, avage otsinguriba, vajutades Ctrl + F. Tippige ilmunud otsinguribale:

aeg

Märkate kohe rea, mis võib välja näha umbes selline:

Nüüd on ala, mida soovite redigeerida (‘F Y’).

Lubage mul seda jaotist täpsustada, et anda teile midagi lihasemat, mida hammustada.

Täht „F” („F Y”) tähistab Kuu täisnimi ja “Y” tähistab Aasta neljakohaline. Seega, kui kasutate (F Y), näeb teie kuupäev välja järgmine:

September 2013

Kui viskate koma F ja Y vahele, peaks teil olema midagi sellist:

September 2013

Kui soovite lisada päeva ja muid elemente, võite kasutada järgmisi märke:

l = päeva täielik nimi (väiketäht L)

F = kuu

j = kuu päev (kuupäev)

Y = aasta neljakohaline

y = aasta kahekohaline

Rohkem tähemärke leiate järgmisest tabelist:

kuupäevade tabeli vormindamine

Ja siin mõned näited:

kuupäeva näidete vormindamine

Pidage meeles, et soovite redigeerida ainult sulgudes (‘Y Y’) ja, võtta teadmiseks, ära kustuta üksikuid jutumärke. Kasutage soovitud efekti saavutamiseks nii palju märke kui soovite, ja pidage meeles, et salvestage kõik, kui see on tehtud.

Veelgi enam, kuupäevast saate lahti saada kustutades…

Nagu ma oma blogis tegin mitte kaua aega tagasi. �� Nüüd on kõik, mis ma saan Postitas Fred nii ja nii kategoorias… blah blah. Pole üldse kuupäevi.

Kas olete järgmise osa kütuseks? Parem oleks.

Funktsiooni_time ei leitud?

See on ok, kuna paljud teemad kasutavad päevade ajal funktsiooni_time () asemel funktsiooni_date (), mis on tegelikult parem praktika. Kui teie teema kasutab funktsiooni_date (), ei pea te redigeerimist tegema, kuna saate lihtsalt muuta andmete kuvamise viisi juhtpaneelil jaotises „Seaded-> Üldine“.

Piltide kasutamine

See on tõenäoliselt selle õpetuse kõige lihtsam (ja lühim) osa. Kuid kui olete WordPress tõesti uus, võib piltide lisamine olla väljakutse.

WordPress võimaldab teil uue postituse või lehe loomisel pilte üleslaadimisutiliidi või (nupu Lisa meedia) kaudu lisada. Teil on vaja vaid panna kursor kohale, kus soovite, et pilt teie postituses või lehel paikneks, ja klõpsake siis nuppu „Lisa meedia”.

lisage meediumid

Kui üleslaadimisutiliit avaneb, saate lisada muid üksikasju, näiteks pealdist, suurust, linke ja joondust.

üleslaadimise utiliit

See piirkond asub üleslaadimisutiliidi paremal küljel.

Piltide lisamise kohta lisateabe saamiseks vaadake järgmisi ressursse:

Ja kui te pole kindel, kust leida vingeid tasuta pilte, siis kontrollige meie kirjutatud postitust, mis hõlmab WordPressi parimaid pildiressursse.

Näete? Ma ütlesin, et see on lühim ��

Faviconi lisamine

Enne kui oleme piltide täielikult unustanud, looge ja lisage oma WordPressi saidile favicon. Favicon (või lemmikute ikoon) on ikoon, mida kasutatakse veebisaidi järjehoidjate lisamiseks.

Favicon aitab teie lugejatel teie veebisaiti visuaalselt tuvastada.

Üldiselt on favicon 16 x 16 piksline ruudukujuline graafiline fail laiendiga .ico. Laiend tähistab ikooni.

Kuidas luua Favicon

Saate oma faviconi luua veebis või kasutades pilditöötlusprogramme, näiteks GIMP, või mõnda muud, mis võimaldab .ico-faile salvestada. Enamik võrguteenuseid on tasuta.

Kuigi pilt on tavaliselt väga väike (16×16 pikslit), peaks favicon teie blogi tervikuna esindama. Pilt või tekst, mida kasutate oma faviconi loomisel, peaks esindama teie veebiettevõtteid.

Kui kasutate pildiredaktorit:

  • Kärbige või lisage vastavalt ruumi, et tagada pildi ruudukujuline kuju
  • Kujutise suuruse muutmine 16 x 16 pikslini ja
  • Salvestage pilt kujul favicon.ico

Veebiteenused, mida saate faviconite loomiseks kasutada, hõlmavad (kuid mitte ainult):

Pärast faviconi loomist lubavad nad teil selle oma arvutisse alla laadida, nii et ärge muretsege.

Faviconi installimine WordPressi

Kui teie teema peakataloogis on veel üks favicon, peate selle kustutama FTP-kliendi või mõne muu teile kättesaadava meetodi abil. FTP-kliente soovitatakse, kuna neid on lihtne kasutada ja saate kiiresti leida mis tahes faili, mida otsite.

Selle õpetuse jaoks kasutasin faviconer.com oma ajaveebi faviconi loomiseks ja Filezilla olemasolevate faviconite kustutamiseks.

Kui fail favicon.ico on käes, laadige see üles oma teema põhikausta. See on kaust, kuhu teie praegune teema on salvestatud.

Seejärel laadige oma faviconi uus koopia üles juurkausta (tavaliselt public_html) või põhikataloogi, kus teie saiti hoitakse, nii et saaksite oma faviconi näha saidi saidi.com/favicon.ico sisestamisel. See lisab teie kanalid automaatselt teie kanalitesse.

Kui olete üleslaadimise lõpetanud, on aeg oma favicon.ico tööle panna. Seda peaksite tegema:

Faviconi lisamine pistikprogrammi abil

Parim viis oma faviconi lisamiseks on pistikprogrammi kasutamine. Ma soovitaksin kasutadaKõik ühes Favicon”Pistikprogramm täpsemaks kasutamiseks väga lihtsaks lähenemiseks, mida saate kasutadaLihtsaim Favicon”Pistikprogrammil, millel pole taustafunktsioone, peate lihtsalt üles laadima faili nimega favicon.ico oma serveri õiges kohas.

kõik-ühes-favicon

Faviconi lisamine mallile käsitsi

Mõni inimene võib-olla eelistab (ehkki see pole kõige parem viis) lisada oma nägusid käsitsi malli, selleks toimige järgmiselt.

  • Logi sisse oma Armatuurlaud
  • Liikuge lehele Välimus
  • Siis kuni Toimetaja (teema toimetaja)
  • Leidke ja avage header.php (päis) faili

Lisage see rida päisefaili (eelistatavalt ülaosas, kus näete mõnda muud) sildid:

Salvestage, kui see on tehtud. 

Uute muudatuste nägemiseks värskendage brauserit.

Sel hetkel peaks teil olema võimalus muuta oma värve, valida paremaid fonte, vormindada kuupäevi ja kellaaega, kasutada pilte ja lisada favicon.

Järeldus

Teie WordPressi saidi ümberkujundamise üle on nii palju arutatud, et see oleks karuteene (teile) proovida kõike ühe postitusega katta.

Kõige rohkem teile kasu saamiseks on kõige parem jagada õppematerjal mitmeks osaks (see on 1. osa). Jagame päevade möödudes rohkem ümber kujundamise nippe, nii et olge valvel. Nende õpetuste eesmärk on aidata teil luua kõigi aegade parim WordPressi sait ja jätta teid õnnelikumaks, sest tegite kõik ise.

Kui soovite jagada oma arvamust (arvamusi) või lisada midagi arutellu, jätke palun oma kommentaar allolevasse kommentaaride jaotisse!

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