În curând va fi timpul să-mi reproiectez site-ul web pentru „Epoca Web 2.0”. M-am uitat serios la două platforme, Drupal și Joomla, cu care să realizez acest lucru.
Drupal și Joomla oferă pachete cuprinzătoare care, în cazul Drupal, includ un blog și un forum ca module de bază. Tematica acestor platforme poate fi realizată atât prin modificări de cod CSS (Cascading Style Sheets) cât și PHP (Personal Home Page sau PHP: Hypertext Preprocessor). Cu toate acestea, aceste platforme sunt complexe și suficient de învățat pentru a instala, gestiona și personaliza aceste platforme poate fi o sarcină descurajantă.
După ce am studiat cele două platforme, inclusiv utilizarea lor atât pe platforma mea de testare, cât și pe Internet, am decis să arunc o privire asupra WordPress ca o posibilă soluție pentru viitoarele mele nevoi web. Am fost surprins să descopăr că cea mai recentă versiune de WordPress este ușor de instalat, ușor de utilizat și ușor de tematizat.
În acest articol, voi descrie cum să personalizați WordPress 2.5.
STYLING WORDPRESS
Există șase componente majore care alcătuiesc aspectul blogului WordPress implicit:
1. Grafic antet
2. Titlul blogului
3. Slogan
4. Pagina
5. fundal
6. Subsol.
Pentru a face blogul să se încarce rapid, am decis să nu folosesc un antet sau un subsol; și din moment ce designul va fi în esență tema WordPress implicită cu un strat nou, trebuie făcută doar o mică muncă de design grafic. De fapt, am avut nevoie doar să creez o singură grafică pentru a genera pagina de blog cu efectul său de două coloane. Pagina de blog va „pluti” centrată pe un fundal *corp* albastru închis care va servi pentru a încadra pagina.
Crearea graficului
O privire în directorul de imagini pentru tema WordPress implicită arată imaginile implicite utilizate pentru aspectul Kubrick. Deocamdată, există un singur fișier de interes deosebit: kubrickbgwide.jpg. Pentru design, celelalte imagini Kubrick nu sunt necesare, dar vor fi necesare pentru designul „Fancy”, mai complex.
Pagina blogului va fi creată dintr-o „felie” prin centrul noului design. Secțiunea este o imagine îngustă de lățimea paginii de blog.
Mi-am început designul prin amenajarea unei pagini de bază (760px X 600px) în Adobe Illustrator. Îmi place să folosesc Illustrator pentru lucrări de artă de acest gen, deși ar putea fi folosite și alte programe.
Am umplut pagina de bază cu culoarea de fundal a paginii (a nu se confunda cu fundalul albastru închis *corp*). Culoarea deschisă a fundalului va „prezenta” textul colorat, cum ar fi titlul și sloganul blogului.
Am suprapus pagina cu două dreptunghiuri sau „coloane”. Coloana din stânga, lată de 510 px, este umplută cu o culoare galben pastel; coloana din dreapta, cu o lățime de 230 px, este umplută cu o culoare albastru pastel. Cele două coloane se potrivesc în pagina de bază cu un chenar de 10 pixeli de fundal în jurul lor.
În Illustrator, am plasat apoi un dreptunghi de 760px X 40px pe pagină și l-am folosit pentru a face o felie. O felie nu este altceva decât o bucată reprezentativă a unei imagini mai mari, în acest caz, a designului blogului. Am salvat felia ca kubrickbgwide.jpg. Kubrickbgwide.jpg va fi folosit pentru a genera fundalul paginii de blog. Pe măsură ce conținut nou este adăugat la pagina de blog, copiile secțiunii vor fi stivuite vertical pentru a „crește” fundalul cu două coloane. Aceasta este singura imagine necesară unui browser pentru a genera pagina de pornire a blogului. Prin urmare, blogul se va încărca foarte repede.
Destul de ușor până acum, nu? Restul designului este realizat prin fișierul CSS al temei și/sau prin interfața administrativă WordPress.
CSS Modificări
Fișierul CSS implicit se află în directorul wp-content_themes_default. Textul CSS de mai jos arată modificările codului în style.css. Înainte de a face modificări la fișierul CSS implicit, fac și salvez întotdeauna o copie a originalului. Fișierul CSS poate fi deschis și modificat cu orice editor de text. Textul de șters va fi afișat între paranteze drepte. Textul nou sau modificat va fi afișat fără paranteze.
/* Începeți tipografia și culorile */
body { [fundal: #d5d6d7 url('images/kubrickbgcolor.jpg');]
fundal: #636f89; /* Setați culoarea de fundal a corpului la albastru */
}
#pagina {
[culoarea fundalului: alb;] [chenar: 1px solid #959596;]chenar:niciuna;
} [#antet {
fundal: #73a0c5 url('images/kubrickheader.jpg') no-repeat jos centru;
}
#headerimg {
marjă: 7px 9px 0;
inaltime: 192px;
latime: 740px;
}]
#footer { [background: #eee url('images/kubrickfooter.jpg') no-repeat top;]
fundal: #fffef2; /* Galben foarte deschis */
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [.description] {
text-decor: niciuna; [culoare albă;]
culoarea rosie; /* Faceți titlul roșu */
captuseala-fond: .5em; /* Pune puțin spațiu între titlu și slogan */
}
.Descriere {
text-decor: nici unul;
Culoarea albastra; /* Faceți sloganul albastru */
text-align: centru;
}
/* Încheiere tipografie și culori */
/* Începe structura */
#pagina { [culoarea fundalului: alb;]
culoare de fundal: ffef2; /* Galben foarte deschis */ [chenar: 1px solid #959596;]
hotar: nici unul;
}
#header { [culoarea fundalului: #73a0c5;]
culoare de fundal: #fffef2; /* Galben foarte deschis */
}
/* Structura finală */
După efectuarea și salvarea acestor modificări în fișierul style.css, pagina de blog nou proiectată este realizată.
STYLING WORDPRESS — DESIGNUL DE ROCHIE FACY
Deși îmi place simplitatea designului blogului Jakob, acesta nu va atrage pe toată lumea. Mulți oameni iubesc pur și simplu „glitz”. Prețul unei rochii de lux WordPress este adesea un blog cu încărcare mai lentă, fără o creștere a gradului de utilizare. Cu toate acestea, pentru cei care doresc să „îmbrăcă” aspectul blogului lor, iată modalități suplimentare în care acest lucru poate fi realizat.
În primul rând, trebuie remarcat faptul că fundalul paginii implicite WordPress folosește grafica antet (kubrickheader.jpg) și subsol (kubrickfooter.jpg). Aceste grafice nu sunt umplute cu o culoare solidă, ca în designul Jakob, ci cu degrade. De asemenea, pare să existe o umbră foarte mică sub pagină.
Din cauza complexității paginii implicite, sunt necesare grafice suplimentare și, prin urmare, vor fi necesare mai multe felii. În plus, atunci când se dorește un fundal de corp mai complex în care să „plutiască” pagina, ar putea fi necesară și o imagine „sedinta” pentru aceasta (asta este pentru ce este imaginea kubrickbgcolor.jpg).
Ca și înainte, am creat un desen al paginii blogului în Illustrator. Pagina, cu colțuri rotunjite, plutește pe fundalul implicit WordPress, are un gradient galben și are o umbră mică.
Am creat mai întâi un dreptunghi de 760 x 600 pixeli pe planșa Illustrator. Am umplut acest dreptunghi cu culoarea de fundal (C:8, M:6, Y:6, K:0).
Apoi, folosind Instrumentul dreptunghi rotunjit, am desenat un dreptunghi de 736px X 584px și l-am umplut cu gradientul galben. În esență, am făcut pagina cât mai mare posibil în fundal, lăsând suficient spațiu pentru umbra.
În cele din urmă, i-am dat dreptunghiului rotunjit o mică umbră.
Pentru a ne asigura că feliile se vor îmbina perfect în fundalul *corp*, am creat un pătrat de 60px X 60px de aceeași culoare de fundal (C:8, M:6, Y:6, K:0) și l-am salvat ca kubrickbgcolor.jpg. Imaginea mică va fi folosită pentru a „vopsi” fundalul corpului. Acesta este un pas important deoarece fundalul folosit pentru corp și fundalul folosit pentru pagină trebuie să se potrivească perfect pentru designul Fancy.
Crearea feliilor
Folosind Instrumentul dreptunghi, am plasat un dreptunghi de 760px X 200px deasupra aspectului descris mai sus. Am poziționat acest dreptunghi în partea de sus a aspectului și l-am folosit pentru a face o felie pentru graficul antetului. Înainte de a face acest lucru, am dezactivat stroke și umplere.
Am salvat felia ca kubrickheader.jpg.
Am creat subsolul și secțiunile de pagină într-un mod similar și le-am redenumit kubrickfooter.jpg și, respectiv, kubrickbgwide.jpg. Kubrickfooter.jpg are 760px X 63px și kubrickbgwide este 760px X 40px.
Există alte două imagini Kubrick în directorul de imagini: kubrickbg-ltr.jpg și kubrickbg-rtl.jpg (de la stânga la dreapta și de la dreapta la stânga). Aceste imagini sunt identice cu kubrickbgwide.jpg. Deci, am făcut două copii ale kubrickbgwide.jpg și le-am redenumit în consecință.
Modificări CSS
Fișierul CSS implicit se află în directorul wp-content_themes_default. Textul CSS de mai jos arată modificările codului în style.css. Parantezele pătrate arată codul de șters, iar codul nou este afișat fără paranteze. Înainte de a face modificarea, am copiat și salvat fișierul original. Pentru designul Fancy, modificările CSS sunt minime.
/* Începeți tipografia și culorile */
body { [fundal: #d5d6d7 url('images/kubrickbgcolor.jpg');]
fundal: #e7e7e7 url('images/kubrickbgcolor.jpg');
}
#pagina { [culoarea fundalului: alb;] [chenar: 1px solid #959596;]
}
#header { [background: #73a0c5 url('images/kubrickheader.jpg') no-repeat jos centru;]
fundal: #e7e7e7 url('images/kubrickheader.jpg') no-repeat jos centru;
}
#footer { [background: #eee url('images/kubrickfooter.jpg') no-repeat top;]
fundal: #e7e7e7 url('images/kubrickfooter.jpg') top fără repetare;
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [descriere]{ [culoare: alb;]
culoarea rosie; /* Faceți titlul blogului în roșu */
captuseala-fond: .5em; /* Pune puțin spațiu între titlu și slogan */
}
.Descriere {
text-decor: nici unul;
Culoarea albastra; /* Faceți sloganul blogului în albastru */
text-align: centru;
}
/* Încheiere tipografie și culori */
/* Începe structura */
#pagina { [culoarea fundalului: alb;]
culoare de fundal: #e7e7e7; [chenar: 1px solid #959596;]
chenar: niciunul; }
#header { [culoarea fundalului: #73a0c5;]
culoare de fundal: #e7e7e7;
}
/* Structura finală */
După ce au lucrat designul și CSS, WordPress-ul arată hainele sale noi pe întregul Internet.
STYLING WORDPRESS — DESIGNUL NO-GRAFIC
Nimic nu merge prost atunci când un browser încarcă o pagină de pe Internet, nu? Chiar dacă acesta ar fi, de fapt, cazul, este totuși înțelept să luăm în considerare modul în care se va afișa o pagină în cazul în care grafica nu poate fi găsită.
În cazul designului Jakob, dacă kubrickbgwide.jpg nu a fost descărcat, din orice motiv, pagina nu s-ar afișa în mod acceptabil. Din cauza fundalului deschis folosit pentru antet și subsol, acestea se afișează în mod normal pe fundalul albastru închis alocat corpului. Cu toate acestea, conținutul paginii devine greu de citit: aproape că se pierde pe fundalul albastru închis. Un fundal mai deschis pentru corp ar fi fost o alegere mult mai înțeleaptă.
Creatorul designului Kubrick a rezolvat această problemă prin alocarea unor culori de fundal alternative pentru a fi folosite dacă grafica nu era disponibilă. Atribuțiile sunt făcute în fișierul style.css:
body { background: #d5d6d7 url('images/kubrickbgcolor.jpg'); }
#header { background: #73a0c5 url('images/kubrickheader.jpg') no-repeat jos centru; }
#footer { background: #eee url('images/kubrickfooter.jpg') fără repetare sus; }
Dacă imaginile nu sunt disponibile, va fi utilizată valoarea alternativă a culorii RGB.
Dacă grafica nu este disponibilă, blogul WordPress implicit este încă prezentabil și utilizabil. Pentru o reproiectare inițială a paginii, începerea cu designul Kubrick de bază, fără grafică, ar putea fi un loc bun de început. Acest lucru poate fi realizat prin simplificarea afirmațiilor de mai sus:
body { fundal: #d5d6d7; }
#header { fundal: #73a0c5; }
#footer { fundal: #eee; }
Culorile pot fi apoi schimbate pentru a încerca diverse scheme de culori pe blog. Schimbați codurile de culoare RGB, salvați fișierul CSS și reîmprospătați browserul pentru a vedea modificările imediat. Sper că a fost util și ușor de citit.
Postare scrisă de Royce Tivel
