• هاست وردپرس

جلسه 38: آموزش ساخت child theme وردپرس

ساخت child theme وردپرس

آموزش ساخت child theme وردپرس

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

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

بیایید از ساخت پوشه چایلد تم شروع کنیم

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

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

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

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

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

حالا می توانید هر فایلی که دوست دارید را در چایلد تم خود قرار دهید. فایل header.php و Footer.php و … و خلاصه هر فایلی که نیاز به تغییر آن دارید را در چایلد تم خود کپی کنید و تغییراتی که می خواهید را روی آن اعمال کنید.

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

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

آنلاین یاد بگیرید

نظرات کاربران

  1. 2 اردیبهشت 1397 ساعت 12:41

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

  2. 27 فروردین 1397 ساعت 10:20

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

    • محمد مقدم
      27 فروردین 1397 ساعت 11:53

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

  3. 26 فروردین 1397 ساعت 21:59

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

    • رضا حسینی راد
      27 فروردین 1397 ساعت 09:44

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

  4. 28 دی 1396 ساعت 19:38

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

    • رضا حسینی راد
      28 دی 1396 ساعت 20:25

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

      • 28 دی 1396 ساعت 22:24

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

      • 28 دی 1396 ساعت 22:30

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

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

        • رضا حسینی راد
          29 دی 1396 ساعت 11:56

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

  5. 13 آذر 1396 ساعت 06:55

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

    • محمد قاسمی
      13 آذر 1396 ساعت 10:49

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

  6. 23 مهر 1396 ساعت 17:13

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

    • محمد قاسمی
      24 مهر 1396 ساعت 08:50

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

  7. 23 تیر 1396 ساعت 10:29

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

  8. 18 خرداد 1396 ساعت 09:25

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

  9. 16 اسفند 1395 ساعت 14:16

    متشکرم

  10. 16 اسفند 1395 ساعت 13:02

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

    • 16 اسفند 1395 ساعت 13:07

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

  11. 11 اسفند 1395 ساعت 11:08

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

    • 11 اسفند 1395 ساعت 11:11

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

  12. 23 دی 1395 ساعت 20:26

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

    • رضا حسینی راد
      23 دی 1395 ساعت 22:53

      سلام خیر

      • 26 دی 1395 ساعت 18:08

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

        • رضا حسینی راد
          26 دی 1395 ساعت 19:16

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

  13. 21 دی 1395 ساعت 20:54

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

  14. 7 آبان 1395 ساعت 10:21

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

  15. 2 آبان 1395 ساعت 16:59

    thannk you

enamad