Cum să extindeți pagina în WordPress. WordPress Tema Schimbarea lățimii

Adesea, atunci când selectați un șablon WordPress, apare o problemă este o lățime insuficientă a blocului. Mulți apar imediat dorința de a schimba lățimea șablonului. Pentru cei care sunt bine cunoscuți în HTML sau PHP, nu va crea probleme speciale. Dar, pentru a scrie în detaliu cum să faceți schimbări în mărimea șablonului WordPress pentru o persoană nepregătită, veți avea nevoie de o broșură întreagă.

Cel mai simplu lucru este de a comanda, dar cel care încearcă să o facă în mod independent primește cunoștințe. În viitor, el nu trebuie să contacteze specialiștii pentru fiecare lucruri mici. Cunoscând "baza" pentru a face destul de posibil. Înainte de a începe, orice modificări, asigurați-vă că faceți o copie de rezervă a tuturor paginilor din resurse. În cazul lucrărilor inexacte, puteți restabili cu ușurință site-ul inițial al site-ului.

Șabloanele WordPress sunt un set incredibil, toate sunt diferite și toată lumea se schimbă în felul lor. Dar astfel de blocuri de bază cum ar fi: lățimea paginii principale, pălăria, coloana din stânga și cea dreaptă, subsolul are totul. Pentru a lucra, vom avea nevoie de:

browser web Mozilla Firefox..
Pluginul Firebug instalat pe Firefox.

Când tot ce aveți nevoie, instalat și gata de lucru, deschideți șablonul selectat în Mozilla Firefox și executați FireBug apăsând pictograma Beetle.

Panou simplu.

La parter, panoul plugin se deschide în care vom lucra. Toate modificările efectuate vor fi afișate imediat în partea de sus a monitorului. În fila Dreapta, vedem CSS stilul elementului selectat, în partea stângă codul HTML. pagini. Pentru a mări sau a micșora lățimea șablonului, primul lucru de care trebuie să aflăm dimensiunea de bază curentă. Faceți clic pe pictograma cursorului Pluginului nostru.

Elementele de pe pagină vor fi evidențiate de diferite culori și puteți evidenția fiecare element de pagină, familiarizat cu structura site-ului dvs. Obținerea unui nume, învățați dimensiunile exacte. După instalarea lățimii curente, butonul stâng al mouse-ului este apăsat la această valoare. Creăm cea mai potrivită lățime și testare, afișarea acestuia.

Puteți experimenta în siguranță cu orice elemente și valori. Modificările curente nu pot afecta pagina dvs. pe server, ele sunt active numai în fereastra plug-in (memoria cache a mazilului curent). Când actualizați, toate setările sunt resetate.

Reguli stil.css.

Acum rămâne să salvați aceste schimbări pentru șablonul WordPress. În mod obișnuit, lățimea șablonului este prescrisă în stil.css. Introducem panoul administrativ al site-ului → Aspect → Editor → Style.Css → Rând 79, schimbați lățimea valorii. Salvăm.

niste Șabloane WordPress. Destul de îngust în meniul lateral, așa-numita sidbar, sau invers îngust în secțiunea de articole și, în mod natural, unii webmasteri trebuie să extindă anumite frontiere, de exemplu, bannerul însoțit. În acest articol, vă voi spune cum modificați dimensiunile antetului, șablonului, partiției de articole sau meniului lateral.

Pentru care poate fi necesar să modificați dimensiunea șablonului.

Dimensiunea șablonului Poate doriți să vă schimbați atât la început, cât mai curând instalat și după ce au scris o serie de articole și ați început să apară primele zeci de vizitatori. De exemplu, am nevoie pentru a extinde șablonul după ce am vrut să încerc să câștig primii câteva cenți pe publicitate din munca mea - un blog. În aceste scopuri, sistemul a fost selectat publicitate banner din Google AdSense. Dar pentru a câștiga cel puțin două centi nefericite trebuie să ia în considerare doi parametri:

Pentru cineva care a făcut clic pe publicitate, este necesar ca bannerul să fie emis în anumite locuri. Pe Internet scriu că acesta este glisorul din stânga, există un banner pătrat și de trei ori în interiorul articolului. La început, în centru, după un fel de antet, și chiar la capăt. O astfel de locație va fi ideală pentru ca oamenii să facă clic pe banner. Desigur, există și alte opțiuni, de exemplu în imagini, dar nu le considerăm în acest articol.
Google emite un banner de anumite dimensiuni.

acestea. Trebuie să combinăm primul și al doilea element, și anume, pentru a face bannerul de la Google sau Yandex să fie plasat în locul alocat pentru aceasta, bara laterală stângă și în articole. Din moment ce șablonul meu a fost prea îngust în aceste scopuri, iar bannerul mic stau nu are sens, pentru că nimeni nu va fi pe ele, apoi rămâne doar un singur lucru - întindere bara laterală și secțiunea articolelor.

Cum de a mări modelul orizontal Partea 1, înțelegem numerele

Pentru a înțelege cât de mult este necesar, trebuie să creștem lățimea unuia sau a unui alt element. Nu trebuie să amenințăm la vedere "suficient de centimetru acolo și o jumătate de centimetru acolo", și să învățăm aceste numere exact în pixeli. Aproape orice browser ne va ajuta în acest scop, de exemplu:

Safari.
Firefox.
Google Chrome.

Personal, voi arăta despre exemplul lui Safari și vă aflați în orice browser convenabil pentru dvs. Diferențele ar trebui să fie doar într-un singur buton.

Deci, baza este dimensiunea site-ului nostru constă din 4 elemente, mărimea șablonului în sine, dimensiunea paginii, dimensiunea blocului de articol și unitatea de meniu din stânga. Vom face cu toții, nu vă faceți griji, nu este înfricoșător.

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

1	Lățime: 31,8%;

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.

Cum să măriți partea orizontală Partea 2, schimbați lățimea

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:

Du-te la FTP la site
Găsiți și copiați pe computer / WP-Content / Teme / Tema / Stil.css
Faceți o copie de rezervă a acestui fișier, adică Copiați-l în dosarul Documente. Pentru a face două copii ale fișierului, unul peste care vom lucra, al doilea pe care nu îl vom atinge. Al doilea servește în cazul în care schimbăm ceva greșit și uităm asta.
Deschideți fișierul într-un editor convenabil. Acum avem o sarcină destul de simplă pentru a schimba vechile valori la cele noi. Există două moduri, prima lumină a luminii este grea. Primul caută vechea valoare și scrie un nou unul. A doua cale - căutăm numele stilurilor, în interiorul stilurilor care caută lățimea și schimbă valoarea.

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:

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;

#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:

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);)

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.

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" de etichetă

. Fragmentul de fișiere va fi afișat pe partea dreaptă stil.css.. Și aici se poate observa că lățimea zonei principale este de 580 pixeli. Și acest lucru nu este suficient pentru nevoile noastre.

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ă.

\u003e. În dosar stil.css., vedem că lățimea barei laterale nu utilizează în mod specific proprietatea. lăţime., dar folosind marja: 0 0 0 580px;

Facem procedura strânsă cu editarea stilului.css, ca și în cazul precedent cu zona principală, editați acum doar șirul marja: 0 0 0 580px;Modificăm valoarea incidenței de la 580px la 630px. Acum totul este bine. Zona înregistrărilor a devenit mai largă și nu se desfășoară în zonă bara laterală. Se întâmplă, de asemenea, că stilurile sunt speriate nu numai în fișierul stil.css, dar și în fișier ecran.css.

Doriți să creați o pagină de dimensiune completă pe WordPress?
Apoi, să ne întoarcem la de ce suntem aici.

Metoda 1: Utilizarea șablonului de lățime încorporată în tema WordPress
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ă fără a schimba tema WordPress.
Metoda 2: Cum se creează pagina pagină cu lățimea completă
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:
Șablon de software Lățimea completă a zonei .content (lățime: 100%; margine: 0px; frontieră: 0px; Uphonum: 0px;). Șablonul de lățime completă. Living (câmpuri: 0px;)
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.
Descoperiți, de asemenea, câteva pluginuri WordPress Premium
Puteți utiliza alte pluginuri WordPress pentru a oferi un aspect modern și pentru a vă optimiza gestionarea blogului sau site-ul web.
Vă oferim câteva pluginuri premium WordPress care vă vor ajuta să o faceți.
1. Divi Builder.
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.
2. Builder.
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.
3. Fakir.
Inițial lansat în 2016, Pluginul WordPress Elementor 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ă