Hoe je een WordPress-subthema maakt

Wil je je WordPress-thema aanpassen, maar wil je dit op een veilige manier doen? Geen zorgen. We hebben het voor je geregeld. Lees het volgende artikel en je kunt je WordPress-thema aanpassen met behulp van WordPress-subthema's. WordPress-subthema's zorgen ervoor dat je aanpassingen in een aparte map worden opgeslagen, zodat updates van je hoofdthema je aanpassingen niet beïnvloeden.

Wat wordt bedoeld met 'subthema's?

In feite is een subthema een weerspiegeling van het hoofdthema. Het concept hier is dat, ongeacht welke wijzigingen je in een subthema aanbrengt, je hoofdthema hierdoor niet wordt beïnvloed. Maar alle wijzigingen in het hoofdthema worden wel weerspiegeld in het subthema.

Is het nodig om subonderwerpen te gebruiken?

Het gebruik van subthema's is ongetwijfeld de veiligste manier om een thema aan te passen. Het beste deel is dat, zelfs als je hoofdthema wordt bijgewerkt, je wijzigingen niet worden verwijderd. Als je problemen ondervindt bij het aanpassen van een subthema, kun je het eenvoudig verwijderen om terug te keren naar het hoofdthema.

Het instellen van een WordPress-subthema.

U kunt handmatig of met behulp van plug-ins een subthema voor WordPress instellen.

Een ding dat je moet onthouden, is dat het pas effectief wordt als je hoofdthema verschijnt op de pagina “Thema's”, onder “Uiterlijk”.

Methode 1: Handmatig subonderwerpen maken

#1Allereerst moet je een nieuwe map maken en deze naar wens een naam geven, bijvoorbeeld “twentytwentyfour-child”.

#2:Als volgende stap moet je een bestand maken en dit de naam “style.css” geven. Let op: dit bestand moet absoluut bestaan.

#3：Nu moet je het recent gemaakte bestand openen en hier de volgende informatie in invoeren.

/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://example.com/twentytwentyfour-child/
Description:    This is a child theme for Twenty Twenty-Four, created by me.
Author:         Your Name
Author URI:     https://example.com
Template:       twentytwentyfour
Version:        1.0.0
*/

Uitleg van de belangrijkste parameters:​

• Theme Name:\n(Verplicht)De naam van je subthema.
• Template:\n(Verplicht)Dit isHet belangrijkste is...Deze regel van het privacybeleid van Google is niet duidelijk. Het moetHet komt volledig overeen.De naam van de map van het overkoepelde thema. Bijvoorbeeld, het overkoepelde thema is twentytwentyfourVul hier gewoon in. twentytwentyfourHet hoofdonderwerp is DiviVul hier gewoon in. Divi\n.De hoofdletters en kleine letters moeten consistent zijn.。
• DescriptionEen korte beschrijving van het subthema.
• AuthorJe naam.
• Author URIHet adres van je website.
• VersionHet versienummer van het subthema.

Hoewel de CSS van het subthema automatisch wordt geladen, wordt het niet weergegeven.Het erft niet automatisch alle stijlen van het ouderonderwerp.Om je subthema een volledige en betrouwbare basis te geven, is het zeer gebruikelijk en aan te raden om:Allereerst importeer je de volledige stijl van het hoofdthema.。

Je kunt dit in je aangepaste CSS doen.VoorheenGebruik @import Regels worden gebruikt om dit te bereiken.

/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://www.likacloud.com/twentytwentyfour-child/
Description:    This is a child theme for Twenty Twenty-Four, created by me.
Author:         Your Name
Author URI:     https://example.com
Template:       twentytwentyfour
Version:        1.0.0
*/

/* 导入父主题的样式以确保设计基础一致 */
@import url("../twentytwentyfour/style.css");

/* 自定义样式从这里开始 */

/* 1. 更改文章标题颜色 */
.wp-block-post-title {
    color: #1a4f6e;
    font-weight: 700;
}

/* 2. 更改网站背景色 */
body {
    background-color: #f8f9fa;
}

/* 3. 更改主内容区域的宽度 */
.wp-block-group.alignwide {
    max-width: 1280px;
}

/* 4. 自定义链接颜色 */
a {
    color: #d14545;
}
a:hover {
    color: #a23434;
    text-decoration: none;
}

Bijvoorbeeld, zoiets als:

<?php
// 确保在正确的钩子上加载样式
add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles');

function enqueue_parent_and_child_styles() {
    // 加载父主题样式
    wp_enqueue_style('parent-style', get_template_directory_uri() . 'https://www.likacloud.com/style.css');
    
    // 加载子主题样式，并指定依赖于父主题样式
    // 这样可以确保子主题样式在父主题样式之后加载，保证样式覆盖生效
    wp_enqueue_style('child-style', 
                     get_stylesheet_directory_uri() . 'https://www.likacloud.com/style.css',
                     array('parent-style'), // 依赖关系
                     wp_get_theme()->get('Version') // 版本号，可选
                    );
}

Code-uitleg:

1. add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles'): De aangepaste functie wordt gekoppeld aan de hook voor het laden van stijlen in WordPress.
2. get_template_directory_uri()Het verkrijgen van de URL van de overkoepelende map.
3. get_stylesheet_directory_uri()De URL van de subthema-catalogus ophalen (wanneer het subthema is geactiveerd)
4. array('parent-style')De stijl van de subthema's is afhankelijk van de stijl van het hoofdthema. Zorg ervoor dat de laadvolgorde correct is.

Deze methode is in vergelijking met... @import Het is efficiënter, omdat het de browser in staat stelt om stijlbladen parallel te laden en het de afhankelijkheden tussen stijlen beter beheert.

Je hoeft alleen deze code toe te voegen aan het subthema. functions.php De bestanden worden in de map geplaatst (of er wordt een nieuwe map gemaakt als deze niet bestaat) en tegelijkertijd worden de bestaande subthema's behouden. style.css De informatie in de koptekst is voldoende.

Alle overige details kunnen naar wens worden gewijzigd.

Na het voltooien van deze taak, moet je naar “Uiterlijk >> Thema's gaan en controleren of je subthema is gemaakt. Als dit het geval is, gefeliciteerd! Je kunt het activeren om te testen of het het ontwerp van het hoofdthema heeft geërfd.

Methode 2: maak subthema's met behulp van plug-ins

Als je dit niet aantrekkelijk vindt om handmatig te doen, kun je gratis WordPress-plug-ins gebruiken om dit voor je te doen. Er zijn veel gratis plug-ins beschikbaar die subthema's voor je kunnen maken en je zo het handmatig uitvoeren van al deze taken kunnen besparen. We gaan gebruikmaken vanSubthema-configuratorEen plug-in, maar je kunt elke beschikbare plug-in vrij gebruiken.

#1: Allereerst moet je het downloaden. Kinder-thema configurator Plugin.

#2: Log nu in op uw website en ga naar uw dashboard.

#3: Ga naar 'Plugins' en selecteer vervolgens de optie 'Nieuw toevoegen'.

#4:Nu moet je de plug-in die je net hebt gedownload uploaden door op de optie “Plug-in uploaden” te klikken en deze vervolgens te activeren.

#5:Het is belangrijk om ervoor te zorgen dat het thema waarvoor je een subthema maakt, geactiveerd is.

#6: Dit kan worden gedaan door eenvoudig naar het gedeelte “Tools” te navigeren en op het subonderwerp te klikken.

#7: Klik nu op de knop Analyseren en maak je subthema volgens de instellingen die in de plug-in worden vermeld.

#8: Nu moet je klikken op de optie “Nieuw subthema maken”.

Andere sjabloonbestanden bewerken

Je moet de functie in een subthema schrijven als je hier aanpassingsfuncties aan wilt toevoegen. Je kunt gerust gebruikmaken van subthema's om wijzigingen in de structuur of lay-out van het hoofdthema door te voeren.

Stel dat je een account hebt gemaakt twentytwentyfour Als subthema wil je de manier waarop de enkele pagina wordt weergegeven wijzigen. De locatie van de enkele pagina is twentytwentyfour-child/template-parts/content-single.php.

#1:Maak in de submappen een bestand met de naam content-single.php. Je moet goed opletten met de naam en de structuur. Deze moeten overeenkomen met het ouderthema, zodat het ouderthema wordt overschreven.

#2: Vervolgens moet je een nieuwe map maken en dit bestand hierin plaatsen, maar zorg ervoor dat het pad exact overeenkomt met het pad van het overkoepelde onderwerp.

#3: En zo is het. In deze stap hoef je alleen maar je gewenste code te schrijven in content-single.php, waarna deze de oude code zal overschrijven.

Voorzichtigheid: Zorg ervoor dat de bestandsnaam en het pad van de map hetzelfde zijn.

We hopen dat je nu met gemak subthema's kunt maken. Als je vragen hebt, voeg ze dan toe.QQ-groep 1398231Discussie.

Bekijk de aanbevolen WordPress-hostingproviders in de cloud.