Het standaard WordPress-thema in 2014 was twintig Vijftien, een sjabloon met een vaste zijbalk aan de linkerkant die verandert in een koptekst in mobiele weergave, een minimaal voettekstgebied, geweldige typografie en een mooi uitgelicht afbeeldingsgebied. Sindsdien hebben we de release van TwentySixteen, TwentySeventeen, TwentyEighteen, TwentyNineteen en het huidige standaard gratis thema gezien TwintigTwintig.
Deze thema's zijn geweldig, ze doorlopen een heel proces om gekozen te worden als het standaard WordPress-thema, maar we kunnen begrijpen dat gebruikers het nog steeds willen aanpassen en het hun eigen willen maken.
Aangezien deze thema's doorgaans enkele beperkingen bieden, zoals een enkele zijbalk (dit wordt widget-ready gebied genoemd in WordPress), laten we u zien hoe u een widget aan de voettekst kunt toevoegen of hoe u de code van een thema kunt aanpassen om meer widgetgebieden toe te voegen aan een thema.
Het toevoegen van een widgetgebied aan de TwentyFifteen to TwentyTwenty-voettekst verschilt niet van het toevoegen van een widgetgebied in de meeste WordPress-thema's.
Als je geïnteresseerd bent om andere WordPress-thema's te zien, raden we je aan om naar andere populaire thema's te kijken, zoals Divi from Elegant Themes. Bekijk hier onze volledige recensie.
Maak een WordPress Child Theme
Wanneer u de sjabloonbestanden van een WordPress-thema aanpast om een widgetgebied te maken, is het een goede gewoonte om een kind thema.
Het concept van een child-thema is vrij eenvoudig - we willen de mogelijkheid om het thema te upgraden naar nieuw uitgebrachte versies niet uitsluiten.
Wanneer u aanpassingen maakt aan een child-thema, worden uw wijzigingen toegevoegd aan het child-thema in plaats van aan het originele thema. Wanneer er een bijgewerkte versie van het originele thema uit is, kun je je kopie van het originele thema bijwerken en je wijzigingen intact laten in het onderliggende thema.
Als je meer tips en trucs met betrekking tot WordPress wilt leren, ga dan naar de rest van het gedeelte over CollectiveRay.
1. Maak een onderliggende themamap en bestanden aan
Maak als eerste stap een map in de wp-content> thema's map. Noem de map vijfentwintig-kind, twintig-twintig-kind. Het is echter belangrijk dat het child-thema de naamgevingsconventie van het bovenliggende thema volgt.
Dus als de ouder wordt gebeld twintig vijftien, het kind moet gebeld worden vijftien-kind. Evenzo, als het thema dat u aanpast, wordt genoemd twintig twintig, het child-thema moet t . hetengingytwenty-child.
Nadat u het child-thema hebt gemaakt, moet u twee extra bestanden maken.
Het bestand dat wordt gebruikt om wijzigingen in de CSS-stijlen uit te voeren, moet worden aangeroepen style.css. We hebben ook de nodig functions.php bestand voor het child-thema, waar we bepaalde vereiste functies kunnen toevoegen.
Deze twee bestanden gaan in de map met vijfentwintig onderliggende items of de respectievelijke map die u voor het child-thema hebt gemaakt.
2. Voeg het bestand toe voor het WordPress-widgetgebied (in de voettekst of waar u maar wilt)
Omdat het widgetgebied moet worden toegevoegd aan de themavoettekst, moet u een bestand hebben voor de voettekstcode.
De veiligste manier om een WordPress-sjabloonbestand te coderen, is door te beginnen met een kant-en-klaar sjabloon, vervolgens toe te voegen wat u wilt en/of te verwijderen wat u niet wilt.
Neem in dit geval de footer.php van het Twenty Fifteen-thema, of het Twenty Twenty-thema of hoe het thema dat u aanpast ook wordt genoemd en plak het in uw child-thema.
3. Voeg code toe aan de bestanden van het onderliggende thema om de widget te maken
Op dit moment hebben we alleen lege bestanden, dus zoals het is, kan het child-thema niets doen.
Om wijzigingen door te kunnen voeren, heeft een werkend child-thema enkele opmerkingen bovenaan style.css. Open style.css in je favoriete code-editor en voeg dit stukje code toe.
/*Theme Name: Twenty Fifteen ChildTheme URI: http://example.com/twenty-fifteen-child/Description: Twenty Fifteen Child ThemeAuthor: John DoeAuthor URI: http://example.comTemplate: twentyfifteenVersion: 1.0.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-readyText Domain: twentyfifteenchild*/
Het echt belangrijke deel hier is in de Sjabloon dus in het bovenstaande voorbeeld is het Sjabloon: vijfentwintig. Dit is het instrueren van WordPress over de naam van het bovenliggende thema.
Zorg ervoor dat de naam exact hetzelfde is als de mapnaam van het bovenliggende thema (hoofdletters, of eventuele spaties, streepjes, onderstrepingstekens, etc. zijn belangrijk: alles moet exact overeenkomen met de mapnaam van het bovenliggende thema).
Open vervolgens functions.php en voeg het volgende stukje code toe.
Hoewel deze stap niet strikt verplicht is, wordt het ten zeerste aanbevolen omdat met deze code het child-thema de look en feel van zijn bovenliggende thema zal erven.
Dus laten we een functie schrijven die inhaakt op de wp_enqueue_scripts() actie hook. Binnen de functie die je enqueue de stylesheet van het bovenliggende thema met behulp van de wp_enqueue_style() functie.
Dit zorgt ervoor dat het onderliggende thema de stijlen van het bovenliggende thema erft, terwijl het elke specifieke stijlregel op zich overschrijft style.css bestand.
<?php
//Importeer bovenliggende stijlen op de juiste manier en voeg indien nodig andere stylesheets toe.
functie twintig_vijftien_kind_stijlen() {
wp_enqueue_style('ouderstijl', get_template_directory_uri().'/style.css');
}
add_action('wp_enqueue_scripts', 'twenty_fifteen_child_styles');
Je child-thema is grotendeels klaar!
Toegang tot de Thema's paneel in uw WordPress-installatie en u zou uw Twenty Fifteen Child-thema klaar voor gebruik moeten zien. Klik Activeren en bezoek uw site. Het moet er precies hetzelfde uitzien als het hoofdthema.
Het widgetgebied toevoegen
Nu moeten we de code toevoegen om het footer-widgetgebied te definiëren. Hier is het fragment dat gaat in functions.php.
/** * Registreer voettekst widget gebied. * * @since Twenty Fifteen Child 1.0 * * @link https://codex.wordpress.org/Function_Reference/register_sidebar */ function Twentyfifteen_child_widgets_init() { register_sidebar( array( 'name' => __( 'Footer Widgets', 'twenty -fifteen-child' ), 'id' => 'sidebar-2', 'description' => __( 'Voeg hier widgets toe om in je voettekstgebied te verschijnen.', 'twenty-fifteen-child' ), 'before_widget' => ' ', 'after_widget' => ' ', 'before_title' => ' ', 'na_titel' => ' ', ) ); } add_action('widgets_init', 'twentyfifteen_child_widgets_init');
De bovenstaande code voegt een functie toe die een zijbalk registreert met de ID van sidebar-2 (het Twenty Fifteen-thema heeft al een zijbalk met de ID van sidebar-1), en haakt deze functie vervolgens in de widgets_init() actiehaak.
Laten we vervolgens doorgaan en de nieuwe zijbalk aan de voettekst toevoegen. Open footer.php in een code-editor en voer dit fragment in net onder deze regel code: <footer id="colophon" class="site-footer" role="contentinfo">.
De bovenstaande code controleert eerst of de zijbalk-2 widgets heeft, zo ja, dan wordt de zijbalk weergegeven in een div met de klasse "widget-gebied".
Het volgende dat u hoeft te doen, is naar het Widgets-paneel van uw WordPress-back-end gaan, de zijbalk Footer Widgets zoeken en er enkele widgets aan toevoegen. Sla de widgets op terwijl u ze toevoegt en controleer het resultaat.
Het bovenstaande toont een aantal widgets in de Twenty Fifteen Child-voettekstzijbalk en je kunt zien dat de tekst te dicht bij de bovenkant van de container stond en de ondermarge van de widgets te hoog was. Dit kleine fragment in style.css zal het uiterlijk aanzienlijk verbeteren.
.site-footer .widget {marge: 0; opvulling: 10% 20% 0; } .site-footer .widget:last-child { margin-bottom: 10%; }
Hier is nog een voorbeeld van het toevoegen van een andere zijbalk:
if ( is_active_sidebar( 'sidebar-2' )
|| is_active_sidebar('sidebar-3') :
?>
">
if ( is_active_sidebar( 'sidebar-2' ) ) { ?>
<?php }
if ( is_active_sidebar( 'sidebar-3' ) ) { ?>
De code die u moet gebruiken, is afhankelijk van het thema dat u in werkelijkheid gebruikt.
Je WordPress footer-widget is klaar!
In dit bericht hebben we gezien hoe u een nieuw widgetgebied kunt toevoegen aan de Twenty Fifteen WordPress-themavoettekst. Hoewel we het widgetgebied in de voettekst van het thema hebben geplaatst, kunt u deze logica gebruiken om vrijwel overal in een thema widgetgebieden toe te voegen door vergelijkbare stappen te volgen.
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!
Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.
en nog veel meer ...