Preoblikovanje spletnega mesta WordPress (Dodajanje osebnega dotika)

Nobena druga platforma vam ne daje moči, da prilagodite videz svojega spletnega mesta, kot je WordPress. To je eden od razlogov, da je WordPress priljubljen tako pri založnikih kot pri spletnih razvijalcih.


Lahko vzamete osnovno (in povlečete) temo WP, dodate logotip, uredite nekaj vrstic kode, spremenite CSS in v nobenem trenutku oblikujete profesionalno (vendar personalizirano) spletno mesto. Delo je enostavno in ta vadnica vam bo pokazala, kako to storiti.

Si pripravljen? Začnimo najprej pri prvih stvareh; barve.

Oblikovanje barvne sheme

Pri razvoju barvne sheme za vaše WordPress spletno mesto je treba upoštevati veliko stvari. Zamislite si to kot barvanje hiše ali trgovine s kamni in malto. Določiti morate barvo, ki bo šla na vaše stene, in barvo, ki jo želite.

Način, kako barvate zunanjost in notranjost, bo odvisen od nekaj dejavnikov, od katerih so največ osebne želje.

Tudi barvanje spletnega mesta WordPress se ne razlikuje. Kakšne barve želite povezave? Vaše ozadje, kako boste postali najbolj privlačni in pustili usta konkurentom? Katere barve bodo dopolnile (ali celo opolnomočile) vaše sporočilo? Kako želite besedilo? Nebo je meja izbire barv, ki jih lahko uporabite na svojem spletnem mestu WP.

Določiti morate vse barve, ki jih boste uporabljali od začetka. Priporočam, da se držite le treh barv, vendar lahko uporabite toliko barv, kot bi želeli.

Samo ne pretiravajte ali boste na koncu razredčili svoje tržno sporočilo v vsej tej barvi. Konec koncev je odvek ničesar strupen, zato je ne glede na barve, ki jih izberete, pomembno zagotoviti harmonijo.

Najbolje je, da uporabite največ barv, kjer jih bo večina ljudi videla (in upam, da jih imajo radi). Govorim o vašem logotipu in glavobolu. Ta območja so točno tam, kjer potrebujete največ barv; ostalo spletno mesto je lahko manj barvito, a bolj informativno.

216 barv v primerjavi z 12 barvami

Vsi smo seznanjeni z dvanajstimi osnovnimi barvami, toda splet je poln barv in njihovih različnih odtenkov. Prav zaradi tega je izbira barve, ki bo izžarevala osebno toplino ob ustvarjanju profesionalnega videza, zahtevna naloga.

Vendar imate srečo, saj sem lovil po internetu in našel naslednja orodja, s katerimi boste začeli:

KULER

kuler

Kuler je zasnoval Adobe, da bi pomagal spletnim razvijalcem pri ustvarjanju vrhunskih barvnih shem. Kuler je spletno orodje, kar pomeni, da ga lahko nosite okrog sebe in ga uporabljate od koder koli, obstaja pa tudi namizna aplikacija, ki vam pomaga razviti barvne sheme kar na namizju. Poleg tega, če imate Adobe ID, lahko barvne sheme shranite z enim klikom.

Pri Kulerju lahko uporabljate različna barvna pravila, vključno z enobarvnimi, sestavljenimi, dopolnilnimi, analognimi in triadnimi.

Oglejte si Kuler.

HTML BARVA BARVE

Poznavanje barv, ki jih boste uporabljali, je le polovica posla. Za izvajanje barv jih morate prevesti v HTML kode.

html barvna lestvica

Tukaj prihaja barvna lestvica HTML. To je barvita lestvica z več kot 200 (216 dejansko) spletnimi barvnimi kodami. Oborožena s shemo, nobena barva pod soncem ne bi smela biti težko izvedljiva.

Kode bodo delovale z HTML, CSS, Adobe PhotoShop in drugimi grafičnimi orodji za manipulacijo, tako da imate vso svobodo na svetu, da se igrate z barvami, kolikor želite..

Oglejte si barvno lestvico HTML.

SPLOŠNO

Če potrebujete pomoč pri izbiri barv, je GenoPal aplikacija, ki jo želite. Gre za zelo preprosto spletno aplikacijo, ki barvno paleto pripne v okno brskalnika. Ko izbirate barve, se v brskalniku pojavijo v obliki barvnih “lepljivih zapisov”. ��

genopal

Z GenoPal lahko povečate svetlost in nadzorujete nasičenost odtenka, tako da dobite ravno tisto senco, ki jo želite.

Na njihovi spletni strani je v pripravi mobilna aplikacija. Ko ga zaženete, vam omogoča, da nosite aplikacijo in razvijate barve na svoji mobilni napravi. Njihova zasnova je iznajdljiva in dejstvo, da ta aplikacija dejansko deluje, je jasen znak, da GenoPal pomeni posel.

COLORHEXA

ColorHexa je spletna različica slikarska plošča umetnika. To spletno mesto vam omogoča mešanje barv s samo vnosom barvnih kod. Njihova aplikacija za predhodno oblikovanje je orodje za mešanje barv, imajo pa tudi gradientni generator in barvno odštevanje. Ali ni to tu čisto genij?

colorhexa

Kako deluje mešalnik ColorHexa? Vse kar morate storiti je, da vtipkate svoje barvne kode, ločene z znakom “+”, preostalo delo pa ColorHexa. Na primer, poskusil sem:

# ff0000 + # 0000ff + # ff00ff in dobil sem # aa00aa. Poleg tega imajo celotno stran informacij o barvah (o končni barvi, npr. # Aa00aa). To je eno orodje, ki ga morate sami preizkusiti, da se boste barvno mešanje izkusili kot še nikoli.

Oglejte si ColorHexa.

ULTIMATE CSS GRADIENT GENERATOR

ultimativni barvni gradientni generator

To je verjetno najboljše orodje, kar se tiče ustvarjanja barvnih gradientov. Popolnoma je na spletu in vam pomaga ustvariti osvežujoče vmesne točke in ustrezne kode CSS. Ponujajo tudi dodatke za Chrome in Firefox, s katerimi lahko aplikacijo vključite v svoj brskalnik za lažji in hitrejši dostop.

Obstaja območje predogleda, kjer vidite svoj gradient, tako da morate gradient ustvariti tako, kot se vam zdi primerno in Kopiraj prilepi ustvarjena CSS koda Res je tako enostavno in imajo več barv, kot jih boste kdaj uporabili.

Oglejte si Ultimate CSS Gradient Generator.

Izbira pisav

Zdaj, ko sem vam pokazal, kako izbrati in mešati barve, kot je Picasso, se igrajmo s pisavami.

Vaše barve in spletni dizajn bodo privlačili ljudi, vendar bodo vaše besede, tj. Vaše strani in objave, zaradi katerih se bodo ljudje zadrževali.

Ves čas smo zaposleni pri ustvarjanju svojih najboljših zgodb, tako da večina od njih pozabimo, da so pisave tudi pomembne. Toda izbrana pisava vpliva na to, kako ljudje komunicirajo z vašim spletnim mestom. S pravimi pisavami se bo vaše ciljno občinstvo želelo zadržati in na koncu klikniti na druge strani, kar je točno tisto, kar želite. Zavzetost.

Tam je milijon in ena pisava, a na žalost bo uporabnik videl samo pisave, ki so nameščene na svojem stroju. Če pisava, ki jo uporabljate, ni nameščena na njihovih strojih, bodo videli tesno alternativo (ali popolnoma drugačno pisavo), ki ne bo imela enakega učinka, kot ste ga želeli.

»Igranje s pisavami je kot igranje z ognjem. Včasih lahko prižge ujemanje na spletni strani, kar je všečno besedilo. Drugi čas lahko požre celo hišo. ” – Lorelle z cameraontheroad.com.

S svojo pisavo lahko nadzorujete svoje pisave (in ustvarite želeni učinek). V vaši temi je ponavadi tabela slog style.css mapa. S to datoteko lahko nadzorujete barvo pisav, vrsto pisave / družino pisav, velikost pisave in druge vidike izbrane pisave.

Naslednji primer je dober primer:

#menu {font-family: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; velikost pisave: 0,8em; barva: črna;}

Zgornja koda nastavi velikost pisave v vašem meniju na 0,8em in barvo nastavi na črno. Pisava bo tudi nastavila na Arial, če pa uporabnik na svojem stroju nima Arial, bo Helvetica prevzel. Če nimajo Helvetice ali Arial, bodo prevzeli Verdana, Sans-serif ali Times New Roman.

Z nadzorom pisav lahko ustvarite bolj dosleden videz in občutek.

Če želite rešiti težavo neskladnosti pisave enkrat za vselej, lahko uporabite vdelane pisave. Z uporabo vdelanih (ali zunanjih) pisav uporabniku ni treba imeti pisave na svojem stroju.

Poleg tega je to enostavno-kmečko delo.

Vse kar morate storiti je, da odprete svoje style.css in na vrh postavite naslednjo kodo.

@ font-face {font-family: Museo300; src: url ("fonts / museo300-regular.ttf") format: ('truetype'); teža pisave: normalno;}

OPOMBA: Določiti morate ime in lokacijo pisave. V zgornjem primeru je pisava “Museo300” pisava, ki je bila shranjena v mapi z imenom “pisave”.

Če želite na primer uporabiti pisavo na svojem spletnem mestu, lahko napišete:

telo {družina pisav: Museo300;}

Za vsak element na svojem spletnem mestu lahko uporabite vdelano pisavo. Na primer …

#menu {družina pisav: Museo300;}

… Bo v vašem meniju nastavil Museo300.

Zgoraj opisana metoda pomeni, da morate naložiti pisavo in jo naložiti na svoj strežnik, kar je, če mene vprašate, precej mučno.

Vendar pa, yvam ni treba prenesti nobene zunanje pisave, ki jo želite uporabiti.

Na pisave lahko preprosto povežete iz glave (header.php) tako:

Kako in kam dodate vrstico zgoraj? Odprite svoje Nadzorna plošča WordPress -> Videz -> Urejevalnik -> header.php

Če ne želite ali ne morete urediti datoteke header.php, samo uvozite pisave tako, da vtipkate naslednjo vrstico v svoj style.css:

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

Zgornji primer vam bo omogočil uporabo Čez mavrico pisavo od Googla kjer koli na vašem spletnem mestu. Na primer, če želite uporabljati Over The Rainbow na svojem spletnem mestu, lahko uporabite to kodo:

body {družina pisav: "Over the Rainbow";}

Google ponuja več kot 600 brezplačnih družin pisav, zato igrajte stran!

Posodobitev (12.7.2013): Če želite preprosto dodati Googlove pisave na svoje WordPress spletno mesto, lahko uporabite Vtičnik Google Typography. Poleg tega lahko izveste več o Googlovih pisavah in kako jih izvajati v tem Izboljšajte svojo tipografijo spletnega mesta WordPress z Googlovimi pisavami avtorja Tom Ewer.

Več virov za igranje s pisavami

WordPress vtičniki za dodajanje pisav

In za tiste, ki se ne želijo vpisovati v kodo, lahko vedno namestite WordPress vtičnik, ki bi za vas opravil nekaj težkega dvigovanja. Tu je nekaj bolj priljubljenih brezplačnih vtičnikov pisave s strani WordPress.com:

Se zabavaš? Gremo naprej…

 Oblikovanje datuma in časa

Ste bili na spletnem mestu WordPress, ki je datum ali čas prikazoval v zelo lepem tonu, zaradi katerega ste se počutili kot popoln noob, kar zadeva vaše spletno mesto? Lastniki teh spletnih mest so se pravkar igrali z ena vrstica kode in zdaj ne morete dobiti dovolj njihovih datumov. Haha.

Dobre novice, lahko uredite ta vrstica kode in presenetite tudi svoje bralce.

V svojem WP nadzorna plošča, pojdite na Videz, in nato na Urednik kot je prikazano spodaj:

datum oblikovanja

Ko boste tam, si lahko na skrajni desni strani ogledate seznam datotek .php:

ena objava

Kliknite na eno objavo (single.php) in ko je odprta, odprite iskalno vrstico s pritiskom Ctrl + F. V iskalno vrstico, ki se prikaže, vnesite:

čas

Takoj boste opazili vrstico, ki bi lahko izgledala nekako tako:

Zdaj je področje, ki ga želite urediti („F Y“).

Dovolite mi, da razdelim ta odsek, da vam dam nekaj mesa.

“F” v (“F Y”) pomeni Polno ime meseca in “Y” predstavlja Leto v 4 števkah. Če boste uporabili (‘F Y’), bo vaš datum izgledal tako:

September 2013

Če vstavite vejico med F in Y, morate imeti nekaj takega:

September 2013

Če želite dodati dan in druge elemente, lahko uporabite naslednje znake:

l = polno ime dneva (mala črka L)

F = mesec

j = Dan v mesecu (datum)

Y = leto v 4 števkah

y = leto v 2 števkah

V spodnji tabeli je več znakov:

oblikovanje tabele datumov

In tukaj je nekaj primerov:

primeri formatiranja datumov

Vedno si zapomni, da ureja samo znake v oklepaju (“F Y”) in, upoštevati, ne brišite enojnih narekovajev. Uporabite toliko znakov, da želite doseči želeni učinek, in ne pozabite, da vse shranite, ko končate.

Še več, datuma se lahko znebite tako, da izbrišete …

… Tako kot pred kratkim na svojem blogu. �� Zdaj imam samo to Objavil Fred v tej in tako kategoriji… bla bla. Terminov sploh ni.

Se vam napolni naslednji del? Raje bodi.

Nisem našel funkcije_time?

To je v redu, saj številne teme zdaj na dan uporabljajo funkcijo the_date () namesto the_time (), kar je dejansko boljša praksa. Če vaša tema uporablja funkcijo_date (), vam ne bo treba urejati, ker lahko preprosto spremenite način prikaza podatkov na nadzorni plošči v razdelku »Nastavitve-> Splošno«.

Uporaba slik

To je verjetno najlažji (in najkrajši) del te vadnice. Če pa ste za WordPress resnično novi, je dodajanje slik lahko izziv.

WordPress vam omogoča, da dodate slike s pomočjo pripomočka za nalaganje ali (gumb Add Media) pri ustvarjanju nove objave ali strani. Vse kar morate storiti je, da kurzor postavite tja, kjer želite, da je slika v vaši objavi ali strani, in nato kliknite »Dodaj predstavnost«.

dodajte medije

Ko se odpre pripomoček za nalaganje, lahko dodate druge podrobnosti, na primer napis, velikost, povezave in poravnavo.

naložite pripomoček

To območje je na desni strani pripomočka za nalaganje.

Če želite izvedeti več o dodajanju slik, si oglejte naslednje vire:

In če niste prepričani, kje najti nekaj osupljivih brezplačnih slik, si oglejte objavo, v katero smo napisali platnice, ki ponujajo najboljše slikovne vire za WordPress.

Vidite? Rekel sem ti, da bo najkrajši ��

Dodajanje Favicon-a

Preden popolnoma pozabimo na slike, ustvarimo in dodamo favicon na vaše WordPress spletno mesto. Favicon (ali ikona priljubljenih) je ikona, ki se uporablja za zaznamek spletnega mesta.

Favicon bo vašim bralcem pomagal vizualno prepoznati vaše spletno mesto.

Na splošno je favicon kvadratna grafična datoteka velikosti 16 X 16 pik s pripono .ico. Podaljšek pomeni ikono.

Kako ustvariti favicon

Favicon lahko ustvarite v spletu ali s pomočjo programov za urejanje slik, kot je GIMP, ali katerega koli drugega, ki omogoča shranjevanje datotek .ico. Večina spletnih storitev je brezplačnih.

Medtem ko je slika ponavadi zelo majhna (16 16 slikovnih pik), bi favicon moral vaš blog predstavljati v celoti. Slika ali besedilo, ki ga uporabljate za ustvarjanje svojega spletnega mesta, bi moralo predstavljati vaše spletno podjetje.

Če uporabljate urejevalnik slik:

  • Obrežite ali dodajte prostor, da bo vaša slika kvadratna
  • Velikost slike spremenite na 16 X 16 slikovnih pik in
  • Sliko shranite kot favicon.ico

Spletne storitve, ki jih lahko uporabite za ustvarjanje uporabnikov, vključujejo (vendar niso omejene na):

Ko ustvarite svoj favicon, vam bo omogočil prenos v računalnik, zato ne skrbite.

Kako namestiti vaš favicon v WordPress

Če je v glavni mapi vaše teme še en favicon, ga boste morali izbrisati s svojim odjemalcem FTP ali katerim koli načinom, ki vam je na voljo. Odjemalce FTP priporočamo, ker so enostavne za uporabo in lahko hitro najdete tisto datoteko, ki jo iščete.

Za to vadnico sem s faviconer.com ustvaril favicon za svoj blog, Filezilla pa za izbris obstoječih favicons.

Z datoteko favicon.ico naložite isto v glavno mapo svoje teme. To je mapa, v kateri je shranjena vaša trenutna tema.

Nato naložite še eno kopijo favicon-a v korensko mapo (ponavadi public_html) ali glavni imenik, kjer je vaše spletno mesto shranjeno, da boste lahko videli svoj favicon, ko vtipkate tvojeite.com/favicon.ico. To bo samodejno dodalo vaš favicon v vaše vire.

Ko končate s prenosom, je čas, da svoj favicon.ico začnete delovati. To morate storiti:

Dodajanje Favicon-a s pomočjo vtičnika

Najboljši način za dodajanje favicon-a je uporaba vtičnika. Priporočam uporabo “Vse v enem faviconu“Vtičnik za bolj napredno uporabo za zelo preprost pristop, ki ga lahko uporabite”Najpreprostejši Favicon“Vtičnik, ki nima nobenih dodatnih možnosti, morate na strežnik naložiti datoteko z imenom favicon.ico na pravilno mesto.

vse-v-enem-faviconu

Nekateri bi morda radi (čeprav to ni najboljši način) ročno dodali svoje uporabnike v predlogo, če želite to narediti na naslednji način:

  • Prijavite se v svoj Armaturna plošča
  • Pomaknite se na Videz
  • Nato na Urejevalnik (Urejevalnik tem)
  • Poiščite in odprite header.php (header) mapa

Dodajte to vrstico v svojo glavo glave (po možnosti na vrhu, kjer vidite druge oznake:

Shrani enkrat končano. 

Osvežite brskalnik in si oglejte nove spremembe.

Na tej točki bi morali imeti možnost spremeniti barve, izbrati boljše pisave, oblikovati datume in čas, uporabiti slike in dodati favicon.

Zaključek

O preoblikovanju spletnega mesta WordPress je toliko razpravljati, da bi bilo za vas (če želite) poskusiti zajeti vse v enem samem postu.

Da bi vam najbolj koristili, je najbolje, da vadnico razdelite na več delov (to je 1. del). Ko bodo dnevi, bomo delili več trikov o preoblikovanju, zato bodite na preži. Namen teh vadnic je, da vam pomagajo ustvariti najboljše WordPress spletno mesto doslej in se pustite počutiti srečnejše, ker ste vse to naredili sami.

Če želite deliti svoje mnenje ali dodati nekaj k razpravi, vas prosimo, da svoj komentar pustite v spodnjem razdelku za komentarje.!

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