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

یکی از دلایل محبوبیت بسیار زیاد وردپرس، قابلیت بالای سفارشی سازی آن است. اما پروتکل هایی وجود دارد که قبل از انجام بعضی از سفارشی سازی های وردپرس نیاز است آنها را انجام دهید. در غیر این صورت سفارشی سازی های شما ممکن است طبق پیش بینی عمل نکند. اینجاست که قالب فرزند وردپرس (Child theme) به کمک شما می آید.

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

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

تیم w3design در این مقاله ابتدا در مورد اینکه قالب فرزند چیست و چه زمانی باید از قالب فرزند برای سفارشی سازی و ویرایش قالب خود استفاده کنید، همچنین مزایا و معایب آن صحبت کرده سپس نحوه ساخت قالب فرزند (Child theme) در وردپرس را به صورت کامل آموزش می دهیم. 

این را هم بخوانید: صفر تا صد آموزش طراحی سایت بدون نیاز به دانش کدنویسی

قالب فرزند (چایلد تم) وردپرس چیست؟

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

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

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

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

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

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

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

مزایای استفاده از قالب فرزند در وردپرس

قالب فرزند مانند سایر موارد دارای مزایا و معایب خاص است که در ادامه به‌طور کامل بررسی خواهیم کرد.

1. به‌روزرسانی‌های امن

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

2. توسعه‌پذیری

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

3. امکان بازبینی

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

معایب استفاده از چایلد تم

یکی از ایرادهایی که وجود دارد این است که ممکن است توسعه‌دهندگان آپدیت جدیدی برای قالب والد شما ارائه نکنند. البته این نکته حائز اهمیت است که قالب‌های وردپرسی منبع باز هستند و در صورت ارائه نشدن آپدیت از سوی کمپانی اصلی شما می‌توانید باز هم از این قالب استفاده کنید؛ به این صورت که شما امکان جایگذاری کدهای دلخواه را در قالب خود دارید البته با توجه به مسائل گفته‌شده پیشنهاد ما به شما این است که پوسته خود را به دلیل سازگاری بهتر و بیشتر با افزونه‌های جدید و همچنین مسائل امنیتی مرتباً به‌روزرسانی کنید.

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

ویژگی‌های قالب والد (parent Theme)

ازلحاظ تئوری هر قالب وردپرس می‌تواند دارای قالب‌های فرزند باشد، اما باید در انتخاب قالب والد بسیار دقت کرد چون قالبی که دارای توابع محدود و ویژگی‌های ضعیف باشد برای  والد بودن مناسب نیست.

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

چرا از Child Theme در وردپرس استفاده کنیم؟

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

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

چه مواقعی از Child Theme در وردپرس استفاده کنیم؟

تصمیم به استفاده از Child Theme در وردپرس به نیازهای شما بستگی دارد. مثلاً زمان طراحی سایت‌های بسیار پیچیده یا سایت‌های بسیار ساده از این نوع قالب کمک می‌گیریم.

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

برای کاربر نیز استفاده از قالب فرزند کاملاً به نحوه عملکرد او بستگی دارد. زمانی که فقط مایل به تغییر چند عنصر ساده هستید یا از افزونه‌های خاصی برای سفارشی‌سازی وب‌سایت استفاده می‌کنید قالب فرزند توصیه نمی‌شود اما اگر طرح، رنگ، ویژگی‌ها و… را تغییر می‌دهید و css ها را کاملاً سفارشی می‌کنید، یا مرتباً توابع جدیدی را به فایل functions.php اضافه می‌کنید، استفاده از Child Theme در وردپرس به‌شدت توصیه می‌شود.

انتخاب قالب والد مناسب

همه فریم‌ورک‌ها قالب والد هستند اما همه قالب‌های والد فریم ورک نیستند! بنابراین باید قالبی را به‌عنوان والد انتخاب کنید که دارای ویژگی‌های خاص و قابلیت‌های زیادی باشد.

به‌عنوان‌مثال در حال ساخت یک Child Theme در وردپرس هستید  (قالب فرزند شامل فایل style.css و فایل functions.php است.) ولی فوتر قالب والد را نمی‌پسندید بنابراین footer.php را به قالب فرزند اضافه می‌کنید. همین‌طور برای هدر و… نیز این کار را انجام می‌دهید. این روش کاملاً غلط است و باید در انتخاب قالب والد تجدیدنظر کنید چون اصل مفهوم قالب فرزند ارث‌بری از والد است نه ساخت یک قالب کامل!

آموزش ساخت قالب فرزند در وردپرس

قالب فرزند در یک دایرکتوری مجزا از قالب والد ذخیره می شود و هر کدام فایل های style.css و functions.php جداگانه ای دارند. در صورت لزوم می توانید فایل های دیگری را نیز اضافه کنید اما وجود این دو فایل برای اینکه قالب فرزند به درستی کار کند لازم است.

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

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

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

ابتدا باید دسترسی به وردپرس از طریق FTP یا کنترل پنل هاست خود ایجاد کنید.

روی File Manager کلیک کنید.

به مسیر public_html -> wp-content -> themes  بروید.

در فولدر themes، یک فولدر جدید ایجاد کنید. نامی که می خواهید قالب فرزند داشته باشد را وارد کرده و روی دکمه Create کلیک کنید. توصیه می شود از نام قالب والد با پسوند -child استفاده کنید. به عنوان مثال twentyseventeen-child

در داخل فولدر یک فایل style.css ایجاد کنید و محتوای زیر را در داخل آن قرار دهید.

    /*

    Theme Name: Twenty Seventeen Child

    Theme URL: http://yourdomain.com

    Description: Twenty Seventeen Child

    Theme Author: Your Name

    Author URL: http://yourdomain.com

    Template: twentyseventeen

    Version: 1.0.0

    Text Domain: twentyseventeen-child

    */

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

وارد کردن اطلاعات زیر ضروری است:

Theme Name: باید یک نام منحصر به فرد برای قالب شما باشد.

Template: نام دایرکتوری قالب والد.

بقیه مقادیر را مطابق با اطلاعات خود تغییر دهید.

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

پس از اینکه تغییرات را اعمال کردید، آن را ذخیره کنید.

در همان فولدر فایل دیگری با نام functions.php ایجاد کنید. این فایل به شما امکان می دهد استایل شیت را از قالب والد به قالب فرزند ضمیمه کنید. بدون این فایل سایت شما استایلی نخواهد داشت.

کد زیر را در فایل خالی کپی کرده و آن را ذخیره کنید:

    <?php

    add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

    function enqueue_parent_styles() {

       wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

    }

    ?>

تابع ()wp_enqueue_style برای جاسازی استایل شیت قالب والد استفاده می شود، تابع ()get_template_directory_uri محل ذخیره آن فایل را پیدا می کند. تابع wp_enqueue_scripts هم برای اسکریپت ها و هم استایل ها استفاده می شود.

به وب سایت خود مراجعه کرده و در پیشخوان وردپرس به مسیر نمایش » پوسته ها بروید.

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

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

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

سفارشی سازی

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

قبل از انجام این کار، توجه به دو نکته ضروری است:

وردپرس از فایلی که برای اولین بار در سلسله مراتب ارائه می شود (چه قالب فرزند باشد چه قالب والد)، استفاده می کند.

اگر یک فایل تمپلیت (یا بخشی از تمپلیت مانند header.php) با همین نام در هر دو قالب والد و فرزند وجود داشته باشد، وردپرس از فایلی که در قالب فرزند وجود دارد استفاده می کند.

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

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

پس از آنکه صفحه سفارشی ساز پوسته باز شد، وارد تب CSS اضافی شوید.

تغییر رنگ پس زمینه

در صورت تمایل به تغییر رنگ پس زمینه قالب کودک وردپرس ، کد CSS زیر را وارد کنید:

    .site-content-contain {

        background-color: #DEF0F5;

        position: relative;

    }

در کد بالا، مقداری که کنار background-color نوشته شده است، کد هگزای رنگی است که انتخاب کرده اید. رنگی که در این مثال برای پس زمینه انتخاب کرده ایم، رنگ آبی روشن است. بنابراین تصویری مشابه شکل زیر مشاهده می کنید:

شما می توانید کد هر رنگی که تمایل دارید را وارد کنید.

تغییر رنگ نوار کناری

با استفاده از کد CSS زیر می توانید به نوار کناری سایت خود رنگ اضافه کنید و ناحیه ابزارک های سایت وردپرس خود را دلپذیرتر نمایید.

    .widget {

    background: #B9EBFA;

    padding: 25px;

    }

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

تغییر نوع فونت، اندازه و رنگ

برای تغییر نوع فونت، اندازه و رنگ فونت قالب فرزند، کد زیر را وارد کنید:

    p {

    color: teal;

    }

    p {

    font-family: Georgia;

    font-size: 18px;

    }

تگ p نشانگر پاراگراف است. همانطور که در تصویر زیر مشاهده می کنید، کد CSS فوق ظاهر فونت های پاراگراف را بر اساس مقادیر مشخص شده تغییر می دهد.

برای تغییر فونت سایر قسمت های متنی مانند title یا هدر، ابتدا از طریق ابزار Inspector المان ها را بررسی کنید تا پارامترهای CSS آنها را مشاهده نمایید.

به عنوان مثال می خواهیم رنگ فونت title را تغییر دهیم.

ابتدا بر روی متن title کلیک راست کرده و Inspect Element را در مرورگر فایرفاکس یا Inspect را در مرورگر کروم انتخاب کنید. لینک استایل CSS را پیدا کنید.

کد را کپی کرده و در تب CSS اضافی پیست کنید. مقادیر را بر اساس آن تغییر دهید.

همین کار را می توانید برای المان های دیگری که می خواهید تغییر دهید، تکرار کنید.

تغییر طرح بندی نوشته ها و برگه ها

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

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

فایل های اصلی تمپلیت در پوشه اصلی themes قرار دارند. به عنوان مثال تمپلیت مشاهده یک نوشته single.php و تمپلیت برگه ها page.php است.

قالب دو هزار و هفده این ویژگی را دارد که تمپلیت های خود را به template-parts تقسیم می کند که در تمپلیت اصلی با استفاده از تابع ()get_template_part ارجاع داده شده اند.

 به عنوان مثال ، اگر می خواهید page.php که فایل برگه ها است را ویرایش کنید، هنگامی که آن را باز می کنید کدهایی مشابه شکل زیر را مشاهده می کنید.

برای ویرایش برگه ها در قالب دو هزار و هفده باید به ترتیب فولدرهای template-parts و page را باز کرده و فایل مربوط به قسمتی که می خواهید ویرایش کنید را کپی نمایید.

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

اضافه کردن و حذف ویژگی ها

یکی دیگر از مزیت های مهم ایجاد قالب فرزند در وردپرس، امکان داشتن یک فایل جداگانه functions.php است که برای اضافه (یا حذف) کردن برخی ویژگی ها با استفاده از کد PHP استفاده می شود.

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

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

    function your_function() {

       ?>

    <script>

    jQuery(document).ready(function(){

        jQuery(document).bind("contextmenu",function(e){

            return false;

        });

    });

    </script>

    <?php

    }

    add_action('wp_footer', 'your_function');