Zmena dizajnu webovej stránky WordPress (pridanie osobného kontaktu)

Žiadna iná platforma vám nedá moc prispôsobiť vzhľad a dojem z vašich webových stránok, ako je WordPress. Je to jeden z dôvodov, prečo je WordPress obľúbený medzi vydavateľmi aj webovými vývojármi.


Môžete si vziať základnú (a fádnu) tému WP, pridať logo, upraviť niekoľko riadkov kódu, zmeniť svoj CSS a mať profesionálny (ale personalizovateľný) web, ktorý vyzerá čo najskôr. Je to ľahká práca a tento tutoriál vám ukáže, ako na to.

Si pripravený? Najprv začneme prvými vecami; farby.

Navrhovanie farebnej schémy

Pri vývoji farebnej schémy pre váš web WordPress je treba zvážiť veľa vecí. Pomyslite na to ako na maľovanie domu alebo kamenného obchodu. Musíte určiť farbu, ktorá pôjde na vaše steny, a farbu, ktorú chcete, aby vaše dvere.

Spôsob, akým budete maľovať svoje exteriéry a interiéry, bude záležať na vašich osobných preferenciách.

Farbenie vašich stránok WordPress sa tiež nelíši. Akú farbu chcete mať? Vaše zázemie, ako to urobíte najpríťažlivejšie a necháte svojich konkurentov v ústach? Ktoré farby doplnia (alebo dokonca posilnia) vašu správu? Ako chceš svoj text? Obloha predstavuje limit výberu farieb, ktoré môžete použiť na svojej webovej stránke WP.

Musíte od začiatku určiť všetky farby, ktoré budete používať. Odporúčam vám, aby ste sa držali iba troch farieb, ale môžete používať ľubovoľný počet farieb.

Len to nepreháňajte, inak skončíte riedením marketingovej správy vo všetkých farbách. Koniec koncov, prebytok všetkého je jedovatý, takže bez ohľadu na to, aké farby si vyberiete, je dôležité zabezpečiť súlad.

Najlepšie je použiť tie farby, v ktorých ich väčšina ľudí uvidí (a dúfajme), že ich budú milovať. Hovorím o vašom logu a mastheade. Tieto oblasti sú presne tam, kde potrebujete najviac farieb; zvyšok vašich webových stránok môže byť menej farebný, ale informatívnejší.

216 farieb versus 12 farieb

Všetci poznáme dvanásť základných farieb, ale web je plný farieb a ich rôznych odtieňov. Práve z tohto dôvodu môže byť výber farby, ktorá vyžaruje osobné teplo pri vytváraní profesionálneho vzhľadu, náročnou úlohou.

Máte však šťastie, pretože som lovil po celom internete a na začiatku som našiel nasledujúce nástroje:

Kuler

Kuler

Spoločnosť Kuler bola navrhnutá spoločnosťou Adobe, aby vývojárom webu pomohla vytvoriť špičkové farebné schémy. Kuler je online nástroj, čo znamená, že ho môžete prenášať a používať odkiaľkoľvek. K dispozícii je však aj počítačová aplikácia, ktorá vám pomôže vyvinúť farebné schémy priamo z vášho počítača. Okrem toho, ak máte Adobe ID, môžete farebné schémy uložiť jediným kliknutím.

Existuje niekoľko rôznych pravidiel farieb, ktoré sa dajú používať s Kulerom, medzi inými okrem iného monochromatické, zložené, doplnkové, analógové a triády..

Pozrite sa na Kulera.

Farebná schéma HTML

Poznať farby, ktoré budete používať, je iba polovica práce. Ak chcete implementovať svoje farby, musíte ich preložiť do HTML kódov.

html farebná schéma

Tu prichádza farebná schéma HTML. Je to farebná schéma s viac ako 200 (skutočne 216) webovými farebnými kódmi. Vyzbrojení mapou, žiadna farba pod slnkom by nemala byť náročná na implementáciu.

Kódy budú pracovať s HTML, CSS, Adobe PhotoShop a ďalšími grafickými manipulačnými nástrojmi, takže budete mať akúkoľvek slobodu na svete hrať si s vašimi farbami tak, ako by ste chceli..

Pozrite sa na farebnú schému HTML.

GENOPAL

Ak potrebujete pomoc pri výbere farieb, aplikácia GenoPal je požadovaná aplikácia. Jedná sa o veľmi jednoduchú webovú aplikáciu, ktorá „špendlíka“ farebných paliet do okna prehliadača. Keď si vyberiete farby, objavia sa vo vašom prehliadači vo forme farebných „poznámok“. ��

genopal

S GenoPal môžete zvýšiť jas a sýtosť odtieňov ovládania, takže získate presne požadovaný odtieň.

Na ich webových stránkach sa pripravuje mobilná aplikácia. Po spustení vám umožní prenášať aplikáciu a vyvíjať farby na vašom mobilnom zariadení. Ich dizajn je dômyselný a skutočnosť, že táto aplikácia skutočne funguje, je jasným znakom toho, že GenoPal znamená podnikanie.

COLORHEXA

Je online verzia umelecká maliarska doska. Táto webová stránka vám umožňuje kombinovať farby jednoduchým zadaním farebných kódov. Ich predchodcovská aplikácia je nástroj na miešanie farieb, ale majú aj generátor gradientu a subtraktor farieb. Nie je to tu čisto génius?

colorhexa

Ako funguje mixér ColorHexa? Všetko, čo musíte urobiť, je zadať farebné kódy oddelené znakom „+“ a spoločnosť ColorHexa vykoná zvyšok práce. Napríklad som vyskúšal:

# ff0000 + # 0000ff + # ff00ff a dostali sme # aa00aa. Navyše vám poskytujú celú stránku informácií o farbách (na vašej konečnej farbe, napr. # Aa00aa). Toto je jeden nástroj, ktorý musíte vyskúšať, aby ste zažili miešanie farieb ako nikdy predtým.

Vyskúšajte ColorHexa.

ULTIMATE CSS GRADIENT GENERATOR

konečný generátor farebného gradientu

Toto je pravdepodobne najlepší nástroj, pokiaľ ide o generovanie farebných prechodov. Je úplne online a pomáha vám vytvárať osviežujúce stredové body a ich zodpovedajúce kódy CSS. Poskytujú tiež doplnky pre prehliadače Chrome a Firefox, ktoré vám umožňujú integrovať aplikáciu do prehliadača a zjednodušiť tak rýchlejší prístup.

Tam je oblasť ukážky, kde vidíte svoj prechod, takže všetko, čo musíte urobiť, je vygenerovať prechod, ako uznáte za vhodné kopírovať vložiť vygenerovaný kód CSS. Je to skutočne také ľahké a majú viac farieb, ako ste kedy použili.

Vyskúšajte Ultimate CSS Gradator Generator.

Zbierame písma

Teraz, keď som vám ukázal, ako si vybrať a kombinovať farby, ako je Picasso, poďme sa pohrať s fontami.

Vaše farby a webový dizajn pritiahnu ľudí, sú to však vaše slová, t. J. Vaše stránky a príspevky, vďaka ktorým sa ľudia budú držať.

Sme zaneprázdnení tvorbou našich najlepších príbehov za všetkých okolností, takže väčšina z nás zabudne, že na fontoch záleží. Zvolené písmo však ovplyvňuje spôsob, akým ľudia interagujú s vašimi webovými stránkami. So správnymi typmi písma sa vaša cieľová skupina bude chcieť držať a nakoniec preklikať na svoje ďalšie stránky, čo je presne to, čo chcete. stretnutiu.

K dispozícii je milión a jedno písmo, používateľ však, žiaľ, uvidí iba písma, ktoré sú nainštalované na jeho počítači. Ak písmo, ktoré používate, nie je nainštalované na ich počítačoch, zobrazí sa mu blízka alternatíva (alebo úplne iné písmo), ktorá nebude mať rovnaký účinok, aký ste chceli.

„Hranie pomocou písiem je ako hranie s ohňom. Niekedy to môže zapáliť zhodu na webovej stránke, prskavka pekného textu. Inokedy to môže spáliť celý dom. “ – Lorelle z cameraontheroad.com.

Svoje písma môžete ovládať (a vytvárať požadovaný efekt) pomocou šablóny so štýlmi. Vo vašej téme je obyčajne šablóna so štýlmi style.css file. Pomocou tohto súboru môžete ovládať farbu písma, typ písma / rodiny fontov, veľkosť písma a ďalšie aspekty zvoleného písma..

Nasleduje dobrý príklad:

#menu {font-family: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; veľkosť písma: 0,8em; farba: čierna;}

Vyššie uvedený kód nastaví veľkosť písma v ponuke na 0,8m a farbu na čiernu. Nastaví tiež písmo na Arial, ale ak používateľ nemá na svojom počítači Arial, prevezme ho Helvetica. Ak nebudú mať Helveticu alebo Arial, prevezmú Verdana, Sans-serif alebo Times New Roman.

Ovládaním písiem môžete vytvárať konzistentnejší vzhľad a dojem.

Ak však chcete vyriešiť problém nekonzistentnosti písma raz a navždy, môžete použiť vložené písma. Použitím vložených (alebo externých) písiem používateľ nemusí mať písmo na svojom počítači.

Navyše je to ľahká roľnícka práca.

Všetko, čo musíte urobiť, je otvoriť váš style.css a nasledujúci kód umiestnite na začiatok.

@ font-face {family-family: Museo300; src: url ("fonts / museo300-regular.ttf") formát: ('truetype'); font-weight: normálne;}

POZNÁMKA: Musíte definovať názov a umiestnenie vášho písma. V príklade vyššie je „Museo300“ písmo, ktoré bolo uložené v priečinku s názvom „fonts“.

Ak chcete napríklad použiť písmo na svojom webe, môžete napísať:

body {font-family: Museo300;}

Zabudované písmo môžete použiť pre ľubovoľný prvok na svojej webovej stránke. Napríklad…

#menu {font-family: Museo300;}

… nastaví Museo300 vo vašom menu.

Vyššie uvedená metóda znamená, že si musíte stiahnuť písmo a nahrať ho na svoj server, čo, ak sa ma pýtate, je dosť únavné.

však, ynemusíte sťahovať žiadne externé písmo, ktoré chcete použiť.

Môžete jednoducho prepojiť na písma z vašej hlavy (header.php), napríklad:

Ako a kde pridáte riadok vyššie? Musíte otvoriť svoje Panel administrácie WordPress -> Vzhľad -> Editor -> header.php

Ak nechcete alebo nemôžete upraviť svoj súbor header.php, stačí importovať písma zadaním nasledujúceho riadku do svojho súboru. style.css:

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

Vyššie uvedený príklad vám umožní používať Nad dúhou písmo od spoločnosti Google kdekoľvek na vašom webe. Napríklad, ak chcete používať Over The Rainbow na svojom webe, môžete použiť tento kód:

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

Google poskytuje viac ako 600 rodín fontov zdarma, tak hrajte ďalej!

Aktualizácia (7. 12. 2013): Ak chcete na svoj web WordPress pridať písma Google Google, môžete použiť Doplnok pre typografiu Google. Okrem toho sa môžete dozvedieť viac o fontoch Google a o tom, ako ich implementovať v tomto Vylepšite typografiu webových stránok WordPress pomocou písiem Google od Toma Ewera..

Viac zdrojov na hranie s písmami

Doplnky WordPress na pridávanie písiem

A pre tých, ktorí sa nechcú kopať do kódu, môžete vždy nainštalovať doplnok WordPress, aby pre vás urobil nejaké ťažké kroky. Tu je niekoľko najpopulárnejších bezplatných doplnkov pre písma zo stránok WordPress.com:

Bavíte sa? Poďme ďalej …

 Formátovanie dátumu a času

Boli ste na stránkach WordPress, ktoré zobrazovali dátum alebo čas v naozaj peknom tóne, vďaka ktorému ste sa cítili ako úplný noob, pokiaľ ide o vaše stránky? Majitelia týchto stránok práve hrali so serverom jeden riadok kódu a teraz nemôžete mať dostatok ich dátumov. haha.

Dobré správy, môžete ich upravovať tento riadok kódu a prekvapiť aj svojich čitateľov.

Vo vašom Prístrojová doska WP, prejsť na vzhľad, a potom na Editor ako je uvedené nižšie:

dátum formátovania

Keď tam budete, uvidíte zoznam vašich súborov .php úplne vpravo:

jeden príspevok

Kliknite na jeden príspevok (single.php) a po jeho otvorení otvorte vyhľadávací panel stlačením Ctrl + F. Do zobrazeného vyhľadávacieho panela napíšte:

čas

Okamžite uvidíte riadok, ktorý by mohol vyzerať asi takto:

Teraz je oblasť, ktorú chcete upraviť („F Y“).

Dovoľte mi vystúpiť z tejto sekcie, aby som vám dal niečo mäsité, na ktoré sa budete hrýzť.

Symbol „F“ v („F Y“) znamená Úplný názov mesiaca a „Y“ predstavuje Rok so 4 číslicami. Preto, ak používate („F Y“), váš dátum bude vyzerať takto:

September 2013

Ak hodíte čiarkou medzi F a Y, mali by ste mať niečo ako:

September 2013

Ak chcete pridať deň a ďalšie prvky, môžete použiť nasledujúce znaky:

l = celé meno dňa (malé písmeno L)

F = mesiac

j = deň v mesiaci (dátum)

Y = rok so 4 číslicami

y = rok v 2 čísliciach

Viac znakov nájdete v nasledujúcej tabuľke:

formátovacia tabuľka

A tu je niekoľko príkladov:

príklady formátovania dátumu

Vždy si pamätám, že je možné upravovať iba znaky v zátvorkách („F Y“) a, zaznamenať si, neodstraňujte jednotlivé úvodzovky. Neváhajte použiť toľko znakov, koľko chcete, aby ste dosiahli požadovaný efekt, a nezabudnite si všetko uložiť, keď budete hotoví.

A čo viac, môžete sa zbaviť dátumu odstránením …

… ako som to urobil na svojom blogu nedávno. �� Teraz všetko, čo dostanem, je Postúpil Fred v tejto a tej kategórii … bla bla. Žiadne dáta.

Máte palivo pre ďalšiu časť? Radšej buď.

Nenašli sme funkciu the_time?

To je v poriadku, pretože mnoho tém dnes používa funkciu the_date () namiesto funkcie the_time (), čo je v skutočnosti lepšia prax. Ak váš motív používa funkciu the_date (), nemusíte robiť žiadne úpravy, pretože jednoducho môžete zmeniť spôsob, akým sa vaše údaje zobrazujú na hlavnom paneli v časti „Nastavenia -> Všeobecné“.

Používanie obrázkov

Toto je pravdepodobne najjednoduchšia (a najkratšia) časť tohto návodu. Ale ak ste v programe WordPress skutočne nováčikom, pridávanie obrázkov môže byť výzvou.

WordPress vám umožňuje pridávať obrázky pomocou nástroja na nahrávanie alebo (tlačidla Pridať médium) pri vytváraní nového príspevku alebo stránky. Všetko, čo musíte urobiť, je umiestniť kurzor na miesto, kde sa má obrázok nachádzať na vašom príspevku alebo stránke, a potom kliknúť na „Pridať médiá“.

pridať médiá

Po otvorení pomôcky na nahrávanie môžete pridať ďalšie podrobnosti, ako napríklad popis, veľkosť, odkazy a zarovnanie.

nástroj na odovzdanie

Táto oblasť sa nachádza na pravej strane nástroja na nahrávanie.

Ak sa chcete dozvedieť viac o pridávaní obrázkov, pozrite si nasledujúce zdroje:

A ak si nie ste istí, kde nájdete úžasné obrázky zadarmo, prečítajte si príspevok, ktorý sme napísali, obsahuje najlepšie zdroje obrázkov pre WordPress.

Vidíš? Povedal som ti, že to bude najkratšie ��

Pridanie favicon

Skôr ako úplne zabudneme na obrázky, vytvorte a pridajte favicon na vaše stránky WordPress. Favicon (alebo ikona obľúbených položiek) je ikona, ktorá sa používa na záložku webovej stránky.

Favicon pomôže vašim čitateľom vizuálne identifikovať vašu webovú stránku.

Všeobecne je favicon štvorcový grafický súbor s rozmermi 16 x 16 pixlov s príponou .ico. Rozšírenie je skratka pre ikonu.

Ako vytvoriť favicon

Môžete vytvoriť svoj favicon online alebo pomocou programov na úpravu obrázkov, ako je GIMP, alebo iných programov, ktoré vám umožňujú ukladať súbory .ico. Väčšina online služieb je bezplatná.

Aj keď je obrázok zvyčajne veľmi malý (16 x 16 pixelov), favicon by mal predstavovať váš blog ako celok. Obrázok alebo text, ktorý používate na vytvorenie svojho favicon, by mal predstavovať vaše online podnikanie.

Ak používate editor obrázkov:

  • Podľa toho orežte alebo pridajte medzeru, aby ste sa uistili, že váš obrázok je štvorcový
  • Zmena veľkosti obrázka na 16 x 16 pixlov a
  • Uložte obrázok ako favicon.ico

Medzi online služby, ktoré môžete použiť na vytvorenie favicon, patria (okrem iného):

Po vytvorení vášho favicon ho budete môcť stiahnuť do svojho počítača, takže sa nemusíte báť.

Ako nainštalovať váš Favicon do WordPress

Ak sa v hlavnom priečinku témy nachádza ďalší favicon, budete ho musieť odstrániť pomocou vášho FTP klienta alebo pomocou akejkoľvek dostupnej metódy. FTP klienti sa odporúčajú, pretože sa ľahko používajú a môžete rýchlo nájsť ľubovoľný súbor, ktorý hľadáte.

Pre tento tutoriál som použil faviconer.com na vytvorenie favicon pre môj blog a Filezilla na odstránenie existujúcich favicons.

So súborom favicon.ico v ruke ho odovzdajte do hlavného priečinka témy. Toto je priečinok, v ktorom je uložená vaša aktuálna téma.

Potom nahrajte ďalšiu kópiu svojho favicon do koreňového priečinka (zvyčajne public_html) alebo do hlavného adresára, v ktorom sú uložené vaše stránky, aby ste mohli vidieť svoj favicon, keď napíšete yoursite.com/favicon.ico. Týmto sa váš favicon automaticky pridá do vašich kanálov.

Po dokončení nahrávania je čas, aby ste spustili funkciu favicon.ico. Toto by ste mali urobiť:

Pridanie vášho Favicon pomocou doplnku

Najlepším spôsobom, ako pridať svoj favicon, je použitie doplnku. Odporučil by som použiť „All In One Favicon„Plugin pre pokročilejšie použitie pre veľmi jednoduchý prístup, ktorý môžete použiť“Najjednoduchší favicon”, Ktorý nemá žiadne možnosti typu back-end, stačí nahrať súbor s názvom favicon.ico na správne miesto na serveri.

all-in-one-favicon

Ručné pridanie favicon do šablóny

Niektorí ľudia môžu radšej (aj keď to nie je najlepší spôsob) pridať svoje šablóny ručne do svojej šablóny, postupujte takto:

  • Prihláste sa do svojho prístrojová doska
  • Prejdite na vzhľad
  • Potom do Editor (Editor tém)
  • Nájsť a otvoriť header.php (header) súbor

Pridajte tento riadok do súboru hlavičky (najlepšie hore, kde vidíte iné) tagy:

Uložte raz. 

Ak chcete zobraziť nové zmeny, obnovte prehliadač.

V tomto okamihu by ste mali byť schopní zmeniť farby, vybrať lepšie písma, formátovať dátumy a čas, používať obrázky a pridať favicon.

záver

O prepracovaní vášho webu WordPress je toho veľa na diskusii, že by bolo pokusom pokryť všetko na jednom príspevku..

Aby ste mali čo najväčší úžitok, najlepšie je rozdeliť príručku na niekoľko častí (toto je časť 1). S príchodom dní sa budeme deliť o ďalšie triky s redizajnom, takže buďte opatrní. Účelom týchto návodov je pomôcť vám vytvoriť najlepší web WordPress v histórii a nechať sa cítiť šťastnejším, pretože ste to urobili sami..

Ak by ste chceli zdieľať svoje názory alebo pridať niečo do diskusie, neváhajte a zanechajte svoj komentár v sekcii komentárov nižšie!

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