نحوه ایجاد یک تم کودک وردپرس (راهنمای مبتدیان)

آیا به دنبال ایجاد یک تم کودک در وردپرس هستید؟

هنگامی که اصول وردپرس را یاد گرفتید، احتمالاً می خواهید یاد بگیرید که چگونه سایت وردپرس خود را سفارشی کنید. تم های کودک یک نقطه شروع عالی برای هر کسی است که به دنبال سفارشی کردن تم های وردپرس است.

در این مقاله از ایوسی نحوه ایجاد تم کودک در وردپرس را به شما نشان خواهیم داد.

چرا به تم کودک نیاز دارید؟

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

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

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

هنگامی که از طرح زمینه فرزند خود راضی بودید، حتی می توانید از آن در سایت وردپرس دیگری استفاده کنید .

قبل از اینکه شروع به ایجاد یک تم کودک کنید

برای ایجاد یک تم کودک، باید توجه داشته باشید که با کد کار خواهید کرد. برای اینکه بفهمید برای دستیابی به اهداف خود باید چه تغییراتی در کد ایجاد کنید، به درک اولیه ای از HTML و CSS نیاز دارید .

دانش PHP نیز مفید است. حداقل باید با کپی و چسباندن قطعه کد از منابع دیگر آشنا باشید.

توصیه می کنیم در محیط توسعه محلی خود تمرین کنید . می توانید یک سایت وردپرس زنده را برای اهداف آزمایشی به یک سرور محلی منتقل کنید یا از محتوای ساختگی برای توسعه تم استفاده کنید .

در نهایت، شما باید در مورد یک موضوع والدین تصمیم بگیرید. شما باید طرح زمینه والدینی را انتخاب کنید که از نظر ظاهری و ویژگی‌ها مشابه هدف نهایی شما باشد. هدف این است که تا حد امکان تغییرات کمتری ایجاد کنیم.

در این مقاله از تم Twenty Twenty-One که یکی از تم های پیش فرض وردپرس است استفاده خواهیم کرد.

ایجاد تم اولین فرزند شما

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

روش دستی مفید است زیرا به شما کمک می کند تا در ادامه آموزش با فایل هایی که باید با آنها کار کنید آشنا شوید. اگر در ایجاد آن فایل ها مشکل دارید، می توان از روش افزونه استفاده کرد.

شما فقط باید از یک روش استفاده کنید و می توانید با استفاده از پیوندهای زیر به روشی که ترجیح می دهید بروید:

• روش ۱: ایجاد یک تم کودک با استفاده از کد
• روش ۲: ایجاد یک تم کودک با استفاده از یک پلاگین

روش ۱: ایجاد یک تم کودک با استفاده از کد

ابتدا باید /wp-content/themes/ را در پوشه نصب وردپرس خود باز کنید و یک پوشه جدید برای تم فرزند خود ایجاد کنید.

شما می توانید این پوشه را هر چیزی که می خواهید نام گذاری کنید. برای این آموزش نام آن را wpbdemo می گذاریم.

در مرحله بعد، باید دو فایل اول را برای تم فرزند خود ایجاد کنید. با باز کردن یک ویرایشگر متن مانند Notepad شروع کنید.

سپس باید کد زیر را در سند خالی قرار دهید:

Theme Name:   WPB Child Theme
Theme URI:    https://ivsi.ir/
Description:  A Twenty Twenty-One child theme
Author:       ivsi.ir
Author URI:   https://ivsi.ir/
Template:     twentytwentyone
Version:      ۱.۰.۰
Text Domain:  twentytwentyonechild

این کد حاوی اطلاعاتی در مورد موضوع کودک است، بنابراین با خیال راحت آن را تغییر دهید تا نیازهای خود را برآورده کند. اکنون این فایل را به عنوان style.css در پوشه فرزند تم که ایجاد کردید ذخیره کنید. این صفحه سبک اصلی تم فرزند شما است.

کاری که باید انجام دهید این است که یک فایل دوم ایجاد کنید که شیت‌ها را از موضوع اصلی وارد یا در صف قرار دهد. برای انجام این کار، یک سند جدید در ویرایشگر متن خود ایجاد کنید و کد زیر را اضافه کنید:

/* enqueue scripts and style from parent theme */

function twentytwentyone_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'twenty-twenty-one-style' ), wp_get_theme()->;get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

این کد زمانی کار می کند که از Twenty Twenty-One به عنوان موضوع اصلی استفاده کنید. اگر از تم والد متفاوتی استفاده می کنید، باید از کدهای متفاوتی استفاده کنید که در کتابچه راهنمای قالب وردپرس توضیح داده شده است .

اگر در تغییر کد برای یک تم والد دیگر مشکل دارید، ممکن است بخواهید به جای آن از روش افزونه استفاده کنید.

اکنون این فایل را به عنوان functions.php در پوشه فرزند خود ذخیره کنید. ما بعداً به این فایل باز خواهیم گشت تا قابلیتی به طرح زمینه فرزند شما اضافه کنیم.

نکته: در گذشته تم والد با استفاده از دستور @import در style.css وارد می شد. ما دیگر این روش را توصیه نمی کنیم زیرا زمان مورد نیاز برای بارگذاری شیوه نامه ها را افزایش می دهد.

شما اکنون یک تم کودک بسیار ابتدایی ایجاد کرده‌اید، و وقتی به Appearance » Themes بروید ، باید WPB Child Theme را ببینید. برای شروع استفاده از طرح زمینه کودک در سایت خود، باید روی دکمه «فعال کردن» کلیک کنید.

از آنجایی که هنوز چیزی در طرح زمینه فرزند خود تغییر نداده اید، سایت شما از عملکرد و ظاهر طرح زمینه اصلی خود استفاده خواهد کرد. اکنون می توانید به بخش بعدی بروید، جایی که تم کودک را سفارشی می کنید.

روش ۲: ایجاد یک تم کودک با استفاده از یک پلاگین

Child Theme Configurator یک افزونه وردپرس با کاربری آسان است که به شما امکان می دهد بدون استفاده از کد، تم های فرزند وردپرس را به سرعت ایجاد و سفارشی کنید.

اولین کاری که باید انجام دهید این است که افزونه Child Theme Configurator را نصب و فعال کنید . برای جزئیات بیشتر، راهنمای گام به گام ما در مورد نحوه نصب افزونه وردپرس را ببینید .

هنگام فعال‌سازی، باید به Tools » Child Themes در داشبورد وردپرس خود بروید.

در برگه Parent/Child، از شما خواسته می شود که یک تم والد را از منوی کشویی انتخاب کنید. ما موضوع بیست و بیست و یک را انتخاب می کنیم.

پس از کلیک بر روی دکمه “تجزیه و تحلیل”، افزونه مطمئن می شود که تم برای استفاده به عنوان یک تم والد مناسب است.

بیست و بیست و یک اشکالی ندارد.

در مرحله بعد، از شما خواسته می‌شود که نام پوشه‌ای را که تم فرزند در آن ذخیره می‌شود، انتخاب کنید و محل ذخیره سبک‌ها را انتخاب کنید.

تنظیمات پیش فرض را رها می کنیم.

در بخش بعدی، از شما خواسته می شود نحوه دسترسی به شیوه نامه تم والد را انتخاب کنید.

باز هم با تنظیمات پیش فرض پیش می رویم.

وقتی به بخش ۷ رسیدید، باید روی دکمه با عنوان “برای ویرایش ویژگی های تم کودک کلیک کنید” کلیک کنید.

سپس می توانید جزئیات طرح زمینه کودک خود را پر کنید.

وقتی طرح زمینه فرزند را به صورت دستی ایجاد می کنید، منوها و ابزارک های طرح زمینه اصلی را از دست می دهید. Child Theme Configuratator می تواند آنها را از طرح زمینه اصلی به طرح زمینه فرزند کپی کند.

اگر می‌خواهید این کار را انجام دهید، کادر بخش ۸ را علامت بزنید.

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

قبل از اینکه تم را فعال کنید، باید روی پیوند نزدیک بالای صفحه کلیک کنید تا پیش نمایش آن را مشاهده کنید و مطمئن شوید که ظاهر خوبی دارد و سایت شما را خراب نمی کند.

اگر به نظر می رسد همه چیز کار می کند، روی دکمه «فعال و انتشار» کلیک کنید.

اکنون، طرح زمینه فرزندتان فعال خواهد شد.

در این مرحله، تم فرزند دقیقاً شبیه تم اصلی به نظر می رسد و رفتار می کند. بعد، ما شروع به سفارشی کردن آن خواهیم کرد.

سفارشی کردن تم کودک

اکنون تم فرزند را به گونه‌ای سفارشی می‌کنیم که کمی متفاوت از موضوع اصلی به نظر برسد. ما این کار را با افزودن کد به فایل style.css انجام می دهیم و این نیاز به آشنایی با CSS دارد .

می‌توانید با کپی و اصلاح کد موجود از موضوع اصلی، فرآیند را ساده کنید. می توانید آن کد را با استفاده از ابزار بازرسی کروم یا فایرفاکس یا با کپی کردن مستقیم از فایل style.css تم اصلی پیدا کنید.

روش ۱: کپی کد از Chrome یا Firefox Inspector

ساده ترین راه برای کشف کد CSS که باید تغییر دهید، استفاده از ابزارهای بازرسی است که با Google Chrome و Firefox ارائه می شود. این ابزارها به شما این امکان را می دهند که به HTML و CSS پشت هر عنصر یک صفحه وب نگاه کنید.

به عنوان مثال، اگر می خواهید CSS مورد استفاده برای متن پست را مشاهده کنید، به سادگی ماوس خود را روی پست ببرید و برای انتخاب Inspect کلیک راست کنید.

با این کار صفحه مرورگر شما به دو قسمت تقسیم می شود. در پایین صفحه، HTML و CSS صفحه را خواهید دید.

بسته به تنظیمات مرورگر شما، HTML و CSS ممکن است در سمت راست صفحه ظاهر شوند.

همانطور که ماوس خود را روی خطوط مختلف HTML حرکت می دهید، بازرس کروم آنها را در پنجره بالا برجسته می کند. همچنین قوانین CSS مربوط به عنصر برجسته شده را به شما نشان می دهد.

می توانید سعی کنید CSS را همانجا ویرایش کنید تا ببینید چگونه به نظر می رسد. بیایید سعی کنیم رنگ پس زمینه بدنه را به #fdf8ef تغییر دهیم.

خواهید دید که رنگ پس زمینه صفحه تغییر می کند، اما تغییر موقتی است.

برای دائمی کردن آن، باید این قانون CSS را کپی کرده و در فایل style.css تم فرزند خود جایگذاری کنید.

body {
background-color: #fdf8ef;
}

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

می‌توانید برای هر چیزی که می‌خواهید در شیوه نامه طرح زمینه خود تغییر دهید، روند را تکرار کنید. در اینجا شیوه نامه کاملی است که ما برای تم کودک ایجاد کرده ایم. با خیال راحت آزمایش کنید و آن را اصلاح کنید.

Theme Name:   WPB Child Theme
Theme URI:    https://ivsi.ir/
Description:  A Twenty Twenty-One child theme
Author:       ivsi.ir
Author URI:   https://ivsi.ir/
Template:     twentytwentyone
Version:      ۱.۰.۰
Text Domain:  twentytwentyonechild
*/

.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}

روش ۲: کپی کد از فایل style.css تم والدین

همچنین می توانید مقداری کد را مستقیماً از فایل style.css تم اصلی کپی کنید. سپس می توانید آن را در فایل style.css تم فرزند قرار داده و آن را تغییر دهید.

این به ویژه هنگام استفاده از Twenty Twenty-One به عنوان یک تم اصلی مفید است زیرا از متغیرهای CSS استفاده گسترده ای می کند.

به عنوان مثال، زمانی که رنگ پس‌زمینه صفحه را در بالا تغییر دادیم، کد اصلی این بود:

background-color: var(--global--color-background);

در اینجا، ‘-global-color-background’ یک متغیر است. متغیر را می توان در چندین مکان در سراسر موضوع استفاده کرد. برای تغییر رنگ در همه آن مکان ها به طور همزمان، شما به سادگی باید مقدار متغیر را تغییر دهید.

شما باید به مسیر /wp-content/themes/twentytwentyone در پوشه نصب وردپرس خود بروید و سپس فایل style.css را در ویرایشگر متن خود باز کنید. سپس می توانید محل تعریف پس زمینه –global–color- را پیدا کنید.

--global--color-background: var(--global--color-green);

متوجه شدیم که متغیر توسط متغیر دیگری تعریف شده است!

در واقع، در قسمت :root از style.css تم اصلی، طیف وسیعی از متغیرهای رنگی تعریف شده را پیدا می کنیم. این پالت رنگی است که توسط تم بیست و یکم استفاده می شود.

:root {
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
}

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

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

سپس آن رنگ‌ها به‌طور خودکار در چندین مکان در سراسر طرح زمینه کودک شما استفاده می‌شوند. این نه تنها سریع‌تر است، بلکه رنگ‌های تم شما را هماهنگ‌تر می‌کند.

ماجراجو باشید. لازم نیست متغیر رنگ سبز سبز باشد.

شما می توانید همین کار را برای سایر متغیرها انجام دهید. Twenty Twenty-One’s style.css متغیرهایی را برای خانواده فونت ها و اندازه ها، عنوان ها، فاصله بین خطوط و موارد دیگر فهرست می کند. می توانید هر یک از این موارد را در فایل style.css جدید خود کپی کنید، جایی که می توانید آنها را سفارشی کنید.

ویرایش فایل های قالب

هر قالب وردپرس طرح بندی متفاوتی دارد. به عنوان مثال، تم بیست و یک دارای سرصفحه، حلقه محتوا، ناحیه ویجت پاورقی و پاورقی است.

هر بخش توسط یک فایل متفاوت در پوشه twentywentyone مدیریت می شود. به این فایل ها قالب می گویند .

قالب ها معمولاً بر اساس منطقه ای که برای آن استفاده می شوند نامگذاری می شوند. به عنوان مثال، بخش پاورقی معمولاً توسط فایل footer.php مدیریت می شود و قسمت سرصفحه و ناوبری توسط فایل header.php مدیریت می شود.

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

اگر می خواهید یک الگو را تغییر دهید، ابتدا فایل را در پوشه تم والد پیدا کرده و در پوشه تم فرزند کپی کنید. پس از آن، باید فایل را در یک ویرایشگر متن باز کنید و تغییرات مورد نظر خود را انجام دهید.

در این آموزش فایل footer.php را از پوشه theme والد در پوشه child theme کپی می کنیم. پس از انجام این کار، باید فایل را در یک ویرایشگر متن ساده مانند Notepad باز کنید.

به عنوان مثال، پیوند “با افتخار توسط وردپرس” را از قسمت پاورقی حذف می کنیم و یک اعلامیه حق چاپ را در آنجا اضافه می کنیم. برای انجام این کار، باید هر چیزی که بین تگ‌های <div class= “powered-by”> وجود دارد را حذف کنید.

<div class="powered-by">
<?php
printf(
/* translators: %s: WordPress. */
esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
);
?>
</div><!-- .powered-by -->

سپس باید کدی را که در زیر آن تگ ها در مثال زیر پیدا کرده اید، بچسبانید.

<div class="powered-by">
<p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
</div><!-- .powered-by -->

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

افزودن قابلیت های جدید به تم کودک شما

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

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

به همین دلیل است که توصیه می کنیم هنگام اضافه کردن قطعه کد سفارشی از یک تم کودک استفاده کنید. در این آموزش، یک ناحیه ویجت جدید به موضوع خود اضافه می کنیم.

ما می توانیم این کار را با افزودن این قطعه کد به فایل functions.php تم فرزندمان انجام دهیم. همچنین می‌توانید از افزونه WPCode برای اضافه کردن کد سفارشی در وردپرس استفاده کنید ، به این معنی که نیازی به ویرایش فایل توابع ندارید:

<?php
// Register Sidebars
function custom_sidebars() {

$args = array(
'id'            => 'custom_sidebar',
'name'          => __( 'Custom Widget Area', 'text_domain' ),
'description'   => __( 'A custom widget area', 'text_domain' ),
'before_title'  => '<h3 class="widget-title">',
'after_title'   => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget'  => '</aside>',
);
register_sidebar( $args );

}
add_action( 'widgets_init', 'custom_sidebars' );
?>

هنگامی که فایل را ذخیره کردید، می توانید به صفحه ظاهر » ابزارک ها در داشبورد وردپرس خود مراجعه کنید.

در اینجا، ناحیه ویجت سفارشی جدید خود را خواهید دید.

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

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

عیب یابی

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

رایج ترین خطاهایی که احتمالاً مشاهده خواهید کرد، خطاهای نحوی هستند که به دلیل چیزی که در کد از قلم افتاده است، ایجاد می شود. برای حل این مشکلات در راهنمای سریع ما در مورد نحوه یافتن و رفع خطای نحوی در وردپرس راهنمایی خواهید یافت .

شما همیشه می توانید دوباره شروع کنید، اگر مشکلی پیش آمد. به عنوان مثال، اگر به طور تصادفی چیزی را حذف کردید که موضوع اصلی شما به آن نیاز داشت، می توانید به سادگی فایل را از طرح زمینه فرزند خود حذف کنید و دوباره شروع کنید.

امیدواریم این آموزش به شما کمک کرده باشد که چگونه یک تم کودک وردپرس ایجاد کنید. همچنین ممکن است بخواهید یاد بگیرید که چگونه بهترین سازنده وب سایت را انتخاب کنید یا لیست ما از افزونه های ضروری وردپرس را برای رشد سایت خود بررسی کنید .

و بخوانید:

• گزینه های تم در وردپرس چیست؟
• ۲۵ بهترین قالب وردپرس یک صفحه ای 
• مقایسه ۲۱ بهترین تم های وردپرس برای برنامه ها 
• ۲۷ بهترین قالب وردپرس نمونه کارها برای وب سایت شما
• تم کودک در وردپرس چیست؟