ساخت و ایجاد تم کودک در وردپرس (3 روش)
اشتراک گذاری
اگر از کاربران مکرر وردپرس هستید، احتمالاً با تم های کودک آشنا هستید. اگر تازه وارد وردپرس هستید، یا قبلا از تم های کودک استفاده نکرده اید، این پست برای شما مناسب است!
در این مقاله، هدف از تم های کودک و چگونگی ایجاد سریع تم های خود را توضیح خواهیم داد.فهرست مطالب
- تم های کودک چیست؟
- چرا باید از تم کودک استفاده کنید؟
- راهنمای گام به گام ایجاد تم کودک
- روش 1: از Astra Child Theme Generator استفاده کنید
- روش 2: از یک پلاگین استفاده کنید
- روش 3: یک تم کودک به صورت دستی ایجاد کنید
- سایر نکات قالب وردپرس
- نتیجه
تم های کودک چیست؟
تم کودک به شما امکان می دهد تغییراتی در قالب وردپرس خود ایجاد کنید و آنها را از قالب معمولی (“والد”) خود جدا نگه دارید. آنها به دلایل متعددی مفید هستند، اما مهمتر از همه، زیرا به شما امکان می دهند بدون پاک کردن تغییرات خود، موضوع خود را به روز نگه دارید.
به زبان ساده:
- تم والد، تم معمولی وردپرس شما است. مثلا آسترا.
- طرح زمینه فرزند کپی آن طرح زمینه والد است که به جدا نگه داشتن تغییرات و به‌روزرسانی‌ها از آن کمک می‌کند.
چرا باید از تم کودک استفاده کنید؟
چندین دلیل خوب برای استفاده از تم کودک وجود دارد:
- از تم اصلی شما در برابر اشتباهات محافظت می کند. اگر تغییری در تم خود ایجاد کنید و سایت خود را در این فرآیند خراب کنید، رفع آن آسان است. به سادگی فایل تم فرزند را حذف کنید و یک مورد جدید را از موضوع اصلی کپی کنید. اگر طرح زمینه اصلی را مستقیماً تغییر دهید، رفع آن به زمان و تلاش بسیار بیشتری نیاز دارد.
- این سفارشی سازی های شما را جدا نگه می دارد. همیشه تمرین خوبی است که هر گونه افزوده یا اصلاح را از فایل اصلی جدا نگه دارید، زیرا مشاهده و تنظیم تغییرات را آسان تر می کند. بیشتر قالب‌های وردپرس دقیقاً به همین دلیل دارای بخش «CSS سفارشی» هستند.
- اگر طرح زمینه به‌روزرسانی شود، تغییرات شما پاک نمی‌شوند. به روز نگه داشتن تم برای اهداف امنیتی ضروری است. اما اگر تغییراتی در طرح زمینه والد خود ایجاد کنید، ممکن است پس از هر به‌روزرسانی پاک شوند. راه حل؟ از تم کودک استفاده کنید. حتی اگر طرح زمینه اصلی را به‌روزرسانی کنید، طرح‌های زمینه کودک ثابت باقی می‌مانند.
راهنمای گام به گام ایجاد قالب فرزند
ما برای این راهنما، از قالب تم، Astra استفاده خواهیم کرد . مهم نیست که از چه قالب تمی استفاده می کنید، فرآیند باید عمدتاً یکسان باشد.
سه راه برای ایجاد یک قالب تم کودک وجود دارد:
- با استفاده از Astra Child Theme Generator
- با نصب افزونه قالب تم فرزند (کودک)
- با ایجاد دستی فایل ها و پوشه ها در دایرکتوری وردپرس خود
روش 1: از Astra Child Theme Generator استفاده کنید
در اینجا در Astra، ما ابزار قدرتمندی داریم که به شما امکان می‌دهد یک تم کودک برای تم Astra خود ایجاد کنید. Astra Child Theme Generator به شما امکان می دهد با یک کلیک ساده یک تم کودک ایجاد کنید.
برای استفاده از ژنراتور به این لینک بروید و فرم را پر کنید. اگر روی “گزینه های پیشرفته” کلیک کنید، می توانید جزئیات اضافی مانند نویسنده، توضیحات و نام پوشه را اضافه کنید. در صورت تمایل می توانید یک اسکرین شات نیز اضافه کنید.
سپس روی Generate کلیک کنید. طرح زمینه کودک در رایانه شما دانلود می شود.
می‌توانید آن را مانند هر تم دیگری به سایت خود اضافه کنید: به Appearance > Themes بروید سپس روی Add New کلیک کنید .
2: از یک پلاگین استفاده کنید
تعدادی پلاگین رایگان در مخزن وردپرس موجود است که به شما امکان می دهد یک قالب تم فرزند یا کودک ایجاد کنید. همه آنها کمابیش یکسان عمل می کنند، اگرچه تعداد کمی از آنها ویژگی های منحصر به فردی دارند.
پیکربندی تم کودک
با بیش از 300000 نصب، این افزونه تنها محبوب ترین افزونه تم کودک موجود است. بیش از دوازده گزینه دارد که به شما امکان می دهد تم کودک خود را سفارشی کنید.
بیایید با استفاده از این افزونه برای ایجاد یک تم کودک قدم برداریم.
1. افزونه را از این لینک دانلود و در وب سایت وردپرس خود آپلود کنید.
2. پس از فعال سازی افزونه، برای استفاده از افزونه به مسیر Tools > Child Themes بروید.
3. در تب اول، یک جادوگر برای ایجاد یک تم کودک خواهید دید. تم والدین خود را انتخاب کنید، سپس روی دکمه Analyze کلیک کنید تا افزونه آن را ارزیابی کند.
اگر تم شما مناسب است (همانطور که تم Astra است)، یک پیام تأیید دریافت خواهید کرد.
در زیر پیام تایید تعدادی تنظیمات وجود دارد. ابتدا دایرکتوری تم را نام ببرید. توجه داشته باشید که این نام پوشه است ، نه نام خود موضوع.
سپس، محل ذخیره استایل ها را انتخاب کنید. می توانید از فایل style.css پیش فرض استفاده کنید یا آن را در یک شیوه نامه جداگانه ذخیره کنید.
در مرحله بعد، نحوه دسترسی به شیوه نامه تم والدین را انتخاب کنید. برای اطلاعات بیشتر در مورد این فرآیند، بخش Enqueue the Stylesheet را در زیر بخوانید .
با کلیک بر روی دکمه پانل ویژگی های تم را باز کنید. در اینجا، می‌توانید نام، وب‌سایت، نویسنده و وب‌سایت نویسنده طرح زمینه کودک را اضافه کنید.
در مرحله آخر، می‌توانید منوها، ابزارک‌ها و سایر تنظیمات را از طرح زمینه اصلی خود در طرح زمینه فرزند کپی کنید.
در نهایت، روی دکمه ایجاد تم کودک جدید خود کلیک کنید. وویلا!
سایر پلاگین ها
این افزونه های دیگر نیز به روشی مشابه عمل می کنند.
Child Theme Wizard : این افزونه دارای یک “جادوگر” است که شما را به صورت گام به گام در این فرآیند راهنمایی می کند.
Generate Child Theme : این یک پلاگین استاندارد برای ایجاد یک تم کودک است. این ساده تر است و ویژگی های کمتری نسبت به سایر گزینه ها دارد که به شما امکان می دهد تم کودک را سریعتر ایجاد کنید.
Childify Me : یک افزونه قوی دیگر با چند گزینه سفارشی سازی مختلف.
Child Theme Creator توسط Orbisius : یکی دیگر از افزونه های محبوب، با بیش از 30000 نصب.
Child Theme Generator : یک پلاگین ساده اما دارای امتیاز بالا
روش 3: یک قالب تم کودک به صورت دستی ایجاد کنید
اگر ترجیح می دهید خودتان یک قالب تم کودک ایجاد کنید، می توانید این کار را نیز انجام دهید!
مرحله 1: دسترسی به سایت خود از طریق FTP/SFTP، SSH یا مرورگر فایل در سی پنل
ابتدا باید به سایت خود متصل شوید تا بتوانید چند فایل را آپلود کنید. ساده ترین راه برای انجام این کار از طریق برنامه های، FileZilla (FTP/SFTP)، Putty (SSH) یا مرورگر فایل در کنترل پنل میزبانی هاست شما (cPanel یا Plesk) است.
اگر مطمئن نیستید که چگونه این کار را انجام دهید؟ یکی از راهنماهای زیر را بخوانید.
- برای دسترسی به سایت خود از طریق FTP/SFTP، این راهنما را بخوانید.
- برای دسترسی به سایت خود از طریق SSH، این راهنما را بخوانید.
- برای دسترسی به سایت خود از طریق مدیریت فایل در کنترل پنل با سی پنل، این راهنما را بخوانید.
- برای دسترسی به سایت خود از طریق مدیریت فایل در کنترل پنل خود با Plesk، این راهنما را بخوانید.
پس از ورود به سایت، به پوشه / wp-content بروید . سپس، به /themes بروید .
در آنجا، یک پوشه برای تم کودک ایجاد کنید و آن را astra-child بنامید. قسمت اول نام باید نام تم والد و به دنبال آن یک خط تیره و کلمه فرزند باشد.
مرحله 2: فایل Style.css را ایجاد کنید
اکنون باید یک فایل style.css ایجاد کنیم که حاوی کد CSS شما باشد. CSS که مخفف عبارت Cascading Style Sheets است، زبانی است که برای طراحی عناصر در وب سایت ها استفاده می شود.
اگر کاملاً با CSS آشنا نیستید، برخی از این راهنماهای مبتدی را بررسی کنید:
- Codecademy – CSS را یاد بگیرید
- W3 Schools – آموزش CSS
- ترفندهای CSS
- Smashing Magazine – چگونه CSS را یاد بگیریم
آیا از قبل با استفاده از CSS راحت هستید؟ ویرایشگر متن مورد علاقه خود را باز کنید ، یک فایل جدید ایجاد کنید و آن را به عنوان style.css ذخیره کنید.
سپس متن زیر را کپی و پیست کنید. مطمئن شوید که محتوا را مطابق با نام وب سایت یا شرکت خود تغییر دهید.
/*
Theme Name: Astra Child
Theme URI: http://example.com/astra-child
Description: Astra Child Theme is an awesome theme.
Author: Brainstorm Force
Author URI: https://www.wpastra.com
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: astra
Text Domain: astrachild
*/
سپس، فایل را از طریق FTP/SFTP، SSH یا مدیریت فایل cPanel/Plesk به پوشه astra-child سایت خود اضافه کنید.
مرحله 3: Stylesheet را در صف قرار دهید
اکنون باید یک خط کد کوتاه اضافه کنیم که تم والد را به تم فرزند متصل می کند.
دو راه برای انجام این کار وجود دارد؛ اولی آسان اما ناکارآمد است، در حالی که دومی بیشتر طول می کشد اما توسط وردپرس توصیه می شود.
روش اول
این روش اول منسوخ تلقی می شود زیرا زمان بارگذاری شیوه نامه را افزایش می دهد. با این حال، انجام این کار بسیار ساده‌تر است و اگر سایت شما بزرگ نیست، نقطه ضعف عملی بسیار کمی وجود دارد.
این امر مخصوصاً زمانی صادق است که فقط تعداد کمی ویرایش در موضوع کودک انجام دهید.
به سادگی کد زیر را به پایین فایل style.css خود اضافه کنید:
@import url(“../astra/style.css");روش دوم
روش دوم توسط WordPress.org توصیه شده است، اما به دانش فنی کمی بیشتر نیاز دارد. این روش ترجیحی است، به خصوص اگر سایت بزرگتری دارید و سعی می کنید زمان بارگذاری صفحه را بهینه کنید.
در نوار کناری مدیریت وردپرس خود، به Appearance > Theme Editor بروید .
تم فرزند خود را انتخاب کنید و فایل functions.php را پیدا کنید . اگر ندارید، آن را ایجاد کنید.
خط اول این فایل باید یک تگ PHP باز (<?php) باشد که کد زیر را دنبال می کند:
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( ' astra-child', get_stylesheet_uri(),
array( astra ),
wp_get_theme()->get('Version') // this only works if you have Version in the style header
);
}
مطمئن شوید که astra-child را با نام طرح زمینه فرزند خود و آرایه ( astra ) با Slug تم والدین جایگزین کنید.
توجه داشته باشید که برخلاف فایل style.css (یا هر فایل دیگری)، نسخه تم فرزند functions.php فایل تم والد را بازنویسی نمی کند. بلکه به سادگی کد فایل فرزند را به فایل والد اضافه می کند . به این ترتیب، نیازی به کپی کردن کل فایل از موضوع اصلی ندارید.
مرحله 4: تم را فعال کنید
هنگامی که تم را آپلود کردید، پنل مدیریت وردپرس خود را باز کنید و به Appearance > Themes بروید . اکنون موضوع شما باید فهرست شود. آن را فعال کنید .
از آنجایی که هنوز کد جدیدی اضافه نکرده‌ایم، طرح زمینه فرزند دقیقاً همان موضوع اصلی آن خواهد بود.
مرحله 5: سفارشی سازی ها را اضافه کنید
اکنون، اجازه دهید برخی از سفارشی سازی ها را اضافه کنیم. برای این کار باید با HTML و CSS آشنایی داشته باشید. اگر نیستید
ساده ترین راه برای ایجاد یک تغییر خاص در موضوع وب سایت، استفاده از ابزار Inspector در مرورگر شما است. در اکثر مرورگرها، از جمله گوگل کروم، موزیلا فایرفاکس و اپل سافاری، می توانید این کار را با کلیک راست روی یک عنصر انجام دهید. هنگامی که این کار را انجام می دهید، یک پنل توسعه دهنده در کنار پنجره مرورگر شما ظاهر می شود.
برای مثال، روی عنوان بالا کلیک راست کنید ، سپس Inspect را انتخاب کنید . با این کار نوار کناری توسعه دهنده ظاهر می شود.
از آنجایی که ما به طور خاص عنوان را بررسی کردیم، می توانید تگ HTML <h1> نمایش داده شده را ببینید. از آنجایی که می خواهیم این هدر (و همه هدرها) را اصلاح کنیم، می خواهیم عنصر H1 را هدف قرار دهیم.
برای انجام این کار، به Appearance > Edit Themes بروید . در سمت راست، طرح زمینه فرزند خود را انتخاب کنید. سپس کد زیر را به فایل style.css اضافه کنید .
h1 { color: blue; }فایل را ذخیره کنید و به صفحه سایت خود برگردید. عنوان عنوان اکنون باید آبی باشد.
شغل خوب – در اصطلاح، خسته نباشی! شما یک طرح زمینه کودک ایجاد کرده اید. هر زمان که می‌خواهید در طرح زمینه خود تغییراتی ایجاد کنید، آنها را به این فایل style.css اضافه کنید – و نه فایل style.css طرح زمینه اصلی خود.
همچنین می توانید فایل اصلاح شده را مستقیماً از طریق FTP/SFTP، SSH یا مدیر فایل آپلود کنید.
سایر نکات قالب وردپرس
چگونه فایل های دیگر را در قالب خود تغییر دهید
هر قالب وردپرس (از جمله تم Astra ) از چندین قالب تشکیل شده است. فایل های php اینها عبارتند از : comments.php، header.php، body.php، footer.php و غیره.
این فایل‌ها فایل‌های «الگو» نامیده می‌شوند و نباید مستقیماً اصلاح شوند، به همان دلیلی که نباید style.css را تغییر دهید. اگر می خواهید هر یک از آنها را تغییر دهید، می توانید روند مشابهی را که در بالا انجام دادیم دنبال کنید.
برای این مثال از فایل header.php استفاده می کنیم .
فایل را باز کنید و کل مطالب را کپی کنید. سپس، آن محتویات را در یک فایل متنی جدید در رایانه خود قرار دهید. هر گونه تغییری در آن ایجاد کنید، مطمئن باشید که هیچ چیز دیگری را تغییر نمی دهید.
وقتی کارتان تمام شد، آن را به عنوان header.php ذخیره کنید و از طریق FTP/SFTP، SSH یا File Manager در پوشه تم فرزند آپلود کنید.
برای ایجاد تغییرات در آینده، آن را مستقیماً در ویرایشگر وردپرس ویرایش کنید (با رفتن به ویرایشگر تم) یا فایل به روز شده را دوباره آپلود کنید.
Functions.php
ما همچنین می‌توانیم کاری مشابه برای functions.php انجام دهیم ، فایلی که بسیاری از فرآیندهای سایت شما را کنترل می‌کند. برخلاف فایل style.css (یا هر فایل دیگری)، نسخه تم فرزند functions.php فایل تم والد را بازنویسی نمی کند.
بلکه به سادگی کد فایل فرزند را به فایل والد اضافه می کند .
- ابتدا فایل functions.ph p را در قالب خود باز کنید.
- تمام متن را کپی کنید، سپس آن را در یک سند متنی جدید قرار دهید.
- هر تغییری را ایجاد کنید، سپس آن را به عنوان functions.php ذخیره کنید.
- در نهایت، فایل را در همان پوشه تم فرزند آپلود کنید.
نتیجه
به عنوان یادآوری، همیشه باید سعی کنید هنگام ایجاد تغییرات در قالب وردپرس از یک تم کودک استفاده کنید. اگرچه ممکن است ساده تر به نظر برسد که فقط به سرعت تم والد را تغییر دهید، اما در طولانی مدت، مشکلات بیشتری خواهید داش
منبع:
https://wpastra.com/guides-and-tutorials/wordpress-create-child-theme/