Child theme برای وردپرس

Child theme برای وردپرس یا چگونه بدون نگرانی از نابودشدن تغییرهایی که در پوسته‌ی خود داده‌ایم آن را به آخرین نسخه ارتقا دهیم و از زندگی لذت ببریم.

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

خوب این Child Theme اصلا چی هست؟یا چه جوری کار می‌کنه؟

یک پوشه محتوی یک فایل style.css (و در صورت تمایل functions.php و تصویرهای مربوطه)، این کل چیزی هست که به اسم Child Theme می‌شناسیم. خصوصیات اصلی از روی Parent Theme خونده میشه و هر تغییری که شما توی  Style.css بدید توی پوسته‌ی وردپرس شما اعمال میشه. و البته تمام ویژگی‌ها و امکانات پوسته‌ی مادر رو هم داره. فعال شدنش هم درست مثل پوسته‌های معمولیه.

برای ساختن Child Theme چه چیزهایی لازم داریم؟

دسترسی FTP به سایت!
اندکی سواد CSS
یک عدد Text/Code editor
یک عدد پوسته‌ی مادر

گام اول:

یک نام یگانه برای Child Themeاتون انتخاب کنید (دقت کنید که این نام هیچ کدام از پوشه‌هایی که توی wp-content/themesهستند نباشه). توی مسیر پوسته‌اتون یک فایل style.css بسازید. اولین خطوط این فایل باید مشابه خطوط زیر باشه:

/*
Theme Name: Your-theme-name
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: parent-theme
Version: a-number--optional
.
General comments/License Statement if any.
.

تقریبا تمام موارد مشخصه، فقط روی Template: parent-theme دقت کنید که اسم پوسته‌ی مادر رو دقیقا به همون شکلی که هست وارد کنید (روی کوچیک و بزرگ بودن حروف مخصوصا دقت کنید).

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

اسم پوسته‌امون رو می‌ذاریم Thematic custom، پس style.css رو اینجوری شروع می‌کنیم:

/*
Theme Name: Thematic custom
Theme URI: http://kaam.biz/thematic-custom
Description: A Child theme for Thematic theme framework
Author: Kaambiz
Author URI: http://kaam.biz
Template: thematic
Version: a-number--optional
.
General comments/License Statement if any.
.
*/

خوب thematic چندین و چند style رو برای استفاده داخل پوشه‌اش قرار داده که می‌تونیم اون‌ها را وارد پوسته‌ی خودمون بکنیم. مثلا با

@import url('../thematic/style.css');

کل style پیش‌فرض رو وارد می‌کنیم و می‌تونیم بعد از اون تغییرهای خودمو نرو اعمال کنیم. یا می‌تونیم دستی کل style رو اینجا Copy/Paste کنیم و هرجاییش رو که خواستیم تغییر بدیم. این روش دوم یه مقدار شلوغتره ولی خوب راحتتر هم هست.

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

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Style the meta panel for logged-in users */
@import url('../thematic/library/styles/sitemeta.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

توضیحات بسیار ناقص و مسخره‌ای بود، می‌دونم. این پایینی‌ها رو بخونید بهتره:

• How to make a “child theme” for WordPress. A pictorial introduction for beginners
• Creating WordPress Child Themes
• http://codex.wordpress.org/Theme_Development#Theme_Style_Sheet

پ.ن: این افزونه‌ای که برای syntax highlighting استفاده می‌کنم گویا یه خورده خل و چله!
پ.ن۲: مشکل syntaxHighlighter رفع شد.