Beste lezers, in dit artikel zullen we leren hoe je een WordPress-sjabloon kunt bewerken.
Voor degenen die nog niet bekend zijn met de structuur van de WordPress-sjabloon, is dit artikel een must-read. De inhoud van het artikel:

Ik zie twee hoofdredenen waarom we dit nodig hebben:

• De meeste blog-instellingen zijn gerelateerd aan het bewerken van de code - html of css. In veel van mijn artikelen schrijf ik over wat er moet worden bewerkt specifiek bestand thema's. Als je niet weet hoe je naar deze bestanden moet zoeken en op welke manier het handiger is om ze te bewerken, dan is dit artikel iets voor jou.
• Bij het maken van een blog heb je er een thema (sjabloon) op geïnstalleerd van internet en wil je er iets aan veranderen, ontwerpelementen of functionele blokken toevoegen. Maar hiervoor moet je minimaal minimale kennis hebben van HTML en CSS. Of je nu een beginner bent of ervaring hebt met het maken van websites, voor het bewerken WordPress-sjabloon je moet begrijpen waar het uit bestaat en waar elk onderdeel voor dient. Laten we dus beginnen met te kijken naar de structuur van een WordPress-sjabloon.

Structuur van WordPress-sjabloon

De HTML-code van de WordPress-sjabloon is opgesplitst in verschillende php-bestanden. Dit is gedaan voor het gemak: herhalen aan verschillende pagina's stukjes code worden verplaatst naar aparte bestanden en maak verbinding met elke pagina met functies opnemen... De koptekst, voettekst en zijbalk bevinden zich in afzonderlijke bestanden en elk paginatypebestand bevat slechts een centraal gebied: De meest bewerkte WordPress-sjabloonbestanden zijn:

• index.php - De sjabloon begint met een index.php-bestand dat uitvoer Startpagina plaats.
• header.php - Koptekst van de site. Dit bestand bevat een duplicaat op elke pagina van de site bovenste deel... Het begint met een tag , bevat volledig dat is waar de meeste scripts worden ingevoegd bij het opzetten van uw blog. Het opent een tag en een logo, slogan wordt weergegeven, Topmenu en andere kopelementen.
• style.css - het hoofdstijlbestand van de sjabloon, dat het uiterlijk van de site-elementen bepaalt. Om een ​​WordPress-sjabloon te bewerken, moet u meestal met dit bestand werken.

De rest van de bestanden:

• single.php - verantwoordelijk voor het weergeven van elk aparte invoer... Die. het uiterlijk van de pagina waarop u momenteel mijn artikel leest, wordt in dit bestand geconfigureerd.
• pagina.php - uitvoer statische pagina blog. Nieuwe pagina's worden gemaakt in het gedeelte "pagina's" in het linkermenu en hun uiterlijk wordt in dit bestand geconfigureerd.
• sidebar.php - verantwoordelijk voor het weergeven van de zijbalk (zijbalk van de blog) waar de widgets zich bevinden. Dit deel van het patroon wordt ook op elk herhaald WordPress-pagina site, daarom wordt het in een apart bestand geplaatst. Meestal hoeft u dit bestand niet te bewerken, omdat alle wijzigingen bovenop het. Niemand verbiedt echter om een ​​code rechtstreeks in het sidebar.php-bestand in te voeren.
• functies.php - bestand met php-functies van het thema. Ze hebben allemaal invloed op het uiterlijk en de werking van de site, bepalen gebeurtenissen wanneer: bepaalde acties gebruikers.
• footer.php - site footer (footer), het onderste deel. Dit is ook een terugkerend element op alle pagina's. Het bevat meestal aanwezigheidstellers, copyright en contactgegevens.
• categorie.php - dit bestand is verantwoordelijk voor het weergeven van een pagina met een lijst van alle berichten van een bepaalde categorie.
• tag.php - de uitvoer van het archief van records voor de corresponderende tag wordt in dit bestand geschreven.
• archive.php - archief van alle records voor een specifieke maand (jaar) wordt hier geconfigureerd.
• search.php - Geeft zoekresultaten van blogs weer.
• comments.php - geeft reacties op berichten en pagina's weer.
• 404.php - 404-foutsjabloon - pagina niet gevonden.

Afhankelijk van het gekozen thema kunnen er nog andere bestanden in verschijnen, dan zul je zelf moeten uitzoeken welke dat zijn.

Hoe WordPress-sjabloonbestanden te bewerken

Ik wil je meteen waarschuwen dat je niet in de code moet graven en het zelf moet proberen te herschrijven als je niets van CSS en HTML begrijpt. Het is een andere zaak wanneer er in een les staat dat je bepaalde code op een bepaalde plaats in het bestand moet invoegen. zeker doen backup bestanden en databases voordat u wijzigingen aanbrengt! Voor het bewerken van WordPress-themabestanden bied ik drie opties aan:

Een WordPress-thema instellen in het beheerdersgedeelte

Als je een kant-en-klaar WordPress-sjabloon hebt gedownload en geïnstalleerd, kunnen veel instellingen worden gedaan zonder in de code te komen. U kunt elk WordPress-thema bewerken via het blogbeheergedeelte.

Ga naar de sectie « Verschijning» — "Afstemmen", een venster met basisthema-instellingen wordt geopend. Hier kunt u de naam en beschrijving van de site invoeren, die na het opslaan in de koptekst van de site wordt weergegeven. U kunt ook de achtergrondkleur wijzigen of achtergrond afbeelding en andere instellingen - het is niet moeilijk om erachter te komen. De meeste aanpassingen aan het WordPress-thema kunnen worden gedaan in de sectie "Verschijning" -> "Uw themanaam".
Hier kunt u uw logo, favicon, etc. downloaden. Er zijn veel instellingen, maar om eerlijk te zijn, gebruik ik ze nooit, omdat het voor mij gemakkelijker is om met de code te werken om het WordPress-thema te bewerken.

Dat is alles! Kies de meest handige manier om uw WordPress-sjabloon te bewerken, afhankelijk van de situatie en vergeet nooit back-ups te maken. om geen nieuwe nuttige artikelen te missen.

PS Ik wil u eraan herinneren, beste lezers, dat als u fouten in mijn artikelen opmerkt, wees niet lui om te klikken op " Ctrl + Enter"Zodat ik ze met de hulp kan repareren.

Voor degenen die net begonnen kennis te maken met CMS Joomla u wilt altijd het uiterlijk van de site naar eigen inzicht wijzigen. Het standaardsjabloon past niet meer bij u en u wilt iets nieuws.

Velen beginnen te zoeken gratis sjablonen en installeer ze op uw site, maar na verloop van tijd beginnen ze te beseffen dat de nieuwe sjablonen hun gebreken hebben en dat er niet genoeg vaardigheden zijn om ze te repareren. Dus voordat u doorgaat met het installeren van nieuwe sjablonen ik sterk Ik raad aan om te leren hoe je ze kunt wijzigen, want in de toekomst zal het zeker van pas komen.

In deze zelfstudie laat ik u zien hoe u de koptekst voor onze site kunt bewerken met behulp van de standaard Protostar-sjabloon als voorbeeld. Wat hebben we hiervoor nodig:

• FTP-client, bijvoorbeeld FileZilla voor gemakkelijke toegang tot bestanden op de server van de hostingprovider (voor degenen die de site op de hosting hebben)
• Teksteditor (kladblok ++, sublieme tekst enzovoort.)
• Grafische editor (bijvoorbeeld Photoshop)
• webbrowser (Google chrome, Firefox, enz.)

Natuurlijk kun je ze missen (met uitzondering van de internetbrowser), maar deze programma's zullen het werk aanzienlijk vereenvoudigen.

Leren werken met stijlbestanden in Joomla

De eerste stap is om te leren hoe u de internetbrowser "correct" gebruikt, met andere woorden, leer hoe u de paginacode kunt bekijken en de regels kunt markeren die nodig zijn voor het werk.

Om de paginacode te bekijken: v verschillende browsers er is speciale teams, maar in de meeste gevallen wordt hiervoor de sleutel gebruikt. F12... In browsers zoals Google Chrome, om de code van een bepaald deel van de pagina te bekijken, kun je poke klik met de rechtermuisknop muis op dit element en selecteer "Code weergeven" in het vervolgkeuzevenster:

Na deze acties, in het onderste (of rechter) deel van de browserpagina, zien we de paginacode en de styling van alle elementen, en het vereiste element wordt gemarkeerd:

Ik zal niet ingaan op de essentie van deze code, voor degenen die al bekend zijn met HTML het zal niet moeilijk zijn om erachter te komen wat waarvoor verantwoordelijk is. U kunt zien dat de gemarkeerde titel tussen de tag staat

, waarbinnen de link zich bevindt met de tekst "Extra velden in Joomla".

In dit stadium zijn we geïnteresseerd in de ontwerpstijlen van bepaalde pagina-elementen, of het nu een titel, een menu, een afbeelding of platte tekst is.

Hoe een CSS-bestand met sjabloonstijlen te definiëren

Stijlen die van toepassing zijn op elk element zijn te zien aan de rechterkant van de browser, en iets naar rechts wordt een css-bestand getoond dat deze code bevat en een regel code waarin deze stijlen te vinden zijn:

In mijn geval de stijlen voor links zijn opgenomen in een bestand met de naam template.css op regel 219, en de stijlen voor de headers

in hetzelfde bestand op regel 7220 (zie de schermafbeelding hierboven en alles wordt duidelijk). Als je de muiscursor over de naam van het stijlbestand beweegt, kun je het pad naar dit bestand zien, ik heb dit bestand in de map sjablonen / protostar / css / sjabloon.css ... Als je hem opent, weet je dit zeker:

Nadat we de locatie van het stijlbestand hebben gevonden, kunt u het naar eigen goeddunken gaan bewerken, waardoor we het ontwerp van onze sjabloon naar eigen goeddunken kunnen wijzigen. In de toekomst zal voor degenen die niet bekend zijn met de basisprincipes van CSS, een speciale sectie worden gemaakt, maar voor nu onthouden we waar en waar we moeten zoeken voor verdere bewerking.

Ik wil opmerken dat het veel handiger is om stijlen vooraf rechtstreeks in de browser toe te passen en als het resultaat bij u past, deze vervolgens naar een bestand over te zetten. Als voorbeeld verander ik de kleur van de links op de pagina en de grootte van de koptekst in de browser, dit is wat ik uiteindelijk kreeg:

We hebben de stijlen uitgezocht, nu blijft het om uit te zoeken welk bestand verantwoordelijk is voor de structuur van de site en hoe ermee te werken.

Sitestructuurbestand - index.php

In elke Joomla-sjabloon is een specifiek bestand verantwoordelijk voor de structuur, in de meeste gevallen is dit het index.php-bestand dat zich in de hoofdmap van de sjabloonmap bevindt. In de Protostar-sjabloon bevindt het indexbestand zich in de map templates / protostar / index.php, hij is degene die verantwoordelijk is voor de locatie van bepaalde elementen op de sitepagina's.

Dit bestand bestaat uit 220 regels code geschreven in PHP-talen en HTML (en wat JavaScript) die er als volgt uitzien:

In het begin bestand gaat de code die verantwoordelijk is voor de verbinding extra bestanden(stijlen, scripts), check vooraf ingestelde instellingen sjabloon en nog veel meer. Dezelfde pagina-opmaak begint met regels (126 regels code):

Door de code te wijzigen gegeven bestand u kunt de sitesjabloon radicaal wijzigen, de weergavelocatie van moduleposities en hun nummer wijzigen, de sitekoptekst, voettekst, enzovoort wijzigen.

We zullen geen wijzigingen aanbrengen in de code, de volgende lessen zullen hieraan worden gewijd, nu zullen we slechts een paar regels code toevoegen waarmee we ons eigen stijlbestand kunnen koppelen aan onze Joomla-sjabloon.

Uw eigen stijlbestanden koppelen aan de Joomla-sjabloon

Voordat we beginnen met het opnemen van onze eigen CSS-bestanden in onze sjabloon, moeten we eerst definiëren waarvoor u het nodig heeft. Hier kunnen verschillende redenen voor zijn:
Preventie van gegevensverlies - u gebruikt standaard sjabloon en breng wijzigingen aan in bestaande bestanden stijlen, na het bijwerken van het CMS, worden deze bestanden vervangen door nieuwe en gaan alle eerder aangebrachte wijzigingen verloren.
Scheiding van taken - voor elk afzonderlijk element kunt u afzonderlijke bestanden maken die alleen verantwoordelijk zijn voor het ontwerp. Maar hier is het belangrijk om het niet te overdrijven, je moet niet te veel bestanden maken.

Verschillende apparaten - nu worden niet alleen computers, maar ook telefoons, tablets en zelfs horloges gebruikt om toegang te krijgen tot internet. U kunt dus voor elk afzonderlijk apparaat alleen het stijlbestand maken en laden dat ervoor is bedoeld.

Hoe te leren creëren en verbinden eigen bestanden stijlen in kant-en-klare sjablonen altijd behulpzaam.

Uw eigen css-bestand maken

Eerst moeten we creëren nieuw bestand stijlen in de daarvoor bestemde map, meestal een map met de naam "css". Het bestand is aangemaakt op een standaard manier, de naam doet er niet toe, het belangrijkste is dat het de extensie ".css" heeft, ik heb mijn nieuwe bestand "mycss.css" genoemd.

Voeg regels code toe aan het index.php-bestand

Nu moeten we het nieuw gemaakte bestand verbinden, met andere woorden, vertel de sjabloon dat we een nieuw bestand hebben en we zullen het gebruiken. Open hiervoor het sjabloonindexbestand (index.php), in de coderegel op nummer 15 vinden we de volgende code:

We voegen er direct achter nieuwe lijn:

Je zou zoiets als het volgende moeten krijgen:

Op de dit stadium we hebben zojuist een variabele gedeclareerd waarmee we onze nieuwe stylesheet zullen opnemen. Nu moeten we nog een regel code schrijven, die direct verantwoordelijk is voor de verbinding van het CSS-bestand.

Daarna voegen we onze code toe voor css-verbindingen het dossier:

Ik heb het zo:

Hoe te controleren of onze stylesheet is inbegrepen

Om er zeker van te zijn dat onze stylesheet echt wordt opgenomen, moeten we de paginacode opnieuw openen, maar deze keer op een iets andere manier. Klik met de rechtermuisknop ergens op de pagina in het browservenster en selecteer het item "Paginacode weergeven" in de vervolgkeuzelijst of druk op de toetsencombinatie Ctrl + U.

In het geopende venster vinden we de coderegels die beginnen met

Als het niet in de lijst staat, moet u mogelijk de pagina opnieuw laden door de cache te wissen (toetscombinatie Ctrl + F5)

Ik beschouw deze les als voltooid, we hebben de algemene vragen over het bewerken van sjablonen in Joomla opgelost, geleerd hoe we met de paginacode moeten werken, en we hebben onze eigen stijlbestanden gemaakt en gekoppeld.
In de volgende les zullen we het proces van het bewerken van een sjabloon nader bekijken en

Het niet bewerken van een WordPress-sjabloon kan ernstige gevolgen hebben. Als u zelfs maar één regel uit de themacode verwijdert, kan deze volledig onbruikbaar worden. Daarom moet deze kwestie grondig worden begrepen.

Kenmerken van sjablonen voor WordPress

Sjablonen voor elke engine verschillen radicaal in hun structuur van standaardsjablonen op basis van css en html. WordPress-sjablonen worden ook wel thema's genoemd. Dankzij hen kunt u het uiterlijk van de site gemakkelijk en snel wijzigen. Zo eenvoudig als het verwisselen van een overhemd voor een man:

Het thema omvat verschillende hoofdgroepen van bestanden:

• CSS-bestanden bevatten - net als in een gewone sjabloon, stijlbeschrijvingen van alle elementen;
• Sjabloonbestanden - elk van hen is verantwoordelijk voor het weergeven van informatie in een specifiek deel van de site. Deze sjablonen hebben de extensie php;
• functies.php - extra functionaliteitsbestand dat de integratie van het thema in de engine implementeert;
• Afbeeldingen - Afbeeldingen die als achtergrond worden gebruikt.

Dankzij het gebruik van sjablonen in WordPress was het mogelijk om de externe presentatie van de site te scheiden van de programmacode. Daarom hebben ze op geen enkele manier invloed op elkaar en kunnen hun versies afzonderlijk worden bijgewerkt.

Alle geïnstalleerde thema's kunnen worden bekeken via de sitebeheerdersinterface. Ga hiervoor naar het zijmenu-gedeelte "Uiterlijk" - "Thema's". Sommige parameters van het uiterlijk van de sjabloon kunnen worden ingesteld in het item "Thema-opties":

• Verander de kleur van het menu;
• Stel de kleur van links in;
• Kies een van de opties voor de sitestructuur;
• Stel de locatie van het menu in;
• Achtergrondkleur instellen voor inhoud.

De lijst met beschikbare opties in "Thema-opties" kan voor elk thema anders zijn.

Voor gevorderde gebruikers heeft het WordPress-beheerderspaneel een ingebouwde sjablooneditor. Het is ook beschikbaar in het gedeelte "Uiterlijk" van het menu:

Op schijf (of hosting) worden de bestanden van alle geïnstalleerde thema's opgeslagen in de wp-content / thema's / map. In de admin-thema-editor worden alle sjabloonbestanden aan de rechterkant weergegeven. Nadat u op de bestandsnaam heeft geklikt, wordt de inhoud beschikbaar voor bewerking in het editorvenster:

Laten we een voorbeeld nemen van het maken van een thema voor een website om beter te begrijpen hoe u een WordPress-sjabloon kunt bewerken.

Maak een nieuw shirt voor je website

Stap voor stap maken we een thema:

1) Ga naar de map wp-content / themes / en maak een map theme_test aan. Alle bestanden van het toekomstige thema worden erin opgeslagen;
2) Maak met een willekeurige editor een css-bestand. Al is het beter om meteen gespecialiseerde software te gebruiken. Bijvoorbeeld Dreamweaver. In de opmerkingen schrijven we de naam van het onderwerp:

/ * Themanaam: Theme_test * /. / ********************************************** Standaardinstellingen * ********************************************* /

Zo laten we WordPress weten dat dit het stijlbestand is van het nieuwe thema;

3) Maak het index.php-bestand met dezelfde editor. We plakken de code erin:

Sla het bestand op in onze themamap. Nu zijn er twee bestanden hier bedoeld om een ​​WordPress-sjabloon te maken:

In dit stadium is het nieuwe thema al zichtbaar via het beheerderspaneel van de site in de lijst met geïnstalleerde thema's:

Als u het thema activeert, ziet de site er in het browservenster als volgt uit:

Zoals je in het voorbeeld kunt zien, zijn de structuur- en stijlbeschrijving van de sjabloon in WordPress gescheiden. In de praktijk zijn functies verantwoordelijk voor het weergeven van delen van het ontwerp. Bij het aanroepen van een dergelijke functie wordt de code van het gewenste pagina-element gegenereerd volgens het gelijknamige sjabloon.

Het footer.php-sjabloon is verantwoordelijk voor de footer-structuur.

Dus voordat u een sjabloon voor WordPress maakt, moet u dit allemaal begrijpen. Laten we nu de html-code van het bestand index.php splitsen in sjablonen. Maak hiervoor twee bestanden aan: header.php en footer.php. Dan zullen we de code van de delen van de pagina met dezelfde naam onder hen verspreiden.

Footer.php inhoud:

Header.php inhoud:

Dit is hoe we een blogsjabloon van één pagina hebben gemaakt.

Een gemakkelijkere manier

Het maken van thema's voor WordPress vereist een goede kennis en praktische ervaring met webprogrammering. Daarom zijn er een aantal softwaretoepassingen ontwikkeld waarmee zelfs gewone gebruikers unieke thema's kunnen maken. Laten we ze eens bekijken met het programma TemplateToaster als voorbeeld.

De app is beschikbaar in betaalde en gratis versies. Het ondersteunt het maken van sjablonen voor verschillende populaire CMS. U kunt ook kant-en-klare thema's downloaden:

De hele applicatie-toolkit is bovenaan geconcentreerd. In het editorvenster zelf wordt een zwart-wit sitepaginasjabloon weergegeven. Door elk van de ontwerpelementen te markeren, met behulp van de bovenste werkbalk, worden de waarden van de set weergaveparameters ingesteld: - de bron heeft een Engelstalige, maar redelijk begrijpelijke interface. Om te beginnen, moet u een eenvoudige registratieprocedure doorlopen. Met de service kunt u niet alleen de ontwikkelde sjablonen maken, maar ook downloaden:

• yvoschaap.com - Ook deze generator heeft last van Engelssprekend. Registratie is niet nodig om ermee aan de slag te gaan. Het maken van sjablonen en het downloaden ervan wordt ondersteund. Maar de interface is een beetje moeilijk te begrijpen en heeft een smallere set parameters voor aanpassing:

Welke optie voor het maken van een sjabloon moet u kiezen?

Het zelf creëren van onderwerpen voor een persoon die niet over de juiste ervaring en kennis beschikt, kan moeilijk worden. Daarom is het beter om gespecialiseerde diensten of applicaties te gebruiken. En de kennis die uit dit artikel is opgedaan, kan worden gebruikt om kant-en-klare WordPress-sjablonen te bewerken.

Van de auteur: Hallo vrienden, in een ander artikel over het onderwerp WordPress. Als je voor de taak staat om iets in de themacode op je WordPress-site te wijzigen, dan kan het artikel Een WordPress-thema bewerken, denk ik, van pas komen. In dit artikel zullen we proberen te leren hoe u een WordPress-thema kunt bewerken.

We stonden dus voor de taak om kleine wijzigingen aan de WordPress-site aan te brengen. Tegelijkertijd zijn deze bewerkingen op geen enkele manier gerelateerd aan de teksten van pagina's of artikelen, anders zou je nauwelijks op zoek zijn naar een antwoord op de vraag in dit artikel, maar gewoon de tekst van het artikel of de pagina bewerken. Nee, we hebben het specifiek over de aanpassingen die gedaan moeten worden in de code van je WordPress thema. U moet bijvoorbeeld de afbeelding in de kop van de site wijzigen, een conclusie toevoegen over het auteurschap van het artikel of, omgekeerd, iets uit de uitvoer verwijderen, of de kleur van de link, de grootte van het lettertype of titel, enzovoort. Voor dit alles moet je naar de themacode gaan. Laten we proberen dit te doen.

Voordat we beginnen met het bewerken van een thema, zijn er een paar belangrijke punten:

we hebben het specifiek over kleine aanpassingen, en niet over kardinale veranderingen in het onderwerp, in het laatste geval kun je beter de webmaster om hulp vragen;

dit artikel is geen standaardrecept, omdat thema's op verschillende manieren kunnen worden gemaakt.

Ik neem het standaard Twenty Fifteen-thema dat bij WordPress wordt geleverd als voorbeeld. Rekening houdend met de opmerking hierboven over de verschillende manieren om thema's te maken, is het beter om precies uit te leggen op een van de standaard WordPress-thema's. Laten we eens kijken naar de structuur van de themamap.

Zoals je kunt zien, zijn er hier veel bestanden. Laten we eerst eens kijken naar het bestand style.css. Dit is een themastijlbestand en hierin worden in de regel de regels voor het ontwerp van het thema opgeslagen. Daarom, als u wijzigingen moet aanbrengen met betrekking tot het ontwerp, heeft u hoogstwaarschijnlijk een style.css-bestand nodig.

Laten we als voorbeeld de koppen van de artikeltitels verkleinen. Via de ontwikkelaarstools kunnen we in de stylesheet de regels vinden die verantwoordelijk zijn voor het ontwerp van een bepaald element.

Laten we het bestand style.css in een editor openen en de waarde van de eigenschap font-size voor de artikeltitel wijzigen van 3.9 in 2.9. Laten we het bestand opslaan, bijwerken op de server en na het vernieuwen van de pagina kunnen we zien dat de koptekst kleiner is geworden. Op precies dezelfde manier kunnen we het uiterlijk van elk ander element in het ontwerp van uw thema wijzigen.

content.php - het bestand is verantwoordelijk voor het centrale deel van de site, dat wil zeggen het inhoudsgebied;

footer.php - de footer van de site (footer of footer);

header.php - de bovenkant van de site (header of header);

sidebar.php - de zijbalk van de site (zijbalk).

Laten we bijvoorbeeld dezelfde titel van het artikel nemen en proberen deze een beetje aan te passen. In het Twenty Fifteen-thema is dit de kop op het tweede niveau (h2). Laten we het vervangen door bijvoorbeeld een kop op het derde niveau (h3). Open hiervoor de content.php-sjabloon, probeer het bijbehorende gedeelte van de code te vinden en breng wijzigingen aan. Hier is de code:

Na het wijzigen van h2 in h3 en het opslaan van het bestand, zouden we de bijbehorende wijzigingen op de site moeten zien. Evenzo wordt het bewerken gedaan voor andere elementen van uw thema. Ook hier herhaal ik dat het artikel voornamelijk gaat over het bewerken van een WordPress-thema, d.w.z. over het maken van enkele kleine wijzigingen aan de themastructuur of over het wijzigen van het ontwerp. Als u drastische wijzigingen moet aanbrengen, heeft u, zoals hierboven vermeld, twee opties:

hulp vragen aan de webmaster, die tegen een gepaste vergoeding de nodige wijzigingen in het onderwerp zal aanbrengen;

bestudeer de kwestie van het zelf maken van thema's, in dit geval zal het niet moeilijk voor je zijn om het WordPress-thema zelf te bewerken.

Als je besluit voor de tweede optie te kiezen, dan kan ik je onze gratis cursus over het maken van thema's voor WordPress of. Nou, bij deze neem ik afscheid. Veel succes en tot snel!

Elk thema heeft een aantal instellingen die kunnen worden gewijzigd vanuit het CMS-configuratiescherm. Een verscheidenheid aan parameters van sjabloon tot sjabloon kan veranderen, maar bijna elk thema stelt u in staat om het logo, de achtergrond, lettertypen, zijbalken, titel en beschrijving van de site aan te passen vanuit het beheerderspaneel.

Desondanks wil de site-eigenaar misschien enkele kleine dingen wijzigen die het configuratiescherm niet toestaat om te bewerken. In dit geval kunt u een webmaster inhuren, maar als u geen geld of tijd heeft, kunt u eenvoudig de sjabloon uitvogelen en zelf de nodige wijzigingen aanbrengen.

Een engine-thema bestaat uit veel bestanden. Als u weet voor welk deel van de site elk van hen verantwoordelijk is, kunt u het ontwerp van de CMS-sjabloon eenvoudig "voor uzelf" bewerken.

De themabestanden bevatten HTML-, PHP- en CSS-code. Er is een aparte verwijzing voor HTML/CSS op de site, en kennis van PHP is niet vereist om in principe het ontwerp te vormen.

Elke WordPress-sjabloon heeft dus de volgende bestanden.

1. index.php... Het bestand vormt de hoofdpagina van de site en roept andere skin-bestanden aan.

2. header.php... Creëert de bovenste "header" van de site - meestal bevat deze het logo, de naam, de beschrijving van de webresource en een horizontaal menu. HTML-container staat ook in dit bestand.

3. footer.php... Bevat de code voor de footer van de site, de "footer".

4. style.css... Cascading Style Sheets-bestand. Omdat het meestal groot genoeg is style.css goed commentaar. Helaas meestal in het Engels, maar basiskennis is voldoende om te begrijpen welk deel van de code verantwoordelijk is voor het ontwerp van welke elementen. Lees hier meer over CSS.

Dit is een essentiële kern van een WordPress-sjabloon, maar er zijn meestal veel meer themabestanden en dit zijn de meest voorkomende.

1. enkele.php- een apart bericht.

2. pagina.php- bladzijde.

3. zijbalk.php- zijpaneel / panelen.

4. archief.php- archief van artikelen.

5. zoeken.php- pagina met zoekresultaten.

6. comments.php- output van opmerkingen.

7. 404.php- foutpagina met code 404 (Bestand niet gevonden).

8. functie.php- een bestand met de functies van het thema. Je kunt er je eigen PHP-scripts aan toevoegen.

Natuurlijk bevatten sjablonen meestal veel meer bestanden dan hierboven beschreven, maar ze hoeven meestal niet te worden bewerkt. Bovendien kunt u meer te weten komen over het doel van elk bestand aan de hand van de naam en opmerkingen erin.

Het bewerken van sjablonen is vaak nodig om iets kleins te repareren of toe te voegen. Hieronder staan ​​enkele veelvoorkomende situaties.

Menu toevoegen

Het menu kan niet alleen op de plaatsen worden geplaatst die door het thema zijn ingesteld (dit gebeurt via widgets), maar ook op elk ander deel van de site of zelfs op een specifieke pagina.

Om het menu ergens in te voegen, voegt u de regel toe:

direct in de paginacode waar u deze wilt plaatsen. De regel werkt als er maar één aangepast menu op de site is. Als er meerdere zijn, voeg dan een regel als deze toe aan de code:

"Menu_1")); ?>

waar in plaats van Menu_1 u moet de naam van uw menu invoeren.

404-pagina wijzigen

Als de link verwijst naar een pagina of bestand dat niet bestaat, brengt WordPress de gebruiker naar een 404-foutpagina (Bestand niet gevonden). Het bestand is er verantwoordelijk voor 404.php opgeslagen in de actieve themamap. Vaak wordt Engelse tekst op het scherm weergegeven en de wens van de eigenaar van een Russischtalige site om deze in hun moedertaal te vertalen, is heel begrijpelijk.

Om de inhoud van de pagina te wijzigen, opent u het bestand in de editor 404.php, zoek de regels met de tekst die in de browser wordt weergegeven en wijzig ze (de weergegeven tekst staat meestal tussen aanhalingstekens). In een van de standaardthema's (twintyfourteen) ben je bijvoorbeeld geïnteresseerd in de volgende code:

Vervang de tekst tussen aanhalingstekens (niet waar veertienentwintig, maar een andere) door uw eigen tekst en u krijgt een aangepaste 404-pagina.

Auteursrecht registreren

Onderaan de site is het gebruikelijk om service-informatie te schrijven, met name de jaren van werk van de bron en copyright. In de overgrote meerderheid van de gevallen, uw "label" in het bestand footer.php worden achtergelaten door de auteurs van de thema's, en de uitgevers willen deze informatie natuurlijk vervangen door hun eigen informatie.

Voor de "benen" van de site, zoals we weten, is het bestand dat is opgeslagen in de hoofdmap van het actieve thema verantwoordelijk footer.php, en je moet zoeken naar de code die verantwoordelijk is voor het copyright erop.

Het plat-witte thema verbergt bijvoorbeeld aanvullende informatie in de volgende regels van dit bestand:

"titel =" (! TAAL:"> ">

Russificeer de tekst

Vaak worden WordPress-sjablonen niet volledig of helemaal niet vertaald. Als u de bestandsstructuur van het thema kent en het feit dat de tekst die aan de gebruiker wordt getoond (als het geen variabele is) in de code altijd tussen aanhalingstekens staat, is het gemakkelijk om het gewenste fragment zelf te vinden en te vertalen, en u hoeft niet handmatig naar een woord te zoeken - hiervoor kunt u de automatische zoekfunctie gebruiken, die aanwezig is in elke code-editor.

In de plat-witte sjabloon wilt u bijvoorbeeld onmiddellijk ten minste twee inscripties Russify: "LEES MEER" en "Laat een reactie achter", zoals ze op de hoofdpagina te zien zijn.

Het bestand is verantwoordelijk voor de hoofdpagina index.php bevindt zich in de hoofdmap van de themamap, daarom moet u deze bewerken. Maar er zit geen inscriptie in, dus je moet de code begrijpen om erachter te komen waar ze zijn opgeslagen. In ons geval is het bestand verantwoordelijk voor de informatie onder de berichten op de hoofdpagina template-parts / content.php verbonden door string

Als je ernaartoe gaat en in de code