زیر پوستهها (Child Themes) در وردپرس ابزاری قدرتمند برای توسعهدهندگان و طراحان وب هستند. آنها به شما این امکان را میدهند که تغییرات دلخواه خود را بر روی یک پوسته اصلی (Parent Theme) اعمال کنید بدون اینکه به کد اصلی آن آسیب بزنید. این ویژگی به ویژه برای افرادی که میخواهند طراحی و عملکرد سایت خود را سفارشیسازی کنند، بسیار مفید است. برای خواندن بیشتر در مورد وردپرس و امکانات آن، مقاله وردپرس چیست؟ را مطالعه کنید.
استفاده از زیر پوستهها به شما این امکان را میدهد که به راحتی بهروزرسانیهای پوسته اصلی را انجام دهید بدون اینکه تغییرات شما از بین برود. این موضوع به حفظ امنیت و بهبود عملکرد سایت کمک میکند. در ادامه این مقاله از آموزشهای وردپرس، به بررسی مزایا و نحوه ایجاد زیر پوستهها خواهیم پرداخت.
زیر پوسته (Child Theme) چیست؟
زیر پوسته (Child Theme) که به آن پوسته فرزند هم گفته میشود، در سیستم مدیریت محتوای وردپرس، قالبی است که عملکرد و ظاهر خود را از یک قالب دیگر (قالب والد یا Parent Theme) به ارث میبرد.
زیر پوسته یا چایلد تم، به شما این امکان را میدهد که تغییرات دلخواه خود را در یک پوسته (Theme) وردپرس اعمال کنید بدون اینکه به فایلهای اصلی آن پوسته آسیب بزنید. این ویژگی به ویژه برای توسعهدهندگان و طراحان وب بسیار مفید است، زیرا میتوانند به راحتی تغییرات را مدیریت کنند و در عین حال از بهروزرسانیهای آینده پوسته اصلی بهرهمند شوند.
مزایای استفاده از زیر پوسته
- حفظ تغییرات: با استفاده از زیر پوسته، تغییرات شما در برابر بهروزرسانیهای پوسته اصلی محفوظ میماند.
- آسانی در مدیریت: شما میتوانید به راحتی کدهای CSS و PHP را بدون نگرانی از آسیب به پوسته اصلی ویرایش کنید.
- آزمایش و توسعه: زیر پوستهها به شما این امکان را میدهند که ایدههای جدید را آزمایش کنید و در صورت عدم موفقیت، به راحتی به حالت قبلی برگردید.
چگونه یک زیر پوسته بسازیم؟
- یک پوشه جدید در دایرکتوری
wp-content/themesایجاد کنید. - فایل
style.cssوfunctions.phpرا در پوشه جدید اضافه کنید. - در فایل
style.css، اطلاعات زیر را وارد کنید:
/*
Theme Name: نام زیر پوسته
Template: نام پوسته اصلی
*/
با این کار، زیر پوسته شما آماده استفاده است و میتوانید به ویرایش و سفارشیسازی آن بپردازید. به یاد داشته باشید که همیشه قبل از ایجاد تغییرات بزرگ، از سایت خود نسخه پشتیبان تهیه کنید.
استفاده از زیرپوستهها، روش استاندارد و پیشنهادی برای ویرایش و شخصیسازی قالبهای موجود بدون از دست دادن تغییرات هنگام بروزرسانی است، که بخش مهمی از خدمات پشتیبانی وردپرس محسوب میشود.
چرا از زیر پوسته استفاده میشود؟
اگر پوسته را مستقیماً ویرایش کنید، با هر بروزرسانی قالب اصلی، تغییرات شما از بین میرود. استفاده از زیر پوسته این مشکل را حل کرده و تغییرات شما را ایمن نگه میدارد. این تکنیک به خصوص در اجرای پروژههای طراحی سایت با وردپرس که نیاز به سفارشیسازی دارند، حیاتی است و فرآیند توسعه و نگهداری را سرعت میبخشد.
روش ایجاد زیر پوسته
اولین گام، ساخت پوشه زیرپوسته در مسیر wp-content/themes در هاست وردپرس شماست. نامگذاری صحیح پوشه (مانند parenttheme-child) به سازماندهی بهتر کمک میکند. یک زیر پوسته شامل حداقل یک دایرکتوری (پوشه) و دو فایل style.css و functions.php هست که لازم است آنها را ایجاد کنید:
- یک پوشه/دایرکتوری برای زیر پوسته
- فایل style.css
- فایل functions.php
میزبانی وردپرس راهکاری بهینه برای وبسایتهایی است که با سیستم مدیریت محتوای وردپرس ساخته شدهاند. با استفاده از سرورهای مخصوص وردپرس وبرمز، سرعت بارگذاری صفحات افزایش مییابد، امنیت سایت تقویت میشود و تجربه کاربری بهتری برای بازدیدکنندگان فراهم میگردد.
اولین گام برای ایجاد یک زیرپوسته
ساختن پوشه اصلی زیرپوسته در مسیر wp-content/themes میباشد.
گام بعدی، ایجاد فایل style.css در پوشه زیرپوسته است. این فایل حاوی اطلاعات ضروری مانند نام پوسته، نویسنده، نسخه و مهمتر از همه، نام قالب والد در خط Template است. این اطلاعات برای شناسایی صحیح زیرپوسته توسط وردپرس و مدیریت بهتر آن در بخش نصب قالب وردپرس ضروری است.
گام بعدی ساختن فایل style.css
برای ساختن فایل style.css لازم است به صورت زیر شروع نمایید:
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */
نکاتی که لازم است به آنها توجه داشته باشید:
- متن مرتبط با موضوع خودتان را جایگزین متن مثال کنید.
- در خط Template نام فولدر پوسته اصلی (قالب والد) را وارد کنید. در مثال بالا نام پوسته اصلی Twenty Fifteen است.
- زیر پوسته فقط به فایل style.css نیاز دارد ولی برای نوبت دهی پوسته اصلی و زیر پوسته لازم است از فایل functions.php استفاده شود.
- گام نهایی روش نوبت دهی به پوسته اصلی و زیرپوسته است
- توجه داشته باشید که در روش های قبلی از :import@ در کدهای پوسته اصلی استفاده میشد که الان مرسوم نیست.
روش صحیح فراخوانی استایلها، استفاده از wp_enqueue_scripts در فایل functions.php زیرپوسته است. این تابع تضمین میکند که ابتدا استایل قالب والد و سپس استایل زیرپوسته (که تغییرات شما را در بر دارد) بارگذاری شود. درک نحوه عملکرد هوکها و توابع در وردپرس برای افزایش امنیت وردپرس و جلوگیری از تداخل کدها مهم است.
در خط اول فایل functions.php تگ php را باز کنید (php?>)، بعد از آن شما میتوانید پوسته اصلی و زیرپوسته ها را در نوبت اجرا قرار دهید.
در مثال زیر تابع زمانی کار میکند که پوسته اصلی (والد) فقط از یک style.css اصلی برای نگهداری همه css ها استفاده کرده باشد. اگر پوسته اصلی بیشتر از یک فایل css داشته باشد (eg. ie.css, style.css, main.css) شما باید مطمئن شوید که همه تنظیمات وابسته به پوسته اصلی حفظ میشوند.
function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
زیرپوسته به طور معمول به صورت اتومات لود میشود. اگر اینطور نبود لازم است که آنرا در نوبت اجرا نیز قرار دهید.
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() .'/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() .'/style.css', array('parent-style') );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
زیرپوسته شما اکنون آماده اجرا میباشد. وارد بخش مدیریت سایت خود شوید و مسیر زیر را مشاهده کنید:
Administration Panels > Appearance > Themes
در این قسمت شما باید لیست زیرپوسته های خود را مشاهده کنید که آماده برای فعال شدن هستند.
قبل از فعالسازی زیرپوسته ابتدا روی پیش نمایش آن کلیک کنید تا از عملکرد زیرپوسته مطمئن شوید در صورتی که مشکلی مشاهده نشد آنرا فعال کنید در غیر اینصورت ابتدا سعی کنید مشکل را برطرف نمایید سپس زیرپوسته را فعال نمایید.
نکته: ممکن است که نیاز باشد منوها (Appearance > Menus, or Appearance > Customize > Menus) و تنظیمات پوسته ( شامل تصویر بکگراند و هدر ) را بعد از فعالسازی زیر پوسته، دوباره ذخیره کنید.
فایل های قالب (پوسته)
اگر میخواهید ساختار یا عملکرد بخش خاصی از قالب والد (مانند هدر، فوتر یا یک قالب صفحه خاص) را تغییر دهید، کافیست فایلی با همان نام در پوشه زیرپوسته خود ایجاد کنید. وردپرس به طور خودکار این فایل را به جای فایل مشابه در قالب والد بارگذاری میکند. این روش برای طراحی سایت اختصاصی مبتنی بر یک قالب پایه بسیار کاربردی است.
به سادگی میتوانید یک فایل با همین نام در دایرکتوری (پوشه اصلی) زیرپوسته قرار دهید با اینکار هنگام لود سایت فایل معادل در دایرکتوری پوسته اصلی نادیده گرفته میشود و فایل مربوطه از دایرکتوری زیرپوسته لود میگردد.
به عنوان مثال اگر شما بخواهید کد پی اج پی هدر سایت را تغییر دهید میتوانید فایلی با نام header.php در فولدر زیرپوسته خود قرار دهید که این فایل به جای فایل header.php موجود در فولدر پوسته اصلی استفاده میشود.
همچنین شما میتوانید فایل هایی را که در پوسته اصلی وجود ندارند را در زیرپوسته خود قرار دهید. به طور مثال ممکن است شما بخواهید یکه قالب با ویژگی های جدید نسبت به قالب اصلی ایجاد کنید از جمله ایجاد یک الگو برای یک صفحه خاص و یا مجموعه های بایگانی شده، با ایجاد فایل های مربوطه و قرار دادن آنها در دایرکتوری زیر پوسته میتوانید این ویژگی ها را به قالب خود اضافه کنید.
استفاده از فایل functions.php
فایل functions.php در زیرپوسته، بر خلاف سایر فایلها، فایل functions.php قالب والد را لغو نمیکند، بلکه قبل از آن بارگذاری میشود. این به شما امکان میدهد توابع و قابلیتهای جدیدی اضافه کنید یا توابع قالب والد را با استفاده از هوکها تغییر دهید، بدون آنکه نیاز به ویرایش مستقیم کد اصلی باشد؛ دانشی که در پشتیبانی سایت وردپرسی بسیار ارزشمند است.
در این روش فایل functions.php زیرپوسته، روش های هوشمند بدون دردسر برای اصلاح عملکرد پوسته اصلی را فراهم میکند.
زمانی که شما میخواهید یک تابع php به قالب خود اضافه کنید، سریعترین راه این است که فایل functions.php را باز کنید و تابع مربوطه را در آن قرار دهید اما انجام اینکار هوشمندانه نیست چون در زمان بعدی که قالب آپدیت میشود تابع شما نیز ناپدید میشود.
اما راه هوشمندانه ای وجود دارد: شما میتوانید یک زیرپوسته ایجاد کنید و فایل functions.php را در آن قرار دهید سپس تابع خود را در این فایل وارد کنید. تابع از هر دو مکان عملیات یکسانی را انجام میدهد با این تفاوت که بروزرسانی بعدی قالب تاثیری در تابع نخواهد داشت.
نباید تمام محتوای فایل functions.php قالب اصلی را در فایل functions.php زیرپوسته کپی کرد. ساختار functions.php ساده است: تگ php را باز کنید و کد پی اچ پی را در آن قرار دهید. شما میتوانید بسیاری از توابع را در این فایل قرار دهید.
مثال زیر یک فایل functions.php ابتدایی را نشان میدهد : یک favicon (تصویر کوچک) را به قسمت هد در بالای صفحات HTML اضافه میکند.
<?php // Opening PHP tag - nothing should be before this, not even whitespace
// Custom Function to Include
function favicon_link() {
echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "n";
}
add_action( 'wp_head', 'favicon_link' );
در این روش، زیر پوسته میتواند یک تابع php از پوسته اصلی را به راحتی به وسیله اعلام زودتر، جایگزین کند.
مرجع/محتوای فایل های زیرپوسته
شما هنگامی که میخواهید فایل هایی را بین ساختار دایرکتوری زیرپوسته قرار دهید از ()get_stylesheet_directory استفاده میکنید چون فایل style.css پوسته اصلی با فایل style.css زیرپوسته جایگزین شده است و فایل style.css شما در مسیر روت دایرکتوری زیر پوسته قرار گرفته است. تابع ()get_stylesheet_directory به دایرکتوری زیرپوسته شما اشاره میکند ( نه به دایرکتوری پوسته اصلی).
در اینجا مثالی وجود دارد که نشان میدهد چگونه میتوانید از get_stylesheet_directory زمانی که به فایل ذخیره شده در ساختار دایرکتوری زیرپوسته ارجاع داده میشود استفاده کنید:
require_once( get_stylesheet_directory() . ‘/my_included_file.php’ );
اطلاعات مفید دیگر:
پشتیبانی از قالب های راست چین
برای پشتیبانی از زبان های راست چین، فایل rtl.css را به زیر پوسته خود اضافه کنید:
/* Theme Name: Twenty Fourteen Child Template: twentyfourteen */
فایل rtl.css فقط زمانی لود میشود که تابع ()is_rtl مقدار true برگرداند.
توصیه میشود فایل rtl.css را به زیرپوسته خود اضافه کنید حتی اگر این فایل در پوسته اصلی وجود نداشته باشد.
مراحل چند زبانه شدن پوسته:
زیر پوسته ها شبیه افزونه های دیگر هستند که با استفاده از توابع gettext میتوانند به دیگر زبان ها ترجمه شوند.
۱- یک دایرکتوری زبان ایجاد کنید.
– مشابه my-theme/languages
۲-فایل های زبان را اضافه کنید.
– نام فایل ها لازم است به صورت he_IL.po و he_IL.mo باشند. (با توجه به زبان قالب شما).
۳-لود دامنه متن
– در هنگام اجرای after_setup_theme از تابع ()load_chiled_teme_textdomain در فایل functions.php استفاده کنید.
– لازم است دامنه متن تعریف شده در تابع ()load_child_theme_textdomain در ترجمه همه رشته های زیر پوسته استفاده شود.
۴-استفاده از توابع GetText برای اضافه کردن پشتیبانی i18n از رشته های شما.
مثال: دامنه متن
مثال : توابع gettext
به طور خلاصه تمام رشته های استفاده شده در زیرپوسته قابل ترجمه هستند. ترجمه فایل ها لازم است در دایرکتوری “/languages/” قرار داده شوند.
ساخت یک وبسایت حرفهای، پایه اصلی موفقیت در دنیای آنلاین است. با خدمات طراحی وب و توسعه سایت وبرمز، بر پایه وردپرس میتوانید سایتی اختصاصی، سریع و واکنشگرا داشته باشید که تجربه کاربری عالی و نمایش بینقصی در موبایل و دسکتاپ فراهم میکند.
جمع بندی
زیر پوستهها یا Child Themes در وردپرس ابزاری قدرتمند برای توسعهدهندگان و طراحان وب هستند. آنها به شما این امکان را میدهند که تغییرات دلخواه خود را بر روی یک پوسته اصلی (Parent Theme) اعمال کنید بدون اینکه خطر از دست دادن تغییرات خود را در هنگام بهروزرسانی پوسته اصلی داشته باشید. این ویژگی به ویژه برای کسانی که میخواهند طراحی و عملکرد وبسایت خود را سفارشی کنند، بسیار مفید است.
استفاده از زیر پوستهها نه تنها به حفظ تغییرات کمک میکند، بلکه به شما این امکان را میدهد که به راحتی به حالت قبلی برگردید یا تغییرات جدیدی را آزمایش کنید. با استفاده از زیر پوسته، میتوانید CSS، فایلهای PHP و حتی توابع جدیدی را اضافه کنید و به این ترتیب، وبسایت خود را به شکل دلخواه خود درآورید. در نهایت، این روش به شما کمک میکند تا یک وبسایت کاربرپسند و منحصر به فرد ایجاد کنید.
سوالات متداول
زیر پوستهها یا Child Themes یکی از ابزارهای قدرتمند در طراحی وبسایتهای وردپرسی هستند. در اینجا به برخی از سوالات متداول در مورد زیر پوستهها پاسخ میدهیم.
زیر پوسته چیست؟
زیر پوسته یک پوسته فرعی است که از یک پوسته اصلی (یا والد) به ارث میبرد. این به شما این امکان را میدهد که تغییرات و سفارشیسازیهای مورد نظر خود را بدون تغییر در کدهای پوسته اصلی انجام دهید.
چرا باید از زیر پوسته استفاده کنیم؟
- حفظ تغییرات: با استفاده از زیر پوسته، تغییرات شما در هنگام بهروزرسانی پوسته اصلی حفظ میشود.
- سفارشیسازی آسان: میتوانید به راحتی کدهای CSS و PHP را تغییر دهید.
- آزمایش و توسعه: زیر پوستهها به شما این امکان را میدهند که ویژگیهای جدید را آزمایش کنید بدون اینکه بر روی سایت اصلی تأثیر بگذارید.
چگونه یک زیر پوسته ایجاد کنیم؟
- یک پوشه جدید در دایرکتوری wp-content/themes ایجاد کنید.
- یک فایل style.css و functions.php در پوشه جدید خود ایجاد کنید.
- در فایل style.css، اطلاعات مربوط به زیر پوسته را اضافه کنید.
- در فایل functions.php، کدهای لازم برای بارگذاری پوسته والد را اضافه کنید.
با دنبال کردن این مراحل، میتوانید به راحتی یک زیر پوسته جدید ایجاد کنید و از مزایای آن بهرهمند شوید. در نهایت، زیر پوستهها ابزاری عالی برای توسعهدهندگان و طراحان وب هستند که میخواهند کنترل بیشتری بر روی طراحی و عملکرد سایت خود داشته باشند.
خیلی ممون از سایت خوبتون بالاخره توانستم زیرپوسته سایتم را بسازم.
دوست گرامی خوشحالیم این مقاله برای شما مفید بوده است. ممنون که همراه ما هستید.
با سلام
تشکر از وب سایت عالی که دارید
وای خیلی خوبه ساییتون
تشکر می کنم از آموزش بسیار عالی شما
دوست عزیز خوشحالیم که این آموزش برای شما مفید بوده است.
با تشکر خیلی دنبال این مطلب بودم مرسی
دوست عزیز خوشحالیم که این مطلب برای شما مفید بوده است. اگر به مباحث وردپرس علاقمند هستید پیشنهاد میکنیم سایر مقالات وبلاگ ما را مطالعه کنید.
مطلب بسیار خوبی بود
خوشحالیم که این مقاله برای شما مفید بوده.
بسیار عالی!!