Need help? Chat now!

Hostwinds Blog

Zoekresultaten voor:


Hostwinds How-To's: Hoe maak je een WordPress child-thema Uitgelichte afbeelding

Hostwinds How-To's: Hoe maak je een WordPress child-thema

door: Hostwinds Team  /  juli- 12, 2019


Maya Angelou zei ooit: "Het is tijd voor ouders om jonge mensen te leren dat er in diversiteit schoonheid is en er sterk is."Nu, je vraagt misschien jezelf: "Hoe verhoudt dit met een WordPress-blogpost?"

Grote vraag.Het antwoord is een beetje een stretch, maar hier gaat het: WordPress Parent Thema's moedigen WordPress Child Thema's aan om zo divers te zijn, want de geest kan zich voorstellen.In feite heeft elk kindthema een bovenliggende thema nodig en de laatste stelt de eerste in staat om uw site te voorzien van meer diversiteit, schoonheid en kracht.Zo volgen moederthema's het advies van de Grote Maya Angelou.Wat is dat?Dat was meer dan alleen "een beetje" van een stretch, en het zou het beste zijn om deze blogpost over te starten, alsof hij alsof deze alinea's nooit bestaan?Dat klinkt als een goed idee.In dat geval…

Hallo mensen!Welkom terug naar de WordPress Child Theme Blog-serie!In deel 1 gingen we over enkele WordPress-feiten en details, gedefinieerde WordPress Child-thema's, en onbehuurd geplugde hostwinds WordPress Hosting.Wat is dat?Je wilt grote hoeveelheden informatie over deze zogenaamde "hostwinds wordpress hosting" omdat het klinkt als een prachtige en nuttige service?

Mijn antwoord is tweeledig:

1. Je hebt helemaal gelijk - Hostwinds WordPress Hosting is een geweldige en voordelige service!

2. Ik zal daar blij mee zijn.

WordPress Hosting is webhosting die perfect compatibel is met websites die zijn gebouwd met WordPress.Het maakt bouw en onderhoud van uw WordPress-site om verschillende redenen, die we hebben besproken in deel 1 van deze blogserie.Wat is dat?Wilt u weten waar te gaan om hostwinds WordPress hosting deze tweede te bestellen?

Alles voor jou, attent publiek! Deze link brengt je naar de juiste plek:

https://www.hostwinds.com/hosting/wordpress

Wat is dat?Wilt u het ook graag weten waar te gaan onderdeel 1 van deze WordPress Child Theme Blog-serie?

Mijn antwoord is tweeledig:

1. Je bent nogal spraakzaam vandaag, toehoorders, en ik geniet ervan!

2. Klik op de onderstaande link om deel 1 te bekijken.

WordPress kinderthema's en waarom ze te gebruiken

De epische saga vordert in deel 2, waar we zullen leren hoe we een kindthema moeten gebruiken.Wilt u wijzigingen aanbrengen in uw WordPress-thema?Wilt u ervoor zorgen dat die bewerkingen niet worden gewist wanneer u een update voor beveiligings- en functionaliteitsdoeleinden onvermijdelijk installeert?Kindthema's zijn hier om je te redden!We zullen een van deze magische kindthema's maken en activeren in dit blogstuk.

Gewoon om je op te geven over wat we doen in ons hypothetische voorbeeld, worden de volgende wijzigingen aangebracht op de CSS-styling van onze WordPress-site:

1. Een schokeffect wanneer bezoekers over bepaalde koppen op onze webpagina's zweven.

2. Inversie van de kleuren van één afbeelding wanneer bezoekers eroverheen bewegen.

Boom, eenvoudig als dat.Laten we beginnen met het maken van een team.

Stappen voorafgaand aan het maken van een kindthema

Voordat we voor onszelf komen en duiken in de wereld van kindthema's, laten we WordPress installeren.

Hier leest u hoe u WordPress installeert met Softaculous App Installer (Softaculous wordt gratis geleverd bij Hostwinds Shared en Business Web Hosting-plannen, en het maakt het installeren van WordPress een fluitje van een cent):

Stap 1: Log in op uw klantengebied: https://clients.hostwinds.com/clientarea.php

Stap 2: Klik op uw Hostwinds-service

Stap 3.Klik op "Inloggen op CPANEL" in het menu "Acties" aan de linkerkant

Stap 4.Login op CPANEL >> Klik op het "softaculous app-installatieprogramma" in het menu "Software"

Stap # 5.Eenmaal in softaculous, klik op "Blogs" op het menu aan de linkerkant van de pagina >> Klik op "WordPress"

Klik eerst op Blogs

Ten tweede, klik op WordPress

Stap # 6.Klik op "Installeren"

Stap 7. Vul informatie in zoals uw domeinnaam, admin-gebruikersnaam en admin-wachtwoord

Je hebt het gedaan! Helemaal klaar!

Zodra je WordPress helemaal hebt ingesteld

Nu is het tijd om je hoofdthema te activeren, en hier is hoe je dat doet:

Stap 1.Log in op WordPress met behulp van de inloggegevens die u zojuist in softaculous hebt gemaakt tijdens het installeren van WordPress >> Klik op "Uiterlijk" in het menu links van de pagina >> klik op "Thema's"

Stap 2.Selecteer het favoriete thema en klik op "Activate"

Klik eerst op Uiterlijk

Ten tweede, klik op Thema's

Klik op de knop Activeren

Bovenliggende thema effectief geactiveerd! Op naar de volgende!

En nu stappen voor het maken van een kindthema

Ja, we zijn eindelijk klaar om ons kindthema te maken. Hier is hoe het te doen:

Stap 1.Cruise terug naar uw CPANEL-account >> Klik op "Bestandsbeheer" in het menu "Bestanden" >> Ga naar uw map "Public_html" >> Ga naar uw map "WP" >> Ga naar uw map "WP-Content">> Ga naar de map "Thema's"

Klik eerst op public_html

Ten tweede, klik op wp / Derde, klik op wp-content

Stap 2. Maak een nieuwe map Binnen de map WP-inhoud / thema's getiteld "[Uw ouder thema-naam gaat hier] -Child."Je kunt het ook een naam geven als "[je ouderthema-naam gaat hier] _child."Om dit te bereiken, klikt u op "+ map" in de linkerbovenhoek van de pagina.

Stap 3. Ga naar je nieuwe map en maak een nieuw bestand.Klik op uw nieuwe map >> klik op "+ bestand" op de linkerbovenhoek van de pagina >> Noem het nieuwe bestand "Style.css."

We maken eerst een stijl.css-bestand omdat het het meest elementaire ding is dat men kan doen om een kindthema te maken.Wacht, dat klinkt bekend.Oh ja, het doet heel denken aan een offerte van deel 1 van deze WordPress Child Theme Blog-serie: "De eenvoudigste kinderthema's bevatten één stijl.css-bestand."

Ga verder met stap 4!

Stap 4.Open uw Style.css-bestand door met de rechtermuisknop te klikken en te selecteren "Bewerken" >> Kopieer en plak de volgende code in het document van uw stijl.CSS en klik op "Wijzigingen opslaan"

12345678910 / * Theme Name: Theme URI: Description: Author: Author URI: Template: Version: License: * /

Nu, voordat we de rest van deze code invullen, wil ik uitleggen wat elk van deze velden precies betekent.

Thema naam is de naam van dat hoofdthema dat u zojuist hebt geactiveerd.

Thema-URI Zou over het algemeen zijn waar u de URL van de homepage van uw thema zou plaatsen, omdat het de URL van een webpagina is waar gegevens met betrekking tot uw thema kunnen worden gevonden.

Omschrijving is een korte zin die het thema van uw kind samenvat.

Schrijver ben jij, dus je naam of WordPress-gebruikersnaam komt hier.

Auteur URI is de URL voor uw homepage.

Sjabloon is de naam van de map van de bovenliggende thema.

Versie is het versienummer van uw child-thema. We zullen 1.0.0 gebruiken.

Licentie is uw licentieverklaring voor uw child-thema.

U kunt ook velden toevoegen, zoals "Tekst Domein" en "Tags", maar die zijn echter niet vereist.

Hier is de code die ik heb ingevuld om mijn gewenste resultaten te bereiken:

12345678910 / * Themanaam: twentyseventeen-child Thema-URI: http://mydomain.com/wp/twentyseventeen-child/ Beschrijving: Child Theme for Twenty Seventeen Theme Auteur: ErinCAuthor URI: http: //mydomain.com Sjabloon: twentyseventeen Versie: 1.0.0 Licentie : GNU General Public License v2 of hoger * /

Als u meer uitleg nodig heeft over wat u moet invoegen voor uw specifieke thema / child-thema-informatie, bekijk dan het volgende:

12345678910 / * Themanaam: [THEMENAAM VAN JE OUDER GAAT HIER] -kind Thema-URI: http: // [NAAM VAN JE HOMEPAGE GAAT HIER] .com / [THEMENAAM VAN JE OUDER GAAT HIER] -kind Beschrijving: Kindthema voor [THEMA VAN JE OUDER NAAM GAAT HIER] themeAuthor: [JOUW NAAM GAAT HIER] Auteur URI: http: // [NAAM VAN JE HOMEPAGE GAAT HIER] .com Template: [NAAM VAN JE OUDER THEMA GAAT HIER] Versie: 1.0.0 Licentie: GNU General Public License v2 of hoger * /

Nadat u dit stuk code hebt getypt, kunt u de rest van het document invullen, omdat u in het algemeen een CSS-document wilt invullen.Trouwens, als je geen ervaring hebt gehad met CSS of je CSS-kennis moet poetsen, hebben we toevallig een blogpost gepubliceerd die CSS-basics uitlegde.

De volgende link leidt u naar onze Blog-stuk "Hostwinds CSS-chat":

Hostwinds CSS Chat

Tijd om ons kindthema te activeren! Volg hiervoor deze stappen:

  1. Navigeer naar uw WordPress-dashboard en klik vervolgens op "Verschijnt" op het menu helemaal naar links van de pagina
  2. Klik op "Thema's" >> Klik op "Activate" onder uw naam van uw kind

Nu zul je merken dat je WordPress-site er een beetje anders uitziet, maar Do not Panic. Zodra u de volgende paar stappen heeft voltooid, is het weer normaal.

Stap 1.Ga terug naar de map van uw kind-thema in de bestandsbeheer van CPANEL (dezelfde map met uw STYLE.CSS-bestand)

Stap # 2. Maak een nieuw bestand en noem het "Functions.php"

Stap # 3. Klik met de rechtermuisknop op het bestand >> Klik op "Bewerken"

Stap # 4. Kopieer en plak deze exacte code in het document en klik op de knop Blauwe "Opslaan" in de rechterbovenhoek van de pagina:

PHP 1234567

Als u de pagina op uw WordPress-website vernieuwt, moet deze op magische wijze weer normaal worden en er veel mooier uitzien.

Laat me uitleggen waarom de vorige stappen nodig zijn. Met de code die je zojuist hebt gekopieerd en geplakt, kunnen alle bovenliggende WordPress-thema's de standaard CSS lezen die bij WordPress wordt geleverd.

En nu stappen om uw CSS-code toe te voegen

Om effectief wijzigingen in uw CSS-code aan te brengen, moet u de juiste klassennamen identificeren in uw WordPress Parent-thema.Hier is hoe u dat doet: klik met de rechtermuisknop op de startpagina van uw site >> klik op "Inspecteren"

Als u niet bekend bent met de Google Chrome Inspect Tool (ook aangeduid als "Google Chrome Developer Tools"), is het een fenomenale bron omdat het iedereen kan bepalen wat elke regel code op een website maakt.Als u bijvoorbeeld met de rechtermuisknop op een webpagina klikt, klikt u op "Inspecteren" en klikt u vervolgens op het kleine cursorpictogram in de linkerhoek van de hulpmiddelen voor ontwikkelaars, u kunt op elk element op uw pagina klikken om te zien wat een deel vanCode gemaakt.

Bovendien kunt u dubbelklikken op elke regel code, deze bewerken, druk op ENTER en te testen hoe de webpagina eruit zou zien als u die wijziging hebt gemaakt.Wat is dat?De Inspect Tool is geweldig! Wauw, je leest mijn gedachten. We gaan de Google Chrome Developer Tools gebruiken om de CSS-selectors te identificeren waarnaar we moeten verwijzen in ons style.css-document om wijzigingen aan te brengen.

P.s.Hoewel we de ontwikkelaarstools van Google Chrome gebruiken, hebben zowel Firefox als Internet Explorer zeer vergelijkbare hulpmiddelen.

P.P.S. Voor de doeleinden van deze tutorial zullen we onze WordPress-site in dezelfde omstandigheden houden als toen we hem voor het eerst activeerden, en we zullen alleen de twee wijzigingen aanbrengen die in de inleiding van deze blogpost zijn genoemd.

P.p.p.p.Nog een ding dat we willen aanpakken over CSS-documenten: wist u dat browsers CSS-documenten van boven naar beneden lezen?Evenzo lezen browsers de CSS in de Style.CSS-documenten van kinderthema's alsof de code lager was dan de CSS-code die zich bevindt in het Style.CSS-document van de Parent Theme.Met andere woorden, de code die u in het stijl van uw Child Theme hebt. CSSS-document altijd overschrijft dat van het Style.CSS-document van de bovenliggende thema.

Whoa, wat een lange P.P.P.S. Oh nou ja! Zoals eerder vermeld, gaan we twee dingen veranderen voor onze site. Hier is # 1:

1. Laten we bijvoorbeeld zeggen dat u het nodig vindt om al uw rubrieken te laten schudden wanneer uw websitebestanden eroverheen hangen.

Plak de volgende code in uw style.css-document om dit te bereiken:

123456789101112131415161718192021222324 h2: hover {perspectief: 900px; backface-zichtbaarheid: verborgen; transform: translate3d (0, 0, 0); animatie: schud 0.70s cubic-bezier (.25, .10, .17, .88) beide;} @keyframes schudden {12%, 88% {transform: translate3d (-2px, 0, 0); } 19%, 82% {transform: translate3d (3px, 0, 0); } 32%, 53%, 68% {transform: translate3d (-3px, 0, 0); } 42%, 58% {transform: translate3d (3px, 0, 0); }}

Let eerst de "H2" -kiezer op.We gebruikten de Google Chrome-ontwikkelaarstools om erachter te komen welke selector in deze code verwijzingen.Ten tweede kunt u de cijfers in de bovenstaande code aanpassen om de koppen sneller of langzamer te maken.Zorg er ten slotte op de knop "Wijzigingen opslaan" nadat u de code in het document plakt.

2. Het tweede ding dat we gaan doen is dit: we zullen de kleuren van onze startpagina-afbeelding omkeren wanneer gebruikers eroverheen hangen door de volgende regels van de code toe te voegen aan ons nieuw gemaakte stijl.css-document.Duw "Veranderingen opslaan" wanneer u allemaal klaar bent met kopiëren en plakken.

123 img: hover {filter: invert (100%);}

En dat is hoe je een glorieus en effectief kindthema maakt!U bent allemaal ingesteld en uw site heeft een aantal aangepaste aanrakingen die niet worden gewist wanneer u een WordPress-update installeert die zich vooruit bewegen.Vernieuw uw pagina zodra u deze stappen hebt gevolgd en merk op hoe ongelooflijk afkoelt, het lijkt erop wanneer u boven een kop zweven, en het schudt.Merk op hoe ongelooflijk magisch het lijkt wanneer je over het beeld op je startpagina en de kleuren invert.Deze bijgewerkte site is nu, zoals de kinderen tegenwoordig zeggen, "verlicht."

(Word) Door te drukken op

Houd je niet van een geweldige woordspeling in een blog op weg?Wat is dat?Woordspelingen zijn ongelooflijk cheesy, maar toch geweldig?Zoals de kinderen tegenwoordig zeggen, "Ware DAT ... BRO."

Op een heel andere manier, hier is een citaat van de WordPress Hosting-pagina op onze website:

"WordPress Web Hosting is afgestemd op degenen die een WordPress-site willen krijgen die snel oplopen, zodat ze kunnen beginnen met bouwen, ontwerpen of bijwerken. Met behulp van het softaculous apps-installatieprogramma van uw CPANEL-account, kunt u WordPress op uw hostingaccount installeren en beginnenMet behulp van deze gratis software op een server die is geoptimaliseerd voor uptime en bewaakt door 24/7/365 door hostwinds. "

Het Hostwinds-team heeft onze WordPress-hosting specifiek ontwikkeld om het mensen gemakkelijk te maken om een WordPress-website te bouwen zonder zich zorgen te hoeven maken over het configureren van hun servers om compatibel te zijn met WordPress. Overigens is alles wat Hostwinds maakt specifiek geformuleerd om hostingprocedures voor onze klanten een fluitje van een cent te maken.

Maya Angelou sommeerde op de manier waarop ons team zich voelt over het helpen van onze gewaardeerde klanten toen ze zei: "Als je het in je hart vindt om voor iemand anders te zorgen, zal je zijn geslaagd."

Het doet er echt toe voor ons personeel dat u tijdens het gebruik van onze services een sterlingervaring hebt. We beschouwen ons bedrijf succesvol als we op de een of andere manier het leven van onze klanten hebben verbeterd. Met dat in gedachten, weet dat als u een WordPress Child-thema maakt, u altijd meer dan welkom bent om op elk gewenst moment, 24/7 experts te reiken, 24/7 via Live Chat, Phone of Support Ticket als u hulp nodig hebt. We zijn er altijd voor je.

Geschreven door Hostwinds Team  /  juli- 12, 2019