قالب فرزند (Child theme) چیست وچگونه یک قالب فرزند در وردپرس بسازید؟

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

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

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

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

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

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

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

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

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

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

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

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

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

هنگامی که از قالبی در سایت خود استفاده می کنید و می خواهید یک یا چند مورد از موارد زیر را انجام دهید، بهتر است از قالب فرزند استفاده کنید:

• یک یا چند فایل قالب را ویرایش کنید.
• توابعی که مربوط به ظاهر سایت هستند (نه عملکرد آن) را اضافه کنید.
• یک یا چند تابع را از قالب والد بازنویسی کنید.
• فایل (های) template را اضافه کنید.

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

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

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

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

در چنین شرایطی بهتر است به جای استفاده از قالب فرزند از روش دیگری برای شخصی سازی سایت خود استفاده کنید:

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

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

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

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

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

قالب فرزند در یک دایرکتوری مجزا از قالب والد ذخیره می شود و هر کدام فایل های 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');

جمع بندی

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