چطور در وردپرس یک پوسته فرزند بسازیم؟

در این مقاله شما با اصول سفارشی سازی پوسته‌های وردپرس از طریق پوسته‌های فرزند وردپرس آشنا میشین.

پوسته فرزند وردپرس

به طور خلاصه، پوسته فرزند وردپرس، یک پوسته جداگانه است که تمام عملکرد و طراحی‌اش را از قالب اصلی به ارث برده است. اساسا پوسته‌های فرزند وردپرس به شما اجازه میدهند که فانکشن‌ها، html یا استایل‌ها را بدون ایجاد تغییر در فایل‌های اصلی، اصلاح کنین.

چرا باید از پوسته‌های فرزند استفاده کنیم؟

چون به سادگی نتیجه میده. حتی درمورد بهترین پوسته‌ها در جهان هم همیشه چیزهای کوچک زیادی وجود داره که ما می‌خواهیم تغییرشون بدیم. تقریبا همه کاربران، کم و بیش، پوسته‌ها رو سفارشی میکنن. اما همیشه یک مشکل بزرگ وجود داره – چطور وقتی نسخه جدید موجوده، پوسته رو به‌روز رسانی کنیم؟ این دقیقا همون جاییه که پوسته‌های فرزند خیلی به کارمون میان. چون در پوسته فرزند میتونین تقریبا هرچیزی رو که می‌خواهین تغییر بدین، بدون این که نیازی به بازنویسی کدهای پوسته والد وردپرس داشته باشین. به این ترتیب هم از مشکلات جلوگیری میکنین و هم پوسته رو به راحتی به‌روز میکنین.

پوسته فرزند چطور کار میکنه؟

بعد از این‌که پوسته فرزند رو فعال کنین، در طول فرایند بارگذاری پوسته، وردپرس فایل‌های موجود در پوسته فرزند رو جست‌وجو میکنه. اگر فایلی وجود نداشته باشه، سیستم فایل مناسب رو از پوسته والد بارگذاری میکنه.

چطور پوسته فرزند بسازیم؟

برای شروع کار با پوسته فرزند ، شما باید ابتدا مسیر پوسته رو ایجاد کنین. در این مثال من از پوسته مدرسه PE استفاده میکنم.

در مسیر wp-content/themes/ یک پوشه جدید بسازین. برای نوشتن اسم، از فرمت themename-child استفاده کنین.
فایل style.css رو با این محتوا در پوسته فرزند ایجاد کنین:

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

Theme Name: PE School Child

Description: Child theme for PE School theme

Author: PixelEmu

Template: pe-school

پست پیشنهادی : آموزش حذف تصویر شاخص از صفحه نمونه کارها در پوسته وردپرس

پارامترهای Theme name و Template ضروری هستن

در قسمت Appearance > Themes پوسته فرزند رو فعال کنین.

اساسا مراحل همین ها هستن، حالا میتونین چیزها رو به روشی سریع و آسون تنظیم کنین!

چطور پوسته فرزند رو ویرایش کنیم؟

استایل سفارشی

اگر می‌خواهین استایل‌های css بیشتری به پوستهتون اضافه کنین، باید فایل functions.php رو در پوسته فرزند بسازین و فانکشن جدیدی رو اضافه کنین:

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

function peEnqueueStyles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

}

add_action( 'wp_enqueue_scripts', 'peEnqueueStyles' );

در این روش، وردپرس فایل style.css رو از پوسته والد بارگذاری میکنه. اگر میخواهین فایل رو از پوسته فرزند بارگذاری کنین، به جای

get_template_directory_uri() از

get_stylesheet_directory_uri() استفاده کنین.

به عنوان یک مثال، من بهتون نشون میدم که چطور آیکون css رو به پست چسبنده وردپرس اضافه کنین.

نمای وبلاگ وردپرس:

فایل functions.php در پوسته فرزند :

// 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 );

// 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 );

فایل style.css در پوسته فرزند :

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

.sticky .page-header h2 a:before {

color: red;

}

نتیجه:

آسونه نه؟ و مهم‌تر از همه این که نیازی به تغییر فایل‌‌های پوسته والد وردپرس نیست!

تغییر فایل‌های قالب وردپرس

اگه میخواهین بعضی از قسمت‌های قالب‌ها رو تغییر بدین، فقط فایل php جدید رو در مسیر پوسته فرزند ایجاد کنین.

برای مثال من نمای پست تکی (single.php) رو تغییر میدم.

پست پیشنهادی : آموزش ورود به سایت وردپرس

نمای پست تکی:

فایل single.php در پوسته فرزند :

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

<h2>Example modification :)</h2>
 
<?php get_template_part( 'tpl/content', 'single' ); ?>

<?php
endwhile;
endif;
?>

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

<h2>Example modification :)</h2>

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

<?php

endwhile;

endif;

البته ما میتونیم برای tpl/content-single.php استفاده شده در فانکشن get_template_part() ، override هم ایجاد کنیم.

<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>

</header>

<h3>another example</h3>

<?php if ( has_post_thumbnail() ) {

pe_show_thumbnail();

} ?>

<?php the_content(); ?>

</div>

نتیجه:

اینجا تعدادی فایل قالب وردپرس داریم که میتونین override کنین:

header.php

footer.php

index.php

single.php

page.php

و خیلی چیزهای بیشتر

تغییر فانکشن وردپرس

اگر بخواهین میتونین حتی فانکشن پوسته‌های وردپرس رو هم تغییر بدین. فقط فانکشن رو به فایل functions.php اضافه کنین.

برای مثال، بیاین دکمه readme در پوسته والد رو تغییر بدیم:

تغییرات در پوسته فرزند :

// 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' );

// readmore modification

function pe_read_more_link() {

return '<p class="pe-article-read-more">