Share
În acest tutorial, vom aborda modul de realizare a cinci personalizări CSS rapide, care vor face ca blogul dvs. să iasă în evidență. Chiar dacă nu știți ce este CSS, veți putea să urmați instrucțiunile și să modificați aspectul standard al temei.
Dacă nu știți deja cum, vă voi arăta cum să găsiți și să configurați aceste lucruri. În acest fel, puteți modifica în siguranță aspectul site-ului sau al blogului dvs. Dacă site-ul dvs. Web este deja live și obține trafic, poate fi o idee bună să utilizați un plugin "în jos pentru întreținere", astfel încât vizitatorii să nu devină confuzi de aspectul în continuă schimbare.
O altă alternativă ar fi să configurați un mediu de dezvoltare pe mașina dvs. locală și apoi să încărcați modificările pe server după ce acestea au fost finalizate.
În cele din urmă, depinde de tine.
Unele teme au deja opțiunea de a înlocui anumite părți din foaia de stil CSS, permițându-vă să creați propriul aspect fără a instala pluginuri suplimentare sau pentru a crea o temă pentru copii. Acest lucru se regăsește în secțiunea Aspect> Opțiuni tematice meniuri.
Uneori se află într-una din subcategorii, dar căutați o casetă care are titlul "Editați CSS".
Dacă tema dvs. nu are o astfel de opțiune, pluginul Jetpack este dotat cu o funcție de editor CSS, dar pentru ao utiliza, trebuie să conectați pluginul la contul dvs. WordPress.com sau să creați unul nou.
Vă salvează revizuirile, ceea ce face ușor să vă întoarceți la o structură anterioară dacă simțiți că v-ați deranjat undeva de-a lungul drumului, dar dacă nu sunteți interesat de celelalte funcții ale pluginului Jetpack, o alternativă mai rapidă ar fi simplu plugin personalizat CSS.
Odată ce ați instalat și ați activat pluginul, puteți modifica css-ul din Aspect> css personalizat. (În Jetpack, se află sub opțiunea de meniu Aspect> Editați opțiunea CSS.)
Dacă sunteți pregătit să faceți schimbări ample, cea mai bună idee este să configurați o temă pentru copii. Problema cu personalizarea prin suprascriere este că obțineți linii de cod inutile și pentru o editare extinsă se poate ca încărcarea blogului sau a site-ului să fie mai lentă.
În plus, este mult mai ușor să urmăriți lucrurile când editați codul într-un singur loc. Puteți utiliza un plugin cum ar fi Orbisius Child Theme Creator sau o temă duplicat pentru a crea instantaneu o temă pentru copil.
Alternativ, puteți să creați pur și simplu un director tematic nou, să îl sunați THEMENAME copil, creați style.css în folderul tematic nou și importați foaia de stil principală. (THEMENAME ar trebui înlocuită cu tema pe care doriți să o modificați.)
Accentsconagua
@import url ("... /THEMENAME/style.css"); Pentru mai multe informații despre cum să creați o temă pentru copii, puteți să consultați ghidul nostru. Acum că sunteți pregătiți, este timpul să începeți să vă murdăriți mâinile. Vom începe cu ceva foarte simplu: schimbarea fundalului blogului / site-ului dvs. Vă voi arăta, de asemenea, cum să adăugați o imagine de fundal elegantă.
Pentru a schimba fundalul site-ului dvs., trebuie mai întâi să vă familiarizați cu stilul temei. Culoarea fundalului este pur și simplu sub corp, sau este construită în cadrul propriu?
Unele teme nu sunt la fel de intuitive ca altele, deci dacă cea pe care o utilizați în prezent este inteligibilă, poate doriți să treceți la o temă diferită înainte de a începe editarea. (Cel pe care-l folosesc în exemplul respectiv este tema Catchbox liberă și o temă de pornire foarte comună este de douăzeci de ani.)
Cu cele mai multe teme fără lățime completă, culoarea de fundal este pur și simplu sub corp. Și depășirea este destul de simplă.
corp fundal-culoare: # 477C67;
Puteți folosi selectorul de culori W3Schools HTML pentru a obține culorile sau pentru a instala o extensie Chrome, un plugin aFirefox sau un plugin WordPress pentru a accelera lucrurile de-a lungul procesului de editare în mișcare.
Am ales o culoare de fond teal adâncă: # 477C67:
Dacă acest fragment de cod nu modifică culoarea de fundal a blogului dvs., este probabil că acesta folosește containere goale stilizate pentru a umple fundalul.
Dacă doriți să setați o imagine ca fundal, încărcați mai întâi imaginea. Asigurați-vă că este de înaltă rezoluție, altfel nu va arăta foarte bine. Apoi, copiați adresa URL. Aveți nevoie doar de partea după blog, deci dacă ați încărcat fișierul prin WordPress, atunci calea ar trebui să arate cam așa: "wp-content / uploads / 2014/01 / IMAGE.jpg"
organism background: url (locație / img.jpg) centru de centru fără repetare fix; -webkit-background-size: cover; -moz-background-size: capac; -o-background-size: cover; dimensiunea fundalului: capac;
Rezultatul final ar trebui să arate cam așa:
Lucrul cool este că imaginea rămâne statică chiar și atunci când defilați în jos prin pagină. Pentru fotografii excelente pe care sunteți liber să le utilizați fără să le acordați credit (deși este probabil binevenit), puteți vizita unsplash.com.
Uneori te poticni într-o temă grozavă. Arată grozav, dar există doar o problemă. Fontul este mic și gri, deci este aproape imposibil de citit. Dar nu vă faceți griji, puteți schimba acest lucru într-un singur pas simplu.
corp font-size: 16px; culoare: # 000
Adăugați acest scurt fragment de cod în CSS personalizat și acesta va rezolva problema. (Puneți-l după codul de fundal dacă ați schimbat-o pe dvs.)
O dimensiune bună pentru fontul standard al site-ului sau al blogului dvs. este de 14-16 pixeli. Evitați cele 12 pixeli obligatorii, de exemplu, rapoartele școlare, pentru că obiectivul dvs. principal nu este de a economisi hârtie. Doriți ca conținutul dvs. să respire și să îl faceți mai ușor de citit. Dacă simți că fontul standard al temei pare neprofesional, puteți adăuga această linie:
corp font-family: Arial, Helvetica, sans-serif;
Efectuarea întregului lucru arata astfel:
corp font-family: Arial, Helvetica, sans-serif; font-size: 16px; culoare: # 000
Dacă doriți să modificați culoarea legăturilor, puteți face acest lucru cu ușurință. Tot ce trebuie să faceți este să utilizați parametrul pentru linkurile din css "a" și apoi să schimbați culoarea la ceea ce doriți.
a culoare: # BA2323;
M-am decis sa merg la un rosu (# BA2323) si sa terminat sa arate asa.
Există mai multe opțiuni pentru modul în care doriți să vă stylizați legăturile. De exemplu, puteți decide cum doriți să reacționeze linkul atunci când cineva se plimba peste el. Cea mai obișnuită este sublinierea, dar ați putea schimba culoarea primară sau culoarea de fond.
a: hover culoare: # 222; background-color: # BA2323;
De exemplu, modificarea textului în gri și schimbarea culorii de fundal în culoarea obișnuită a textului. Apoi puteți modifica stilul legăturilor vizitate. Cel mai frecvent există o schimbare de culoare, dar puteți utiliza oricare dintre modificările anterioare, de asemenea.
a: vizitat culoare: # 004A4A;
Titlul postului este în mod obișnuit într-un element h1, iar subtitlul folosit în cadrul postărilor este în mod obișnuit într-un element h2 (deși acest lucru este ceva ce vă alegeți când creați un post). Dar dacă tema ta personalizează în mod special culoarea titlurilor postului, schimbarea stilului tagurilor h1 nu va ajuta. Deci, trebuie să aflați dacă tema pe care o utilizați face acest lucru.
Puteți verifica dacă tema dvs. utilizează sau nu un anumit stil pentru titlurile postate prin deschiderea sursei de pagină și căutarea (apăsați Control-F) pentru "titlul postului". Dacă rezultatele arată ""atunci nu stil h1, trebuie să oferi stil în atributul" some-style ".
În mod alternativ, dacă veți face mai multe modificări, puteți instala o extensie a browserului care vă arată stilul CSS al textului selectat. Acesta va fi de obicei "intrare-titlu", deoarece acesta este standardul pentru dezvoltarea WordPress.
Pentru aceasta, mergeți la Editor sub Aspect meniul. și căutați "un stil". După cum am menționat, acel stil este de obicei "intrare-titlu". Apoi, a se vedea care linii trebuie să suprascrieți. Uneori, există un stil special pentru titlul legat, astfel încât s-ar putea să trebuiască să îl schimbați și ei. Acest lucru apare ca "h1 a " sau "some-style a ".
Pentru a modifica culoarea și mărimea titlului meu, ar trebui să adaug următoarele linii:
.titlu-intrare culoare: #WANTEDCOLOR; font-size: WANTEDSIZEpx; .entry-title a culoare: #WANTEDCOLOR;
Am ales un albastru deschis (# 5CBDBD).
Vă rugăm să rețineți că folosesc culori destul de strălucitoare pentru a evidenția modificările aduse temei. Probabil doriți să fiți un pic mai subtil și să găsiți o schemă de culoare mai bună.
Dacă doriți să modificați stilul titlurilor pe care le utilizați în conținutul dvs., apoi în loc de .unele stil, deschideți cu h1 sau h2 sau h3 .
Dacă există colțuri plictisitoare pe care simțiți că ar trebui să fie rotunjite sau unele care au fost rotunjite prea mult, iată un remediu rapid.
Găsiți stilul containerului în discuție în foaia de stil originală. (Deschideți foaia de stil originală în interiorul tabloului de bord WordPress sau într-un fișier text și apoi căutați un text care este unic pentru containerul pe care doriți să îl editați. Sau puteți utiliza un plugin.) Widget-urile sunt de obicei sub .widget, iar containerul post este, de obicei, sub conținut.
Codul de utilizat aici este:
-moz-border-radius: SIZEpx; raza de graniță: SIZEpx;
Dacă doriți să înlocuiți un colț curbat actual și să îl întoarceți, setați simplu dimensiunea la 0. Dacă doriți să vedeți cum arată curbele pentru un anumit container, începeți cu 5 și vedeți cum arată acesta.
În general, puteți căuta în pagină dacă doriți să editați colțurile întregii pagini. În general, puteți găsi containerul de conținut căutând .hentry dacă doriți să editați colțurile conținutului. Este posibil să fie necesar să modificați separat antetul și subsolul. Sau găsiți widget-ul căutând widget-ul.
Una dintre cele mai simple moduri de a configura o schemă de culori rece pentru widget-urile dvs. este să aveți o altă culoare de fundal pentru widget-ul însuși ca titlul widgetului. Faceți acest lucru prin identificarea clasei de stil a titlului widget. (Dacă nu vă amintiți cum, copiați titlul unui widget și căutați-l în sursa paginii h1 caption în jurul titlului, clasa este dezvăluită.)
Tind să fie pur și simplu widget-titlu. Și dacă doriți să schimbați culoarea de fundal a widgetului în sine, găsiți stilul pentru widget, care este, de obicei, sub .widget. Apoi alegeți o culoare și adăugați acest cod la tema personalizată css sau copil:
.widget background: #COLOR; .widget-title fundal-culoare: #COLOR;
Am ales portocaliu și nu am nici un motiv special. După cum puteți vedea, dacă nu există niciun titlu, acesta nu include partea de titlu a schemei de culori, deci dacă doriți consecvență, trebuie să adăugați titluri tuturor widgeturilor.
În timp ce la început s-ar părea incredibil de dificil să începeți să jucați cu codul site-ului dvs., cele mai multe foi de stil sunt destul de intuitive încât, dacă aveți cunoștințe de bază despre funcționalitatea Wordpress, veți putea să stați pe lângă lucruri.
Bineînțeles, cu acest lucru am scos abia suprafața, dar știți suficient pentru a face unele editări de preferință în bine.
