Skip to main content

GET ALL WORDPRESS THEMES - ONLY €59.00 (15 WordPress Pixelemu themes) Read more

WordPress Basics Documentation

Jak utworzyć motyw podrzędny?

W tym artykule dowiesz się o podstawach dostosowywania motywu WordPress za pomocą motywów podrzędnych WordPress.

Motyw podrzędny WordPress

W skrócie, motyw podrzędny WordPress jest oddzielnym motywem, który dziedziczy całą funkcjonalność i wygląd z motywu nadrzędnego. Zasadniczo, motywy dzieci WordPress pozwalają na modyfikację funkcji, html lub stylów w motywie bez zmian w oryginalnych plikach.

Dlaczego powinienem używać motywów podrzędnych?

Bo to się po prostu opłaca. Nawet najlepszy motyw na świecie, zawsze znajdzie się wiele drobiazgów, które chcielibyśmy zmienić. Prawie wszyscy klienci w mniejszym lub większym stopniu dostosowują motywy. Ale zawsze jest jeden, ogromny problem - jak zaktualizować motyw WordPress, gdy jest dostępna nowa wersja? To jest moment, w którym motywy podrzędne są bardzo pomocne. Ponieważ możesz modyfikować (prawie) wszystko, co chcesz w motywie podrzędnym, zamiast nadpisywać oryginalny, macierzysty kod motywu WordPress. W ten sposób unikniesz problemów i z łatwością zaktualizujesz motyw.

Jak działa motyw podrzędny?

Gdy motyw podrzędny jest aktywowany, WordPress szuka plików w motywie podrzędnym jako pierwszy podczas procesu ładowania motywu. Jeśli plik nie istnieje, system załaduje odpowiedni plik z motywu nadrzędnego.

Jak stworzyć motyw podrzędny?

Aby rozpocząć pracę z motywem podrzędnym musisz najpierw utworzyć katalog motywu. W tym przykładzie użyję motywu PE School.

1. Utwórz nowy folder w katalogu 'wp-content/themes/'. Używanie nazwy w formacie 'themename-child' jest dobrą praktyką.

2. Utwórz plik 'style.css' w motywie podrzędnym z zawartością:

/*
Theme Name: PE School Child
Description: Child theme for PE School theme
Author: PixelEmu
Template: pe-school
*/

Parametry 'Theme name' i 'Template' są wymagane.

3. Aktywuj motyw podrzędny w Wygląd > Motywy.

WordPress child theme

W zasadzie to wszystko, teraz można dostosować rzeczy w szybki i łatwy sposób!

Jak edytować motyw podrzędny?

a) Stylizacja niestandardowa

Jeśli chcesz dodać dodatkowe style CSS w swoim motywie, powinieneś utworzyć plik 'functions.php' w motywie podrzędnym i dodać nową funkcję:

function peEnqueueStyles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'peEnqueueStyles' );

W ten sposób WordPress załaduje plik 'style.css' z motywu nadrzędnego. Jeśli chcesz załadować plik z motywu podrzędnego użyj 'get_stylesheet_directory_uri()' zamiast 'get_template_directory_uri()'.

Jako przykład pokażę, jak dodać css dla ikony dla WordPress sticky post.

Widok bloga WordPress:

wordpress sticky post icon

'plik 'functions.php' w motywie podrzędnym:

// additional stylesheets
if( !function_exists('load_child_theme_styles') ) {
function load_child_theme_styles() {
if ( !is_admin() ){
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/custom-style.css' );
}
}
}
add_action( 'wp_enqueue_scripts', 'load_child_theme_styles', 20 );

Plik 'style.css' w motywie podrzędnym:

.sticky .page-header h2 a:before {
color: red;
}

Wynik:

wp sticky post icon

Łatwy? Tak i co najważniejsze, nie trzeba modyfikować oryginalnych plików motywu WordPress!

b) Modyfikacja plików szablonu WordPress

Jeśli chcesz zmodyfikować niektóre części szablonu, po prostu utwórz nowy plik php w katalogu child theme. W przykładzie zmienię widok pojedynczego postu (single.php).

Widok pojedynczego postu:

wordpress Single post view

plik 'single.php' w motywie podrzędnym:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h2>Example modification :)</h2>

<?php get_template_part( 'tpl/content', 'single' ); ?>

<?php
endwhile;
endif;
?>

Oczywiście możemy również stworzyć nadpisanie dla pliku 'tpl/content-single.php' użytego w funkcji 'get_template_part()'.

<header class="page-header">

<h1><?php the_title(); ?></h1>

</header>

<h3>another example</h3>

<?php if ( has_post_thumbnail() ) {

pe_show_thumbnail();

} ?>
<div class="pe-article-content">

<?php the_content(); ?>

</div>

Wynik:

wordpress post template modify

Oto niektóre z plików szablonów WordPress, które możesz nadpisać:

  • header.php
  • footer.php
  • index.php
  • single.php
  • page.php
  • i wiele innych

c) Modyfikacja funkcji WordPressa

Jeśli chcesz możesz nawet zmodyfikować funkcje motywu WordPress. Wystarczy dodać funkcję w pliku 'functions.php'. 

Na przykład, zmodyfikujmy oryginalny przycisk readme w motywie nadrzędnym:

WordPress read more button

Modyfikacja w motywie podrzędnym:

// readmore modification
function pe_read_more_link() {
return '<p class="pe-article-read-more">
<a class="custom" href="' . get_permalink() . '">' . __('My custom read more', 'pe-school') . '</a>
</p>';
}
add_filter( 'the_content_more_link', 'pe_read_more_link' );

Wynik:

how to modify function for read more in wordpress

Podoba Ci się tutorial? Proszę udostępnij i oceń. Dzięki :)

Połączmy się:

INDICO S.C.

ul. Przyjaźni 9, 84-215 Gowino, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2021 Pixelemu.com All rights reserved.