طراحی سایت

پوسته فرزند چیست و چگونه پوسته فرزند ایجاد کنیم؟

اسماعیلی
۰

پوسته فرزند چیست و چگونه پوسته فرزند ایجاد کنیم؟

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

ابتدا باید ببینیم چرا از پوسته فرزند استفاده می کنیم؟

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

اگر قالب خود را مستقیماً تغییر دهید و سپس قالب را به روز رسانی کنید تغییرات قالب از بین می رود. با استفاده از پوسته فرزند مطمئن می شوید که تغییراتی را که اعمال کرده اید حفظ می شوند.
استفاده از پوسته فرزند می تواند زمان توسعه را سریع تر کند.

استفاده از پوسته فرزند یک راه عالی برای یادگیری توسعه قالب های وردپرس است.

چطور یک پوسته فرزند را ایجاد کنیم؟

ایجاد یک پوسته فرزند از قالب والد بدون تغییر

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

 

دایرکتوری پوسته فرزند
style.css
functions.php

 

اولین گام در ایجاد پوسته فرزند، ایجاد پوشه یا دایرکتوری پوسته فرزند است که در wp-content / themes قرار می گیرد. توصیه می شود (گر چه لازم نیست به ویژه اگر شما یک قالب برای استفاده عمومی ایجاد می کنید) که  به نام پوشه پوسته فرزند  شما ‘child-‘ اضافه شود. شما همچنین باید  مطمئن شوید که هیچ فضای خالی در نام پوشه پوسته فرزند شما وجود ندارد که ممکن است منجر به خطا شود. می توانید نام پوسته فرزند خود را طوری انتخاب کنید که مشخص شود مرتبط با کدام قالب والد است. مثلاً بنویسید پوسته فرزند قالب بیست و پنجم. گام بعدی ایجاد یک استایل (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
*/

 

دو نکته است که باید به آنها توجه کنید:

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

گام نهایی این است که استایل های  والد و فرزند  را به تصویر بکشید. توجه داشته باشید که روش قبلی این است که با استفاده ازimport استایل جدول قالب والد را  با استفاده از @ وارد کنید: این دیگر بهترین روش نیست، زیرا زمان بارگیری صفحات استایل  را برای بارگیری افزایش می دهد. روش صحیح نوشتن استایل شیت والد، افزودن یک عمل wp_enqueue_scripts و استفاده از wp_enqueue_style () در functions.php child theme است. بنابراین شما نیاز به ایجاد یک functions.php در پوشه پوسته فرزند  خود دارید. اولین خط از functions.php قالب فرزند  شما یک تگ PHP باز (<؟ php) خواهد بود، پس از آن شما می توانید stylesheets قالب والد و فرزند  خود را مرتب کنید. در مثال زیر تابع تنها در صورتی کار خواهد کرد که قالب های والد  شما تنها از یک style.css اصلی برای نگه داشتن تمام CSS استفاده کند. اگر قالب فرزند  شما دارای بیش از یک فایل CSS (به عنوان مثال. ie.css، style.css، main.css) باشد، باید اطمینان حاصل کنید که تمامی وابستگی های والدین را حفظ کنید.

 

&lt;?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?&gt;

 

اگر style.css قالب فرزند  شما دارای کد CSS واقعی باشد (به طور معمول)، شما باید آن را نیز در نظر بگیرید. تنظیم ‘parent-style’ به عنوان وابستگی اطمینان حاصل خواهد کرد که استایل  شیء فرزند بعد از آن بارگیری شود. از جمله شماره نسخه فرزند ، تضمین می کند که می توانید قالب فرزند داشته باشید. مثال :

 

&lt;?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    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 ),
        wp_get_theme()-&gt;get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?&gt;

 

که در آن والدین استایل  همان دسته $ است  که در قالب والد  زمانی که آن stylesheet خود را ثبت می کند، استفاده می شود.  به عنوان مثال، اگر قالب والد بیست و پنج  است، با نگاه کردن به functions.php برای call wp_enqueue_style () شما می توانید برچسب آن را با استفاده از “twentyfteen style” که موجود است.  در کد فرزندتان، مثال «استایل والد » را با «twentyteen style» جایگزین کنید، مانند:

 

$parent_style = 'twentyfifteen-style';

 

عدم استفاده از برچسب مناسب، یک فایل CSS را بدون نیاز دوبار بارگذاری می کند. این معمولاً بر روی ظاهر سایت تاثیر نمی گذارد، اما آن را ناکارآمد می کند و زمان بارگذاری صفحه شما را افزایش می دهد.

قالب فرزند  شما اکنون برای فعال شدن آماده است. وارد پنل مدیریت سایت خود شوید و به Panels > Appearance > Themes بروید. شما باید قالب فرزند خود را ببینید که آماده برای فعال شدن است. (اگر در نصب وردپرس شما چندین سایت فعال باشد، ممکن است لازم باشد که به پنل مدیریت شبکه خود بروید تا قالب  را فعال کنید (در صفحه Screen Templates Screen Themes). سپس می توانید به پنل مدیریت وردپرس مربوط به سایت خودبروید و پوسته فرزند خود را فعال کنید.

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

 

ایجاد یک پوسته فرزند از یک قالب اصلاح شده موجود

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

  1. با استفاده از FTP ،SSH یا هاستینگ سایت در فایل منیجر از قالب والد سفارشی خود پشتیبان گیری کنید. اگر کارها به خوبی انجام نشدند و نیاز به عقب نشینی داشتید به این کارها نیاز خواهید داشت.
  2. یک قالب فرزند از تب Parent/Child ایجاد کنید، اما فعلاً آن را فعال نکنید. مطمئن شوید که جعبه “Copy Parent Theme Menus, Widgets and other Options” را بررسی کنید. ( آن به نظر می رسد که نویسنده از افزونه ای به نام “Child Theme Configurator” استفاده کرده است. شما باید برای اولین بار این افزونه را نصب کنید.
  3. به تب Files بروید و هر قالب والدی را که میخواهید از لیست قالب های والد   (“Parent Templates” ) تغییر دهید انتخاب کنید و کلیک کنید “Copy Selected to Child Theme.” . وردپرس به طور خودکار قالبی را که فعال شده است را در پوشه جدید قرار می دهد. (اما هنوز آن را فعال نکنید)
  4. در حال حاضر در بخش مکمل –به سمت استایل های اصلاح شده (modified styles) در پوسته فرزند خود حرکت کنید. بهترین کار برای این کار این است که فایل “css” اصلاح شده خود را از والد دانلود کنید و یک DIFF بر خلاف فایل “style.css” والد اصلی خود اجرا کنید و هر بلوک انتخاب شده را به یک فایل جداگانه منتقل کنید . شما می توانید از Notepad ++، TextWrangler یا هر ویرایشگر متن پیشرفته برای پیدا کردن تفاوت بین دو فایل استفاده کنید. اگر شما یک ویرایشگر متن پیشرفته ندارید ، modified stylesheet را باز کنید و به طور دستی هر selector blocks را که به یک فایل متنی جداگانه تغییر داده اید  copy/paste کنید
  5.  هنگامی که همه selectors های تغییر یافته را در یک فایل داشته باشید، همه چیز را در زیر تب Query/Selector در قسمت “Raw CSS” مربوط به جعبه ناحیه متن کپی کنید . روی دکمه “Save” در قسمت سمت چپ جعبه مربوط به متن کلیک کنید (نه در بالای صفحه )
  6.  پوسته فرزند را با استفاده از پیش نمایش زنده تست کنید. به قسمت Appearance > Themes بروید و روی آیکون پوسته فرزند “Live Preview” را کلیک کنید. آن باید تمام تغییرات شما را به درستی نشان دهد. اگر اینطور نبود مراحل ۳ تا ۵ را تکرار کنید تا همه چیز کار کند.
  7. پوسته والد را برای اینکه نسخه تازه و تمیز را دریافت کنید دوباره نصب کنید و مرحله ۶ را دوباره تکرار کنید. اگر متوجه شدید که چیزی اشتباه است، لازم است که تحقیق کنید ببینید چه چیزی را اشتباه کپی کرده اید. در صورت لزوم،به بک آپ قالب والد بازگردید و دوباره شروع کنید.
  8. وقتی همه چیز خوب به نظر رسید،  به Appearance > Themes بروید و پوسته فرزند جدید خود را فعال کنید. سپس می توانید تغییرات را در پوسته فرزند اعمال کنید بدون اینکه به پوسته والد کاری داشته باشید.

 

فایل های قالب

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

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

 

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

بر خلاف  style.css، functions.php  متعلق به پوسته فرزند مثل فایل های مشابه خود در پوسته والد نیست. در عوض، آن علاوه بر functions.php   متعلق به پوسته والد بارگذاری می شود ( مخصوصاً درست قبل از فایل های والد بارگذاری شده است)

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

ساختار تابع functions.php ساده است: یک تگ باز  php  در بالا، و زیر آن، بیت های  php  قرار می گیرد. در درون آن می توانید توابع زیاد یا کم را به هر اندازه که دارید قرار دهید. مثال زیر یک فایل اولیه  functions.php را نشان می دهد که یک کار ساده انجام می دهد: یک favicon link به عنصر head  متعلق به صفحات  html  اضافه می کند.

&lt;?php // Opening PHP tag - nothing should be before this, not even whitespace

// Custom Function to Include
function my_favicon_link() {
    echo '&lt;link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /&gt;' . "\n";
}
add_action( 'wp_head', 'my_favicon_link' );

 

راهنمایی برای توسعه دهندگان قالب. این واقعیت که functions.php اول بارگذاری می شود به این معنی است که شما می توانید توابع کاربر قالب خود را قابل برنامه ریزی کنید – که توسط پوسته فرزند قابل تعویض است – در صورتی که آنها را به صورت شرطی اعلام کنید . برای مثال :

 

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        //  Do something.
    }
}

به این ترتیب، یک پوسته فرزند به سادگی فقط با اعلام از قبل  می تواند جایگزین یک تابع  php  از پوسته والد شود.

 

ارجاع/اضافه کردن فایل ها در پوسته فرزند شما

وقتی به فایل هایی نیاز دارید که در ساختار پوشه پوسته فرزند شما قرار دارند، شما از get_stylesheet_directory().  استفاده خواهید کرد. از آنجا که style.css متعلق به قالب والد شما توسط style.css پوسته فرزند شما جایگزین شده است و style.css شما در ریشه زیر شاخه پوسته فرزند شما قرار می گیرد، get_stylesheet_directory() به پوشه پوسته فرزند شما اشاره می کند( نه به پوشه پوسته والد ).

اینجا یک مثال وجود دارد، استفاده کردن از require_once که نشان می دهد شما چگونه می توانید از get_stylesheet_directory استفاده کنید وقتی در حال ارجاع یک فایل ذخیره شده در ساختار پوسته فرزند خود هستید.

require_once( get_stylesheet_directory() . '/my_included_file.php' );

اطلاعات مفید دیگر

از فرمت های پست استفاده کنید

یک پوسته فرزند فرمت های پستی را تعیین می کند که پوسته والد تعیین کرده است. وقتی پوسته فرزند را ایجاد می کنید، مراقب باشید که از add_theme_support(‘post-formats’) استفاده کنید این کار باعث می شود که فرمت های تعریف شده   از پوسته والد حذف یا اضافه نکند.

پشتیبانی RTL

برای پشتیبانی از زبان های RTL فایل rtl.css را به پوسته فرزند خود اضافه کنید که شامل :

/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
*/

اگر is_rtl() مقدار درست را برگرداند rtl.css  فقط توسط وردپرس بارگیری می شود.

توصیه می شود فایل rtl.css را به پوسته فرزند خود  اضافه کنید، حتی اگر پوسته والد  دارای فایل rtl.css باشد.

 

بین المللی شدن

پوسته فرزند مانند سایر برنامه ها می تواند با استفاده از توابع gettext به سایر زبان ها ترجمه شود.

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

 

یک مسیر languages اضافه کنید.

چیزی شبیه به این : my-theme/languages

 

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

نام های فایل شما باید he_IL.po & he_IL.mo باشند. (بستگی به زبان شما دارد) برخلاف فایل های افزونه که

domain-he_IL.xx هستند.

 

یک textdomain بارگذاری کنید.

از load_child_theme_textdomain() در functions.php هنگام استفاده از اکشن  after_setup_theme استفاده کنید.

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

 

از GetText functions جهت اضافه کردن پشتیبانی i18n برای رشته های خود استفاده کنید.

مثال :textdomain

&lt;?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' );
?&gt;

مثال:gettext functions

&lt;?php
esc_html_e( 'Code is Poetry', 'my-child-theme' );
?&gt;

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

نکته : مراقب باشید از دستوراتی که @import دارند استفاده نکنید و به جای آن از دستور wp_enqueue_script() که در بالا توضیح داده شد استفاده کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این مقاله مکمل را حتما بخوانید

بستن
دکمه بازگشت به بالا
بستن
بستن