19 بهم

نحوه ساخت زیرپوسته در وردپرس

زیرپوسته وردپرس

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

 

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

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

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

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

  • استفاده از زیرپوسته یک راه عالی و موثر برای یادگیری توسعه پوسته های وردپرس است.

 

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

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

  • یک پوشه/دایرکتوری برای زیر پوسته

  • فایل style.css

  • فایل functions.php

 

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

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

 

– گام بعدی ساختن فایل 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 میتوانند به دیگر زبان ها ترجمه شوند.

برای مشاهده اطلاعات بیشتر مراجعه کنید به : Translating WordPress & I18n for WordPress Developers

برای چند زبانه سازی زیرپوسته مراحل زیررا دنبال کنید:

  • یک دایرکتوری زبان ایجاد کنید.

    مشابه my-theme/languages

  • فایل های زبان را اضافه کنید.

    نام فایل ها لازم است به صورت he_IL.po و he_IL.mo باشند. (با توجه به زبان قالب شما).

  • لود دامنه متن

    در هنگام اجرای after_setup_theme از تابع ()load_chiled_teme_textdomain در فایلfunctions.php استفاده کنید.

    لازم است دامنه متن تعریف شده در تابع ()load_child_theme_textdomain در ترجمه همه رشته های زیر پوسته استفاده شود.

  • استفاده از توابع GetText برای اضافه کردن پشتیبانی i18n از رشته های شما.

 

مثال: دامنه متن

<?php
/**
 * Setup My Child Theme's textdomain.
 *
 * Declare textdomain for this child theme.
 * Translations can be filed in the /languages/ directory.
 */
function my_child_theme_setup() {
    load_child_theme_textdomain( 'my-child-theme', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );
?>

 

مثال : توابع gettext

<?php
_e( 'Code is Poetry', 'my-child-theme' );
?>

به طور خلاصه تمام رشته های استفاده شده در زیرپوسته قابل ترجمه هستند. ترجمه فایل ها لازم است در دایرکتوری “/languages/” قرار داده شوند.

اشتراک

ارسال نظر