Neki WordPress predlošci su prilično uski u bočnom meniju, takozvanoj bočnoj traci, ili, naprotiv, uski u odjeljku članaka, i naravno, neki webmasteri moraju proširiti određene granice, na primjer, da bi se smjestili baneri. U ovom članku ću vam reći kako promijenite veličinu zaglavlja, predloška, odjeljka članka ili bočnog menija.
Zašto ćete možda morati promijeniti veličinu predloška.
Možda ćete htjeti promijeniti veličinu predloška ili na samom početku, čim ste ga instalirali, ili nakon što ste napisali određeni broj članaka i počele su se pojavljivati vaši prvi deseci posjetitelja. Na primjer, trebalo je da proširim šablon nakon što sam htio pokušati zaraditi prvih par centi na oglašavanju od svog rada - bloga. Za ove svrhe odabran je sistem baner oglašavanje od Google AdSense. Ali da biste zaradili najmanje dva nesretna centa, morate uzeti u obzir dva parametra:
- Da bi neko kliknuo na reklamu, baneri koje će sistem izdati moraju biti na određenim mestima. Na internetu pišu da je ovo lijevi klizač, tu postavljamo kvadratni baner i tri puta unutar članka. Na samom vrhu, u centru, nakon nekog naslova i na samom kraju. Ovaj aranžman će biti idealan da ljudi kliknu na baner. Naravno, postoje i druge opcije, na primjer na slikama, ali ih ne razmatramo u okviru ovog članka.
- Google nudi banere određenih veličina.
one. moramo kombinovati prvu i drugu tačku, odnosno, pobrinuti se da su baneri sa Google-a ili Yandexa postavljeni na za to predviđena mjesta, na lijevoj bočnoj traci iu člancima. Pošto je moj predložak bio preuzak za ove svrhe, i nema smisla kačiti male banere, jer niko neće kliknuti na njih, preostaje samo jedno - proširiti bočni meni i odjeljak sa člancima.
Kako horizontalno uvećati šablon 1. deo, razumejte brojeve
Da bismo shvatili koliko nam je potrebno da povećamo širinu ovog ili onog elementa, ne moramo na prvi pogled procijeniti "centimetar ovdje je dovoljan, a pola centimetra tamo", već da saznamo ove brojke tačno, u pikselima. Gotovo svaki pretraživač će nam pomoći u tome, na primjer:
- Safari
- FireFox
- Google Chrome
Lično ću prikazati Safari kao primjer, a vi ćete koristiti bilo koji pretraživač koji vam odgovara. Razlike bi trebale biti samo u jednom dugmetu.
Dakle, baza - veličina našeg sajta sastoji se od 4 elementa, veličine samog šablona, veličine stranice, veličine bloka članaka i levog bloka menija. Sve ćemo povećavati redom, ne brinite, nije strašno.
Za promjenu širine lijevog menija.
U ovom slučaju, možete promijeniti i piksele, kao što smo učinili u koracima 3-5, i postotak na stranici. Da biste to učinili, samo promijenite parametar umjesto piksela
Ove vrijednosti znače koliko posto širine može zauzeti jedan ili drugi element. Glavna stvar je da bočna traka i članak zauzimaju 100% ukupno, a ne više, inače će sve lebdjeti po stranici.
To je sve. Sada znamo koje vrijednosti trebamo promijeniti kako bi se sve uklopilo. Ostaje samo da unesete potrebne podatke u datoteku stila.
Kako povećati šablon horizontalno 2. dio, promijenite širinu
Nakon što shvatimo brojeve i zapišemo ih negdje na komad papira, hajde da ih sada promijenimo za sve, a ne samo za sebe. Da biste to učinili:
- Prijavite se putem FTP-a na stranicu
- Pronađite i kopirajte datoteku /wp-content/themes/Your theme/style.css na svoj računar
- Napravite rezervnu kopiju ovog fajla, tj. kopirajte ga u fasciklu dokumenata. Tako da postoje dvije kopije fajla na kompjuteru, jedna na kojoj ćemo raditi, druga koju nećemo dirati. Drugi služi u slučaju da nešto promijenimo pogrešno i zaboravimo šta.
- Otvorite datoteku u prikladnom uređivaču. Sada smo suočeni s prilično jednostavnim zadatkom promjene starih vrijednosti u nove. Postoje dva načina, prvi je lak, a drugi težak. Prvo, pronalazimo staru vrijednost pretraživanjem i umjesto toga upisujemo novu. Drugi način je da potražite naziv stilova, potražite širinu unutar stilova i promijenite vrijednost.
Lično sam odabrao prvu, laku metodu za sebe, jer vam omogućava da napravite promjene u samo nekoliko sekundi. Dakle, tražimo vrijednost 980. Pretraživanje u datoteci je vratilo samo dva parametra, koje moram promijeniti.
Prvi je odgovoran za širinu cijele stranice:
| 1
2
3
4
5
6
7
8
| #stranica (min-visina: 100px; jasno: oba; širina: 96%; padding: 0; padding-top: 24px; max-width: 980px; overflow: skriveno; |
#stranica ( min-visina: 100px; jasno: oba; širina: 96%; padding: 0; padding-top: 24px; max-width: 980px; overflow: skriveno;
Drugi je za širinu dva elementa, listu članaka i lijevog menija:
| 1
2
3
4
5
6
7
8
9
10
11
| . glavni-kontejner (širina: 980px; margina: 0 auto; overflow: skriveno; padding: 0 ; pozadina: #fff; pozicija: relativna; - webkit-box- shadow: 0px 0px 10px rgba(50, 50, 50, 0.17) - moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17) ; |
Glavni kontejner ( širina: 980px; margina: 0 auto; prelijevanje: skriveno; padding: 0; pozadina: #fff; pozicija: relativna; -webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17) -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17);
Sve što treba da uradimo je da promenimo vrednosti sa 980 na 1080 i ponovo ga učitamo.
To je sve, ali ako i dalje imate pitanja, pišite u komentarima ili mi pošaljite e-mail, rado ću vam pomoći.
Da li želite da kreirate stranicu pune širine u WordPress-u?
Vratimo se onda zašto smo ovdje.
Metoda 1: Upotreba ugrađenog predloška širine u WordPress temi
Ova metoda se preporučuje ako vaša WordPress tema već dolazi s predloškom stranice pune širine. Ako ga nemate, pogledajte sljedeći izbor i nabavite ga.
Prvo morate urediti stranicu ili kreirati novu posjetom " Stranice>Dodaj Nova stranica
U prozoru za uređivanje stranice odaberite Full Width kao predložak ispod polja za potvrdu atributa stranice.
Nakon odabira modela Full Width Morate registrirati svoju stranicu. Možete nastaviti s prilagođavanjem stranice kako biste dodali još sadržaja ili kliknite na dugme za pregled da biste je vidjeli u akciji.
Ako nemate opciju "Puna širina" - "predložak pune širine" - na ekranu za uređivanje vaše stranice, to znači da vaša WordPress tema nema tu stranicu.
Ali, ne brinite, pokazat ćemo vam kako je lako napraviti stranicu pune veličine bez promjene WordPress teme.
Metoda 2: Kako kreirati predložak stranice pune širine
Ova metoda zahtijeva od vas da uredite datoteke WordPress teme koje koristite i za osnovne razumevanje PHP-a, CSS i HTML.
Inače, pozivamo vas i da se konsultujete sa
Prvo morate otvoriti uređivač teksta, kao što je Notepad, i zalijepite sljedeći kod u praznu datoteku:
Ovaj kod jednostavno specificira ime predloška datoteke i traži od WordPress-a da dohvati predložak zaglavlja.
Tada će vam trebati sadržajni dio koda. Povežite se na svoju web lokaciju pomoću FTP klijenta ( ili file manager u cpanel) zatim idite na /wp-contents/themes/your-theme-directory/ .
Tada biste trebali pronaći datoteku pod nazivom " page.php" Ovo je podrazumevani fajl šablona stranice za vašu temu.
Kopirajte sve nakon funkcije " get_header() I zalijepite ga u datoteku Full width.php Ovo ste kreirali na svom računaru.
Sada morate pogledati sadržaj datoteke "full-width.php" i ukloniti ovu liniju koda:
Ova linija jednostavno vraća bočnu traku i prikazuje je u vašoj WordPress temi. Ako ovo uklonite, vaša tema neće prikazati bočnu traku kada koristite predložak Full Width.
Možda ćete vidjeti da se ova linija pojavljuje nekoliko puta u vašoj WordPress temi. Ako vaša WordPress tema ima više, vidjet ćete svaku bočnu traku referenciranu jednom u kodu. Morate odlučiti koje bočne trake želite zadržati.
Vaša web stranica se sporo učitava, otkrijte
Ako vaša tema ne prikazuje bočne trake na vašoj stranici, možda nećete pronaći ovaj kod u datoteci.
Ovako se naš full-width.php kod brine za unošenje izmjena. Vaš kod se može neznatno razlikovati ovisno o vašoj temi.
Zatim morate preuzeti datoteku Full width.php U folderu vaše WordPress teme koristeći .
Uspješno ste kreirali i prenijeli prilagođeni predložak stranice pune širine za svoju temu. Sljedeći korak je korištenje ovog predloška za kreiranje stranice pune veličine.
Idite na svoju kontrolnu tablu i uredite ili kreirajte novu stranicu.
Na ekranu za uređivanje stranice pronađite polje za potvrdu atributa stranice i kliknite na padajući meni ispod opcije Model.
Moći ćete vidjeti svoj model. Samo naprijed, odaberite ga i sačuvajte ili osvježite stranicu.
Sada možete posjetiti svoju web stranicu i vidjet ćete da su bočne trake nestale i da se vaša stranica pojavljuje kao stranica sa jednom kolonom. Možda još nije puna, ali sada ste spremni da ga distribuirate na drugačiji način.
Učinite svoju stranicu popularnom otkrivanjem
Morat ćete koristiti alat Inspect da otkrijete CSS klase koje vaša tema koristi za definiranje područja sadržaja.
Zatim možete podesiti njegovu širinu na 100% koristeći CSS. Koristili smo sljedeći CSS kod:
.str-template pune širine zone.content (širina: 100%; margina: 0px; granica: 0px; padding: 0px; ) .str-template pune širine.Output (margina: 0px; )
Ovako bi izgledao Twenty Seventeen.
To je sve za ovaj vodič, nadam se da će vam omogućiti da kreirate stranice u punoj veličini.
Gore navedene metode su besplatne za one koji si mogu priuštiti i žele brzo kreirati rasporede pune ili pune širine.
Otkrijte i neke vrhunske WordPress dodatke
Možete koristiti druge WordPress dodatke da date moderan izgled i optimizirate upravljanje svojim blogom ili web-stranicom.
Nudimo vam nekoliko vrhunskih WordPress dodataka koji će vam pomoći u tome.
1. Divi Builder
Divi Builder je visokokvalitetan graditelj stranica koji je visoko ocijenjen Elegantne teme Iako se obično koristi kao dio WordPress Divi teme, Divi Builder je također samostalni dodatak koji se može koristiti u drugim WordPress temama.
Divi Builder vam omogućava da uređujete svoj sadržaj koristeći front-end vizuelni interfejs kao i interfejs na strani servera, iako većina korisnika preferira prethodni interfejs.
U suštini, umjesto bočnih traka, sve je u iskačućim prozorima i plutajućim dugmadima. Omogućava vam pristup 316 unaprijed definiranih šablona raspoređenih u 40 različitih paketa za prezentacije i također vam omogućava da sačuvate svoje vlastite dizajne kao šablone.
Pozivamo Vas na otvaranje
Jedna od karakteristika Divi-a je uvijek bila kontrola nad stilovima koje vam daje. Sa tri različite kartice, možete konfigurirati različite postavke, uključujući prilagodljive kontrole, prilagođeni razmak i još mnogo toga.
Možete čak dodati prilagođeni CSS jer njegov CSS editor integrira osnovnu provjeru valjanosti i autodovršavanje.Jedna od kritika Divi Builder-a je uvijek bila da je baziran na . To znači da ako ga jednom onemogućite, ostat ćete s gomilom kratkih kodova u svom sadržaju. Iako je to malo frustrirajuće, sada ima manje problema s dodacima kao što je Shortcode Cleaner.
2. Graditelj
Nije iznenađenje što je Themify Builder ponuda Themify tima. Integrira ga u mnoge svoje WordPress teme kako bi pružio klijentima jednostavne opcije postavke. Ali možete ga kupiti i kao samostalni dodatak i koristiti ga sa bilo kojom WordPress temom.
Poput Divi Builder-a i WPBakery Page Builder-a, Themify Builder vam omogućava da kreirate rasporede u frontend-u ili backend-u.Još jedna dobra stvar je što vam ovaj dodatak omogućava da prilagodite svoje osjetljive prekidne tačke (ali samo na nivou cijele stranice).
Otkrijte stvaranje online trgovine i lako prodajte svoje proizvode na mreži
Zanimljiva karakteristika Themify Builder-a je da vam i dalje omogućava korištenje standardnog WordPress uređivača, dok vas drugi graditelji stranica prisiljavaju da koristite Page Builder sučelje za sve.
3. Fakir
Originalno lansiran 2016. godine, dodatak WordPress Elementor jedan je od najmlađih programera na ovoj listi. Uprkos kasnom lansiranju, Elementor je brzo nakupio više aktivne instalacije 1.000.000 na WordPress.org, što ga čini jednim od najpopularnijih kreatora WordPress-a.
Ako imate bilo kakve prijedloge ili komentare, ostavite ih u našoj rubrici
Često se dešava da tema koja vam se dopada ima usko područje za unos i njena podešavanja ne dozvoljavaju promenu širine. U ovom slučaju, može se povećati uz minimalno znanje HTML I CSS. Na primjer, koristimo popularnu, besplatnu temu Patagonia. Možete proširiti svoju temu pomoću odličnog dodatka Firefox— Firebug. Prvo ga trebate instalirati tako što ćete ga preuzeti ovdje. Onda ga upali plugin, kao što je prikazano na slici - Alati Tab — Web development — Firebug — otvori Firebug:
Nakon toga, na dnu ekrana, trebate pomaknuti kursor i kliknuti mišem za odabir različitih elemenata. U tom slučaju, na desnoj strani će se prikazati CSS stilovi
, a u području stranice će biti istaknuto jedno ili drugo područje - glavno, bočna traka, header. Sada nas zanima glavna oblast u kojoj ćemo završiti kada “unesemo” oznaku
. Na desnoj strani će se prikazati fragment datoteke
style.css. I ovdje možete vidjeti da je širina glavne oblasti 580 piksela. A to nije dovoljno za naše potrebe.
na primjer, povećati širinu glavna oblast od 550 piksela do 620. Da biste to učinili, morate izvršiti promjene u liniji širina: 550px fajl style.css. Ako je tema već instalirana, možete urediti ovu datoteku direktno iz administrativnog panela, ako nije, onda morate raspakirati arhivu s temom i izvršiti promjene u datoteci pomoću uređivača. U našem slučaju, tema je instalirana, pa idite na admin panel— Izgled
— Urednik— otvorite datoteku style.css, potražite širinu linije: 550px i promijenite vrijednost širine 550px u 620px. Kliknite Ažurirajte fajl.
Idemo na stranicu i vidimo da se područje postova proširilo, ali se na nekim mjestima preklopilo na desnu kolonu. U ovom slučaju moramo proporcionalno suziti ovo područje. Za to ćemo također koristiti Firebug dodatak, kao iu prethodnom slučaju. Pronalaženje oznake
Možda će vam se također svidjeti
