ورود یا ثبت‌نام
وبمستران طلایی

جلسه 45: آموزش ساخت Child Theme یا چایلدتم برای قالب وردپرس

آموزش ساخت Child Theme
آموزش ساخت Child Theme

قبلاً به شما توضیح دادیم که چایلد تم چیست و چرا استفاده می‌شود اما در این پست قصد داریم در مورد آموزش ساخت Child Theme توضیح دهیم و اینکه چگونه می‌توان یک چایلد تم ایجاد کرد؟

درواقع یک چایلد تم حداقل از یک پوشه و دو فایل تشکیل می‌شود. که آن‌ها شامل پوشه اصلی چایلد تم، فایل style.css و فایل functions.php می‌شوند.

آموزش ساخت Child Theme یا چایلدتم

در ابتدا برای ساخت پوشه وارد پوشه wp-content/themes در فایل منیجر هاست شوید. بعدازآن شما باید نام پوشه قالب سایت‌تان را پیدا کنید. مثلاً نام پوشه قالب ما در اینجا mihanwp است. پس یک پوشه جدید در پوشه Themes به نام mihanwp-child ایجاد می‌کنیم. یعنی نام پوشه قالب و در انتهای آن -child را اضافه می‌کنیم.

ساخت پوشه چایلدتم
ساخت پوشه چایلدتم

اکنون وارد پوشه mihanwp-child می‌شویم و یک فایل به نام Style.css در این پوشه ایجاد می‌کنیم. سپس کدهای زیر را در آن کپی می‌کنیم:

/*
 Theme Name:   MihanWP Child
 Theme URI:    https://mihanwp.com
 Description:  MihanWP Child Theme
 Author:       MihanWP
 Author URI:   https://mihanwp.com
 Template:     mihanwp
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteenchild
*/

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

مهم‌ترین مورد در کد بالا عبارت Template: mihanwp هست که باید نام قالب اصلی خود را به جای mihanwp در آن قرار دهید.

اکنون می‌توانید بعدازاین کد، کدهای سی اس اس سفارشی خود را وارد کنید. اگر بیش از یک فایل سی اس اس در قالب اصلی و چایلد تم دارید، حالا باید این فایل را در سایت و قالب اصلی (قالب مادر) فراخوانی کنید. برای این کار باید یک فایل Functions.php در پوشه چایلد تم بسازید، و کد زیر را در آن قرار دهید تا فایل Style.css فراخوانی شود.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

فعال کردن چایلدتم

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

نمایش > پوسته‌ها
نمایش > پوسته‌ها

حالا چایلدتم وردپرس را مشاهده می‌کنید که باید فعالش کنید. به همین راحتی!

برای توضیحات بیشتر آموزش نصب چایلدتم وردپرس را ببینید.

اضافه کردن فایل استایل راست‌چین به قالب

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

اکنون شما می‌توانید هر فایلی که دوست دارید را در چایلد تم خود قرار دهید. به‌عنوان‌مثال فایل Header.php و Footer.php و خلاصه هر فایلی که نیاز به تغییر آن دارید را در چایلد تم خود کپی کنید، و تغییراتی که می‌خواهید را روی آن اعمال کنید.

موفق باشید.

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.

آموزش کامل وردپرس

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

پکیج آموزش کامل وردپرس

پیشنهادات آموزشی ما

همه پکیج های آموزشی
۴۸ نظر ارسال شده. شخص بعدی شما باشید.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. amin514 ۰۲ بهمن ۱۳۹۸

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

    پاسخ دادن
    • تیم پشتیبانی ۰۲ بهمن ۱۳۹۸

      با سلام و احترام
      آدرس سایت و اطلاعات ورود را به بخش پشتیبانی تیکت کنید تا مشکل شما توسط این بخش بررسی شود

      پاسخ دادن
  2. رضا ۰۲ بهمن ۱۳۹۸

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

    پاسخ دادن
    • حمید خاکسار ۰۲ بهمن ۱۳۹۸

      با سلام
      در پکیج آموزشی 0 تا 100 طراحی سایت جلسات آخر در خصوص Child Theme صحبت میکنیم

      پاسخ دادن
  3. naser ۰۲ بهمن ۱۳۹۸

    سلام، طبق آموزش شما تونستم فایل style.css قالب را سفارشی‌سازی کنم. از این روش میشه فایل‌های دیگه قالب را سفارشی کرد؛ مثل (404، footer، header، index) یا فایل‌های مربوط به پنل وردپرس (بخش ویرایشگر) مثل شورت‌کدها و …

    پاسخ دادن
    • رضا حسینی راد ۰۲ بهمن ۱۳۹۸

      درود برای ویرایش فایل های php قالب باید فانکشن اضافه کنید به فایل functions.php

      پاسخ دادن
      • naser ۰۲ بهمن ۱۳۹۸

        سلام، یعنی برای اضافه کردن فایل header.php به چایلد تم قالب، بایستی با یک کد، فایل header.php را در فایل functions.php فراخوانی کنیم؟ و فایل functions.php نیز در خود چایلد تم ساخته شود؟ منظور شما همین بود؟ دقیقاً مانند کد php که برای style.css در مقاله اشاره کرده‌اید؟

        پاسخ دادن
  4. sajjad_moradi ۰۲ بهمن ۱۳۹۸

    با سلام و خسته نباشید
    اگر نخواهیم از css استفاده کنیم باز هم نیاز به ساخت چایلدتم هست؟
    مثلا تنظیمات قالب و افزونه ها در هنگام آپدیت از بین میروند؟ منظورم تنظیماتی است که از بخش تنظیمات قالب یا افزونه وارد کرده ایم میباشد

    پاسخ دادن
    • رضا حسینی راد ۰۲ بهمن ۱۳۹۸

      سلام خیر نیازی نیست. خیر بهم نمیریزه تنظیمات با اپدیت

      پاسخ دادن
  5. naser ۰۲ بهمن ۱۳۹۸

    سلام، برای افزونه هم میشه اینکارو کرد؟
    من از افزونه better-amp استفاده می‌کنم، متاسفانه هنگام مشاهده سایت در حالت amp فونت‌ها لود نمی‌شوند و css بسیار ضعیفی هم استفاده شده و درکل خیلی زشت دیده میشه.
    اگر امکانش هست راهنمایی کنید، در ضمن من از قالب پابلیشر خود شما استفاده می‌کنم

    پاسخ دادن
    • رضا حسینی راد ۰۲ بهمن ۱۳۹۸

      سلام خیر متاسفانه پلاگین قابلیت نصب چایلد تم ندارد.

      پاسخ دادن
  6. naser ۰۲ بهمن ۱۳۹۸

    فقط به یه مشکل خوردم اونم سایت بدون css بارگذاری میشد. و با اضافه کردن Template: “نام قالب مادر” به فایل style.css مشکل حل شد. در فایل شما این مورد وجود نداشت. الان همه چیز خوبه و درست کار میکنه.

    پاسخ دادن
  7. sali ۰۲ بهمن ۱۳۹۸

    سلام و ممنون از شما
    اگر بخوایم css های داخل فولدرهای دیگر رو تغییر بدیم چه باید بکنیم؟؟ یعنی مثلا یه style.css دیگه ای توی پوشه ای به نام css باشه و در مسیر اصلی تمپلیت نباشه!
    مرسی

    پاسخ دادن
    • محمد مقدم ۰۲ بهمن ۱۳۹۸

      سلام
      css ها را در فایل rtl.css بنویسید اعمال میشود.

      پاسخ دادن
  8. farhad ۰۲ بهمن ۱۳۹۸

    سلام
    تغییراتی که با wpbakery روی قالب انجام میشه روی قالب فرزند اعمال میشه؟ یا فقط باید فقط به صورت دستی کدهای css روی قالب بنویسیم

    پاسخ دادن
    • محمد مقدم ۰۲ بهمن ۱۳۹۸

      سلام
      بله اعنال میشود.

      پاسخ دادن
  9. ehsanfotoo39 ۰۲ بهمن ۱۳۹۸

    اینجوری سی اس اس تعریف کردم اما باز هم تغییری نکرد:
    #footer{
    background: #202736 !important;
    }

    پاسخ دادن
    • محمد مقدم ۰۲ بهمن ۱۳۹۸

      1- کش مرورگرتان را پاک کنید یا با سیستم دیگری تست کنید.
      2- اطمینان حاصل کنید فوترتان با آیدی کد نویسی شد باشد. اگر اینچنین نبود از سلکتور . استفاده کنید.

      پاسخ دادن
  10. ehsanfotoo39 ۰۲ بهمن ۱۳۹۸

    سلام
    قالب اصلی من در روتش یک style.css دارد که استایل اصلی قالب است و یک فولدر به نام css دارد که چندین فایل css درونش وجود دارند. آیا باید تمام این استایل ها را در فایل فانکشن قالب فرزند تعریف کنم؟
    الان دقیقاً کارهایی که گفتید را انجام دادم و قالب فرزند را فعال کردم و اروری هم دریافت نکردم اما هر تغییری که در قالب فرزند میدهم ، در سایتم ایجاد نمیشود. مثلاً رنگ فوتر را تغییر میدهم ، سایر فونت ها را تغییر میدهم اما قالب سایت هیچ تغییری نمیکند.

    پاسخ دادن
    • رضا حسینی راد ۰۲ بهمن ۱۳۹۸

      سلام خیر نیازی به اینکار نیست. به سی اس اس های قالب فرزند !important اضافه کنید

      پاسخ دادن
  11. جواد قنبری ۰۲ بهمن ۱۳۹۸

    با سلام . چایلد تم رو ایجاد کردم .فایل های css رو در روت چایلد تم قرار دادم.
    کدهای دلخواهی که داخل فایل استایل میزارم رو قبول نمیکنه . همچنین وقتی از فایل های css کدی رو تغییر میدم، تغییر نمیکنه و کد اصلی رو از قالب مادر میخونه.

    اما فایل های php رو به راحتی قبول میکنه .

    وقتی هم با gtmetrix ارزیابی میکنم، فایل های css اضافه شده رو به عنوان خطای 404 در نظر میگیره . وقتی فایل های css رو پاک میکنم، این خطا رو نمیگیره

    <?php
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'parent-grid', get_template_directory_uri() . '/grid.css' );
    wp_enqueue_style( 'parent-layuot', get_template_directory_uri() . '/layout.css' );
    wp_enqueue_style( 'parent-base', get_template_directory_uri() . '/base.css' );
    wp_enqueue_style( 'parent-shortcodes', get_template_directory_uri() . '/shortdodes.css' );
    wp_enqueue_style( 'parent-rtl', get_template_directory_uri() . '/rtl.css' );
    }
    .با تشکر

    پاسخ دادن
    • رضا حسینی راد ۰۲ بهمن ۱۳۹۸

      درود
      شما باید کدهای سی اس اس رو توی rtl.css چایلد تم بنویسید نیازی هم نیست این کدها رو enqueue کنید. به این شکل کدها از چایلدتم خونده میشه

      پاسخ دادن
      • جواد قنبری ۰۲ بهمن ۱۳۹۸

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

        پاسخ دادن
      • جواد قنبری ۰۲ بهمن ۱۳۹۸

        فقط یه موردی اینکه کدها رو چجوری به فایل function اضافه کنم که قالب بهم نریزه و بعد از اپدیت انفاقی نیوفته ؟

        مثل اضافه کردن کدهای remove query و wp remove error

        پاسخ دادن
        • رضا حسینی راد ۰۲ بهمن ۱۳۹۸

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

          پاسخ دادن
  12. امین ۰۲ بهمن ۱۳۹۸

    سلام میخاستم بدونم در این زمینه که توضیح دادین میتونین در ایجاد تغییرات در قالب سایتهای ما با چایلد تم ما را راهنمایی کنید؟
    سایت را در زمینه GIS با قالب GoodNews ایحاد کردم و سایت را با قالب ایرانی بیگی کالا.
    در هر دو سایت نیازمند تغییراتی در ظاهر سایت هستم و میخاهم این کار را با چایلد تم انجام دهم تا در به روزرسانی ها تغییراتم به طور مستقل باقی بماند
    اگر امکان راهنمایی هست در تلگرام به آی دی من پیام دهید.
    با تشکر از توضیحات خوبتون

    پاسخ دادن
    • محمد قاسمی ۰۲ بهمن ۱۳۹۸

      درود.
      به واحد طراحی ارجاع داده شد تا با شما ارتباط برقرار کنند.

      پاسخ دادن
  13. نیلوفر ۰۲ بهمن ۱۳۹۸

    سلام
    قالبی که من الان دارم فارسی شده است و خریدمش. ولی وقتی child theme اضافه میکنم چپ گین میشه. فایل rtl.css رو چطور به child theme اضافه کنم؟

    پاسخ دادن
    • محمد قاسمی ۰۲ بهمن ۱۳۹۸

      درود.
      فایل rtl.css را از قالب اصلی به Child theme انتقال دهید.

      پاسخ دادن
  14. محسن ۰۲ بهمن ۱۳۹۸

    سلام. پوشه های Fonts و Languages و همینطور فایل RTL ، پس از آپدیت قالب حذف و جایگزین کدهای جدید می شوند. این موارد باید به پوسته فرزند Cut شوند یا اینکه باید در پوسته فرزند توسط کدی فراخوانی شوند؟ لطفا راهنمایی بفرمایید.

    پاسخ دادن
    • رضا حسینی راد ۰۲ بهمن ۱۳۹۸

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

      پاسخ دادن
  15. shima ۰۲ بهمن ۱۳۹۸

    سلام. من اومدم داخل قالب اصلی توی framwork.php از get_theme_file_path() استفاده کردم، الان وقتی child theme رو میسازم به framwork.php، خطا میده.

    پاسخ دادن
    • رضا حسینی راد ۰۲ بهمن ۱۳۹۸

      از این طریق نباید انجام بدید

      پاسخ دادن
  16. علیرضا ۰۲ بهمن ۱۳۹۸

    متشکرم

    پاسخ دادن
  17. علیرضا ۰۲ بهمن ۱۳۹۸

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

    پاسخ دادن
    • مهران راد ۰۲ بهمن ۱۳۹۸

      سلام برای این کار باید html و css و php را کامل بلد باشید

      پاسخ دادن
  18. سجاد ۰۲ بهمن ۱۳۹۸

    سلام و ممنون از شماآیا این کار رو میشه برای پلاگینها هم کرد؟؟ در واقع یه چایلد پلاگین داشته باشیم که با آپدیت پلاگین تغییراتمون از بین نره! به عنوان مثال من در بعضی از پلاگینها فایلهای php اونها رو هم تغییر میدم به غیر از css و استایل کار! سپاس از شما.

    پاسخ دادن
    • مهران راد ۰۲ بهمن ۱۳۹۸

      سلام خیر برای پلاگین ها نمی توان چایلد تم ساخت

      پاسخ دادن
  19. مسعود آورد ۰۲ بهمن ۱۳۹۸

    سلاماسم پوشه فرزندحتما باید اسم قالب-چایلد باشه؟نمیشه اسم پوشه فرزند رو هر چیزی که خودمون دوست داریم بزاریم؟

    پاسخ دادن
    • رضا حسینی راد ۰۲ بهمن ۱۳۹۸

      سلام خیر

      پاسخ دادن
      • مسعود آورد ۰۲ بهمن ۱۳۹۸

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

        پاسخ دادن
        • رضا حسینی راد ۰۲ بهمن ۱۳۹۸

          سلام. منظور این بود که خیر نمیتونید نام دلخواه رو قرار بدید و حتما باید نام قالب-چایلدتم باشه 🙂

          پاسخ دادن
  20. morteza ۰۲ بهمن ۱۳۹۸

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

    پاسخ دادن
  21. مجتبی ۰۲ بهمن ۱۳۹۸

    اگر ممکنه یه آموزش تصویری هم بزارید که اونایی که قالب های اماده خریداری میکنن بعد از آپدیت قالب تنظیماتشون از بین نره 

    پاسخ دادن
    • رضا حسینی راد ۰۲ بهمن ۱۳۹۸

      سلام چشم حتما به زودی قرار میدیم

      پاسخ دادن
  22. welearn.ir ۰۲ بهمن ۱۳۹۸