Vil du lage en full størrelse WordPress-side?
Så tilbake til hvorfor vi er her.
Metode 1: bruk av den innebygde breddemalen i et WordPress-tema
Denne metoden anbefales hvis WordPress-temaet ditt allerede kommer med en sidemal i full størrelse. Hvis du ikke har det, gå til neste valg og få det.
Først må du redigere siden eller opprette en ny ved å gå til " Sider> Legg til Ny side
Velg i sideredigeringsvinduet Full bredde som en mal under avmerkingsboksen for sideattributter.
Etter valg av modell Full bredde Du må registrere siden din. Du kan fortsette å tilpasse siden for å legge til mer innhold, eller klikke på forhåndsvisningsknappen for å se den i aksjon.
Hvis du ikke har Full Width - Full Width Template-alternativet på sideredigeringsskjermen, betyr det at WordPress-temaet ditt ikke har denne siden.
Men ikke bekymre deg, vi viser deg hvor enkelt det er å lage en helside uten å endre WordPress-temaet ditt.
Metode 2: hvordan lage en sidemal i full bredde
Denne metoden krever at du redigerer WordPress-temafilene du bruker og en grunnleggende forståelse av PHP, CSS og HTML.
Forresten, vi inviterer deg også til å rådføre deg med
Først må du åpne et tekstredigeringsprogram som Notisblokk og lime inn følgende kode i en tom fil:
Denne koden oppdager ganske enkelt filnavnet til malfilen og ber WordPress om å trekke ut overskriftsmalen.
Da trenger du innholdsdelen av koden. Koble til nettstedet ditt ved hjelp av en FTP-klient ( eller filbehandler i CPanel) og gå deretter til / Wp-innhold / temaer / din-tematiske katalog / .
Da bør du finne en fil som heter " side.php". Dette er standard sidemalfil for temaet ditt.
Kopier alt etter funksjonen " get_header () Og lim det inn i filen Full bredde.php Du opprettet dette på datamaskinen din.
Nå må du se på innholdet i filen "full-width.php" og fjerne denne kodelinjen:
Denne linjen vil ganske enkelt gjenopprette sidefeltet og vise det i WordPress-temaet ditt. Ved å fjerne dette vil ikke temaet ditt vise sidefeltet når du bruker malen Full bredde.
Du kan se at denne linjen vises flere ganger i WordPress-temaet ditt. Hvis WordPress-temaet ditt har flere, vil du se hver sidefelt referert én gang i koden. Du må bestemme hvilke sidefelt du vil beholde.
Nettstedet ditt laster sakte, oppdag
Hvis temaet ditt ikke viser sidefelt på siden din, kan det hende du ikke finner denne koden i filen din.
Dette er hvordan vår full-width.php-kode tar seg av endringene. Koden din kan variere noe avhengig av temaet ditt.
Deretter må du laste ned filen Full bredde.php I WordPress-tema-mappen med.
Du har opprettet og lastet inn en egendefinert sidemal i full bredde for temaet ditt. Det neste trinnet er å bruke denne malen til å lage en side i full størrelse.
Gå til dashbordet og rediger eller opprett en ny side.
På sideredigeringsskjermen finner du avmerkingsboksen Sideattributter og klikker på rullegardinmenyen under alternativet Modell.
Du vil kunne se modellen din. Gå videre, velg den og lagre eller oppdater siden.
Du kan nå besøke nettstedet ditt, og du vil se sidefeltene er borte og siden din vises som en enkelt kolonneside. Den er kanskje ikke komplett ennå, men du er nå klar til å distribuere den annerledes.
Gjør nettstedet ditt populært ved å oppdage
Du må bruke Inspiser-verktøyet for å oppdage CSS-klassene temaet ditt bruker for å definere omfanget av innholdet ditt.
Deretter kan du justere bredden til 100 % ved hjelp av CSS. Vi brukte følgende CSS-kode:
.p-mal full width zone.content (bredde: 100 %; margin: 0px; kantlinje: 0px; utfylling: 0px;) .page-mal full width.Output (marginer: 0px;)Slik ville Twenty Seventeen sett ut.
Det er alt for denne opplæringen, jeg håper den lar deg lage sider i full størrelse.
Metodene ovenfor er gratis for alle som har råd og ønsker å raskt lage oppsett i full bredde eller full bredde.
Oppdag også noen premium WordPress-plugins
Du kan bruke andre WordPress-plugins for å gi et moderne utseende og optimalisere administrasjonen av bloggen eller nettstedet ditt.
Vi gir deg flere premium WordPress-plugins for å hjelpe deg med å gjøre nettopp det.
1. Divi Builder
Divi Builder er en sidebygger av høy kvalitet som er høyt ansett Elegante temaer Selv om det ofte brukes som en del av WordPress Divi-temaet, er Divi Builder også en frittstående plugin som kan brukes i andre WordPress-temaer.
Divi Builder lar deg redigere innholdet ditt ved å bruke en visuell front-end så vel som en server-side front-end, selv om de fleste brukere foretrekker førstnevnte.
I utgangspunktet, i stedet for sidefelt, er alt i popup-vinduer og flytende knapper. Den gir deg tilgang til 316 forhåndsdefinerte maler fordelt på 40 forskjellige presentasjonspakker, og lar deg også lagre dine egne design som maler.
Vi inviterer deg til å oppdage
En av Divis funksjoner har alltid vært kontrollen over stilene den gir deg. På tre forskjellige faner kan du justere forskjellige innstillinger, inkludert responsive kontroller, tilpasset avstand og mer.
Du kan til og med legge til tilpasset CSS fordi CSS-editoren kombinerer grunnleggende validering og autofullføring.En kritikk av Divi Builder har alltid vært at den er basert på, noe som betyr at hvis du deaktiverer den en gang, vil den legge igjen en haug med kortkoder i innholdet ditt. Selv om dette er litt deprimerende, er det nå færre problemer med plugins som Shortcode Cleaner.
2. Byggmester
Ikke overraskende er Themify Builder et forslag fra Themify-teamet. Han integrerer det i mange av WordPress-temaene sine for å gi kundene enkle tilpasningsmuligheter. Men du kan også kjøpe den som en frittstående plugin og bruke den med et hvilket som helst WordPress-tema.
I likhet med Divi Builder og WPBakery Page Builder, lar Themify Builder deg lage oppsett i frontend eller backend.En annen god ting er at denne plugin-en lar deg tilpasse de responsive bruddpunktene dine (men bare på hele nettstedet).
Oppdag opprette en nettbutikk og selg produktene dine enkelt på nettet
En interessant funksjon ved Themify Builder er at den fortsatt lar deg bruke standard WordPress-editor, mens andre sidebyggere tvinger deg til å bruke Page Builder-grensesnittet til alt.
3. Fakir
Opprinnelig lansert i 2016, WordPress Elementor-plugin er en av de yngste utviklerne på denne listen. Til tross for den sene lanseringen, har Elementor raskt samlet over 1 000 000 aktive installasjoner på WordPress.org, noe som gjør det til en av de mest populære WordPress-byggerne der ute.
Hvis du har noen forslag eller kommentarer, legg dem igjen i vår seksjon
Fra forfatteren: Jeg hilser dere venner. I den neste artikkelen om temaet WordPress vil vi se på spørsmålet om hvordan du endrer en WordPress-mal. Hvis du aldri har støtt på behovet for å endre en WordPress-mal, så husk å lese denne artikkelen, for før eller siden vil du mest sannsynlig måtte møte problemene med å tilpasse og redigere en WordPress-mal.
La oss først definere de vanligste spørsmålene som brukere møter når de tilpasser en WordPress-mal for seg selv. Her er en omtrentlig liste over dem:
hvordan redigere en WordPress-mal
endre malbredde på WordPress
hvordan endre størrelsen på WordPress-malen
hvordan endre WordPress mal farge
hvordan endre font i WordPress mal
Og dette er bare en liten liste over problemer du kan støte på eller som du kan hjelpe andre med å løse, inkludert mot en avgift hvis du utvikler skreddersydde nettsider.
Alle spørsmål i listen ovenfor kan løses på to måter, avhengig av temaet som brukes for siden. La oss starte med det enkleste alternativet, som ikke krever noen layoutkunnskap. Dette alternativet passer hvis malen støtter redigering fra innstillingene.
La oss gå til Utseende - Tilpass-delen og se hovedsiden til nettstedet og de tilgjengelige sideinnstillingene på venstre side av siden. Blant dem kan være designinnstillinger.
La oss for eksempel prøve å endre fargeskjemaet til nettstedet. La oss gå til Farger-menyen og endre bakgrunnen til siden og sentrale deler av nettstedet.
Som du kan se, er det ganske praktisk og å endre fargen på en WordPress-mal er ganske enkelt - vi ser resultatet umiddelbart og kan evaluere det.
Imidlertid tilbyr ikke alle temaer all WordPress-maltilpasningen vi trenger. For eksempel er det lite sannsynlig at det vil være innstillinger som lar deg endre bredden på malen på WordPress, for eksempel selv i det gjeldende temaet er det ingen innstillinger som lar deg endre fonten i malen, og så videre . Hvordan være i dette tilfellet? Det er her vi må ty til det andre alternativet, og her trenger vi allerede noen layoutkunnskaper.
Så oftest trenger vi bare å redigere én fil - dette er stilarket style.css. Den ligger i temamappen din. La oss endre skriftfargen som et eksempel. Du kan forresten gjøre dette direkte fra WordPress-administrasjonsområdet. Bare vær forsiktig og oppmerksom for ikke å "bryte" siden ved et uhell. Det er best å sikkerhetskopiere temaet før du endrer noe i det. Så gå til Utseende - Editor-menyen, og som standard bør du ha et temastilark åpent for redigering.
Hvis den ikke er det, velg denne filen fra listen til høyre, den heter Style Sheet (style.css). Oftest er skriftfargen satt i brødteksten, så vi finner stilene for dette elementet og skriver rødt for skriftfargen.
Etter å ha lagret filen, kan vi oppdatere nettstedet og se den røde fargen for hovedfonten på nettstedet.
Som du kan se, er det en ganske enkel oppgave å tilpasse en WordPress-mal for deg selv. Litt kunnskap om CSS er nok, og du kan endre WordPress-malen og gjøre den nødvendige maltilpasningen. På samme måte kan vi løse andre lignende problemer. På dette sier jeg farvel til deg. Lykke til og se deg snart!
Noen WordPress-maler er ganske smale i sidemenyen, den såkalte sidelinjen, eller omvendt, smale i artikkeldelen og naturlig nok må enkelte webmastere utvide visse grenser, for eksempel at bannerne passer. I denne artikkelen vil jeg forklare hvordan endre størrelse på overskriften, malen, artikkeldelen eller sidefeltet.
Hvorfor du kanskje må endre størrelsen på malen.
Det kan være lurt å endre størrelsen på malen både helt i begynnelsen, så snart du har installert den, og etter at du har skrevet en rekke artikler og de første dusinene av besøkende begynte å dukke opp. For eksempel trengte jeg å utvide malen etter at jeg ønsket å prøve å tjene de første par øre på reklame fra arbeidet mitt – en blogg. For disse formålene ble bannerannonseringssystemet fra Google-Adsense valgt. Men for å tjene minst en uheldig to cent, må to parametere tas i betraktning:
- For at noen skal klikke på en annonse, er det nødvendig at bannerne som systemet skal gi ut er på bestemte steder. På Internett skriver de at dette er venstre glidebryter, vi legger et firkantet banner der, og tre ganger inne i artikkelen. Helt på toppen, i sentrum, etter litt overskrift, og helt på slutten. Denne ordningen ville være ideell for folk å klikke på banneret. Selvfølgelig er det andre alternativer, for eksempel i bildene, men vi vurderer dem ikke innenfor rammen av denne artikkelen.
- Google utsteder bannere i visse størrelser.
de. vi må kombinere det første og andre punktet, nemlig å sørge for at bannerne fra Google eller Yandex er plassert på de angitte stedene, venstre sidefelt og i artiklene. Siden malen min var for smal for disse formålene, og det gir ingen mening å henge opp små bannere, fordi ingen vil klikke på dem, er det bare én ting igjen - å strekke sidemenyen og artikkeldelen.
Hvordan forstørre malen horisontalt del 1, vi forstår tallene
For å forstå hvor mye vi trenger for å øke bredden på dette eller det elementet, trenger vi ikke å estimere på et øyeblikk "en centimeter er nok der, og en halv centimeter der", men finne ut disse tallene nøyaktig, i piksler. Nesten alle nettlesere vil hjelpe oss med dette, for eksempel:
- Safari
- Firefox
- Google chrome
Personlig vil jeg vise på eksemplet med Safari, og deg på hvilken som helst nettleser som er praktisk for deg. Forskjellen skal være i bare én knapp.
Så, basen - størrelsen på nettstedet vårt består av 4 elementer, størrelsen på selve malen, sidestørrelsen, størrelsen på artikkelblokken og venstre menyblokk. Vi vil øke alt etter tur, ikke bekymre deg, det er ikke skummelt.
For å endre bredden på venstremenyen.
I dette tilfellet kan du endre både pikslene, som vi gjorde i avsnitt 3-5, og prosentandelen på siden. For å gjøre dette er det nok å endre parameteren i stedet for piksler
| 1 | bredde: 31,8 %; |
Disse verdiene betyr hvor mange prosent av bredden som kan okkuperes av dette eller det elementet. Hovedsaken er at sidefeltet og artikkelen totalt sett skal oppta 100%, og ikke mer, ellers vil alt flyte over siden.
Det er alt. Nå vet vi hvilke verdier vi må endre for at alt skal passe. Det eneste som gjenstår er å legge inn de nødvendige dataene i stilfilen.
Hvordan forstørre malen horisontalt del 2, endre bredden
Etter at vi forsto tallene, og skrev dem ned et sted på et papir, la oss nå endre dem for alle, og ikke bare for oss selv. For dette:
- Gå til siden via FTP
- Finn og kopier filen / wp-content / themes / Your theme / style.css til datamaskinen din
- Lag en sikkerhetskopi av denne filen, dvs. kopier den til dokumentmappen. Slik at det er to kopier av filen på datamaskinen, en som vi vil jobbe med, den andre som vi ikke vil røre. Den andre tjener i tilfelle vi endrer noe galt og glemmer hva.
- Åpne filen i en praktisk editor. Nå står vi overfor en ganske enkel oppgave å endre de gamle verdiene for de nye. Det er to måter, den første er enkel og den andre er vanskelig. Først finner vi den gamle verdien ved å søke og skriver en ny i stedet. Den andre måten - vi ser etter navnet på stilene, inne i stilene ser vi etter bredden og endrer verdien.
Personlig valgte jeg den første, enkle måten for meg selv, siden den lar deg gjøre endringer på bare et par sekunder. Så vi ser etter verdien 980. Søking i filen returnerte bare to parametere, som jeg må endre.
Den første er ansvarlig for bredden på hele nettstedet:
| 1 2 3 4 5 6 7 8 | #side (min-høyde: 100px; klar: begge; bredde: 96%; polstring: 0; polstring- topp: 24px; maks- bredde: 980px; overløp: skjult; |
#side (min-høyde: 100px; klar: begge; bredde: 96%; polstring: 0; polstring-topp: 24px; maks-bredde: 980px; overløp: skjult;
Den andre er for bredden på to elementer, listen over artikler og venstremenyen:
| 1 2 3 4 5 6 7 8 9 10 11 | ... hovedbeholder (bredde: 980px; margin: 0 auto; overløp: skjult; polstring: 0; bakgrunn: #fff; posisjon: relativ; - webkit- box- shadow: 0px 0px 10px rgba (50, 50, 50, 0.17) ; - moz- box-shadow: 0px 0px 10px rgba (50, 50, 50, 0.17); box-shadow: 0px 0px 10px rgba (50, 50, 50, 0.17);) |
Hovedbeholder (bredde: 980px; margin: 0 auto; overløp: skjult; polstring: 0; bakgrunn: #fff; posisjon: relativ; -webkit-box-shadow: 0px 0px 10px rgba (50, 50, 50, 0.17) ; -moz-box-shadow: 0px 0px 10px rgba (50, 50, 50, 0.17); box-shadow: 0px 0px 10px rgba (50, 50, 50, 0.17);)
Alt vi trenger å gjøre er å endre verdiene 980 til 1080 og laste tilbake.
Det er alt, men hvis du fortsatt har spørsmål, skriv i kommentarfeltet, eller meg på, jeg vil gjerne hjelpe deg.
Ofte, når du velger en wordpress-mal, oppstår det et problem - dette er den utilstrekkelige bredden på blokkene. Mange ønsker umiddelbart å endre bredden på malen. For de som er godt bevandret i html eller php, vil dette ikke by på noen spesielle problemer. Men for å skrive i detalj om hvordan du gjør endringer i dimensjonene til en wordpress-mal for en uforberedt person, trenger du en hel brosjyre.
Det enkleste er å bestille, men de som prøver å gjøre det på egenhånd får kunnskap. I fremtiden vil han ikke måtte henvende seg til spesialister for hver minste ting. Å kjenne "grunnlaget" for å gjøre dette er fullt mulig. Før du starter noen endringer, sørg for å ta en sikkerhetskopi av alle sidene i ressursen din. Ved unøyaktig arbeid kan du gjenopprette det opprinnelige utseendet til nettstedet uten problemer.
Det finnes et utall av wordpress-maler, de er alle forskjellige og hver enkelt endres på sin egen måte. Men slike grunnleggende blokker som: bredden på hovedsiden, topptekst, venstre og høyre kolonne, bunntekst har alt. Til arbeid trenger vi:
- Mozilla Firefox nettleser.
- Firebug-plugin installert på Firefox.
Når alt du trenger er lastet ned, installert og klart til å fungere, åpne den valgte malen i Mozilla Firefox og start Firebug ved å klikke på billeikonet.
Plugin panel
Nederst åpnes plugin-panelet, der vi skal jobbe. Alle endringer som er gjort vil umiddelbart vises øverst på skjermen. På fanen til høyre ser vi CSS-stilen til det valgte elementet, til venstre, html-koden til siden. For å øke eller redusere bredden på malen, er det første vi må gjøre å finne ut gjeldende størrelse på lerretet. Klikk på markørikonet til plugin-en vår.
Elementer på siden vil bli uthevet i forskjellige farger, og ved å markere hvert element på siden kan du sette deg detaljert inn i strukturen til nettstedet ditt. Etter å ha mottatt navnet, vil du finne ut de nøyaktige dimensjonene. Etter at gjeldende bredde er angitt, venstreklikk på denne verdien. På prøve lager vi den mest passende bredden og tester displayet.
Føl deg fri til å eksperimentere med alle elementer og verdier. Gjeldende endringer kan ikke påvirke siden din på serveren på noen måte, de er kun aktive i plugin-vinduet (den nåværende cachen til Mozila). Ved oppgradering tilbakestilles alle innstillinger.
Redigering av style.css
Nå gjenstår det å lagre disse endringene for wordpress-malen. Vanligvis er bredden på malen skrevet i style.css. Gå til administrasjonspanelet til nettstedet -> utseende -> editor -> style.css -> linje 79, endre breddeverdien. Vi sparer.
Det hender ofte at et tema du liker har et smalt område for oppføringer og innstillingene gir ikke mulighet for å endre bredden. I dette tilfellet kan det økes, med minimal kunnskap Html og CSS... La oss for eksempel bruke det populære, gratis Patagonia-temaet. Du kan utvide temaet ved hjelp av en fantastisk plugin Firefox— Firebug... Først må du installere den ved å laste den ned herfra. Slå deretter på plugg inn, som det vises på bildet - Verktøy-fanen — webutvikling — Firebug — åpne Firebug:
Etter det, nederst på skjermen, er det nødvendig å velge ulike elementer ved å holde markøren og klikke med musen. I dette tilfellet vises på høyre side CSS-stiler, og i området på siden vil dette eller det området bli uthevet - det viktigste, sidefelt, Overskrift... Vi er nå interessert i hovedområdet som vi kommer til når vi "enter" taggen For eksempel, øke bredden hovedområde fra 550 piksler til 620 piksler. For å gjøre dette må du gjøre endringer på linjen bredde: 550 px fil style.css... Hvis temaet allerede er installert, kan du redigere denne filen direkte fra administrasjonspanelet, hvis ikke, må du pakke ut arkivet med temaet og gjøre endringer i filen ved hjelp av redigeringsprogrammet. I vårt tilfelle er temaet installert, så gå til admin panel— Utseende — Redaktør- åpne style.css-filen, finn linjebredden: 550px og endre breddeverdien 550px til 620px. Vi trykker Oppdater fil. Vi går til nettstedet og ser at området med innlegg har utvidet seg, men noen steder "løpt over" til høyre kolonne. I dette tilfellet må vi proporsjonalt begrense dette området. Til dette bruker vi også Firebug-plugin som i forrige tilfelle. Finn taggen Vi gjør samme prosedyre med redigering av style.css som i forrige tilfelle med hovedområdet, først nå redigerer vi linjen margin: 0 0 0 580px; Endre utfyllingsverdien i den fra 580px til 630px. Nå er alt bra. Opptaksområdet er bredere og overlapper ikke området sidefelt... Det hender også at stiler skrives ikke bare i style.css-filen, men også i filen screen.css.
