Șablonul WordPress pe întreaga lățime. Cum se creează o lățime întreagă a paginii pe WordPress
WordPress este un instrument fantastic pentru blogging, dar, din păcate, nu este perfect. Chiar și după un numar mare Actualizările și sute de caracteristici noi pentru munca convenabilă au nevoie încă de îmbunătățiri de interfață de bază de utilizator.
Recent, am scris o mulțime de articole de lungă listă și în acest proces a detectat o problemă cu editorul vizual de intrare WordPress încorporat, care nu știa înainte, sau mai devreme nu a interferat cu mine.
În această lecție scurtă, vă voi arăta cum să modificați lățimea coloanei principale cu textul în editorul de intrare WordPress Visual.
Problemă
Când creați înregistrări mari (mai ales cu imagini), a trebuit să salvez și să fac o previzualizare a postului pentru a vă asigura că lista este formatată corect. În plus, am avut de multe ori să scrie text direct pe imaginea mea, deoarece dimensiunea ferestrei editorului este de aproape o dată și jumătate mai mare decât oricare dintre imaginile mele (precum și unitatea principală de conținut de pe site-ul meu):
Decizie
Decizia este relativ simplă, dar trebuie să știi cum să o faci în viață. Mai întâi trebuie să aflați lățimea curentă a blocului de conținut de pe site-ul dvs. În cazul meu, lățimea blocului blogului meu este de 650 de pixeli.
Apoi, va trebui să vă deschideți fișierul. funcții.php.și adăugați următorul cod în partea de jos a fișierului:
Funcție fb_change_mce_buttons ($ initarray) ($ initarray ["lățime"] \u003d "650px"; returnă $ initarray;) add_filter ("tiny_mce_before_init", "fb_change_mce_buttons");
Rezultat
Ca rezultat, veți vedea editorul de înregistrare care repetă lățimea blocului de conținut pe site-ul însuși. Astfel, veți fi siguri că atunci când creați o intrare prin consola de administrator, acesta va arăta cât mai aproape de rezultatul final.
Amintiți-vă că unele rezoluții ale ecranului vă vor schimba setările și, de exemplu, vor afișa o singură coloană - va depinde de lățimea conținutului dvs.
Se întâmplă adesea că subiectul vă place are o zonă îngustă pentru înregistrări și în setările sale nu oferă o schimbare a lățimii. În acest caz, acesta poate fi majorat, cu cunoștințe minime HTML. și Css. . De exemplu, folosim tema populară, gratuită Patagonia. Puteți extinde subiectul cu ajutorul unui plugin minunat Firefox.— Firebug.. În primul rând, ar trebui să fie instalat prin descărcare de aici. Apoi porniți conecteaza., așa cum arată în imagine - Fila Tool. — dezvoltare web — Firebug. — deschideți Firebug.:
După aceea, în partea de jos a ecranului, este necesar, înclinați cursorul și faceți clic pe mouse, alegeți diferite elemente. În același timp, pe partea dreaptă va fi afișată. stiluri css., iar în pagina paginii, aceasta sau regiunea respectivă va fi evidențiată - cea principală bara laterală, antet.. Suntem, de asemenea, interesați de zona principală pe care vom cădea când "va veni" cu etichetă De exemplu, lățimea de funcționare Zona principală cu 550 de pixeli, până la 620. Pentru a face acest lucru, trebuie să faceți modificări la șir lățime: 550px Fişier stil.css.. Dacă subiectul este deja instalat, puteți edita acest fișier, direct de la admin, dacă nu, trebuie să despachetați arhiva cu subiectul și să modificați fișierul utilizând editorul. În cazul nostru, subiectul este instalat, așa că intrăm adminCa.— Aspect — Editor - Deschideți fișierul stil.css, găsim lățimea: 550px șir și modificați valoarea lățimii de 550px la 620px. Zhmem. Fișier de actualizare.. Mergem la site și vedem că zona postărilor sa extins, dar în locurile "Hit" din coloana din dreapta. În acest caz, trebuie să îngustăm proporțional această zonă. Pentru aceasta vom folosi, de asemenea plugin Firebug., ca în cazul precedent. Găsiți etichetă. Pentru a schimba lățimea meniului din stânga. În acest caz, puteți schimba atât pixelii, așa cum am făcut-o la punctul 3-5 și procentul de pe pagină. Pentru a face acest lucru, este suficient să schimbați parametrul în loc de pixeli Aceste valori înseamnă câți procente din lățime pot fi ocupate de unul sau altul element. Principalul lucru este că în cantitatea de bara laterală și articolul ocupat 100%, și nu mai mult, altfel veți fi umflați pe pagină. Asta e tot. Acum știm ce valori trebuie să ne schimbăm, astfel încât totul să fie în vrac. Rămâne mic, pentru a face datele necesare în fișierul de stil. După ce înțelegem numerele și le-am inregistrat undeva pe frunze, să le schimbăm acum pentru toată lumea, și nu doar pentru voi înșivă. Pentru aceasta: Personal, am ales primul pentru mine, un mod ușor, deoarece vă permite să faceți schimbări literal în câteva secunde. Deci, căutăm o valoare de 980. Căutarea fișierului a primit doar doi parametri pe care trebuie să o schimb. Primul este responsabil pentru lățimea site-ului: #page (min-înălțime: 100px; Ștergeți: ambele; lățimea: 96%; padding: 0; padding-top: 24px; max-lățime: 980px; depășire: ascunsă; Al doilea este lățimea a două elemente, lista articolelor și meniul din stânga: Container principal (lățime: 980px; Marginea: 0 Auto; Overflow: Ascunse; Padding: 0, Fundal: #FFF; Poziție: Reluară; -Webkit-Box-Shadow: 0px 0px 10px RGBA (50, 50, 50, 0.17) ; -Moz-umbra-umbra: 0px 0px 10px RGBA (50, 50, 50, 0,17); Box-umbra: 0px 0px 10px RGBA (50, 50, 50, 0,17);) Tot ceea ce am rămas să schimbăm valorile de la 980 la 1080 și să descărcați înapoi. Asta-i tot, dar dacă aveți câteva întrebări, scrieți în comentarii sau voi fi bucuroși să vă ajut. Doriți să creați o pagină de dimensiune completă pe WordPress?
Apoi, să ne întoarcem la de ce suntem aici. Această metodă este recomandată dacă tema WordPress este deja echipată cu un șablon de pagină de dimensiuni complete. Dacă nu o aveți, contactați următoarea alegere și obțineți-o.
În primul rând, trebuie să editați pagina sau să creați unul nou vizitând " Pagini\u003e Adăugați Pagina noua În fereastra de editare a paginii, selectați Lățime maximă Ca șablon sub atributele atributului paginii. După selectarea modelului Lățime maximăTrebuie să vă înregistrați pagina. Puteți continua configurația paginii pentru a adăuga mai mult conținut sau faceți clic pe previzualizaresă o vadă în acțiune. Dacă nu aveți opțiunea "Lățime completă" - "Șablon de lățime completă" - pe ecranul de editare a paginii, aceasta înseamnă că subiectul dvs. WordPress nu are această pagină. Dar nu vă faceți griji, vă vom arăta cât de ușor este să creați o pagină de dimensiune completă neschimbată. teme WordPress..
Această metodă vă cere să editați fișierele WordPress pe care le utilizați și pentru înțelegerea de bază a PHP, CSS și HTML. Apropo, vă invităm, de asemenea, să vă consultați Mai întâi trebuie să deschideți editor de text, cum ar fi "Notepad" și introduceți următorul cod într-un fișier gol: Acest cod definește pur și simplu numele șablonului de fișier și cere WordPress pentru a elimina șablonul de titlu. Apoi aveți nevoie de conținutul de parte a codului. Conectați-vă la site-ul dvs. utilizând clientul FTP ( sau manager de fișiere în cpanel.) Apoi mergeți la / WP Conținut / Subiecte / Catalogul dvs. tematic / .
Apoi trebuie să găsiți fișierul numit " pagină " Acesta este fișierul șablon de pagină implicit pentru subiectul dvs. Copiați totul după funcție " get_header () Și introduceți-l în fișier Width.php. Pe care l-ați creat pe computer. Acum trebuie să vedeți conținutul fișierului "Full-Width.php" și să ștergeți acest șir de cod: Acest șir restabilește pur și simplu bara laterală și îl afișează în tema WordPress. Scoaterea acestuia, subiectul dvs. nu va afișa bara laterală atunci când utilizați un șablon Lățime maximă.
Puteți vedea că acest șir apare de mai multe ori în tema WordPress. Dacă tema WordPress are câteva, veți vedea fiecare panou lateral, care se referă la o dată în cod. Trebuie să decideți ce panouri laterale doriți să salvați. Site-ul dvs. este încărcat încet, descoperiți-vă pentru dvs. Dacă subiectul dvs. nu afișează bara laterală pe pagina dvs., nu puteți găsi acest cod în fișierul dvs. Iată modul în care codul nostru complet de lățime.php are grijă de a face schimbări. Codul dvs. poate diferi ușor în funcție de subiectul dvs. Apoi trebuie să descărcați fișierul Width.php. În dosarul tematic WordPress cu. Ați creat cu succes și ați descărcat un șablon de pagină cu lățime completă pentru tema dvs. Următorul pas va fi utilizarea acestui șablon pentru a crea o pagină de dimensiune completă. Mergeți la bara de instrumente și editați sau creați o nouă pagină. În ecranul de editare a paginii, găsiți caseta de selectare a atributului paginii și faceți clic pe meniul derulant din opțiunea "Model". Puteți vedea modelul dvs. Redirecționați, selectați-l și salvați sau actualizați pagina. Acum puteți vizita site-ul dvs. și veți vedea că panourile laterale au dispărut, iar pagina dvs. este afișată ca o pagină cu o singură coloană. Poate că nu este încă umplut, dar acum ești gata să-l răspândești diferit. Faceți site-ul dvs. popular, descoperirea Va trebui să utilizați instrumentul Inspectare pentru a detecta clasele CSS utilizate de subiectul dvs. pentru a determina zona de conținut. Puteți apoi să configurați lățimea la 100% utilizând CSS. Am folosit următorul cod CSS: Așa va arăta ca douăzeci de șaptesprezece. Aceasta este totul pentru această lecție, sper că vă va permite să creați pagini de dimensiune completă. Metodele de mai sus sunt gratuite pentru cei care își pot permite și doresc să creeze rapid layout-uri complete sau complete. Puteți utiliza alte pluginuri WordPress pentru a oferi un aspect modern și pentru a vă optimiza gestionarea blogului sau site-ul web. Divi Builder este un designer de pagini de înaltă calitate, care este foarte apreciat Teme eleganteDeși este de obicei folosit ca parte a temei WordPress Divi, Divi Builder este, de asemenea, un plugin separat care poate fi utilizat în alte subiecte WordPress. Divi Builder vă permite să editați conținutul utilizând interfața vizuală din partea interfeței, precum și interfața de pe partea serverului, deși majoritatea utilizatorilor preferă prima interfață. De fapt, în loc de panourile laterale, totul este în ferestre pop-up și butoane plutitoare. Vă oferă acces la șabloane predefinite 316, distribuite pe diferite cadouri 40 de pachete și vă permite, de asemenea, să salvați propriile modele ca șabloane. Vă sugerăm să vă deschideți Una dintre caracteristicile Divi a fost întotdeauna controlul asupra stilurilor pe care le oferă. Pe trei file diferite, puteți configura diferiți parametri, inclusiv controale adaptive, interval configurabil și multe altele. Puteți chiar să adăugați un CSS personalizat, deoarece editorul CSS combină verificarea de bază și umplerea automată.Unul dintre criticii Divi Builder a fost întotdeauna că se bazează pe, înseamnă că dacă o opriți o dată, o grămadă de scurte de scurte va rămâne în conținutul dvs. Deși acest lucru este un pic deprimant, dar acum există mai puține probleme cu astfel de pluginuri ca și mai curat. Nu este surprinzător faptul că construitorul de teatru este oferta echipei de teatru. El îl integrează la multe din WordPress, pentru a oferi clienților setări simple. Dar o puteți cumpăra, de asemenea, ca un plugin separat și îl utilizați cu orice temă WordPress. La fel ca Divi Builder și Builder de pagini WPBakery, STIFY BUILDER vă permite să creați layout-uri în interfață sau în backend.Un alt lucru bun - acest plugin vă permite să vă configurați responsabilitatea puncte de control (Dar numai la nivelul întregului site). Descoperiți Creați un magazin online și vindeți cu ușurință produsele dvs. pe Internet. O caracteristică interesantă a constructorului de teatru este că vă permite încă să utilizați editorul WordPress Standard, în timp ce alți designeri de pagini vă fac să utilizați interfața Builder Page pentru tot. Inițial lansat în 2016, plugin WordPress. Elementul este unul dintre cei mai tineri dezvoltatori din această listă. În ciuda lansării târzii, ElemenSor a acumulat rapid setări mai active 1.000.000 pe Wordpress.org, ceea ce îl face unul dintre cei mai populari designeri Wordpress. Dacă aveți sugestii sau comentarii, lăsați-le în secțiunea noastră
1
Lățime: 31,8%;
Cum să măriți partea orizontală Partea 2, schimbați lățimea
1
2
3
4
5
6
7
8
#page (min-înălțime: 100px; Șterge: ambele; lățimea: 96%; Padding: 0; Padding - Top: 24px; Max- lățime: 980px; Depășire: Ascuns;
1
2
3
4
5
6
7
8
9
10
11
. Container principal (Lățime: 980px; Margine: 0 Auto; Overflow: Ascunse; Padding: 0, fundal: #fff, poziție: rudă; - Box - umbra: 0px 0px 10px RGBA (50, 50, 50, 0.17) ; - umbra Moz-Box: 0px 0px 10px RGBA (50, 50, 50, 0,17); Box-umbra: 0px 0px 10px RGBA (50, 50, 50, 0,17);)
Metoda 1: Utilizarea șablonului de lățime încorporată în tema WordPress
Metoda 2: Cum se creează pagina pagină cu lățimea completă
Descoperiți, de asemenea, câteva pluginuri WordPress Premium
Vă oferim câteva pluginuri premium WordPress care vă vor ajuta să o faceți.
1. Divi Builder.
2. Builder.
3. Fakir.