تم کودک تمی است که کارایی و طراحی تم دیگری به نام "والد" را به ارث می برد. تم کودک روشی است که توسط توسعه دهندگان WP برای تغییر یک تم موجود برای مطابقت با نیازهای شما توصیه می شود.
چرا از تم کودک استفاده کنیم؟
دلایل مختلفی وجود دارد که چرا می‌خواهید از طرح زمینه کودک استفاده کنید:
- اگر تم را مستقیماً تغییر دهید و به‌روزرسانی شود، تغییرات شما به سادگی از بین می‌رود. با استفاده از طرح زمینه کودک، می توانید مطمئن باشید که تغییرات شما ذخیره می شود.
- استفاده از تم کودک می تواند زمان توسعه را تسریع کند.
- استفاده از پوسته کودک راه خوبی برای یادگیری فرآیند توسعه قالب وردپرس است.
چگونه یک تم کودک وردپرس بسازیم
یک طرح زمینه فرزند حداقل از یک پوشه (دایرکتوری تم فرزند) و دو فایل (style.css و functions.php) تشکیل شده است که باید ایجاد کنید. بنابراین، شما نیاز خواهید داشت:
- دایرکتوری تم کودک
- style.css
- functions.php
اولین قدم ایجاد یک دایرکتوری برای تم فرزند است که در پوشه wp-content/themes قرار خواهد گرفت. توصیه می شود که نام دایرکتوری تم فرزند با پسوند "-child" ختم شود (البته لازم نیست، به خصوص اگر تم را برای استفاده عمومی ایجاد می کنید).
همچنین باید مطمئن شوید که هیچ فاصله ای در نام دایرکتوری برای تم فرزند وجود ندارد، در غیر این صورت باعث خطا می شود. در تصویر بالا، نام طرح زمینه فرزند ما "بیست و پانزده فرزند" است، به این معنی که موضوع اصلی بیست و پانزده.
مرحله بعدی ایجاد یک فایل سبک برای تم فرزند (style.css) است. شیوه نامه باید با متا اطلاعات زیر شروع شود:
/* نام تم: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ توضیحات: Twenty Fifteen Child Theme نویسنده: John Doe URI نویسنده: http://example.com الگو: twentyfifteen نسخه: مجوز 1.0.0: مجوز عمومی عمومی گنو نسخه 2 یا بالاتر URI مجوز: http://www.gnu.org/licenses/gpl-2.0.html برچسب ها: روشن، تیره، دو ستونی، نوار سمت راست، طرح بندی پاسخگو، دامنه متن آماده دسترسی: بیست و پانزده فرزند */
نام موضوع: بیست و پانزده کودک URI طرح زمینه: http://example.com/twenty-fifteen-child/ توضیحات: تم کودک بیست و پانزده URI نویسنده: http://example.com الگو: بیست و پانزده نسخه: 1.0.0 مجوز: مجوز عمومی عمومی گنو نسخه 2 یا بالاتر URI مجوز: http://www.gnu.org/licenses/gpl-2.0.html برچسب ها: روشن ، تاریک ، دو ستونی ، نوار کناری سمت راست ، طرح بندی پاسخگو ، آماده دسترسی دامنه متن: بیست و پانزده فرزند |
اطلاعات مهمی که باید از آنها آگاه باشید:
- شما باید متن این مثال را بر اساس موقعیت خود جایگزین کنید.
- خط "Template" مربوط به نام دایرکتوری تم اصلی است. در مثال ما، موضوع والد Twenty Fifteen است، بنابراین خط "Template" حاوی "twentyfifteen" است. پرونده شما ممکن است موضوع متفاوتی داشته باشد، بنابراین مطابق با آن تنظیم کنید.
- در اصل، فایل سبک (style.css) برای ایجاد یک تم فرزند کافی است. با این حال، برای قرار دادن درست در صف بارگذاری فایل های سبک، به یک فایل functions.php نیاز دارید (به زیر مراجعه کنید).
مرحله سوم و آخر این است که فایل های سبک والد و فرزند را در صف قرار دهید.
توجه داشته باشید که روش قبلی شامل وارد کردن سبک‌های والد با استفاده از دستور @import بود. این در حال حاضر یک عمل منسوخ شده است.
نحوه بارگذاری صحیح و صحیح استایل ها
روش صحیح برای ردیف کردن فایل سبک های والد افزودن است قلاب(یا به زبان انگلیسی، عمل) به عنوان یک تابع wp_enqueue_scripts.
این روش همچنین شامل استفاده از تابع ()wp_enqueue_style در فایل functions.php فرزند می باشد. بنابراین شما باید این فایل را در دایرکتوری تم فرزند خود ایجاد کنید.
خط اول فایل functions.php فرزند با تگ PHP باز شروع می شود (
اگر تم والد فقط از یک فایل style.css اصلی حاوی تمام قوانین CSS استفاده کند، تابع مثال زیر کار خواهد کرد. اگر طرح زمینه شما بیش از یک فایل css. (i.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 "))))
add_action ("wp_enqueue_scripts" , "theme_enqueue_styles" ); تابع 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"، آرایه ("سبک والدین") |
طرح زمینه فرزند شما اکنون آماده فعال شدن است. وارد پنل مدیریت شوید، سپس به صفحه بروید ظاهر > تم ها. شما باید طرح زمینه فرزند خود را در لیست تم ها ببینید و آماده فعال سازی باشد. (اگر چند سایت در نصب فعلی شما فعال است، باید به پانل مناسب برای فعال کردن تم بروید. پس از آن، به عقب برگردید و موضوع را فعال کنید).
مهم: پس از فعال سازی باید منوی خود را دوباره ذخیره کنید ( ظاهر > منویا ظاهر > اهنگ> منو) و گزینه‌های طرح زمینه، از جمله تصویر پس‌زمینه و تصویر سرصفحه، اگر توسط طرح زمینه اصلی ارائه شده باشد.
فایل های قالب
اگر می‌خواهید بیشتر از استایل‌ها را تغییر دهید، راهی وجود دارد که می‌توانید فایل‌های تم والد را لغو کنید. برای انجام این کار، کافی است فایلی با همین نام در پوشه تم فرزند خود قرار دهید. بنابراین، در طول فرآیند بارگذاری سایت، فایل مربوطه را در دایرکتوری تم والد «نادیده می‌کند».
به عنوان مثال، اگر می خواهید کد پی اچ پی هدر سایت خود را تغییر دهید، می توانید یک فایل header.php را در دایرکتوری تم فرزند خود قرار دهید و این فایل به جای header.php تم اصلی استفاده می شود.
همچنین می توانید فایل هایی را در طرح زمینه فرزند قرار دهید که در اصل در طرح زمینه اصلی نبوده اند. برای مثال، می‌توانید یک الگوی کاربردی‌تر از والد آن برای یک صفحه یا دسته خاص ایجاد کنید.
با استفاده از functions.php
برخلاف style.css، فایل functions.php یک تم فرزند کپی والد را لغو نمی کند. برعکس، همانطور که بود، افزودنی به آن است (به طور دقیق تر، بارگذاری شده است قبل ازکپی پدر).
بنابراین، functions.php یک تم فرزند روشی هوشمندانه و بدون دردسر برای تغییر عملکرد تم والد ارائه می‌کند. فرض کنید می خواهید یک تابع PHP به موضوع خود اضافه کنید. سریعترین راه این است که فایل functions.php تم خود را باز کنید و تابع را در آنجا قرار دهید. اما این خیلی هوشمندانه نیست: دفعه بعد که تم به روز می شود، عملکرد شما به سادگی ناپدید می شود.
یک راه جایگزین وجود دارد که معقول تر خواهد بود: می توانید یک تم فرزند ایجاد کنید، یک فایل functions.php به آن اضافه کنید و تابع خود را در فایل جدید ایجاد شده قرار دهید. این تابع همان کار را از آنجا انجام می دهد، با این مزیت که از به روز رسانی های بعدی تم والد رنج نمی برد. از این رو، یک نکته مهم: کل محتوای فایل functions.php والد را در همان فایل فرزند کپی نکنید.
ساختار functions.php ساده است: یک تگ باز کننده PHP در ابتدا، و در زیر آن کد PHP خود را قرار می دهید. شما می توانید به تعداد کدی که نیاز دارید در این فایل قرار دهید. مثال زیر یک فایل ابتدایی functions.php را نشان می دهد که یک کار ساده را انجام می دهد: یک پیوند به فاویکون به تگ اضافه کنید.
صفحات HTML" . "\n"; ) add_action("wp_head", "favicon_link");
نکته برای توسعه دهندگان تم: این واقعیت که functions.php theme فرزند ابتدا بارگذاری می‌شود به این معنی است که می‌توانید توابع کاربر را نادیده بگیرید توابع توسعه‌دهنده، یعنی. اگر کاربر همان عملکرد شما را ایجاد کند، به اصلی تبدیل می شود. فقط یک شرط اضافه کنید:
if (! function_exists("theme_special_nav")) (function theme_special_nav() (// کاری انجام دهید. ) )
در این حالت، تم فرزند می‌تواند جایگزین تابع PHP والدین به سادگی با اعلام از قبل شود.
شامل فایل‌ها در طرح زمینه فرزندتان
هنگامی که نیاز دارید فایلی را اضافه کنید که باید بخشی از ساختار تم فرزند باشد، از تابع get_stylesheet_directory() استفاده کنید. از آنجایی که فایل stylesheet والد، style.css، با یک style.css فرزند جایگزین شده است، و فرزند style.css در پوشه ریشه زیرشاخه موضوع فرزند قرار دارد، get_stylesheet_directory() به دایرکتوری تم فرزند اشاره می کند، نه والدین.
در زیر نمونه‌ای از استفاده از ساختار require_once است که نشان می‌دهد چگونه می‌توانید از get_stylesheet_directory زمانی که نیاز دارید به یک فایل ذخیره‌شده در ساختار تم فرزند پیوند دهید، استفاده کنید.
require_once(get_stylesheet_directory() . "/my_included_file.php");
require_once (get_stylesheet_directory () . "/my_included_file.php" ); |
اطلاعات مفید اضافی
استفاده از فرمت های پست
طرح زمینه فرزند فرمت های پست تعریف شده در موضوع اصلی را به ارث می برد. هنگام ایجاد یک طرح زمینه فرزند، توجه داشته باشید که استفاده از add_theme_support ("پس فرمت ها") به جای افزودن به آنها، قالب های تعریف شده در طرح زمینه اصلی را لغو می کند.
پشتیبانی از RTL (نوشتن از راست به چپ)
برای پشتیبانی از زبان‌های RTL، یک فایل rtl.css را به طرح زمینه فرزند خود اضافه کنید. او حاوی:
/* نام تم: قالب بیست و چهارده کودک: بیست و چهارده */
تم فرزند وردپرس تمی است که عملکرد تم دیگری به نام تم والد را گسترش می دهد و به شما اجازه می دهد تا عملکرد تم والد را تغییر دهید یا گسترش دهید. این مقاله نحوه ایجاد یک تم کودک ساده را به شما نشان می دهد و توضیح می دهد که چه کاری می توانید با آن انجام دهید. یک نمونه تم والد Twenty Ten است که تم پیش‌فرض جدید در .
توجه! اگر درک اطلاعات زیر دشوار به نظر می‌رسد، می‌توانید با استفاده از افزونه Child Theme Configurator از روشی جدیدتر و سریع‌تر برای ایجاد یک تم فرزند استفاده کنید.
ایجاد تم کودک بسیار ساده است. یک پوشه ایجاد کنید، فایل مناسب نوشته شده را در آن قرار دهید style.cssو تم کودک آماده است! با کمی درک از HTML و , می توانید این را تغییر دهید یک تم کودک بسیار ساده- تغییر ظاهر و چیدمان تم والد، اما بدون تغییر فایل های آن. به این ترتیب، هنگامی که تم والد به روز می شود، تغییرات شما ذخیره می شود.
تم های کودک در وردپرس به شما این امکان را می دهد که تغییراتی در قالب های موجود ایجاد کنید به گونه ای که با به روز رسانی تم اصلی (یا والدین) چنین تغییراتی از بین نرود. علاوه بر ظاهر، تم های فرزند به شما این امکان را می دهند که نشانه گذاری و حتی عملکرد تم والد را تغییر دهید و آن را متناسب با نیازهای خود گسترش دهید.
پشتیبانی از تم های کودک در وردپرس مدت ها پیش ظاهر شد، اما امروزه اکثر کاربران ترجیح می دهند که به طور مستقیم تغییراتی را در کد موضوع اصلی ایجاد کنند. در این مقاله، نحوه عملکرد تم های کودک در وردپرس و اینکه چرا باید از تم های کودک برای ایجاد هر گونه تغییر در قالب های موجود استفاده شود، خواهیم پرداخت.
تم کودک چیست؟
تم فرزند در وردپرس تمی است که ظاهر و تمام عملکرد تم اصلی (اصلی) را به ارث می برد. این وراثت به شما این امکان را می دهد که به راحتی بدون تغییر خود تم اصلی، بخش های جداگانه تم اصلی را تغییر داده و تکمیل کنید. به لطف این رویکرد، به‌روزرسانی موضوع اصلی بر چنین تغییراتی تأثیری نخواهد داشت.
پوسته والد می تواند هر تم وردپرس دیگری باشد (به استثنای تم های فرزند) و برای اینکه تم فرزند کار کند، هر دو تم باید نصب شده باشند، اما کودک باید فعال شود.
نحوه ایجاد تم کودک
ساده ترین طرح زمینه فرزند شامل یک فایل style.css است که نام تم فرزند و نام دایرکتوری حاوی تم والد را مشخص می کند. همین فایل اغلب با استفاده از دستور العمل CSS @import به شیوه نامه تم والد ارجاع می دهد.
به عنوان مثال، ما یک طرح زمینه فرزند به نام My Child Theme ایجاد می کنیم و از تم پیش فرض Twenty Twelve به عنوان موضوع اصلی استفاده می کنیم.
ابتدا، مطمئن شوید که موضوع اصلی وجود دارد - فهرست بیست دوازده را در wp-content/themes پیدا کنید. سپس یک دایرکتوری جدید در wp-content/themes ایجاد کنید و نام آن را my-child-theme بگذارید. در این دایرکتوری جدید، یک فایل style.css ایجاد کنید و هدر زیر را در آن قرار دهید:
/** * نام تم: طرح زمینه فرزند من * الگو: twentytwelve */ @import url("../twentytwelve/style.css");
با استفاده از این هدر، نام موضوع جدید خود را تعیین کردیم و همچنین موضوع اصلی را مشخص کردیم. دستور @import در این مورد همه استایل‌ها را از موضوع بیست دوازده بارگیری می‌کند، که در بالای آن تغییرات خود را اعمال خواهیم کرد. بدون این دستورالعمل، طرح زمینه فرزند ما فقط الگوهای (نشانه گذاری) طرح زمینه اصلی را به ارث می برد و نه سبک.
پس از این، دایرکتوری themes شما باید چیزی شبیه به این باشد:
با رفتن به Appearance → Themes خواهید دید که تم جدید شما از قبل برای فعال سازی در دسترس است.
اگر آن را فعال کنید و به صفحه اصلی سایت خود بروید، خواهید دید که تم فرزند شما دقیقاً شبیه تم استاندارد Twenty Twelve است.
کار با سبک ها
سبک‌های CSS تم کودک را می‌توان مستقیماً در فایل style.css درست بعد از دستور @import تنظیم کرد. به عنوان مثال، برای تنظیم رنگ پس‌زمینه و رنگ پیوند در تم خود، کد زیر را به انتهای شیوه نامه اضافه کنید:
بدنه (پس زمینه: قرمز؛ ) a (رنگ: سبز؛ )
به این ترتیب، می‌توانید استایل‌های هر عنصری از تم والد را تغییر دهید و با استفاده از ابزارهای توسعه‌دهنده در مرورگر Google Chrome یا با استفاده از افزونه Firebug برای مرورگر فایرفاکس، عنصر مورد نیاز را به راحتی پیدا کنید.
کار با قالب ها
با یک تم فرزند، می توانید به راحتی خود قالب های تم والد را نیز تغییر دهید. برای این کار کافیست یک فایل در تم فرزند با همان نام قالب موجود در تم والد ایجاد کنید. به عنوان مثال، برای جایگزینی الگوی footer.php با الگوی خود، یک فایل footer.php در دایرکتوری تم فرزند خود ایجاد کنید: