خانه / آموزشی / آموزش ساخت child theme (قالب فرزند) و دلیل ساخت آن
آموزش ساخت child theme (قالب فرزند) و دلیل ساخت آن

آموزش ساخت child theme (قالب فرزند) و دلیل ساخت آن

طبق آخرین نظرسنجی وردپرس 85% کاربرا قالب اصلی خودشون رو تغییر میدن و فقط 35% از اونا از child theme یا قالب فرزند استفاده می کنند. این ممکنه بخاطر این باشه که خیلیا اصلا نمیدونن قالب فرزند (child theme) چی هست! یا اینکه با ساختنش مشکل دارن و براشون سخته. تو این آموزش ما یاد خواهیم گرفت که چطور یه قالب فرزند بسازیم و از اون استفاده کنیم، و اصلا چرا انجام این کار اینقدر مهمه.

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

icon-getting-started

چرا ساخت child theme ضررویه و بهتر ساخته بشه

ساخت یه قالب فرزند میتونه شما رو از کلی دردسر تو آینده نجات بده. قالب های فرزند به شما اجازه میده که قالب سایتتون رو بدون اینکه فایل اصلیتون تغییر کنه تغییر بدید، که کار آپدیت کردن قالب مادر (اصلی) رو خیلی آسون تر میکنه چون دیگه تغییراتتون از بین نمیره. با ساخت قالب فرزند شما فایل هایی جدا از قالب اصلی ایجاد می کنید که  کلا هیچ تغییری رو فایل اصلیتون نمیدن. با این کار نه تنها آپدیت کردن قالبتون آسون میشه، بلکه دیگه هیچ وقت شما قالب اصلیتون رو از دست نمی دید و یا خرابش نمی کنید که مجبور بشید دوباره نصبش کنید. تازه شما می تونید هر موقع که خواستید قالب فرزند رو غیر فعال کنید و قالب اصلی رو به کار برگردونید.

understand

برو که بریم برا شروع

تو این مثال من یه قالب فرزند برای قالب Foxy از الگانت تم می سازم. اول از همه باید یه پوشه جدید برای قالب فرزند بسازیم. اونو یچی مثل Foxy-child نام گذاری می  کنیم. تو پوشه قالب جدیدتون یه فایل با اسم style.css بسازید و اون رو با کد ها و اطلاعات زیر پر کنید. نوشتن اسم قالب، آدرس، توضیحات و نویسنده به خودتون بستگی داره می تونید ننویسیدشون.


/*
Theme Name:     Foxy Child Theme
Theme URI:      http://www.elegantthemes.com/gallery/foxy/
Description:    Foxy Child Theme
Author:         Elegant Themes
Author URI:     http://www.elegantthemes.com
Template:       Foxy
Version:        1.0.0
*/

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

/* =Theme customization starts here
------------------------------------------------------- */

قسمت های مهم این کد ها ” theme: ” و @import هست که هویت قالب مادر رو مشخص می کنه و حتما باید نوشته بشن. شما باید مطمئن بشید که آدرس استایل قالب مادر رو درست وارد کرده باشید و تو قسمت theme: اسم درست و دقیق قالب رو نوشته باشید. اگر از یه قالب دیگه استفاده می کنید کافیه اطلاعات مخصوص اون قالب رو وارد کنید. دقت کنید که این کد ها به حروف حساس هستن. مثلا پوشه قالب مادر ما اسمش Foxy هست با F بزرگ برای همین ما هم تو تکه کد import اونو با حروف بزرگ نوشتیم.

فعال کردن قالب فرزند

بعد از اینکه پوشه و فایل استایل قالب فرزندتون رو ساختید شما به راحتی می تونید اون رو آپلود کنید و بعد فعالش کنید.  فعال کردن قالب فرزند فرقی با قالب های معمولی نداره فقط کافیه به راحتی اون رو از قسمت نمایش -> پوسته ها و بارگذاری پوسته آپلود و فعالش کنید. قبل از آپلود یادتون باشه که قالب رو باید زیپ (فشرده) بکنید و اینکه مطمئن بشید که قالب مادر از قبل آپلود شده باشه.

 

icon-php

تغییر دادن فایل CSS قالب

حالا ما قالب فرزندمون رو ساختیم و اون رو آپلود کردیم. به دلیل اینکه تنها کاری که رو استایل کردیم اضافه کردن استایل قالب اصلی بود قالب فرزندمون هم الان دقیقا شبیه قالب اصلی هست. برای تغییر استایل قالب فرزندتون شما می تونید هر تغییر و کدی که دوست دارید رو زیر تکه کد @import اضافه کنید. تمام کد های جدید اضافه شده زیر کدهای استایل اصلی ایی که وارد کردید اضافه میشه و تمام کدهای جدید جایگزین کدهای قبلی میشه. برای مثال بزارید قسمت قیمت قالب رو تو صفحه اصلی کمی تغییر بدیم. در حال حاضر اون ذخیم و طوسی رنگ هست و ما می خوایم اون رو سبز و نازک بکنیمش. برای این کار کافیه کد css مورد نظرتون رو به استایل قالب فرزند اضافه کنید، مثل مثال پایین:


/*
 Theme Name:     Foxy Child Theme
 Theme URI:      http://www.elegantthemes.com/gallery/foxy/
 Description:    Foxy Child Theme
 Author:         Elegant Themes
 Author URI:     http://www.elegantthemes.com
 Template:       Foxy
 Version:        1.0.0
*/
 
@import url("../Foxy/style.css");
 
/* =Theme customization starts here
------------------------------------------------------- */
 
.et-price-sale { color: #5bbc26; font-weight: 300;}

 

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

price-change

icon-functions

ویرایش فایل Function.php

فایل فانکشن جاییه که تمام تنظیمات قالب تو اونجا ذخیره و نوشته شده. فایل فانکشن قالب معمولا با خود قالب فرزند لود میشه اما اگر می خواید تو این فایل هم کمی تغییرات ایجاد کنید باید اون رو هم مثل استایل تو پوشه قالب فرزند بسازیدش. فایل فانکشن فرعی بعد از فایل فانکشن اصلی لود میشه (مثل استایل) شما برای نوشتن کد تو فانکشن باید کد هاتون رو بین تگ های باز و بسته PHP این کار رو انجام بدید.


<?php
 
// کد های شما اینجا قرار میگیرن
 
?>

 

icon-css

تغییر فایل های دیگه قالب

کنار فایل استایل و تنظیمات قالب، شما می تونید فایل های دیگه قالبتون رو هم با ساخت فایل های PHP مثل فایل اصلیشون تغییر بدید. این کار باید با دقت انجام بشه، اما اگر بتونید اونا رو تغییر بدید شما می تونید هرجای قالبتون رو به راحتی تغییر بدید. برخلاف فایل فانکشن اصلی که خودش همراه با قالب فرزند لود می شود فایل های دیگه قالب لود نمیشن و کل فایل جدید به جای فایل اصلی نمایش داده میشه برا همین اولین کاری که باید انجام بدیم اینه که فایل های قالب اصلی رو تو قالب فرزند کپیشون کنیم. فکر نکنم دیگه این نیاز به توضیح داشته باشه کافیه فایل های اصلی رو کپی کنید و تو پوشه قالب فرزند بزاریمشون فقط حواستون باشه که آدرسشون مثل هم باشه مثلا اگر می خواید فایل Foxy/includes/navigation.php رو ویرایش کنید شما باید اون رو تو این آدرس کپی کنید foxy-child/includes/navigation.php.

 

folder-structure

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


<div class="pagination clearfix">
    <div class="alignleft"><?php next_posts_link(esc_html__('&laquo; Older Entries','Foxy')) ?></div>
    <div class="alignright"><?php previous_posts_link(esc_html__('Next Entries &raquo;', 'Foxy')) ?></div>
</div>

 

icon-resources

منابع اضافی جهت ساخت قالب فرزند

1. افزونه The One Click Child Theme – اگر شما با ساخت پوشه قالب فرزند مشکل دارید این افزونه با یه کلیک این کار رو براتون انجام میده.

2. رفتن به سایت WordPress Codex – توی سایت WordPress codex انواع اسناد و مطالب آموزشی وجود داره که شما می تونید دنبال هر سوالی مرتبط با این مطلب اونجا رو بگردید تا به جوابتون برسید.

3. جوانب مثبت و منفی قالب فرزند – درباره جوانب مثبت و منفی ساخت قالب فرزند سایت WP Beginner مطالب کاملی نوشته.

معذرت که منبع فارسی نزاشتم براتون، آخه گشتم اما چیز مناسبی پیدا نکردم که بزارم !

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

منبع: الگانت تم
نوشته شده توسط: Nick Roach
ترجمه و انتشار توسط: هادی صفرزاده (نگارش اصلی، با ذکر منبع کپی کنید)

درباره هادی صفرزاده

هادی صفرزاده هستم، برنامه نویس و طراح سایت از سال 86 در دنیای وب مشغول هستم. PHP - PYTHON - MYSQL - UI/UX

۹ دیدگاه

  1. سلام
    ممنون از توضیحات و راهنمایی های بسیار خوبتون:)

  2. من دارم با قالب دیوی این کارو میکنم
    اما برا من نشد !!!

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

    • سلام, احتمالا یجای کارتون اشتباس وگرنه آموزش کامل و مستقیم از سایت الگانت تم (سازنده قالب دیوی که گفتید) ترجمه شده و تو سایت گذاشته شده. دقت کنید که با قرار دادن کد توضیحات اول کدها قالب رو به وردپرس معرفی کنید

  4. سلام وقت بخیر

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

    من از قالب بی استفاده می کنم

  5. با سلام
    آموزش جامع و خیلی مفیدی بود
    ممنون از شما

نظر بدهید

آدرس ایمیلتان منتشر نمیشودگزینه های الزامی ستاره دار شده اند *

*

برو بالا !