Wilt u een WordPress-pagina op volledige grootte maken?
Dan terug naar waarom we hier zijn.
Methode 1: de ingebouwde breedtesjabloon gebruiken in een WordPress-thema
Deze methode wordt aanbevolen als uw WordPress-thema al wordt geleverd met een paginasjabloon op volledige grootte. Als je het niet hebt, ga dan naar de volgende selectie en pak het.
Eerst moet u de pagina bewerken of een nieuwe maken door naar " Pagina's> Toevoegen Nieuwe pagina
Selecteer in het paginabewerkingsvenster Volledige breedte als een sjabloon onder het selectievakje voor paginakenmerken.
Na het kiezen van een model Volledige breedte U moet uw pagina registreren. U kunt doorgaan met het aanpassen van de pagina om meer inhoud toe te voegen, of u kunt op de voorbeeldknop klikken om deze in actie te zien.
Als u de optie Volledige breedte - Sjabloon met volledige breedte niet op uw paginabewerkingsscherm heeft, betekent dit dat uw WordPress-thema deze pagina niet heeft.
Maar maak je geen zorgen, we laten je zien hoe eenvoudig het is om een paginagrote pagina te maken zonder je WordPress-thema te wijzigen.
Methode 2: een paginasjabloon over de volledige breedte maken
Voor deze methode moet je de WordPress-themabestanden die je gebruikt bewerken en een basiskennis van PHP, CSS en HTML.
Trouwens, we nodigen je ook uit om te overleggen met
Eerst moet je een teksteditor zoals Kladblok openen en de volgende code in een leeg bestand plakken:
Deze code detecteert eenvoudig de bestandsnaam van het sjabloonbestand en vraagt WordPress om het kopsjabloon uit te pakken.
Dan heb je het inhoudelijke deel van de code nodig. Maak verbinding met uw site via een FTP-client ( of bestandsbeheer in CPanel) ga dan naar / Wp-content / thema's / uw-thematische directory / .
Dan zou je een bestand moeten vinden met de naam " pagina.php". Dit is het standaard paginasjabloonbestand voor uw thema.
Kopieer alles na de functie " get_header () En plak het in het bestand Volledige breedte.php Deze heb je op je computer aangemaakt.
Nu moet je naar de inhoud van het bestand "full-width.php" kijken en deze regel code verwijderen:
Deze regel herstelt eenvoudig de zijbalk en geeft deze weer in uw WordPress-thema. Door dit te verwijderen, zal je thema de zijbalk niet weergeven bij gebruik van de sjabloon Volledige breedte.
U kunt deze regel meerdere keren zien verschijnen in uw WordPress-thema. Als uw WordPress-thema meerdere heeft, ziet u elke zijbalk één keer in de code. U moet beslissen welke zijbalken u wilt behouden.
Uw website laadt langzaam, ontdek
Als uw thema geen zijbalken op uw pagina weergeeft, vindt u deze code mogelijk niet in uw bestand.
Zo zorgt onze full-width.php-code voor de wijzigingen. Uw code kan enigszins afwijken, afhankelijk van uw thema.
Dan moet je het bestand downloaden Volledige breedte.php In uw WordPress-themamap met.
U hebt met succes een aangepaste paginasjabloon over de volledige breedte voor uw thema gemaakt en geladen. De volgende stap is om deze sjabloon te gebruiken om een pagina op volledig formaat te maken.
Ga naar je dashboard en bewerk of maak een nieuwe pagina aan.
Zoek op het paginabewerkingsscherm het selectievakje Paginakenmerken en klik op het vervolgkeuzemenu onder de optie Model.
U kunt uw model bekijken. Ga je gang, selecteer het en sla de pagina op of vernieuw deze.
U kunt nu uw website bezoeken en u zult zien dat de zijbalken verdwenen zijn en uw pagina wordt weergegeven als een enkele kolompagina. Het is misschien nog niet compleet, maar je bent nu klaar om het anders te verspreiden.
Maak uw site populair door te ontdekken
U moet de tool Inspecteren gebruiken om de CSS-klassen te ontdekken die uw thema gebruikt om de reikwijdte van uw inhoud te definiëren.
Vervolgens kunt u de breedte aanpassen tot 100% met behulp van CSS. We hebben de volgende CSS-code gebruikt:
.p-template volledige breedte zone.content (breedte: 100%; marge: 0px; rand: 0px; opvulling: 0px;) .p-template volledige breedte.Output (marges: 0px;)Zo zou Twenty Seventeen eruit zien.
Dat is alles voor deze tutorial, ik hoop dat je hiermee pagina's op volledig formaat kunt maken.
De bovenstaande methoden zijn gratis voor iedereen die het zich kan veroorloven en snel lay-outs over de volledige of volledige breedte wil maken.
Ontdek ook enkele premium WordPress-plug-ins
U kunt andere WordPress-plug-ins gebruiken om een moderne uitstraling te geven en het beheer van uw blog of website te optimaliseren.
We bieden u verschillende premium WordPress-plug-ins om u daarbij te helpen.
1. Divi Builder
Divi Builder is een paginabuilder van hoge kwaliteit die hoog aangeschreven staat Elegante thema's Hoewel het vaak wordt gebruikt als onderdeel van het WordPress Divi-thema, is Divi Builder ook een zelfstandige plug-in die in andere WordPress-thema's kan worden gebruikt.
Met Divi Builder kunt u uw inhoud bewerken met zowel een visuele front-end als een front-end aan de serverzijde, hoewel de meeste gebruikers de voorkeur geven aan het eerste.
Kortom, in plaats van zijbalken, staat alles in pop-ups en zwevende knoppen. Het geeft u toegang tot 316 voorgedefinieerde sjablonen, verdeeld over 40 verschillende presentatiepakketten, en stelt u ook in staat uw eigen ontwerpen als sjablonen op te slaan.
Wij nodigen u uit om te ontdekken
Een van de kenmerken van Divi is altijd de controle geweest over de stijlen die het je geeft. Op drie verschillende tabbladen kunt u verschillende instellingen aanpassen, waaronder responsieve bedieningselementen, aangepaste spatiëring en meer.
U kunt zelfs aangepaste CSS toevoegen omdat de CSS-editor basisvalidatie en automatisch aanvullen combineert.Een punt van kritiek op Divi Builder is altijd geweest dat het is gebaseerd op, wat betekent dat als je het een keer uitschakelt, het een heleboel shortcodes in je inhoud achterlaat. Hoewel dit een beetje deprimerend is, zijn er nu minder problemen met plug-ins zoals Shortcode Cleaner.
2. Bouwer
Het is niet verwonderlijk dat Themify Builder een voorstel is van het Themify-team. Hij integreert het in veel van zijn WordPress-thema's om klanten eenvoudige aanpassingsopties te bieden. Maar je kunt het ook als een zelfstandige plug-in kopen en met elk WordPress-thema gebruiken.
Net als Divi Builder en WPBakery Page Builder, kunt u met Themify Builder lay-outs maken in de frontend of backend.Een ander goed ding is dat je met deze plug-in je responsieve breekpunten kunt aanpassen (maar alleen op het niveau van de hele site).
Ontdek maak een online winkel en verkoop uw producten gemakkelijk online
Een interessant kenmerk van Themify Builder is dat je nog steeds de standaard WordPress-editor kunt gebruiken, terwijl andere paginabuilders je dwingen om de Page Builder-interface voor alles te gebruiken.
3. Fakir
Oorspronkelijk gelanceerd in 2016, is de WordPress Elementor-plug-in een van de jongste ontwikkelaars op deze lijst. Ondanks de late lancering heeft Elementor snel meer dan 1.000.000 actieve installaties op WordPress.org verzameld, waardoor het een van de meest populaire WordPress-bouwers is die er zijn.
Als je suggesties of opmerkingen hebt, laat ze dan achter in onze sectie
Van de auteur: Ik groet jullie vrienden. In het volgende artikel over het onderwerp WordPress gaan we in op de vraag hoe je een WordPress-sjabloon kunt wijzigen. Als u nog nooit de noodzaak bent tegengekomen om een WordPress-sjabloon te wijzigen, lees dan dit artikel, want vroeg of laat zult u waarschijnlijk te maken krijgen met de problemen van het aanpassen en bewerken van een WordPress-sjabloon.
Laten we eerst de meest voorkomende vragen definiëren waarmee gebruikers worden geconfronteerd bij het aanpassen van een WordPress-sjabloon voor zichzelf. Hier is een geschatte lijst van hen:
hoe een WordPress-sjabloon te bewerken
sjabloonbreedte wijzigen op WordPress
het formaat van WordPress-sjabloon wijzigen
hoe de kleur van de WordPress-sjabloon te wijzigen
hoe het lettertype in de WordPress-sjabloon te wijzigen
En dit is nog maar een kleine opsomming van problemen waar u tegenaan kunt lopen of die u anderen kunt helpen oplossen, ook tegen betaling als u websites op maat ontwikkelt.
Alle vragen in de bovenstaande lijst kunnen op twee manieren worden opgelost, afhankelijk van het thema dat voor de site wordt gebruikt. Laten we beginnen met de eenvoudigste optie, waarvoor geen lay-outkennis vereist is. Deze optie is geschikt als de sjabloon bewerking vanuit de instellingen ondersteunt.
Laten we naar het gedeelte Uiterlijk - Aanpassen gaan en de hoofdpagina van de site en de beschikbare site-instellingen aan de linkerkant van de pagina bekijken. Onder hen kunnen ontwerpinstellingen zijn.
Laten we bijvoorbeeld proberen het kleurenschema van de site te wijzigen. Laten we naar het menu Kleuren gaan en de achtergrond van de zij- en centrale delen van de site wijzigen.
Zoals je kunt zien, is het best handig en het veranderen van de kleur van een WordPress-sjabloon is vrij eenvoudig - we zien het resultaat onmiddellijk en kunnen het evalueren.
Niet elk thema biedt echter alle WordPress-sjabloonaanpassingen die we nodig hebben. Het is bijvoorbeeld onwaarschijnlijk dat er instellingen zijn waarmee u de breedte van de sjabloon op WordPress kunt wijzigen, zelfs in het huidige thema zijn er geen instellingen waarmee u het lettertype in de sjabloon kunt wijzigen, enzovoort . Hoe te zijn in dit geval? Dit is waar we onze toevlucht moeten nemen tot de tweede optie, en hier hebben we al wat lay-outvaardigheden nodig.
Dus meestal hoeven we maar één bestand te bewerken - dit is de style.css stylesheet. Het bevindt zich in uw themamap. Laten we als voorbeeld de letterkleur wijzigen. Overigens kunt u dit rechtstreeks vanuit het WordPress-beheergebied doen. Wees voorzichtig en oplettend om de site niet per ongeluk te "breken". Het is het beste om een back-up van uw thema te maken voordat u er iets aan wijzigt. Ga dus naar het menu Uiterlijk - Editor en standaard zou je een thema-stylesheet open moeten hebben om te bewerken.
Als dit niet het geval is, selecteer dan dit bestand uit de lijst aan de rechterkant, het heet Style Sheet (style.css). Meestal wordt de letterkleur in de hoofdtekst ingesteld, dus we zullen de stijlen voor dit element vinden en rood schrijven voor de letterkleur.
Nadat we het bestand hebben opgeslagen, kunnen we de site vernieuwen en de rode kleur voor het hoofdlettertype op de site zien.
Zoals je kunt zien, is het aanpassen van een WordPress-sjabloon voor jezelf een vrij eenvoudige taak. Een beetje kennis van CSS is voldoende en u kunt de WordPress-sjabloon wijzigen en de nodige sjabloonaanpassingen maken. Op dezelfde manier kunnen we andere soortgelijke problemen oplossen. Hierbij neem ik afscheid van u. Veel succes en tot snel!
Sommige WordPress-sjablonen zijn eerder smal in het zijmenu, de zogenaamde zijbalk, of omgekeerd, smal in de artikelensectie en natuurlijk moeten sommige webmasters bepaalde grenzen verleggen, bijvoorbeeld dat de banners passen. In dit artikel leg ik uit hoe wijzig het formaat van de koptekst, sjabloon, artikelsectie of zijbalk.
Waarom u mogelijk de grootte van de sjabloon moet wijzigen.
Misschien wilt u de grootte van de sjabloon zowel aan het begin, zodra u deze hebt geïnstalleerd, als nadat u een aantal artikelen hebt geschreven en de eerste tientallen bezoekers begonnen te verschijnen, wijzigen. Ik moest bijvoorbeeld de sjabloon uitbreiden nadat ik wilde proberen de eerste paar centen aan advertenties te verdienen met mijn werk - een blog. Voor deze doeleinden is gekozen voor het banneradvertentiesysteem van Google-Adsense. Maar om op zijn minst een ongelukkige twee cent te verdienen, moeten twee parameters in aanmerking worden genomen:
- Om iemand op een advertentie te laten klikken, is het noodzakelijk dat de banners die het systeem zal afgeven op bepaalde plaatsen staan. Op internet schrijven ze dat dit de linkerschuifregelaar is, we plaatsen daar een vierkante banner en drie keer in het artikel. Helemaal bovenaan, in het midden, na wat koers, en helemaal op het einde. Deze opstelling zou ideaal zijn voor mensen om op de banner te klikken. Natuurlijk zijn er andere opties, bijvoorbeeld op de foto's, maar die beschouwen we niet in het kader van dit artikel.
- Google geeft banners van bepaalde formaten uit.
die. we moeten het eerste en tweede punt combineren, namelijk om ervoor te zorgen dat de banners van Google of Yandex op de aangewezen plaatsen, de linkerzijbalk en in de artikelen worden geplaatst. Aangezien mijn sjabloon te smal was voor deze doeleinden, en het geen zin heeft om kleine banners op te hangen, omdat niemand erop zal klikken, rest er nog maar één ding - het zijmenu en de artikelensectie uitrekken.
Hoe de sjabloon horizontaal te vergroten deel 1, we begrijpen de cijfers
Om te begrijpen hoeveel we nodig hebben om de breedte van dit of dat element te vergroten, hoeven we niet in één oogopslag te schatten "een centimeter is genoeg daar, en een halve centimeter daar", maar deze getallen precies te weten te komen, in pixels. Vrijwel elke browser kan ons hierbij helpen, bijvoorbeeld:
- Safari
- Firefox
- Google chrome
Persoonlijk zal ik het voorbeeld van Safari laten zien, en u in elke browser die voor u geschikt is. Het verschil zou in slechts één knop moeten zitten.
Dus de basis - onze sitegrootte bestaat uit 4 elementen, de grootte van de sjabloon zelf, de paginagrootte, de grootte van het artikelblok en het linker menublok. We zullen alles op zijn beurt verhogen, maak je geen zorgen, het is niet eng.
Om de breedte van het linkermenu te wijzigen.
In dit geval kunt u zowel de pixels wijzigen, zoals we deden in paragraaf 3-5, als het percentage op de pagina. Om dit te doen, volstaat het om de parameter te wijzigen in plaats van pixels
| 1 | breedte: 31,8%; |
Deze waarden geven aan hoeveel procent van de breedte kan worden ingenomen door dit of dat element. Het belangrijkste is dat de zijbalk en het artikel in totaal 100% moeten beslaan, en niet meer, anders zweeft alles over de pagina.
Dat is alles. Nu weten we welke waarden we moeten veranderen om alles te laten passen. Het enige dat u nog hoeft te doen, is de benodigde gegevens in het stijlbestand in te voeren.
Hoe de sjabloon horizontaal te vergroten deel 2, verander de breedte
Nadat we de cijfers begrepen en ze ergens op een stuk papier hebben geschreven, laten we ze nu voor iedereen veranderen, en niet alleen voor onszelf. Voor deze:
- Ga naar de site via FTP
- Zoek en kopieer naar uw computer het bestand / wp-content / themes / Your theme / style.css
- Maak een reservekopie van dit bestand, d.w.z. kopieer het naar uw documentenmap. Zodat er twee exemplaren van het bestand op de computer staan, een waarop we zullen werken, de tweede die we niet zullen aanraken. De tweede dient voor het geval we iets verkeerds veranderen en vergeten wat.
- Open het bestand in een handige editor. Nu staan we voor een vrij eenvoudige taak om de oude waarden te veranderen voor de nieuwe. Er zijn twee manieren, de eerste is gemakkelijk en de tweede is moeilijk. Eerst vinden we de oude waarde door te zoeken en in plaats daarvan een nieuwe te schrijven. De tweede manier - we zoeken naar de naam van de stijlen, binnen de stijlen zoeken we naar de breedte en veranderen de waarde.
Persoonlijk heb ik voor mezelf de eerste, gemakkelijke manier gekozen, omdat je hiermee in slechts een paar seconden wijzigingen kunt aanbrengen. We zijn dus op zoek naar de waarde 980. Zoeken in het bestand leverde slechts twee parameters op, die ik moet wijzigen.
De eerste is verantwoordelijk voor de breedte van de hele site:
| 1 2 3 4 5 6 7 8 | #pagina (minimale hoogte: 100px; duidelijk: beide; breedte: 96%; opvulling: 0; opvulling bovenaan: 24px; max. breedte: 980px; overloop: verborgen; |
#page (min-height: 100px; clear: both; width: 96%; padding: 0; padding-top: 24px; max-width: 980px; overflow: hidden;
De tweede is voor de breedte van twee elementen, de lijst met artikelen en het linkermenu:
| 1 2 3 4 5 6 7 8 9 10 11 | ... hoofdcontainer (breedte: 980px; marge: 0 auto; overloop: verborgen; opvulling: 0; achtergrond: #fff; positie: relatief; - webkit-box- schaduw: 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);) |
Hoofdcontainer (breedte: 980px; marge: 0 auto; overloop: verborgen; opvulling: 0; achtergrond: #fff; positie: relatief; -webkit-box-schaduw: 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);)
Het enige wat we hoeven te doen is de waarden 980 naar 1080 te wijzigen en terug te laden.
Dat is alles, maar als je nog vragen hebt, schrijf dan in de comments, of mij op, ik help je graag verder.
Vaak ontstaat er bij het kiezen van een WordPress-sjabloon een probleem - dit is de onvoldoende breedte van de blokken. Veel mensen willen meteen de breedte van de sjabloon wijzigen. Voor degenen die goed thuis zijn in html of php, zal dit geen specifieke problemen opleveren. Maar om in detail te schrijven over hoe u wijzigingen aanbrengt in de afmetingen van een WordPress-sjabloon voor een onvoorbereid persoon, heeft u een hele brochure nodig.
Het eenvoudigste is om te bestellen, maar degenen die het alleen proberen, krijgen kennis. In de toekomst hoeft hij niet voor elk klein dingetje een beroep te doen op specialisten. Het kennen van de "basis" om dit te doen is heel goed mogelijk. Voordat u met wijzigingen begint, moet u een reservekopie maken van alle pagina's van uw bron. Bij onnauwkeurig werk kunt u zonder problemen het oorspronkelijke uiterlijk van de site herstellen.
Er zijn talloze WordPress-sjablonen, ze zijn allemaal verschillend en elk verandert op zijn eigen manier. Maar basisblokken als: breedte van de hoofdpagina, koptekst, linker- en rechterkolommen, voettekst hebben alles. Voor werk hebben we nodig:
- Mozilla Firefox-webbrowser.
- Firebug-plug-in geïnstalleerd op Firefox.
Wanneer alles wat je nodig hebt is gedownload, geïnstalleerd en klaar om te werken, open je de geselecteerde sjabloon in Mozilla Firefox en start je Firebug door op het keverpictogram te klikken.
Plugin-paneel
Onderaan opent het plug-inpaneel, waarin we zullen werken. Alle aangebrachte wijzigingen worden onmiddellijk bovenaan de monitor weergegeven. Op het tabblad rechts zien we de CSS-stijl van het geselecteerde element, links de html-code van de pagina. Om de breedte van de sjabloon te vergroten of te verkleinen, moeten we eerst de huidige grootte van het canvas achterhalen. Klik op het cursorpictogram van onze plug-in.
Elementen op de pagina worden in verschillende kleuren gemarkeerd en door elk element van de pagina te markeren, kunt u zich in detail vertrouwd maken met de structuur van uw site. Na ontvangst van de naam zult u de exacte afmetingen te weten komen. Nadat de huidige breedte is ingesteld, klikt u met de linkermuisknop op deze waarde. Door te proberen, creëren we de meest geschikte breedte en testen we de weergave ervan.
Voel je vrij om te experimenteren met alle elementen en waarden. Huidige wijzigingen kunnen uw pagina op de server op geen enkele manier beïnvloeden, ze zijn alleen actief in het plug-invenster (de huidige cache van Mozila). Bij het upgraden worden alle instellingen gereset.
Style.css bewerken
Nu rest het nog om deze wijzigingen op te slaan voor de wordpress template. Meestal wordt de breedte van de sjabloon geschreven in style.css. Ga naar het admin-paneel van de website -> uiterlijk -> editor -> style.css -> regel 79, verander de breedtewaarde. Wij sparen.
Het komt vaak voor dat een thema dat u leuk vindt een smal gebied heeft voor invoer en dat de instellingen niet voorzien in het wijzigen van de breedte. In dit geval kan het worden verhoogd, met minimale kennis HTML en CSS... Laten we bijvoorbeeld het populaire, gratis Patagonia-thema gebruiken. U kunt het thema uitbreiden met behulp van een prachtige plug-in Firefox— Vuurwants... Eerst moet je het installeren door het hier te downloaden. Zet dan aan inpluggen, zoals op de foto te zien is - Tabblad Gereedschap — webontwikkeling — Vuurwants — open Firebug:
Daarna is het nodig om onderaan het scherm verschillende elementen te selecteren door de cursor te laten zweven en te klikken met de muis. In dit geval wordt aan de rechterkant weergegeven CSS-stijlen, en in het gebied van de pagina wordt dit of dat gebied gemarkeerd - de belangrijkste, zijbalk, koptekst... We zijn nu geïnteresseerd in het belangrijkste gebied dat we zullen bereiken wanneer we de tag "invoeren" Bijvoorbeeld, vergroot de breedte hoofdgebied van 550 pixels tot 620 pixels. Om dit te doen, moet u wijzigingen aanbrengen in de regel breedte: 550px het dossier style.css... Als het thema al is geïnstalleerd, kunt u dit bestand rechtstreeks vanuit het beheerderspaneel bewerken, zo niet, dan moet u het archief met het thema uitpakken en wijzigingen in het bestand aanbrengen met behulp van de editor. In ons geval is het thema geïnstalleerd, dus ga naar Administratie Paneel— Verschijning — Editor- open het bestand style.css, zoek de regelbreedte: 550px en verander de breedtewaarde 550px in 620px. wij drukken op Bestand bijwerken. We gaan naar de site en zien dat het gebied van berichten is uitgebreid, maar op sommige plaatsen "overliep" naar de rechterkolom. In dit geval moeten we dit gebied proportioneel verkleinen. Hiervoor gebruiken we ook Firebug-plug-in zoals in het vorige geval. Zoek de tag We doen dezelfde procedure met het bewerken van style.css als in het vorige geval met het hoofdgebied, alleen nu bewerken we de regel marge: 0 0 0 580px; Wijzig de opvulwaarde erin van 580px in 630px. Nu is alles goed. Het opnamegebied is breder en overlapt het gebied niet zijbalk... Het komt ook voor dat stijlen niet alleen in het bestand style.css worden geschreven, maar ook in het bestand scherm.css.
