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

سلام؛ هزاران قالب برای وردپرس وجود دارد که هر کدام طرح و تنظیمات خاص خودشان را دارند. اما این پوسته ها اغلب دست نخورده باقی نمی مانند. بیشتر کاربران دوست دارند بر اساس سلیقه خود به ویرایش قالب بپردازند و آن را اختصاصی کنند. صرفا ویرایش قالب هیچ اشکالی ندارد. اما انجام اینکار با دستکاری فایل های قالب اصلی کمی میتواند مشکل ساز باشد. چرا که برای قالب های پیشرفته و استاندارد، همیشه آپدیت ها و بروزرسانی هایی ارائه می شود که با جایگزین کردن آن بر روی قالب اصلی، تمامی ویرایش هایی که انجام داده اید از بین می رود. بنابراین وردپرس قابلیتی را ارائه داده است که بدون اینکه نیاز باشد فایل های قالب اصلی را دستکاری کنید، بتوانید به ویرایش قالب خود بپردازید. این ویژگی همان Child Theme ها هستند که امروز می خواهیم نحوه ساخت و استفاده از آن ها را به شما یاد بدهیم. اصلا سخت نیست. خیلی هم آسان است.

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

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

قدم اول: ایجاد پوشه Child Theme

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

خب کافیست یک فولدر جدید با نام دلخواه بسازید. مثلا اگر نام قالب اصلی شما webtoaster است، نام این فولدر را بگذارید webtoaster child theme . یا هر چیزی که دوست دارید.

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

webtoaster

webtoaster child theme

…

سپس وارد فولدر webtoaster child theme (یا همان نامی که خودتان انتخاب کردید) شوید و یک فایل با نام style.css بسازید. کد زیر را درون این فایل قرار دهید:

/*
 Theme Name: Webtoaster Child Theme
 Theme URI: http://www.webtoaster.ir/
 Description: Webtoaster Child Theme
 Author: WebToaster
 Author URI: http://www.webtoaster.ir
 Template: Webtoaster
 Version: 1.0.0
 */

@import url("../webtoaster/style.css");

/* =Child Theme Styles
 ------------------------------------------------------- */

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

Theme Name: هر چیزی می تواند باشد.

Theme URI: آدرس صفحه قالب را بنویسید.(هر چیزی باشد)

Description: توضیحات قالب.

Author: نویسنده قالب.

Author URI: سایت سازنده قالب.

Template: این یکی مهم است. حتما باید نام قالب اصلی باشد. یعنی نام فولدر قالب اصلی. به مسیر root/wp-content/themes در فایل منیجر هاست خود بروید و نام فولدر قالب اصلی را پیدا کنید و اینجا وارد کنید.

Version: نسخه قالب.

پس از وارد کردن این موارد، در تکه کد @import url("../webtoaster/style.css"); به جای عبارت webtoaster باید نام فولدر قالب اصلی را بنویسید.

خب حالا فایل style.css را ذخیره کنید.

از این به بعد اگر میخواهید استایل قالب خود را تغییر دهید یا کد های CSS بنویسید باید درون همین فایل style.css قالب child theme انجام دهید. توجه داشته باشید که اگر میخواهید یک کلاس یا ID از استایل اصلی را ویرایش کنید کافیست فقط همان کلاس را با مشخصات جدید درون فایل style.css چایلد تم قرار دهید نه اینکه کل کد های فایل استایل قالب اصلی را درون فایل استایل چایلد تم کپی کنید.

قدم دوم: ویرایش فایل های قالب

در دومین قدم میرسیم به ویرایش فایل های دیگر قالب مثل فایل های php. اگر میخواهید یک فایل php از قالب را (مثلا index.php) تغییر دهید، باید کل آن فایل را کپی کنید و در مسیر درست از فولدر child theme پیست کنید. مثلا اگر میخواهید یک فایل با نام ads.php که درون فولدر ad در قالب اصلی قرار گرفته را ویرایش کنید، نمیتوانید فایل ads.php را درون فولدر child theme قرار دهید. بلکه باید یک فولدر با نام ad درون چایلد تم ایجاد کنید و آن فایل را درونش قرار دهید.

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

webtoaster/ad/ads.php

webtoaster child theme/ad/ads.php

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

فراخوانی فایل ها و اسکریپت ها از child theme

اگر میخواهید یک فایل استایل یا اسکریپتی را از درون فایل های خود child theme و نه قالب اصلی، فراخوانی کنید کافیست از کد زیر به عنوان آدرس فولدر قالب در فایل های چایلد تم استفاده کنید:

<?php echo get_stylesheet_directory_uri(); ?>

این کد آدرس دقیق فولدر چایلد تم را بر می گرداند. یعنی مثلا اگر نام چایلد تم شما webtoaster child theme باشد، کد بالا آدرس زیر را بر می گرداند:

http://yoursite.com/wp-content/themes/webtoaster child theme

سپس در ادامه کد می توانید فایل مورد نظرتان را فراخوانی کنید مثلا اگر میخواهید استایل اصلی چایلد تم را فراخوانی کنید از کد زیر استفاده کنید:

<link rel='stylesheet' href='<?php echo get_stylesheet_directory_uri(); ?>/style.css' type='text/css' media='all' />

نصب و استفاده از Child Theme

برای نصب child theme باید ابتدا قالب اصلی را در هاست آپلود کرده و نصب کنید. سپس فولدر child theme را با فرمت zip فشرده کنید و مثل قالب های دیگر درون هاست خود (در مسیر wp-content/themes) آپلود کنید. سپس از بخش نمایش در پیشخوان وردپرس، Child Theme خود را فعال کنید.

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

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

منبع: وب تستر