ثبت‌نام ورود

آموزش ساخت 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. کاربر مهمان ۲۵ اسفند ۱۳۹۸

    سلام
    من از قالب زفایر استفاده می کنم و می خواهم هیچ کس متوجه نشود که از یک قالب اماده استفاده می کنم. با استفاده از هدر فایل style.css می تونم اطلاعات سازنده و اطلاعات قالب رو تغییر بدم ؟ مثلا اسم خودم و سایت خودم رو بذارم ؟ یا مثلا ورژن رو به عدد دلخواهم تغییر بدم ؟ تغییر این اطلاعات از نظر سئو مشکل ساز نیست ؟ و در کل مشکلی پیش نمی اید ؟

  2. U24807 ۲۴ دی ۱۳۹۸

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

    • تیم پشتیبانی تیم پشتیبانی ۲۴ دی ۱۳۹۸

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

  3. کاربر مهمان ۱۵ اسفند ۱۳۹۷

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

  4. U6192 ۰۲ دی ۱۳۹۷

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

    • رضا حسینی راد رضا حسینی راد ۰۳ دی ۱۳۹۷

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

      • کاربر مهمان ۰۳ دی ۱۳۹۷

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

  5. U15174 ۰۲ آذر ۱۳۹۷

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

  6. کاربر مهمان ۰۱ آذر ۱۳۹۷

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

  7. U6192 ۰۹ مهر ۱۳۹۷

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

  8. کاربر مهمان ۰۴ خرداد ۱۳۹۷

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

  9. U11485 ۰۲ اردیبهشت ۱۳۹۷

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

  10. U6469 ۲۷ فروردین ۱۳۹۷

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

    • U11404 ۲۷ فروردین ۱۳۹۷

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

  11. U6469 ۲۷ فروردین ۱۳۹۷

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

    • رضا حسینی راد رضا حسینی راد ۲۷ فروردین ۱۳۹۷

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

  12. کاربر مهمان ۲۸ دی ۱۳۹۶

    با سلام . چایلد تم رو ایجاد کردم .فایل های 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

        • رضا حسینی راد رضا حسینی راد ۲۹ دی ۱۳۹۶

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

  13. کاربر مهمان ۱۳ آذر ۱۳۹۶

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

  14. کاربر مهمان ۲۳ مهر ۱۳۹۶

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

  15. کاربر مهمان ۲۳ تیر ۱۳۹۶

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

  16. کاربر مهمان ۱۸ خرداد ۱۳۹۶

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

  17. کاربر مهمان ۱۶ اسفند ۱۳۹۵
  18. کاربر مهمان ۱۶ اسفند ۱۳۹۵

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

  19. کاربر مهمان ۱۱ اسفند ۱۳۹۵

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

  20. کاربر مهمان ۲۳ دی ۱۳۹۵

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

    • رضا حسینی راد رضا حسینی راد ۲۴ دی ۱۳۹۵
      • کاربر مهمان ۲۶ دی ۱۳۹۵

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

        • رضا حسینی راد رضا حسینی راد ۲۶ دی ۱۳۹۵

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

  21. کاربر مهمان ۲۲ دی ۱۳۹۵

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

  22. کاربر مهمان ۰۸ آبان ۱۳۹۵

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

  23. کاربر مهمان ۰۳ آبان ۱۳۹۵