Hur man skapar ett WordPress-barntema (video)

Hur man skapar ett WordPress-barntema (video)

Vill du skapa ett barntema i WordPress? NÀr du vÀl har lÀrt dig WordPress-grunderna vill du förmodligen lÀra dig att anpassa din WordPress-webbplats. Vi tror att barns teman Àr en utmÀrkt utgÄngspunkt för alla som vill anpassa WordPress-teman. I den hÀr artikeln visar vi dig hur du skapar ett barntema i WordPress.

Videohandledning:

Prenumerera pÄ WPBeginner

För dem som inte vill titta pÄ videon kan du fortsÀtta lÀsa artikeln nedan.

Varför behöver du skapa ett barns tema?

Barnteman anses vara det bÀsta sÀttet att anpassa dina WordPress-teman. Ett barntema Àrver alla funktioner och utseende pÄ dess överordnade tema. Du kan anpassa det utan att pÄverka överordnat tema. Detta gör att du enkelt kan uppdatera överordnat tema utan att oroa dig för att förlora dina Àndringar.

Du kan lÀra dig mer om barns teman i vÄr artikel Vad Àr ett WordPress Child Theme? Fördelar, nackdelar och mer.

Krav

En grundlÀggande förstÄelse av CSS / HTML krÀvs sÄ att du kan göra dina egna Àndringar. Viss kunskap om PHP kan verkligen hjÀlpa. Om du Àr bra pÄ att kopiera och klistra in kodavsnitt frÄn andra kÀllor, skulle det ocksÄ fungera.

Vi rekommenderar att du övar pÄ din lokala utvecklingsmiljö. Du kan flytta en levande WordPress-webbplats till lokal server för testÀndamÄl eller anvÀnda dummyinnehÄll för temautveckling.

Komma igÄng

Varje bra WordPress-tema kan anvÀndas som överordnat tema. Det finns dock mÄnga olika typer av teman och vissa kanske inte Àr de enklaste att arbeta med. För denna handledning kommer vi att anvÀnda, vilket Àr ett av WordPress-teman som standard.

Skapa ditt första barns tema

Först mÄste du öppna / wp-content / themes / i din WordPress-installationsmapp och skapa en ny mapp för ditt barns thme. Du kan namnge den hÀr mappen vad du vill. För denna handledning kommer vi att namnge det wpbdemo.

Skapa ett nytt WordPress-barntema

Öppna en textredigerare som Anteckningar och klistra in den hĂ€r koden:


/*
 Theme Name:   WPB Child Theme
 Theme URI:    https://www.wpbeginner.com/
 Description:  A Twenty Thirteen child theme 
 Author:       WPBeginner
 Author URI:   https://www.wpbeginner.com
 Template:     twentythirteen
 Version:      1.0.0
*/

@import url("../twentythirteen/style.css");


Spara den hÀr filen som style.css i den underordnade temamappen du just skapade.

Det mesta av det hÀr i den hÀr filen Àr sjÀlvförklarande. Vad du verkligen vill uppmÀrksamma Àr.

Detta berĂ€ttar för WordPress att vĂ„rt tema Ă€r ett underordnat tema och att vĂ„rt förĂ€ldra temakatalognamn Ă€r tjugonde. Det överordnade mappnamnet Ă€r skiftlĂ€geskĂ€nsligt. Om vi ​​tillhandahĂ„ller WordPress med mall: TwentyThirteen, fungerar det inte.

Den sista raden i den hÀr koden importerar vÄrt överordnade temas formatmall till underordnat tema.

Detta Àr minimikravet för att skapa ett barntema. Du kan nu gÄ till Utseende »Teman dÀr du kommer att se WPB Child Theme. Du mÄste klicka pÄ aktivera-knappen för att börja anvÀnda barn-temat pÄ din webbplats.

Aktiverar ditt WordPress-barns tema

Eftersom du inte har Àndrat nÄgonting i ditt barns tema Ànnu, kommer din webbplats att anvÀnda all funktionalitet och utseende pÄ dess överordnade tema.

Anpassa ditt barns tema

Varje WordPress-tema har en style.css-fil i sin huvudkatalog. För det mesta Àr detta ditt temas huvudsakliga formatmall dÀr all CSS gÄr. Vissa teman kan emellertid bara innehÄlla temas rubrikinformation. SÄdana teman har vanligtvis CSS-filer i en separat katalog.

För detta avsnitt behöver du lite CSS-kunskap.

Google Chrome och Firefox levereras med inbyggda inspektörverktyg. Dessa verktyg lÄter dig titta pÄ HTML och CSS bakom alla element pÄ en webbsida.

Om du vill se CSS som anvÀnds för navigeringsmenyn, ta bara med musen till navigeringsmenyn och högerklicka för att vÀlja Inspektera element.

AnvÀnda verktyget Inspektera element i Google Chrome

Detta kommer att dela din webblÀsarskÀrm i tvÄ delar. I den nedre delen av skÀrmen ser du HTML och CSS för sidan.

Chrome-inspektör som visar renderade HTML- och CSS-stilregler

NÀr du flyttar musen pÄ olika HTML-linjer markerar Chrome-inspektören dem i det övre fönstret. Som du kan se att vi har navigeringsmenyn valt i skÀrmdumpen ovan.

Det visar dig ocksÄ CSS-reglerna relaterade till det markerade elementet i fönstret till höger.

Du kan försöka redigera CSS dÀr för att se hur det skulle se ut. LÄt oss försöka Àndra bakgrundsfÀrgen pÄ .navbar till # e8e5ce.

Leker med CSS i Chrome Inspector

Du kommer att se att bakgrundsfÀrgen pÄ navigeringsfÀltet kommer att Àndras. Om du gillar det hÀr kan du kopiera den hÀr CSS-regeln och klistra in i ditt barns temas style.css-fil.


.navbar {
background-color: #e8e5ce;
}

Spara Àndringarna du gjort i filen style.css och förhandsgranska sedan din webbplats.

Upprepa processen för allt som du vill Àndra i temat stilformat. HÀr Àr det fullstÀndiga formatmallen som vi har skapat för underordnat tema. Testa gÀrna och modifiera det.


/*
 Theme Name:   WPB Child Theme
 Theme URI:    https://www.wpbeginner.com
 Description:  A Twenty Thirteen child theme 
 Author:       WPBeginner
 Author URI:   https://www.wpbeginner.com
 Template:     twentythirteen
 Version:      1.0.0
*/

@import url("../twentythirteen/style.css");

.site-title {
padding: 30px 0 30px;
}

.site-header .home-link {
min-height: 0px;
}

.navbar {
background-color: #e8e5ce;
}

.widget { 
background-color: #e8e5ce;
}
.site-footer {
background-color: #d8cdc1;
} 
.site-footer .sidebar-container { 
background-color:#533F2A
}


Redigera mallfilerna

Tjugo tretton layout

Varje WordPress-tema har olika layout. LÄt oss titta pÄ layouten för Twenty Thirteen-temat. Du har sidhuvud, navigeringsmenyer, innehÄllsslinga, sidfots widgetomrÄde, sekundÀrt widgetomrÄde och sidfot.

Var och en av dessa avsnitt hanteras av olika filer i mappen tretton. Dessa filer kallas mallar.

För det mesta Àr dessa mallar uppkallade efter det omrÄde de anvÀnds för. Till exempel hanteras sidfoten vanligtvis av footer.php-filen, sidhuvud och navigeringsomrÄden hanteras av header.php-fil. Vissa omrÄden, som innehÄllsomrÄdet, hanteras av flera filer som kallas innehÄllsmallar.

Först mÄste du vÀlja att vÀlja temafilen du vill Àndra och sedan kopiera den till ditt barns tema.

Du vill till exempel ta bort lĂ€nken ‘powered by WordPress’ frĂ„n sidfoten och lĂ€gga till ett copyrightmeddelande dĂ€r. Kopiera bara footer.php-filen i ditt barns tema och öppna den sedan i en textredigerare som anteckningsblock. Ta reda pĂ„ raderna du vill ta bort och ersĂ€tt dem med dina egna. SĂ„ hĂ€r:


<?php
/**
 * The template for displaying the footer
 *
 * Contains footer content and the closing of the #main and #page div elements.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */
?>

		</div><!-- #main -->
		<footer id="colophon" class="site-footer" role="contentinfo">
			<?php get_sidebar( 'main' ); ?>

			<div class="site-info">
				<p>&copy; Copyright <?php echo date("Y"); ?> <?php bloginfo('name'); ?> All rights reserved.</p>
				
			</div><!-- .site-info -->
		</footer><!-- #colophon -->
	</div><!-- #page -->

	<?php wp_footer(); ?>
</body>
</html>


I den hÀr koden har vi ersatt Twenty Thirteen credits med ett copyright-meddelande.

Felsökning Àr mycket enklare nÀr du skapar underordnade teman. Till exempel om du av misstag raderade nÄgot som ditt förÀldratema krÀvde, kan du helt enkelt ta bort filen frÄn ditt barns tema och börja om.

LĂ€gga till ny funktionalitet i barnetema

Du hittar mÄnga WordPress-sjÀlvstudier som ber dig att kopiera och klistra in kodavsnittet i temas funktioner.php-fil.

Att lÀgga till kodavsnitt i ett överordnat temas funktioner.php-fil betyder att dina Àndringar kommer att skrivas över nÀr det finns en ny uppdatering för det överordnade temat. Det Àr dÀrför det alltid rekommenderas att anvÀnda ett underordnat tema och lÀgga till alla dina anpassade kodavsnitt i underordnade temas funktioner.php-fil.

LÄter oss skapa en ny fil i ditt barns temat mapp och namnge den funktioner.php. I det hÀr exemplet ska vi lÀgga till ett litet kodavsnitt som Àndrar standardhuvudbilden till vÄr egen skrÀddarsydda bild.

Vi har redan skapat en rubrikbild och en miniatyrbild genom att redigera Twenty Thirteen standardhuvudbild. DÀrefter laddade vi upp det till vÄrt barns tema inuti / bilder / rubriker / mapp.

DÀrefter mÄste vi be WordPress att anvÀnda den hÀr bilden som standardhuvudbild för vÄrt tema. Vi kan göra det genom att lÀgga till det hÀr kodavsnittet i vÄrt barns temafunktioner.php-fil:


<?php
function wpbdemo_custom_header_setup() { 

	add_theme_support( 'custom-header', array( 'default-image' => '%s/images/headers/circle-wpb.png' ) );

	register_default_headers( array(
	    'caramel' => array(
	        'url'           => '%2$s/images/headers/circle-wpb.png',
	        'thumbnail_url' => '%2$s/images/headers/circle-wpb-thumbnail.png',
	        'description'   => __( 'Caramel', 'Caramel header', 'twentythirteen' )
	    ),
	) );

} 
add_action( 'after_setup_theme', 'wpbdemo_custom_header_setup' );
?>

Nu om du besöker Utseende »Rubrik, kommer du att kunna se bilden som vi lade till som standardbild.

Ändrar temahuvud i ditt WordPress-barntema

Du kan lÀgga till valfritt anpassat kodavsnitt du behöver i ditt barns temas funktioner.php-fil. Kolla in dessa 25+ extremt anvÀndbara knep för WordPress-funktionsfilen.

Felsökning

Som nybörjare förvÀntas du göra misstag nÀr du arbetar med ditt första barns tema. Ge bara inte upp för snabbt. Kolla in vÄr lista över vanligaste WordPress-fel för att hitta en lösning.

Det vanligaste felet som du skulle se Àr förmodligen syntaxfelet som vanligtvis intrÀffar nÀr du har missat nÄgot i koden. HÀr Àr en snabbguide som förklarar hur du hittar och fixar syntaxfelet i WordPress.

Slutresultat

Ett enkelt WordPress-barntema baserat pÄ Twenty Thirteen

Ladda ner demo-tema

Du kan ladda ner slutresultatet av vÄr WordPress-tematutorial för barn genom att klicka hÀr. Kom ihÄg att detta Àr ett mycket grundlÀggande barntema baserat pÄ tjugo tretton.

Andra barnteman baserade pÄ tjugo tretton

HÀr Àr nÄgra andra WordPress-barnteman baserade pÄ Twenty Thirteen. Ta en titt pÄ dem och se hur dessa temautvecklare anpassade Twenty Thirteen.

Holi

Holi - Ett WordPress-barntema baserat pÄ Twenty Thirteen

körsbÀrsblom

Cherry Blossom - Twenty Thirteen Child Theme

2013 BlÄ

2013 BlÄ

Platt portfölj

Platt portfölj

Vi hoppas att den hÀr artikeln hjÀlpte dig att lÀra dig att skapa ett WordPress-barntema. Kom ihÄg att det finns gott om support tillgÀngligt för dem som behöver det.

Om du gillade den hÀr artikeln, prenumerera sedan pÄ vÄr YouTube-kanal för WordPress-sjÀlvstudier. Du kan ocksÄ hitta oss pÄ Twitter och Google+.