Redizajniranje web stranice WordPress (za dodavanje osobnog dodira)

Nijedna druga platforma vam ne omogućuje prilagođavanje izgleda i izgleda vašeg web mjesta poput WordPressa. To je jedan od razloga zašto je WordPress popularan među izdavačima i web programerima.


Možete preuzeti osnovnu (i crtačku) temu WP-a, dodati logotip, urediti nekoliko redaka koda, promijeniti CSS i ni u kojem trenutku imati profesionalnu (ali personaliziranu) web stranicu koja izgleda. To je lak posao, a ovaj će vam vodič pokazati kako to učiniti.

Jesi li spreman? Krenimo prvo od prvih stvari; boje.

Izrada sheme boja

Kada razvijate shemu boja za svoju web stranicu WordPress, ima mnogo toga za razmotriti. Zamislite to kao oslikavanje vaše kuće ili trgovine sa kamenom i mortom. Morate odrediti boju koja će se nalaziti na vašim zidovima i boju koju želite na vašim vratima.

Način bojanja vanjskih i interijera ovisit će o nekoliko faktora koji su najvažniji za vaše osobne preferencije.

Bojanje vaše WordPress stranice također se ne razlikuje. Koje boje želite svoje veze? Vaša pozadina, kako ćete učiniti najprivlačnijom i ostaviti usta konkurentima? Koje će boje nadopuniti (ili čak osnažiti) vašu poruku? Kako želite svoj tekst? Nebo je ograničenje izbora boja koje možete koristiti na WP web mjestu.

Morate odrediti sve boje koje ćete koristiti od početka. Preporučio bih vam da se držite samo tri boje, ali slobodno možete koristiti onoliko boja koliko želite.

Samo nemojte pretjerivati ​​ili ćete na kraju razrijediti svoju marketinšku poruku u toj boji. Uostalom, višak bilo čega je otrovan, bez obzira na boju koju odaberete, važno je osigurati harmoniju.

Najbolje je koristiti najviše boja tamo gdje će ih većina vidjeti (i nadamo se) da ih vole. Govorim o vašem logotipu i jarbolu. Ta su područja upravo tamo gdje vam treba najviše boja; ostatak vaše web stranice može biti manje živopisan, ali više informativan.

216 boja prema 12 boja

Svi smo upoznati s dvanaest elementarnih boja, ali web je prepun boja i njihovih različitih nijansi. Upravo iz tog razloga, odabir boje koja će isijavati osobnu toplinu dok stvara profesionalni izgled može biti izazovan zadatak.

Imate sreće, jer sam lovio po cijelom internetu i pronašao sljedeće alate za početak:

Kuler

Kuler

Kuler je dizajnirao Adobe kako bi pomogao web programerima da stvore vrhunske sheme boja. Kuler je internetski alat, što znači da ga možete nositi i koristiti ga bilo gdje, ali postoji i desktop aplikacija koja vam pomaže razviti sheme boja izravno sa radne površine. Pored toga, ako imate Adobe ID, svoje sheme boja možete spremiti jednim klikom.

Postoje različita pravila boje za Kuler, uključujući jednobojne, složene, komplementarne, analogne i trijade, između ostalih.

Pogledajte Kuler.

HTML BOJA BOJE

Poznavanje boja koje ćete koristiti samo je pola posla. Da biste implementirali svoje boje, morate ih prevesti u HTML kodove.

html grafikon boja

Ovo je mjesto gdje dolazi HTML Color Chart. To je šareni grafikon s preko 200 (216 zapravo) web koda boja. Naoružani grafikonom, niti jedna boja pod suncem ne bi se trebala pokazati teškom za implementaciju.

Kodovi će raditi s HTML, CSS, Adobe PhotoShop i drugim alatima za grafičku manipulaciju, tako da imate svu slobodu u svijetu da se igrate svojim bojama onoliko koliko želite.

Pogledajte tablicu boja HTML.

GENOPAL

Ako vam je potrebna pomoć u odabiru boja, GenoPal je aplikacija koju želite. To je vrlo jednostavna web aplikacija koja “pribada” palete boja na prozor preglednika. Dok odabirete svoje boje, u pregledniku se pojavljuju u obliku obojenih “ljepljivih bilješki”. ��

genopal

Pomoću GenoPal-a možete povećati svjetlinu i kontrolirati zasićenost nijanse, tako da dobijete upravo onu nijansu koju želite.

Na njihovoj web stranici u pripremi je mobilna aplikacija. Nakon što se pokrene, omogućit će vam da nosite aplikaciju i razvijate boje na svom mobilnom uređaju. Njihov dizajn je genijalan, a činjenica da ova aplikacija zapravo funkcionira jasan je znak da GenoPal znači posao.

COLORHEXA

ColorHexa je internetska inačica umjetnička slika ploča. Ova web stranica pruža vam mogućnost miješanja boja samo unosom šifri boja. Njihova aplikacija za predviđanje je alat za miješanje boja, ali oni također imaju gradijent gradijenta i oduzimanje boje. Nije li to ovdje čisti genij?

colorhexa

Kako djeluje ColorHexa Blender? Sve što trebate učiniti je upisati kodove u boji odvojene s “+”, a ColorHexa obavlja ostatak posla. Na primjer, pokušao sam:

# ff0000 + # 0000ff + # ff00ff i dobio sam # aa00aa. Uz to, daju vam cijelu stranicu informacija o boji (na vašoj konačnoj boji, npr. # Aa00aa). Ovo je jedan alat koji morate isprobati kako biste iskusili miješanje boja kao nikad do sad.

Pogledajte ColorHexa.

ULTIMATE CSS GRADIENT GENERATOR

krajnji generator gradijenta boja

Ovo je vjerojatno najbolji alat što se tiče gradijenta boja. Potpuno je na mreži i pomaže vam generirati osvježavajuće midpoints i njihove odgovarajuće CSS kodove. Također pružaju dodatke za Chrome i Firefox kako biste omogućili integraciju aplikacije u preglednik za lakši i brži pristup.

Postoji područje za pregled u kojem se vidi gradijent, pa sve što trebate učiniti je generirati svoj gradijent kako budete smatrali prikladnim i copy-paste generiran CSS kôd. Uistinu je tako jednostavno i imaju više boja nego što ćete ih ikada koristiti.

Pogledajte Ultimate CSS Gradient Generator.

Odabir fontova

Sad kad sam vam pokazao kako odabrati i kombinirati boje kao što je Picasso, igrajmo se sa fontovima.

Vaša boja i web dizajn privlačit će ljude, ali to će biti vaše riječi, tj. Vaše stranice i postovi zbog kojih će se ljudi zadržavati.

Zaposleni smo u stvaranju najboljih priča u svako doba, tako da većina nas zaboravlja da su i slova važna. Ali font koji odaberete utječe na interakciju ljudi s vaše web stranice. S pravim fontovima, vaša će se ciljna publika htjeti držati oko sebe i na kraju kliknuti na svoje ostale stranice, što je upravo ono što želite. Angažman.

Vani je milijun i jedan font, ali nažalost, korisnik će vidjeti samo fontove instalirane na svom stroju. Ako font koji koristite nije instaliran na njihovim strojevima, vidjet će blisku alternativu (ili potpuno drugačiji font), koji neće imati isti efekt koji ste željeli.

“Igranje s fontovima je poput igranja vatrom. Ponekad može upaliti podudarnost na web stranici, što pruža sjajan tekst. Drugi put može izgorjeti cijela kuća. ” – Lorelle iz cameraontheroad.com.

Možete upravljati svojim fontovima (i stvoriti željeni efekt) pomoću svoje tablice stilova. U vašoj je temi tablica stilova obično style.css datoteka. Ovu datoteku možete koristiti za kontrolu boje fontova, vrste fonta / porodice fontova, veličine fonta i ostalih aspekata vašeg odabranog fonta.

Sljedeći je dobar primjer:

#menu {obitelj fontova: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; veličina fonta: 0,8em; Crna boja;}

Gornji kôd postavit će veličinu fonta u vašem izborniku na 0,8em i boju će postaviti u crnu. Također će postaviti font na Arial, ali ako korisnik nema Arial na svom računalu, Helvetica će preuzeti. Ako nemaju Helveticu ili Arial, preuzet će Verdana, Sans-serif ili Times New Roman.

Kontroliranjem fontova možete stvoriti dosljedniji izgled i dojam.

Međutim, da biste jednom i zauvijek riješili problem nedosljednosti fonta, možete koristiti ugrađene fontove. Korištenjem ugrađenih (ili vanjskih) fontova korisnik ne mora imati font na svom stroju.

Uz to, posao je lagan.

Sve što trebate učiniti je otvoriti svoj style.css i sljedeći kod stavite na vrh.

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

NAPOMENA: Morate definirati ime i lokaciju vašeg fonta. U gornjem primjeru “Museo300” je font koji je spremljen u mapu pod nazivom “fontovi”..

Na primjer, da biste upotrebljavali font na vašoj web lokaciji, možete napisati:

Tijelo {font-family: Museo300;}

Možete koristiti ugrađeni font za bilo koji element na vašoj web lokaciji. Na primjer…

#menu {font-family: Museo300;}

… Postavit će Museo300 u vašem izborniku.

Gornja metoda znači da morate preuzeti font i isti ga poslati na svoj poslužitelj, što je, ako mene pitate, prilično zamorno.

Međutim, yne morate preuzimati vanjski font koji želite koristiti.

Možete jednostavno povezati fontove iz svog dijela glave (header.php) na sljedeći način:

Kako i gdje dodati gornju liniju? Morate otvoriti svoj Upravljačka ploča za WordPress -> Izgled -> Uređivač -> header.php

Ako ne želite ili ne možete urediti datoteku header.php, samo uvezite fontove tako što ćete u svoj sljedeći redak upisati style.css:

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

Gornji primjer omogućit će vam korištenje Preko duge font sa Googlea bilo gdje na vašoj web lokaciji. Na primjer, ako želite koristiti Over the Rainbow na svojoj web stranici, možete koristiti ovaj kôd:

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

Google pruža više od 600 besplatnih fontova, pa igraj u gostima!

Ažuriranje (07.12.2013.): Ako želite jednostavno dodati Google fontove na svoju WordPress web lokaciju, možete ih koristiti Dodatak Google Typography. Osim toga, možete saznati više o Googleovim fontovima i kako ih implementirati u ovom Poboljšajte svoju tipografiju web mjesta WordPress pomoću Google Fontova Tom Ewer.

Dodatni resursi za igru ​​s fontovima

WordPress dodaci za dodavanje fontova

A za one koji ne žele kopanje koda, uvijek možete instalirati WordPress dodatak da izvrši nešto teško podizanje za vas. Evo nekoliko popularnijih dodataka za besplatni font s WordPress.com:

Zabavljaš li se? Krenimo dalje …

 Formatiranje datuma i vremena

Jeste li bili na WordPress web mjestu koje je datum ili vrijeme prikazalo vrlo lijepim tonom zbog kojeg ste se osjećali kao potpuni noob koji se tiče vaše web lokacije? Vlasnici ovih stranica upravo su se igrali sa jedan redak koda i sad ne možete dobiti njihove datume. haha.

Dobre vijesti, možete urediti ova linija koda i iznenaditi svoje čitatelje.

U svom WP nadzorna ploča, dođite do Izgled, a onda do Urednik kako je prikazano dolje:

datum oblikovanja

Kad tamo stignete, moći ćete krajnje desno vidjeti popis vaših .php datoteka:

jedan post

Kliknite na jedan post (single.php) i nakon otvaranja otvorite traku za pretraživanje pritiskom Ctrl + F. U traku za pretraživanje koja se prikaže upišite:

vrijeme

Odmah ćete uočiti liniju koja može izgledati poput:

Sada je područje koje želite urediti (‘F Y’).

Dopustite mi da iscrpim ovaj dio kako bih vam dao nešto za meso.

“F” u (“F Y”) znači Puno ime mjeseca a “Y” predstavlja Godina s 4 znamenke. Stoga, ako koristite (‘F Y’), datum će izgledati:

Rujan 2013

Ako bacite zarez između F i Y, trebali biste imati nešto poput:

Rujan 2013

Ako želite dodati dan i ostale elemente, možete upotrijebiti sljedeće znakove:

l = Puno ime dana (mala slova L)

F = mjesec

j = Dan u mjesecu (datum)

Y = godina u 4 znamenke

y = Godina u dvije znamenke

Više tablica nalazi se u tablici ispod:

oblikovanje tablice datuma

Evo nekoliko primjera:

primjeri primjera datuma

Uvijek pamti da uređuje samo znakove unutar zagrada (“F Y”) i, uzeti na znanje, ne brišite pojedinačne navodnike. Slobodno upotrijebite onoliko znakova koliko želite da postignete željeni efekt i ne zaboravite da sve spremite kad završite.

Nadalje, možete se riješiti datuma brisanjem…

… Kao što sam to nedavno imao na svom blogu. �� E sad, sve što dobivam je Objavio Fred u tako kategoriji … bla bla. Nema datuma uopće.

Imate li goriva za sljedeći dio? Bolje ti je da.

Nisam pronašao funkciju_time?

To je u redu, jer mnoštvo tema sada dnevno koristi funkciju the_date () umjesto the_time () funkcije, što je zapravo bolja praksa. Ako vaša tema koristi funkciju_date (), nećete morati uređivati ​​jer jednostavno možete promijeniti način prikazivanja podataka na nadzornoj ploči u odjeljku “Postavke -> Općenito”.

Upotreba slika

To je vjerojatno najlakši (i najkraći) dio ovog vodiča. Ali ako ste zaista novi u WordPressu, dodavanje slika može biti izazov.

WordPress vam omogućuje dodavanje slika putem uslužnog programa za prijenos ili (gumb Dodaj medij) prilikom stvaranja novog posta ili stranice. Sve što trebate učiniti je postaviti pokazivač na mjesto gdje želite da se slika nalazi u vašem postu ili na stranici, a zatim kliknite “Dodaj medij”.

dodajte medije

Nakon što se otvori uslužni program za prijenos, možete dodati druge detalje, poput titla, veličine, veza i poravnanja.

upload uslužni program

To se područje nalazi na desnoj strani uslužnog programa za prijenos.

Da biste saznali više o dodavanju slika, molimo pogledajte sljedeće resurse:

A ako niste sigurni gdje pronaći neke fantastične besplatne slike, pogledajte post u kojem smo napisali pokriva najbolje slike za WordPress.

Vidjeti? Rekao sam ti da će to biti najkraće ��

Dodavanje Favicon-a

Prije nego što potpuno zaboravimo na slike, napravimo i dodajmo sadržaj na vašu WordPress stranicu. Favicon (ili ikona favorita) je ikona koja se koristi za označavanje web mjesta.

Favicon će pomoći vašim čitateljima da vizualno prepoznaju vašu web stranicu.

Favicon je općenito grafička datoteka veličine 16 X 16 piksela s nastavkom .ico. Proširenje označava ikonu.

Kako stvoriti favicon

Možete stvoriti vaš favicon putem interneta ili pomoću programa za uređivanje slika, poput GIMP-a, ili bilo kojeg drugog koji vam omogućuje spremanje .ico datoteka. Većina mrežnih usluga su besplatne.

Iako je slika obično vrlo mala (16 do 16 piksela), favicon bi trebao predstavljati vaš blog u cijelosti. Slika ili tekst koji koristite za stvaranje favicon-a trebali bi predstavljati vaše online poslovanje.

Ako koristite uređivač slika:

  • Obrežite ili dodajte prostor kako biste osigurali da je slika kvadratna
  • Promijenite veličinu slike na 16 X 16 piksela i
  • Spremite sliku kao favicon.ico

Internetske usluge koje možete koristiti za stvaranje šljokica uključuju (ali nisu ograničene na):

Nakon što stvorite favicon, omogućit će vam da je preuzmete na svoje računalo, pa ne brinite.

Kako instalirati svoj Favicon u WordPress

Ako se u glavnoj mapi vaše teme nalazi još jedan favicon, morat ćete ga izbrisati pomoću FTP klijenta ili bilo koje druge metode koja vam je dostupna. FTP klijenti se preporučuju jer su jednostavni za upotrebu i brzo možete pronaći onu datoteku koju tražite.

Za ovaj tutorial koristio sam faviconer.com da stvorim favicon za svoj blog i Filezilla za brisanje postojećih favicons.

S datotekom favicon.ico u ruci, učitajte je u glavnu mapu svoje teme. Ovo je mapa u kojoj je pohranjena trenutna tema.

Zatim prenesite još jedan primjerak svog favicon-a u korijensku mapu (obično public_html) ili glavni direktorij u kojem je pohranjena vaša web lokacija, kako biste mogli vidjeti svoj favicon kad upišete tvojeite.com/favicon.ico. To će automatski dodati vaše sadržaje u vaše feedove.

Kada završite s prijenosom, vrijeme je da svoj favicon.ico pokrenete. To je ono što biste trebali učiniti:

Dodavanje Favicon dodataka

Najbolji način da dodate svoj sadržaj je dodatak. Preporučio bih korištenje „Sve u jednom faviconu“Dodatak za napredniju upotrebu za vrlo jednostavan pristup koji možete koristiti”Najjednostavniji Favicon“Dodatak koji nema rezervne opcije jednostavno morate učitati datoteku zvanu favicon.ico na točno mjesto na poslužitelju.

sve-u-jednom-favicon

Dodavanje favicon-a ručno u vaš predložak

Neki će možda poželjeti (iako to nije najbolji način) da svoje šablone ručno dodaju u predložak, da bi to učinili slijedeći sljedeće korake:

  • Prijavite se u svoj kontrolna ploča
  • Dođite do Izgled
  • Zatim na Urednik (uređivač tema)
  • Pronađite i otvorite header.php (zaglavlje) datoteka

Dodajte ovaj redak datoteci zaglavlja (po mogućnosti na vrhu gdje vidite ostale oznake:

Spremi nakon završetka. 

Osvježite preglednik da biste vidjeli svoje nove promjene.

U ovom trenutku trebali biste moći mijenjati svoje boje, odabrati bolje fontove, formatirati datume i vrijeme, koristiti slike i dodati favicon.

Zaključak

Toliko je diskusija o redizajniranju vaše WordPress web lokacije da bi bilo štetno (vama) pokušati pokriti sve u jednom postu.

Da biste imali najviše koristi, najbolje je udžbenik podijeliti u nekoliko dijelova (ovo je prvi dio). Kako ćemo dani dijeliti više trikova za redizajn, budite oprezni. Svrha ovih vodiča je da vam pomognu stvoriti najbolju WordPress stranicu ikad i ostaviti vas sretnijima jer ste sve to napravili sami.

Ako želite podijeliti svoje mišljenje ili nešto dodati u raspravu, slobodno ostavite svoj komentar u odjeljku za komentare ispod!

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