Redesignarea site-ului dvs. WordPress (pentru a adăuga o notă personală)

Nicio altă platformă nu vă oferă puterea de a personaliza aspectul site-ului dvs. ca WordPress. Acesta este unul dintre motivele pentru care WordPress este popular în rândul editorilor și dezvoltatorilor web.


Puteți să luați o temă WP de bază (și drab), să adăugați un logo, să editați câteva linii de cod, să vă schimbați CSS-ul și să aveți un site web cu aspect profesionist (totuși personal). Este o muncă ușoară și acest tutorial vă va arăta cum să o faceți.

Sunteți gata? Să începem cu primele lucruri; culorile.

Proiectarea unei scheme de culori

Când dezvoltați o schemă de culori pentru site-ul dvs. WordPress, există multe lucruri de luat în considerare. Gândiți-vă la asta ca la vopsirea casei dvs. sau a magazinului dvs. de piatră și mortar. Trebuie să determinați culoarea care va merge pe pereții dvs. și culoarea pe care o doriți ușile voastre.

Modul în care vă vopsiți exterioarele și interioarele va depinde de un cuplu de factori care sunt preferințele personale.

Colorarea site-ului dvs. WordPress nu este diferită. Ce culoare vrei linkurile tale? Istoricul tău, cum îl vei face să fie cel mai atrăgător și să-i lase pe concurenți să-și gâfâie gura? Ce culori vor completa (sau chiar împuternici) mesajul tău? Cum vrei textul tău? Cerul este limita la alegerea culorilor pe care le puteți utiliza pe site-ul dvs. WP.

Trebuie să determinați de la început toate culorile pe care le veți folosi. V-aș recomanda să vă lipiți doar de trei culori, dar sunteți liber să folosiți cât mai multe culori doriți.

Doar nu o exagerați sau veți ajunge să vă diluați mesajul de marketing în aceeași culoare. La urma urmei, un exces de orice este otrăvitor, așa că indiferent de culorile pe care le alegeți, este important să vă asigurați că există armonie.

Cel mai bine este să folosești cele mai multe culori în care majoritatea oamenilor le va vedea (și sperăm) că le place. Vorbesc despre sigla și capul tău. Aceste zone sunt exact acolo unde ai nevoie de cele mai multe culori; restul site-ului dvs. web poate fi mai puțin colorat, dar mai informativ.

216 Culori versus 12 Culori

Cu toții suntem familiarizați cu cele douăsprezece culori elementare, dar web-ul este plin de culori și de nuanțele lor diferite. Tocmai din acest motiv, alegerea culorii care va emana căldura personală în timp ce creați un aspect profesional poate fi o sarcină provocatoare.

Totuși, sunteți norocos, pentru că am pescuit pe Internet și am găsit următoarele instrumente pentru a vă începe:

Kuler

Kuler

Kuler a fost conceput de Adobe pentru a ajuta dezvoltatorii web să creeze scheme de culori de top. Kuler este un instrument online, ceea ce înseamnă că îl poți transporta și folosi de oriunde, dar există și o aplicație desktop care te poate ajuta să dezvolți scheme de culori chiar de pe desktop. În plus, dacă aveți un cod Adobe, vă puteți salva schemele de culori cu un singur clic.

Există diferite reguli de culoare pentru a utiliza cu Kuler, inclusiv monocromatic, compus, complementar, analog și triad, printre altele.

Vezi Kuler.

CHART CULORI HTML

Cunoașterea culorilor pe care le veți folosi este doar jumătate din lucrare. Pentru a vă implementa culorile, trebuie să le traduceți în coduri HTML.

grafic de culori html

Aici intervine graficul de culori HTML. Este un grafic colorat cu peste 200 de (216 de fapt) coduri de culoare web. Înarmat cu graficul, nicio culoare sub soare nu ar trebui să fie dificil de pus în aplicare.

Codurile vor funcționa cu HTML, CSS, Adobe PhotoShop și alte instrumente de manipulare grafică, astfel încât să aveți toată libertatea din lume să vă jucați cu culorile dvs. atât cât doriți.

Consultați graficul de culori HTML.

GENOPAL

Dacă aveți nevoie de ajutor pentru alegerea culorilor, GenoPal este aplicația dorită. Este o aplicație web foarte simplă care „paletează” paletele de culori în fereastra browserului tău. Pe măsură ce îți alegi culorile, acestea apar în browserul tău sub formă de „note lipicioase” colorate. ��

genopal

Cu GenoPal, puteți crește luminozitatea și controla saturația nuanței, astfel încât să obțineți exact nuanța dorită.

Pe site-ul lor web, o aplicație mobilă este în conductă. Odată lansată, vă va permite să transportați aplicația și să dezvoltați culori pe dispozitivul dvs. mobil. Designul lor este ingenios, iar faptul că această aplicație funcționează de fapt este un semn clar că GenoPal înseamnă afaceri.

COLORHEXA

ColorHexa este versiunea online a placa de vopsea a artistului. Acest site web vă oferă posibilitatea de a amesteca culorile doar introducând coduri de culori. Aplicația lor de prescurtare este instrumentul de amestecare a culorilor, dar au și un generator de gradient și un subtractor de culoare. Nu este un geniu pur de lucru aici?

colorhexa

Cum funcționează ColorHexa Blender? Nu trebuie decât să tastați codurile de culoare separate cu un „+” și ColorHexa face restul lucrului. De exemplu, am încercat:

# ff0000 + # 0000ff + # ff00ff și am primit # aa00aa. În plus, acestea vă oferă o pagină întreagă de informații despre culoare (în culoarea dvs. finală, de exemplu, # aa00aa). Acesta este un instrument pe care trebuie să îl încercați să experimentați amestecarea culorilor ca niciodată.

Consultați ColorHexa.

GENERATOR GRADIENT CSS ULTIMAT

generator de gradient de culoare final

Acesta este probabil cel mai bun instrument în ceea ce privește generarea de degradeuri de culoare. Este complet online și vă ajută să generați puncte intermediare răcoritoare și codurile CSS corespunzătoare. De asemenea, oferă suplimente Chrome și Firefox pentru a vă permite să integrați aplicația în browser pentru un acces mai ușor și mai rapid.

Există o zonă de previzualizare în care vedeți gradientul dvs., așa că nu trebuie decât să generați gradientul pe care îl considerați potrivit și copiaza si lipeste codul CSS generat. Este foarte ușor și au mai multe culori decât veți folosi vreodată.

Consultați Ultimate CSS Generator Gradient.

Alegerea fonturilor

Acum că v-am arătat cum să alegeți și să combinați culori precum Picasso, să ne jucăm cu fonturile.

Culorile și designul dvs. web vor atrage oamenii, dar cuvintele dvs. sunt, de exemplu, paginile și postările dvs. care îi vor face pe oameni să rămână în jurul valorii de.

Suntem ocupați să ne creăm cele mai bune povești în permanență, așa că majoritatea dintre noi uită că fonturile contează și ele. Dar fontul pe care îl alegeți influențează modul în care oamenii interacționează cu site-ul dvs. web. Cu ajutorul fonturilor potrivite, publicul dvs. țintă va dori să se lipească și, în cele din urmă, faceți clic pe celelalte pagini, exact ceea ce doriți. Logodnă.

Există un milion și unul de fonturi, dar, din păcate, un utilizator va vedea doar fonturile care sunt instalate pe mașina lor. Dacă fontul pe care îl utilizați nu este instalat pe mașinile lor, vor vedea o alternativă apropiată (sau un font complet diferit), care nu va avea același efect pe care l-ați dorit.

„Joacă cu fonturi este ca și cum ai juca cu focul. Uneori poate aprinde o potrivire pe o pagină web, un spumant de text frumos. Alteori, poate arde toată casa. ” – Lorelle de la cameraontheroad.com.

Puteți controla fonturile dvs. (și puteți crea efectul dorit) cu fișa de stil. În tema dvs., foaia de stil este de obicei style.css fişier. Puteți utiliza acest fișier pentru a controla culoarea fonturilor, tipul fontului / font-family, dimensiunea fontului și alte aspecte ale fontului ales..

Următorul este un exemplu bun:

#menu {font-family: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; font-size: 0,8em; culoarea neagra;}

Codul de mai sus va seta dimensiunea fontului în meniul dvs. la 0,8em și va seta culoarea la negru. De asemenea, va seta fontul la Arial, dar dacă utilizatorul nu are Arial pe mașina lor, Helvetica va prelua funcția. Dacă nu au Helvetica sau Arial, Verdana, Sans-serif sau Times New Roman vor prelua.

Prin controlarea fonturilor, puteți crea un aspect și o consecvență mai consecvente.

Cu toate acestea, pentru a rezolva problema inconsecvenței fonturilor o dată pentru totdeauna, puteți utiliza fonturi încorporate. Utilizând fonturi încorporate (sau externe), utilizatorul nu trebuie să aibă fontul pe mașina sa.

În plus, este o muncă ușoară peasy.

Tot ce trebuie să faci este să-ți deschizi style.css și puneți codul următor în partea de sus.

@ font-face {font-family: Museo300; src: format url („fonts / museo300-regular.ttf”): („truetype”); font-weight: normal;}

NOTĂ: Trebuie să definiți numele și locația fontului. În exemplul de mai sus „Museo300” este fontul, care a fost salvat într-un folder numit „fonturi”..

Pentru a utiliza fontul pe site-ul dvs., de exemplu, puteți scrie:

body {font-family: Museo300;}

Puteți utiliza un font încorporat pentru orice element de pe site-ul dvs. web. De exemplu…

#menu {font-family: Museo300;}

… va seta Museo300 în meniul dvs..

Metoda de mai sus înseamnă că trebuie să descarci fontul și să încarci același lucru pe serverul tău, ceea ce dacă mă întrebi este destul de obositor.

in orice caz, ynu trebuie să descărcați niciun font extern pe care doriți să-l utilizați.

Puteți pur și simplu să faceți legătura cu fonturile din secțiunea head (header.php) astfel:

Cum și unde adăugați linia de mai sus? Trebuie să vă deschideți Panoul de administrare WordPress -> Aspect -> Editor -> header.php

Dacă nu doriți sau nu puteți edita fișierul dvs. header.php, trebuie doar să importați fonturile tastând următoarea linie în style.css:

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

Exemplul de mai sus vă va permite să utilizați Peste curcubeu font din Google oriunde pe site-ul dvs. De exemplu, dacă doriți să utilizați Over The Rainbow pe site-ul dvs. web, puteți utiliza acest cod:

body {font-family: "Peste curcubeu";}

Google oferă peste 600 de familii de fonturi gratuite, asa ca joaca departe!

Actualizare (07/12/13): Dacă doriți să adăugați fonturi Google pe site-ul dvs. WordPress, puteți utiliza funcția Plugin tipografie Google. În afară de asta, puteți afla mai multe despre fonturile Google și cum să le implementați în acest mod Îmbunătățirea tipografiei site-ului dvs. WordPress cu fonturi Google de Tom Ewer.

Mai multe resurse despre jocul cu fonturi

Pluginuri WordPress pentru adăugarea de fonturi

Și pentru cei care nu doresc să sape în cod, ai putea întotdeauna să instalezi un plugin WordPress pentru a face o parte din ridicarea grea pentru tine. Iată câteva dintre cele mai populare pluginuri gratuite de fonturi de la WordPress.com:

Te distrezi? Să mergem mai departe…

 Formatare data și ora

Ați fost pe un site WordPress care a afișat data sau ora pe un ton cu adevărat drăguț, care v-a făcut să vă simțiți ca un noob complet în ceea ce privește site-ul dvs.? Proprietarii acestor site-uri tocmai s-au jucat cu un o singură linie de cod și acum nu puteți obține suficiente date. Haha.

Vești bune, puteți edita această linie de cod și surprinde-ți și cititorii.

În dumneavoastră Panoul de bord WP, navigheaza catre Aspect, și apoi la Editor așa cum se arată mai jos:

data de formatare

Odată ajuns acolo, veți putea vedea o listă cu fișierele dvs. .php din extrema dreaptă:

un singur post

Faceți clic pe o singură postare (single.php) și după ce este deschisă, deschideți bara de căutare apăsând Ctrl + F. În bara de căutare care apare, tastați:

timpul

Veți vedea imediat o linie care ar putea arăta ca ceva:

Acum, zona pe care doriți să o editați este („F Y”).

Permiteți-mi să reda această secțiune pentru a vă oferi ceva mai carnea de a mușca.

„F” din („F Y”) înseamnă Numele complet al lunii iar „Y” reprezintă Anul în 4 cifre. Prin urmare, dacă utilizați („F Y”), data dvs. va arăta astfel:

Septembrie 2013

Dacă aruncați o virgulă între F și Y, ar trebui să aveți ceva de genul:

Septembrie 2013

Dacă doriți să adăugați ziua și alte elemente, puteți utiliza următoarele caractere:

l = Numele complet al zilei (minuscule L)

F = lună

j = Ziua lunii (data)

Y = Anul în 4 cifre

y = Anul în 2 cifre

Mai multe personaje pot fi găsite în tabelul de mai jos:

formatare tabel date

Și aici, câteva exemple:

exemple de date de formatare

Îți amintește întotdeauna să editezi doar caracterele din paranteze („F Y”) și, ia-ti notite, nu ștergeți ghilimelele unice. Simțiți-vă liber să utilizați cât mai multe personaje doriți pentru a obține efectul dorit și nu uitați să salvați totul când ați terminat.

Mai mult, poți scăpa de dată ștergând …

… cum am făcut pe blogul meu nu cu mult timp în urmă. �� Acum, tot ce primesc este Postat de Fred în categoria așa și așa … bla, bla. Nu există date deloc.

Sunteți alimentat pentru următoarea parte? Ar fi bine sa fii.

Nu am găsit funcția_time?

Este în regulă, deoarece multe teme de acum câteva zile folosesc funcția_date () în loc de funcția_time (), care este de fapt o practică mai bună. Dacă tema dvs. utilizează funcția_date (), nu va trebui să faceți nicio editare, deoarece puteți schimba pur și simplu modul în care datele dvs. se afișează în tabloul de bord în secțiunea „Setări-> General”.

Utilizarea de imagini

Aceasta este probabil cea mai ușoară (și cea mai scurtă) parte a acestui tutorial. Dar dacă sunteți cu adevărat nou în WordPress, adăugarea de imagini poate fi o provocare.

WordPress vă permite să adăugați imagini prin utilitatea de încărcare sau (butonul Adăugare media) atunci când creați o nouă postare sau pagină. Tot ce trebuie să faceți este să plasați cursorul unde doriți ca imaginea să fie în postarea sau pagina dvs., apoi faceți clic pe „Adăugați media”.

adăugați media

Odată ce utilitatea de încărcare se deschide, puteți adăuga alte detalii, precum legendă, dimensiunea, linkurile și alinierea.

utilitate de încărcare

Această zonă se găsește în partea dreaptă a utilitarului de încărcare.

Pentru a afla mai multe despre adăugarea de imagini, consultați următoarele resurse:

Și dacă nu sunteți sigur unde găsiți câteva imagini gratuite minunate, consultați postarea, am scris copertele cele mai bune resurse de imagine pentru WordPress.

Vedea? Ți-am spus că va fi cea mai scurtă ��

Adăugarea unui Favicon

Înainte de a uita total de imagini, permiteți-ne să creăm și să adăugăm un favicon pe site-ul dvs. WordPress. Un favicon (sau pictograma favorită) este pictograma folosită pentru a marca un site web.

Un favicon vă va ajuta cititorii să vă identifice site-ul dvs. vizual.

În general, un favicon este un fișier grafic pătrat de 16 X 16 pixeli cu extensia .ico. Extensia reprezintă pictograma.

Cum să creezi un Favicon

Puteți crea favicon online sau utilizând programe de editare a imaginilor, cum ar fi GIMP, sau orice alt tip care vă permite să salvați fișiere .ico. Majoritatea serviciilor online sunt gratuite.

Deși imaginea este de obicei foarte mică (16 cu 16 pixeli), favicon ar trebui să reprezinte blogul tău în întregime. Imaginea sau textul pe care îl utilizați pentru a vă crea favorul ar trebui să reprezinte afacerea dvs. online.

Dacă utilizați un editor de imagini:

  • Decupați sau adăugați spațiu în consecință pentru a vă asigura că imaginea dvs. este pătrată
  • Redimensionați imaginea la 16 X 16 pixeli și
  • Salvați imaginea ca favicon.ico

Serviciile online pe care le puteți utiliza pentru a crea preferințe includ (dar fără a se limita la):

După ce vă creați favicon-ul, acestea vă vor permite să îl descărcați pe computer, astfel încât să nu vă faceți griji.

Cum să vă instalați Favicon în WordPress

Dacă în folderul principal al temei dvs. există un alt marcaj de preferințe, va trebui să îl ștergeți folosind clientul FTP sau orice metodă disponibilă. Clienții FTP sunt recomandați, deoarece sunt ușor de utilizat și puteți găsi rapid orice fișier căutați.

Pentru acest tutorial, am folosit faviconer.com pentru a crea un favicon pentru blogul meu și Filezilla pentru a șterge favicon-urile existente.

Cu fișierul favicon.ico în mână, încărcați același lucru în directorul principal al temei. Acesta este folderul în care este stocată tema dvs. curentă.

Apoi încărcați o altă copie a faviconului dvs. în directorul rădăcină (de obicei public_html) sau în directorul principal unde este stocat site-ul dvs., astfel încât să puteți vedea favicon-ul dvs. atunci când tastați dvs.ite.com/favicon.ico. Acest lucru va adăuga automat favicon-ul dvs. la feed-uri.

După ce ați terminat încărcarea, este timpul să vă puneți la dispoziție favicon.ico. Acest lucru ar trebui să faceți:

Adăugarea Favicon folosind un plugin

Cel mai bun mod de a vă adăuga favicon este folosind un plugin. Aș recomanda utilizarea „All In One Favicon„Plugin pentru o utilizare mai avansată pentru o abordare foarte simplă pe care o puteți utiliza„Cel mai simplu Favicon„Plugin care nu are nicio opțiune de back-end, trebuie doar să încărcați un fișier numit favicon.ico în locul corect pe serverul dvs..

all-in-one-favicon

Adăugarea faviconului manual la șablonul dvs.

Unii oameni ar putea prefera (chiar dacă nu este cea mai bună metodă) să-și adauge preferințele manual la șablonul lor, pentru a face acest lucru urmând pașii următori:

  • Conectați-vă la dvs. Tablou de bord
  • Navigheaza catre Aspect
  • Apoi la Editor (editor de teme)
  • Găsiți și deschideți header.php (antet) fişier

Adăugați această linie la fișierul dvs. antet (de preferință în partea de sus, unde vedeți alte Etichete:

Salvați odată terminat. 

Reîmprospătați-vă browserul pentru a vedea noile modificări.

În acest moment, ar trebui să vă puteți schimba culorile, să alegeți fonturi mai bune, să formatați datele și ora, să utilizați imagini și să adăugați un punct de afișare.

Concluzie

Sunt atât de multe de discutat despre reproiectarea site-ului dvs. WordPress încât ar fi un diserviciu (pentru dvs.) să încercați să acoperiți totul într-o singură postare.

Pentru a vă avantaja cel mai bine, este mai bine să împărțiți tutorialul în mai multe părți (aceasta este partea 1). Vom împărtăși mai multe trucuri de reproiectare pe măsură ce vor veni zilele, așa că fiți atenți. Scopul acestor tutoriale este să vă ajute să creați cel mai bun site WordPress vreodată și să vă lăsați să vă simțiți mai fericiți pentru că ați făcut totul de unul singur.

Dacă doriți să vă împărtășiți părerile dvs. sau să adăugați ceva la discuție, nu ezitați să lăsați comentariul dvs. în secțiunea de comentarii de mai jos.!

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