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

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

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

مروری بر چایلد تم ها

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

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

تفاوت بین چایلد تم ها و قالب اصلی

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

• یک فایل style.css که ظاهر و رنگ بندی وب سایت را تعیین می کند.
• یک فایل functions.php که امکان اضافه نمودن ویژگی ها یا تغییر در رفتار پیش فرض وردپرس را فراهم می سازد.
• چندین فایل قالب که نحوه نمایش صفحات مختلف سایت را مشخص می کنند.

در مقابل، ساخت چایلد تم صرفا به دو فایل style.css و functions.php نیاز دارد که می توان آنها را به مسیر /wp-content/themes/ اضافه نمود. می توان از یک چایلد تم جهت تغییر در استایل وب سایت مانند رنگ ها، فونت ها و طرح بندی ها استفاده نمود. به عنوان مثال، اگر قصد تغییر رنگ بندی سایت را دارید، می توانید این کار را با ایجاد یک فایل style.css جدید در مسیر چایلد تم و افزودن کد زیر انجام دهید:

body {
background-color:#fff;
}
h1 {
color: #000;
}

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

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

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

ساخت چایلد تم در سایت وردپرسی مزایای زیادی دارد، از جمله:

• محافظت از تغییرات قالب سایت در برابر بروزرسانی های خودکار
• تنظیم المان های بصری قالب
• یادگیری نحوه ویرایش قالب ها، که در هنگام توسعه قالب بسیار مفید است

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

ساخت چایلد تم با استفاده از افزونه

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

مرحله 1: دانلود و نصب افزونه Child Theme Configurator

جهت شروع، مطابق تصویر زیر افزونه Child Theme Configurator را از مخزن وردپرس نصب و فعال کنید:

 

تصویر(1)

مرحله 2: تجزیه و تحلیل قالب اصلی

در مرحله دوم، به مسیر "ابزار" سپس گزینه "Child Themes" مراجعه نمایید:

 

تصویر(2)

در این بخش نیاز است که قالب اصلی از لیست کشویی انتخاب شود. چنانچه وردپرس تان دارای چند قالب مختلف می باشد، از انتخاب قالب موردنظرتان مطمئن شوید:

تصویر(3)

اکنون روی "Analyze" کلیک نموده تا قالب اصلی جهت مشکلات احتمالی، بررسی شود:

تصویر(4)

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

تصویر(5)

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

تصویر(6)

مرحله 3: انتخاب نام پوشه چایلد تم

در مرحله بعد، نیاز است پوشه چایلد تم نامگذاری شود. می‌توانید یک نام دلخواه وارد نمایید به شرطی که منحصر به فرد و دارای کاراکترهای قابل قبول باشد. در این مقاله از "twentytwenty-child" استفاده می شود:

تصویر(7)

توجه داشته باشید که نام پوشه قالب با نام چایلد تم یا توضیحات آن یکسان نیست.

مرحله 4: انتخاب Stylesheets چایلد تم و قالب اصلی

در مرحله بعد، نیاز است Stylesheets (فایل مربوط به استایل های css) جدید برای چایلد تم انتخاب شود. چنانچه Stylesheets قالب اصلی (style.css) انتخاب گردد، استایل های جدید، جایگزین استایل های قالب اصلی خواهند شد. این گزینه به صورت پیش‌فرض انتخاب شده است و توصیه می شود چنانچه به تازگی با چایلد تم ها آشنا شده اید، آن را انتخاب نمایید:

تصویر(8)

در بخش دوم می بایست روش مدیریت Stylesheets قالب اصلی انتخاب گردد. گزینه های مختلفی وجود دارد اما توصیه می شود از"Use the WordPress style queue" استفاده نمایید:

تصویر(9)

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

مرحله 5: نامگذاری چایلد تم

قدم بعدی نامگذاری چایلد تم و نوشتن توضیحات آن می باشد:

 

تصویر(10)

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

مرحله 6: کپی تنظیمات قالب اصلی در چایلد تم

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

تصویر(11)

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

مرحله 7: ساخت چایلد تم جدید و مشاهده پیش نمایش آن

در مرحله آخر روی دکمه "Create New Child Theme" کلیک نموده و منتظر بمانید تا افزونه، چایلد تم را ایجاد کند:

تصویر(12)

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

تصویر(13)

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

تصویر(14)

نحوه ایجاد دستی چایلد تم وردپرس

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

مرحله 1: برنامه ریزی جهت ایجاد تغییرات

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

تصویر(15)

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

مرحله 2: بکاپ گیری از وب سایت

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

نحوه تهیه نسخه پشتیبان در سی پنل

نحوه تهیه نسخه پشتیبان در دایرکت ادمین

مرحله 3: ایجاد یک پوشه برای چایلد تم

در این مرحله نیاز است جهت ذخیره فایل‌های چایلد تم، یک پوشه در مسیر wp-content/themes ایجاد شود.

تصویر(16)

مطابق تصویر بالا یک پوشه جدید همانند نام قالب اصلی ایجاد نموده و عبارت "child-" را به انتهای نام آن اضافه نمایید.

مرحله 4: ایجاد Stylesheets برای چایلد تم

اکنون نیاز است یک فایل متنی جدید به نام style.css ایجاد نمایید. این فایل اساس چایلد تم را تشکیل می دهد که به اطلاعات اولیه header، از جمله نام، URL، توضیحات و موارد دیگر نیاز دارد:

تصویر(17)

اکنون فایل style.css را ذخیره و به پوشه چایلد تم اضافه نمایید.

مرحله 5: استایل ها را اولویت بندی کنید

نیاز است تا استایل های قالب اصلی و چایلد تم را اولویت بندی کنید. در این روش، چایلد تم استایل های خود را از قالب اصلی دریافت خواهد نمود و همچنین شما را قادر می‌سازد تا چایلد تم را بدون تأثیر بر قالب اصلی، ویرایش نمایید. یک فایل جدید به نام "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' );
}
?>

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

مرحله 6: فعال سازی چایلد تم

در نهایت، می توانید از بخش "نمایش" سپس "پوسته"، چایلد تم را فعال نمایید.

تصویر(18)

سفارشی سازی چایلد تم

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

تصویر(19)

می توانید با انتخاب بخش موردنظر و دوبار کلیک روی آن، همانند تصویر زیر مستقیما CSS را تغییر داده و نتیجه را در لحظه مشاهده نمایید.

تصویر(20)

در این مثال برای بخش انتخاب شده، رنگ پس زمینه "مشکی" تنظیم شد. البته در نظر داشته باشید که با بروز کردن صفحه، تمامی این تغییرات از بین خواهد رفت. حال می توانید تغییرات را کپی و به فایل style.css چایلد تم اضافه کنید:

body {
Background-color:black;
}

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

محافظت از سفارشی‌سازی‌ها و بروزرسانی‌های قالب

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

در ادامه، خلاصه ای از نحوه ایجاد یک چایلد تم به صورت دستی، ذکر شده است:

1. برنامه ریزی
2. تهیه پشتیبان از وضعیت فعلی وب سایت
3. ایجاد یک پوشه برای چایلد تم
4. ایجاد فایل استایل و بارگذاری آن در وب سایت
5. اولویت بندی استایل ها
6. فعال سازی و مشاهده پیش نمایش چایلد تم
7. ایجاد تغییرات با استفاده از فایل CSS

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