A face pagina de start a site-ului WordPress similar cu coperta revistei, totul despre wordpress

Multe teme revista WordPress genera o pagină de start, care este de obicei afișat ca mai multe conținut diferit.

Dar ce se întâmplă dacă doriți să faceți o pagina pentru revista sa, care va semăna cu, să zicem, această revistă?

În acest articol vă vom arăta cum să creați o pagină de start, în stilul revistei, care va lucra pentru toate dispozitivele. Suntem cu toții familiarizați cu reviste decor: o imagine de fundal mare, completate de rubrici atent aranjate de diferite dimensiuni.

În ciuda faptului că această abordare funcționează în lumea offline, acest format este foarte rar in revista on-line, ceea ce este foarte surprinzător, mai ales având în vedere creșterea continuă în utilizarea de tablete și dispozitive portabile.

În acest articol ne uităm la modul în care să pună în aplicare coperta revistei pentru propriul site, care va lucra pe toate platformele.

Notă: datele de testare utilizate în acest articol au fost furnizate de wptest.io.

Crearea paginii de pornire proprii pentru coperta revistei

Soluția se bazează pe utilizarea de plug-in, care are prioritate față de șablonul care este utilizat la generarea pagina de start precum și cu condiția ca toate firele acceptă utilizarea unei pagini statice ca un maestru. Plugin-ul oferă, de asemenea, un SHORTCODE pentru a defini anteturi și se adaugă arbitrare CSS-cod pentru ieșire.

Pasul 1. Instalați plugin.

Plugin-ul este disponibil pe Github. Descărcați zip-fișier și instalează ca orice alt plug-in, și apoi activați. Adaugă noi SHORTCODE, un antet (descrisă în etapa 2) și, de asemenea, folosește filtru template_include pentru suprascrierea șablon utilizat în generarea de pornire.

Pasul 2: Creați pagina.

Ai nevoie pentru a atribui o miniatură pentru pagina, deoarece această imagine va fi utilizată ca coperta fundal. Asigurați-vă că o imagine suficient de mare (imaginea care este prezentată în exemplul are o dimensiune de 900 de pixeli de 1363 pixeli) este selectat pentru capacul.

Pentru a adăuga antete, puteți utiliza scurtătură [titlu], care are următoarele atribute:

• Tipul: se adaugă la elementul DIV generat ca o clasă, puteți defini în CSS.
• Id: ID-ul de înregistrare sau o listă de identificatori, separați prin virgulă. elementul H2 este creat pentru fiecare id, folosind titlul de intrare corespunzător și permalink.
• Imagine: determină dacă ieșirea la înregistrare ecran miniatură. Valoarea poate fi fie da, sau nu, setați implicit nr.
• Text: titlu de înregistrare poate fi înlocuită prin specificarea noul text. Puteți specifica o listă de titluri, separate printr-o virgulă, dacă este necesar.

Următoarele HTML markup vor fi generate:

Adăugați cât mai multe titluri, după cum doriți, apoi publicați pagina.

Pasul 3. Selectați noua pagină ca pagină de start statică.

Du-te la secțiunea Setări - Citirea și selectați o pagină statică în parametrii de ieșire ai paginii principale. Selectați noua pagină din lista drop-down.

După setarea unei pagini statice, mergeți la pagina principală a site-ului.

Pasul 4: Configurarea CSS.

În funcție de fundal și durata titlurilor dvs., poate fi necesar să modificați CSS, pentru a cere o poziționare competentă. Poate fi necesar să se schimbe chiar aproape totul, din scoarță în scoarță.

Există mai multe moduri de a personaliza CSS:

• Câmpurile personalizate - a crea un câmp personalizat la pagina cu denumirea custom_css și plasați CSS-codul în câmpul de valoare (valoare). În cazul în care plugin-ul găsește acest câmp personalizat pe pagina, acesta va încheia valoarea într-o etichetă de stil și inserați codul în codul HTML. Folosind un câmp arbitrar vă permite să pună în aplicare stiluri pentru pagina.
• Editarea style.css - puteți edita direct CSS-fișier în depozitul de plugin-uri.

Plug-in-uri pentru adăugarea de arbitrare CSS-stiluri nu va funcționa, deoarece modelul este minimalist și nu sprijină acțiuni și filtre comune, cum ar fi wp_head și wp_footer.

Imaginea de fundal este adăugată la șablonul cover.php. Se adaugă necesare CSS-stiluri în fișierele header:

Această tehnică simplă ajută pentru a vă asigura că imaginea va fi întotdeauna afișată pe ecran complet pentru toate platformele:

Ce schimbare?

Suprascria CSS nu este atât de dificil. După cum sa menționat deja mai sus, fiecare dintre antetele pentru numerele scurte convertite în elementul DIV cu clasa specificată în atributul type, care conține h2 pentru fiecare înregistrare.

Localizare div este o sarcină ușoară - trebuie doar să utilizați de poziționare absolută și setați valorile corespunzătoare de sus, dreapta, jos și la stânga. Pentru a schimba punctul de vedere al h2, utilizați CSS regula la o h2 (din antetul asociat cu link-ul):

ID-ul unic în CSS - l # site-ul din titlu. Titlul site-ul dvs. vor fi primite și afișate în partea de sus a ecranului în mod automat.

Dacă te uiți în fișierul style.css, veți vedea că am păstrat toate lucrurile destul de simplu, folosind% în măsura în care este posibil, inclusiv dimensiunea fontului. Aceasta, desigur, cea mai simplă abordare, dar vă permite să vă asigurați că pagina va arata la fel pentru ambele desktop și tablete, dispozitive mobile, etc.

Puteți schimba, de asemenea, imaginea de fundal în orice css. Puteți schimba imaginea de ieșire la mai multe dispozitive, reglați-l prin schimbarea orientării.

Asigurați-vă pagina principală a copertei real al revistei!

Având în vedere că este imposibil de a veni cu o foaie de stil comun, care este potrivit pentru toate situațiile, și ținând cont de faptul că capacul va varia întotdeauna de la problema de a emite, eu nu prea închis pe CSS.

Sansele sunt, tu (sau proiectantul) poate crea CSS-cod mai avansat și personaliza șablonul le cover.php.