بهترین آموزش از چگونگی نحوه ساخت زیرپوسته در وردپرس

چرا از زیر پوسته استفاده می‌شود؟

چندین دلیل برای استفاده از زیر پوسته در ساخت سایت وجود دارد:

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

روش ایجاد زیر پوسته

یک زیر پوسته شامل حداقل یک دایرکتوری (پوشه) و دو فایل style.css و functions.php هست که لازم است آنها را ایجاد کنید:

• یک پوشه/دایرکتوری برای زیر پوسته
• فایل style.css
• فایل functions.php

اولین گام برای ایجاد یک زیرپوسته

ساختن پوشه اصلی زیرپوسته در مسیر wp-content/themes می‌باشد.

توصیه می‌شود نام پوشه زیرپوسته شما با ‘child-‘ ایجاد شود مانند: twentyfifteen-child که twentyfifteen نام پوسته اصلی میباشد. (هر چند انجام این مورد ضروری نیست).

گام بعدی ساختن فایل 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 و wp_enqueue_style() در functions.php زیر پوسته میباشد. بنابراین لازم است فایل functions.php را در فولدر اصلی زیرپوسته ایجاد کنید.

در خط اول فایل functions.php تگ php را باز کنید (php?>)، بعد از آن شما میتوانید پوسته اصلی و زیرپوسته ها را در نوبت اجرا قرار دهید.

در مثال زیر تابع زمانی کار می‌کند که پوسته اصلی (والد) فقط از یک style.css اصلی برای نگهداری همه css ها استفاده کرده باشد. اگر پوسته اصلی بیشتر از یک فایل css داشته باشد (eg. ie.css, style.css, main.css) شما باید مطمئن شوید که همه تنظیمات وابسته به پوسته اصلی حفظ میشوند.

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ ); 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’) ); }

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

Administration Panels > Appearance > Themes

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

قبل از فعالسازی زیرپوسته ابتدا روی پیش نمایش آن کلیک کنید تا از عملکرد زیرپوسته مطمئن شوید در صورتی که مشکلی مشاهده نشد آنرا فعال کنید در غیر اینصورت ابتدا سعی کنید مشکل را برطرف نمایید سپس زیرپوسته را فعال نمایید.

نکته: ممکن است که نیاز باشد منوها (Appearance > Menus, or Appearance > Customize > Menus) و تنظیمات پوسته ( شامل تصویر بکگراند و هدر ) را بعد از فعالسازی زیر پوسته، دوباره ذخیره کنید.

فایل های قالب (پوسته)

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

به سادگی میتوانید یک فایل با همین نام در دایرکتوری (پوشه اصلی) زیرپوسته قرار دهید با اینکار هنگام لود سایت فایل معادل در دایرکتوری پوسته اصلی نادیده گرفته میشود و فایل مربوطه از دایرکتوری زیرپوسته لود میگردد.

به عنوان مثال اگر شما بخواهید کد پی اج پی هدر سایت را تغییر دهید میتوانید فایلی با نام header.php در فولدر زیرپوسته خود قرار دهید که این فایل به جای فایل header.php موجود در فولدر پوسته اصلی استفاده می‌شود.

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

استفاده از فایل functions.php

برخلاف style.css فایل 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/” قرار داده شوند.