Adăugați masonerie și aranjamente grilă pe site-ul dvs. WordPress cu doar CSS

Ați vrut vreodată să dinamizați modul în care postările dvs. sunt afișate pe pagina de pornire și arhivele dvs. WordPress?

Ce se întâmplă dacă ați putea afișa postările folosind abordarea zidărie (Pinterest) sau poate un aspect al grilei, totul doar adăugând un fragment de CSS?

Fără pluginuri, coduri scurte, modificări de șablon, alocarea paginilor ca pagină de pornire. Doar CSS pur.

Continuați să citiți sau treceți înainte folosind aceste link-uri:

• Pregătiri pentru adăugarea de zidărie și aranjamente de grilă pe site-ul dvs
• Oferiți postărilor dvs. aspectul de zidărie Pinterest
• Așezarea postărilor într-o grilă
• Adăugarea CSS personalizat pe site-ul dvs

Pregătiri pentru adăugarea masoneriei și aranjamentelor de grilă pe site-ul dvs. WordPress

Aceste soluții se bazează exclusiv pe CSS și, așadar, nu este surprinzător, se bazează în mare măsură pe marcajul HTML de pe site-ul dvs. pentru a funcționa fără modificări.

CSS-ul folosit a fost proiectat (și testat) cu temele implicite. Aceasta înseamnă că CSS-ul are câteva așteptări:

1. Pe elementul body există clase care descriu tipul de pagină (de exemplu, acasă, blog, arhivă, căutare)
2. Listele de postări sunt colecții de elemente de articol, complete cu antetul înfășurat într-un div cu id-ul conținutului

Dacă utilizați o temă implicită, atunci veți putea folosi CSS-ul fără modificare. Chiar dacă nu o faci, s-ar putea să descoperi că tema ta folosește un marcaj suficient de asemănător încât să poți folosi CSS-ul așa cum este. De exemplu, tema Eighties folosește practic același marcaj ca și temele implicite.

Dacă tema dvs. nu folosește același marcaj – cel mai ușor mod de a afla este să verificați sursa paginii pentru clasele și ID-urile la care se face referire în CSS – atunci puteți utiliza în continuare CSS-ul, va trebui doar să schimbați clasele și ID-urile pentru a se potrivi cu marcajul dvs.

Alegerea unde să aplici stilul

Puteți decide că doriți să aplicați doar stilul ales anumitor pagini.

WordPress face acest lucru foarte ușor, deoarece aplică clase specifice paginii elementului de corp, cum ar fi blog, acasă, arhivă și căutare, așa că trebuie pur și simplu să codificați CSS-ul pentru fiecare dintre clasele relevante.

De exemplu, dacă doriți să aplicați stilul doar paginii de pornire, atunci CSS-ul dvs. va arăta așa:

body.blog article { styles go here... }

Pentru a aplica stilul paginii de start și paginilor de arhivă (categorie):

body.blog article, body.archive article { styles go here... }

Pentru a aplica stilul doar la rezultatele căutării:

body.blog search { styles go here... }

Din nou, acest lucru depinde de tema dvs., care urmează recomandările de tematică ale WordPress.

Compatibilitate browser

Fiind CSS3, aceste tehnici nu vor funcționa pe toate platformele și browserele.

Am testat și confirm că funcționează pe cele mai recente versiuni de Chrome și Safari (ambele pe OS X) și pe iOS (5+). Diferitele site-uri web CSS sugerează, de asemenea, că IE10 nu va avea nicio problemă.

În afara acestor browsere (inclusiv IE9), kilometrajul dvs. va varia, dar merită să vă amintiți că alternativa este stilul dvs. actual, astfel încât vizitatorii care folosesc browsere mai vechi pur și simplu nu vor observa nicio diferență.

Dacă descoperiți că stilurile funcționează cu succes pe o platformă nemenționată (în special Windows), atunci anunțați-ne în comentarii.

Destul de declinări de răspundere, atunci, haideți să vedem cum să vă îmbunătățiți postările.

Oferiți postărilor dvs. aspectul de zidărie Pinterest

Există o mulțime de teme WordPress și o mână de plugin-uri care afișează postări într-un format de zidărie în stil Pinterest. Dar cu CSS3, puteți pur și simplu să adăugați câteva stiluri suplimentare pe site-ul dvs. WordPress și să obțineți același efect.

Această soluție, inspirată de postarea lui Rahul Arora pe W3Bits, se bazează pe suportul CSS3 pentru proprietatea coloanei . Această proprietate va împărți conținutul pe numărul definit de coloane și, deși creația sa a fost probabil inspirată mai mult de ideea de a curge textul pe coloane în stilul ziarului, este la fel de utilă pentru un aspect de zidărie.

/* Masonry Custom CSS  */

/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}

/* Masonry bricks or child elements */

body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}

body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}

În layout-urile implicite, postările sunt afișate ca elemente de articol înfășurate într-un div cu un id de conținut.

CSS:

1. Setează numărul de coloane pe învelișul #content folosind proprietatea column-count – în acest caz 4. Setează, de asemenea, column-gap . Veți observa utilizarea -moz- și -webkit- pentru Firefox și Safari.

2. Transformă elementele articolului în cărămizi, folosind inline-block și setând o lățime la 100%.

3. Se asigură că antetul paginii și navigarea se află pe propriul „rând” prin specificarea că aceste elemente se întind pe toate coloanele

Doar pentru a menține lucrurile în ordine, ați putea lua în considerare și să adăugați următoarele:

/* Some ad hoc CSS useful for many themes */
body.archive .site-content,
body.blog .site-content {
margin: 1em;
}

h1, h2, h3, h4, h5, h6, a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}

Acest lucru pune doar o marjă în jurul conținutului și se asigură că cuvintele lungi din titluri nu aruncă formatarea (utilă pentru orice temă, nu doar aici).

Făcându-l receptiv

Un dezavantaj al abordării pe coloană este că se degradează rapid pe măsură ce dimensiunea ecranului devine mai mică.

Ceea ce dorim să facem este să manipulăm numărul de coloane, astfel încât elementele articolului să obțină o cantitate sensibilă de spațiu pe ecran pentru a menține integritatea și atractivitatea vizuală a cărămizilor. Deci, să adăugăm câteva interogări media pentru a modifica numărul de coloane în funcție de dimensiunea ecranului:

@media only screen and (max-width : 1024px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 768px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 480px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}

După cum puteți vedea, trebuie doar să schimbăm proprietatea numărului de coloane (și derivatele acesteia) pentru fiecare interogare.

Aceste 4 puncte de întrerupere, dintre care 3 vor funcționa pe toate platformele (pur și simplu redimensionați fereastra browserului pentru a vedea că acestea au efecte) și 1 care este special pentru o tabletă în modul portret.

Iată stilul de zidărie pe un iPad și iPhone:

Puteți (și ar trebui), desigur, să mergeți mai departe și să adăugați mai mult stil cărămizilor pentru a îmbunătăți atractivitatea vizuală, dar doar 3 declarații CSS pentru a vă transforma postările într-un zid de zidărie sunt destul de impresionante!

Așezarea postărilor într-o grilă

Dacă vă place mai multă uniformitate și ordine decât oferă zidăria, atunci ați putea fi interesat să vă aranjați postările într-o grilă.

Grilele sunt foarte, foarte ușor de implementat, dar cu siguranță funcționează cel mai bine atunci când imaginile prezentate sunt toate de aceeași dimensiune, altfel puteți ajunge cu o mulțime de spații albe completând „celulele” mai scurte.

De data aceasta, CSS-ul este și mai scurt, bazându-se pur și simplu pe stilarea elementelor articolului :

/* Grid Layout Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}

Asta e tot ce este absolut necesar. Din nou, folosim inline-block și ne asigurăm că conținutul articolului (titlu, imagine prezentată, fragment) este aliniat vertical.

Proprietatea importantă este lățimea , deoarece aceasta determină numărul de „coloane”. Am folosit 32,5% ca valoare inițială (folosirea a 33% poate duce la împachetare prematură) care va asigura 3 coloane. Evident, dacă doriți 4 coloane, atunci ați folosi 24,5%, 5 coloane 19,5% etc.

Adăugarea de receptivitate

La fel ca stilul nostru de zidărie, grilele vor trebui să fie receptive pentru a-și menține eficiența.

Deoarece proprietatea width determină numărul de coloane, aceasta este proprietatea care va fi modificată în diferitele interogări media.

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog article, body.archive article {
width: 49%;
}
}

@media only screen and (max-width : 768px) {

body.blog article, body.archive article {
width: 49%;
}
}

@media only screen and (max-width : 480px) {

body.blog article, body.archive article {
width: 100%;
}
}

Doar 3 interogări de data aceasta, deoarece am început doar cu 3 coloane. Dacă decideți să începeți cu mai multe coloane, atunci este posibil să doriți să adăugați un punct de întrerupere de lățime maximă: 1024px pentru a seta lățimea la 32,5% (3 coloane).

Aceasta va avea ca rezultat:

1. 2 coloane pe o tabletă în modul portret
2. 2 coloane când dimensiunea ecranului este o lățime maximă de 768 px
3. 1 coloană când dimensiunea ecranului este o lățime maximă de 480 px

Aceste puncte de întrerupere vor acoperi atât tabletele, cât și smartphone-urile și redimensionarea ferestrei browserului.

Iată aspectul grilei pe un iPad și iPhone:

Grilele, puțin mai ordonate decât zidăria, dar într-adevăr necesită consistență și rigoare atunci când vine vorba de dimensiunea imaginii prezentate pentru a fi cel mai eficient.

Adăugarea CSS personalizat pe site-ul dvs

Există o serie de opțiuni atunci când vine vorba de injectarea CSS personalizat pe site-ul dvs. WordPress. Dacă tema dvs. nu include posibilitatea de a adăuga CSS personalizat, atunci alegerile dvs. sunt:

• Tema copil – creați o temă copil și adăugați CSS la foaia de stil
• Plugin – adăugați stilul ales la un nou fișier CSS și creați un plugin care utilizează funcția wp-enqueue-style, probabil în funcție de pagina generată, pentru a pune noul fișier în coadă.
• Editați foaia de stil a temei curente – nu faceți, într-adevăr, pur și simplu nu
• Utilizați un plugin CSS personalizat - există o serie de pluginuri care vă vor permite să adăugați CSS personalizat la site-ul dvs. prin interfața de administrare WordPress (pluginul CSS personalizat simplu, bine numit este un astfel de plugin)

Îmi place să folosesc pluginul CSS personalizat. Este rapid și ușor de configurat, face testarea simplă și este la fel de rapid și ușor să eliminați CSS-ul de pe site-ul dvs. WordPress (ștergeți editorul sau dezinstalați pluginul).

CSS, Calea către WordPress Zen

Minunatul CSS Zen Garden a demonstrat de mulți ani că aspectul și senzația unui site pot fi modificate substanțial fără o singură modificare a marcajului, ci prin schimbarea CSS.

Deși nu sunt aproape de același nivel, aceste două tehnici demonstrează că schimbarea aspectului și a concepției site-ului dvs. WordPress este, de asemenea, pe deplin posibilă, fără a fi nevoie să modificați șabloane, folosind coduri scurte sau dezvoltând teme pentru copii.

Doar puțin CSS.

Nota editorului: Această postare a fost actualizată pentru acuratețe și relevanță. [Publicat inițial: iulie 2014 / Revizuit: februarie 2022]

• CSS
• grile