Acest sfat rapid explică modul de adăugare a unei coloane personalizate în ecranele de administrare ale blogului dvs. WordPress.
Recent, m-am trezit nevoit să încep să utilizez imaginile recomandate în loc de timthumb.php pentru prima dată. Totul a fost grozav, cu excepția faptului că mi-am găsit foarte enervant faptul că nu am reușit să precizez exact ce mărime ar trebui să fie o imagine (culturi dure).
După ce m-am uitat în jur pentru un timp, am constatat că soluția celor mai mulți oameni a fost să utilizeze un plugin care a ajuns să aibă o cantitate excesivă de cod în el.
În plus, am vrut să pot servi un aspect receptiv, folosind clasa de sistem a rețelei scheletului "scala cu grilă"- motivul inițial pentru utilizarea imaginilor prezentate, care nu necesită un atribut pentru lățimea și înălțimea capătului frontal.
Iată soluția pe care am venit cu cerințele proiectului.
Pasul 1 Aplicați o clasă arbitrară pentru imaginile postate de dvs.
Trebuie să putem controla imaginea folosind foaia de stil astfel încât trebuie să aplicăm o clasă care afectează doar imaginea în sine. Am ales doar să îmi împachetez imaginea într - un figura/div numita "titlu“. Asta a fost în plus față de o dimensiune miniatură personalizată a mesajului pe care am introdus-o deja functions.php fișier numit "imens"- această dimensiune miniatură avea o lățime maximă de 940, în timp ce înălțimea era de 900.
Este bine sa presupunem ca doriti o imagine cu o inaltime de 900 de pixeli - dar sa ne facem fata: probabil ca nu pentru ca arata asa:
Iată codul pe care l-am scris pentru șablon:
„Scară cu grilă“)); ?>
Pasul 2 Un pic de Hackery CSS
#headline max-height: 400px; overflow: ascuns;
Și după ce am adăugat acest cod obținem următorul rezultat care este mult mai ușor de gestionat:
De ce funcționează
Acest lucru funcționează deoarece am setat numai o înălțime maximă și nu o lățime maximă. WordPress implicit la lățimea maximă pe care o stabilim prin intermediul funcției noastre:
add_action ('init', 'my_register_image_sizes'); funcția my_register_image_sizes () add_image_size ('imens', 940.900, true);
Imaginea este totuși în toate dimensiunile din punct de vedere tehnic, dar am provocat browserul să ascundă ceva peste înălțimea de 400 pixeli utilizând overflow: ascuns atribut.
Functioneaza!
Doar o problemă ...
În timp ce arată bine, de fapt, suntem hacking sălbatic la browser-ul nostru aici. Amintiți-vă că imaginea pare doar ca și cum a redimensionat - așa cum am spus deja că imaginea este încă în întregime.
Asta inseamna ca, in ciuda faptului ca arata foarte bine pana la cel mobil, incepe sa aiba destul spatiu.
Are cineva o soluție mai bună? Lăsați-vă ideile în comentariile de mai jos!
Share
Accentsconagua
