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

با آموزش «چرا و چگونه یک Child Theme برای وردپرس بسازیم» در خدمت شما هستیم. پیش نیاز این آموزش، آشنایی مقدماتی با زبان های برنامه نویسی php و css و html و تجربه ی کار با وردپرس و هاست می باشد.

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

ساخت یک «زیرپوسته» یا Child Theme بهترین راه برای اعمال تغییرات بر یک پوسته یا قالب وردپرسی است. مهم ترین دلیل برای استفاده از زیرپوسته این است که با داشتن یک زیرپوسته برای پوسته ی وردپرسی خود، زمانی که پوسته ی اصلی را بروزرسانی می کنید، تغییرات و سفارشی سازی هایتان از بین نخواهد رفت. یعنی اگر تغییری در کدهای فایل های functions.php و style.css متعلق به پوسته ی خود را ایجاد کرده باشید، با بروزرسانی قالب، همه ی تغییرات حذف شده و این دو فایل به حالت اول باز می گردند.

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

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

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

1. اولین روش: با دسترسی FTP برای توسعه دهندگان

خب! بسیار ساده است. فقط کافیست یک فولدر جدید بسازید و درون آن یک فایل جدید ایجاد کنید. ما در این مثال یک زیرپوسته را برای پوسته ای با نام Customizr theme خواهیم ساخت. مراحل زیر را انجام دهید:

• با استفاده از FTP یا هر سرور آنلاین یا افلاینی که دارید، به هاست وب سایت خود متصل شوید و یک فولدر در دایرکتوری themes موجود در wp-content بسازید. نام این فولدر را هر چیزی که خواستید بگذارید فقط یادتان باشد که در نام آن از اسپیس و کاراکترهای خاص استفاده نکنید.
• یک فایل با نام style.css درون این دایرکتوری ایجاد کنید و کدهای زیر را داخل آن بریزید. نکته ی مهم در این قسمت آن است که نام پوسته ی اصلی (پوسته ی parent یا پوسته ی پدر)  را به درستی وارد کنید. در اینجا نام پوسته ی اصلی ما customizr است. از حروف کوچک استفاده کنید زیرا این فایل به حروف و بزرگ و کوچک حساس است.

/*
 Theme Name:     Customizr Child
 Theme URI:      http://mysite.com/
 Description:    My description
 Author:         Me
 Author URI:     http://mysite.com/
 Template:       customizr
 Version:        1.0.0
*/

2. دومین روش: با استفاده از افزونه (پیشنهاد شده برای مبتدیان)

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

• افزونه ی Childify Me را دانلود کرده، نصب و فعال کنید.
• به بخش «سفارشی سازی» یا Customize موجود در منوی «نمایش» یا Appearance از پنل وردپرس بروید. در این قسمت خواهید دید که یک گزینه با استفاده از افزونه در این بخش اضافه شده است.
• بر روی دکمه ی Childify Me کلیک کنید.
• نامی برای زیرپوسته ی خود انتخاب کنید.
• حال به بخش «پوسته ها» یا themes موجود در منوی «نمایش» یا Appearance از پنل وردپرس بروید. در آنجا زیرپوسته ای که الآن ساختید را پیدا کنید و آن را فعال کنید. به همین سادگی!

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

نکته: افزونه ی Childify Me برای شما دو فایل با نام های style.css و function.php ایجاد می کند. حال اگر خواستید فانکشن یا استایل جدیدی را به این زیرپوسته اضافه کنید، می توانید مثل مثل روش قبل به هاست خود مراجعه کنید و فایل را باز کنید و ویرایش نمایید.

3. سومین روش: دانلود یک زیرپوسته ی آماده

به عنوان مثال برای پوسته ی Customizr theme یک زیرپوسته ساخته شده است که می توانید به رایگان از سایت آن ها دانلود نمایید.

این زیرپوسته شامل دو فایل می شود:

• style.css: برای قرار دادن کدهای css مربوط به استایل ها مورد استفاده قرار می گیرد.
• functions.php: برای نوشتن فانکشن ها و عملکردهای جدید یا تغییر عملکردهای پوسته ی اصلی مورد استفاده قرار می گیرد.

نحوه ی بازنویسی فانکشن های پوسته با استفاده از زیرپوسته

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

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

پس یک نکته ی مهم اینجا وجود دارد: فایل هایی مثل  functions.php و index.php که در زیرپوسته قرار دارند، فایل های مشابه خود در پوسته ی اصلی را اصطلاحا اوررایت یا بازنویسی (overwrite) می کنند.

فانکشن های قابل برنامه ریزی (Pluggable)

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

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

در یک زیرپوسته ی وردپرسی، باید تمامی فانکشن ها درون فایل functions.php ذخیره شده باشند و مثل زیر کدنویسی شوند:

if( ! function_exists('name_of_function') ) {
function name_of_function( $params ) {
// do some stuff with the $params }
}

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

یک مثال

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

• فایل style.css
• فایل functions.php
• دیگر فایل هایی که مربوط به index ، header ، footer ، comments و غیره می شوند.
• همچنین دایرکتوری های دیگری با نام هایی مثل inc یا includes نیز وجود دارند.

فرض می کنیم درون دایرکتوری inc از پوسته ی وردپرسی اصلی شما یک فایل با نام class-content-slider.php وجود دارد و شما می خواهید که محتوای درون این فایل را بازنویسی (overwrite) کنید.

ابتدا در زیرپوسته ی خود دایرکتوری ای با نام inc ایجاد کنید و فایل class-content-slider.php را آن کپی کنید. هر فایلی که می خواهید در زیرپوسته بازنویسی کنید، باید دقیقا همان آدرس و دایرکتوری مشابه (در پوسته اصلی) را داشته باشد.

پحال هر کدی را که می خواهید تغییر پیدا کند، در این فایل ویرایش کنید. این فایل (class-content-slider.php موجود در زیرپوسته)، فایل مشابه خود را که در پوسته ی اصلی وجود دارد (فایل پدر) بازنویسی خواهد کرد.

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

منبع: سایت Press Customizr Documenta