primul este de a face blocul cel mai informativ,
a doua - pentru a curăța site-ul, în timp ce a face disponibilitate maximă de materiale populare.
În final, am un astfel de bloc:
Inițial, desigur, am vrut să iau o soluție gata făcută sub forma unui plug-in, analizând o mulțime de opțiuni. Dar, fie ei fie încărcați site-ul, fie încet încărcați ei înșiși. Singurul plugin care mi-a plăcut este Widgetul popular. Dar, aspectul acestui widget va trebui să fie modificat pentru proiectarea blogului. Și trebuie să spun că există suficiente probleme.
Prin urmare, am decis să creez singur această unitate multifuncțională, utilizând cadrul html, interogările bazei de date și stilurile CSS.
Cum de a crea un bloc multifuncțional cadru html
Baza întregului bloc este cadrul html, unde filele sunt implementate prin intermediul butoanelor radio. Iar aspectul filelor este rafinat prin stilurile css.
Aici este codul html al cadrului, pe care îl puteți modifica pentru a vă potrivi nevoilor, în funcție de numărul de file:
Rețineți că este verificată a doua filă. adică, acest comutator (fila) va fi deschis în mod implicit.
Acum, să vedem cum arată acest cadru fără stiluri de design.
După cum puteți vedea, butonul radio activ este instalat în fila a doua. Comutarea funcționează deja, dar conținutul blocurilor
Acum, să explicăm codul:
Toate filele sunt închise într-un bloc DIV
Tabelele sunt implementate utilizând eticheta INPUT, al cărei tip este un buton radio
Numele filei este implementat prin eticheta LABEL
Sub conținutul filelor, blocurile separate DIV
Crearea stilurilor de design pentru o unitate multifuncțională
Pentru a oferi blocului forma necesară și, cel mai important, funcționalitatea necesară, trebuie să adăugați stilurile necesare fișierului style.css. Voi da un exemplu de stiluri cele mai necesare pe care le puteți schimba și completa ulterior în funcție de design-ul site-ului dvs.
Deci, dacă aplicăm aceste stiluri în scheletul nostru:
atunci ajungeți aici este un astfel de unitate multifuncțională.
Aceste stiluri pe care le luați ca bază, și apoi problema tehnologiei. Eu, de exemplu, am folosit proprietățile înainte și după pentru a adăuga icoane și a da o anumită stafidă blocului meu. Imaginea de ecran pe care ați văzut-o mai sus.
Cum se afișează rubricile într-o unitate multifuncțională
în cazul în care numărul zece indică numărul de înregistrări care trebuie trimise.
Cum se afișează arhiva materialelor în unitatea multifuncțională
Din nou, în blocul DIV
unde puteți schimba intervalul, lunar - arhiva lunară; zi - zilnic; an - de ani.
Dar deja am scris despre acest lucru în acest articol. trebuie doar să luați codul necesar și să îl lipiți în blocul DIV
Unde să introduceți codul gata al unității multifuncționale
Cred că cel mai bun loc este bara de site-uri, deși în unele teme de design acest bloc va arăta bine în subsol. Dar vom lua un exemplu de inserare a unui bloc în bara de site-uri.
Dacă nu utilizați PHP în blocul dvs., adică aveți numai cod HTML și text în interior, puteți utiliza widget-ul text care este disponibil în panoul de administrare WordPress.
Și dacă utilizați interogări php, widgetul nu va mai funcționa. Trebuie să introduceți codul blocului direct în fișierul responsabil pentru afișarea barei de site (sidebar.php).
Ai nevoie de un loc, fii atent. Consultați etichetele de închidere, paranteze, punct și virgulă. Dacă o faci, totul poate să dispară la întâmplare. Și mai bine de rezervă înainte de a schimba fișierele
Găsiți locul potrivit, inserați și verificați munca dvs.
Articole similare
Trimiteți-le prietenilor: