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

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

تم کودک وردپرس چیست؟

با توجه به اینکه یک کتابچه راهنمای خوب به زبان روسی در وب سایت رسمی () وجود دارد، نمی خواهم عمیقاً به این موضوع بپردازم. من فقط چند کلمه در مورد مزایای تم کودک و چیستی آن می گویم.

معنی:یک طرح زمینه کودک (CT) عمدتاً برای ویرایش صحیح تم والد (آنچه در حال حاضر فعال است) طراحی شده است. استفاده از این روش به شما این امکان را می دهد که دفعه بعد که تم والد (PT) به روز می شود، تمام تغییرات ایجاد شده را ذخیره کنید.

سود:غول آسا. زیرا این تصمیم درست در هر تغییری در RT است.

نحوه ایجاد تم کودک در وردپرس

کد وردپرس (لینک بالا) شامل توضیحات گام به گام جزئیات مراحل ایجاد یک تم کودک است. در اصل، هیچ چیز پیچیده ای در اینجا وجود ندارد. برعکس: همه چیز بسیار ساده است. اما همه مایل به سرهم بندی پرونده ها نیستند (ما آنها را قضاوت نمی کنیم - این یک موضوع شخصی است). در چنین مواقعی افزونه هایی وجود دارند که تقریباً تمام کارها را برای شما انجام می دهند.

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

پس از فعال کردن ماژول “One-Click Child Theme” به تب “Appearance – Child Theme” بروید. سه فیلد برای پر کردن در این صفحه وجود دارد:

نحوه کار با تم کودک

هنگامی که نیاز به ویرایش تم والد دارید (مثلاً تغییراتی ایجاد کنید، یک بلوک جدید اضافه کنید، یک بلوک را حذف کنید، و غیره)، سپس به منظور حفظ یا حتی امنیت، بهتر است این کار را از طریق یک تم فرزند انجام دهید.

فایل های تمفایلی که در آن باید کاری از خودتان انجام دهید از RT کپی می شود و به DT منتقل می شود (توجه داشته باشید که اگر فایل در زیر پوشه موضوع قرار دارد، پس شما همان پوشه را در DT نیز ایجاد می کنید). سپس شروع به کار با آن کنید، آن را تغییر دهید، آنچه را که نیاز دارید اضافه کنید و نتیجه را بررسی کنید.

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

CSS @import

/* نام تم: child-my-theme توضیحات: تم کودک

تابع

Add_action("wp_enqueue_scripts", "my_theme_enqueue_styles"); تابع my_theme_enqueue_styles() (wp_enqueue_style("Parent-style", get_template_directory_uri() . "/style.css"); )

functions.php.بر خلاف موارد قبلی، تغییر یا وارد نمی شود، بلکه به عنوان افزودنی به فایل والد بارگذاری می شود. نیازی به کپی کردن آن از RT نیست، فقط یک فایل در DT به نام functions.php ایجاد کنید. و سپس، به روش معمول ما، توابع مورد نیاز خود را به آن اضافه کنید. بنابراین، رویکرد صحیحی برای اصلاح و گسترش قابلیت‌های موضوع اصلی وجود خواهد داشت.

شامل فایل‌هایی از موضوع کودک.برای اتصال فایل ها از DT، باید از عملکردهای خاصی استفاده کنید که مسیر صحیح را نشان می دهد.

با الهام از مقاله Habré، تصمیم گرفتم نسخه خود را در مورد ایجاد یک تم کودک در وردپرس ایجاد کنم، زیرا Habré دارای متن و توضیحات زیادی است. من به عنوان فردی که خود را در زمینه برنامه نویسی در وردپرس حرفه ای نمی دانم، سعی می کنم همه چیز را به اختصار و به درستی بگویم.

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

بنابراین، تم های کودک برای چیست؟ من قبلاً تا حدی به این سؤال پاسخ داده ام. با دوره ای مشخص، حفره های امنیتی در هسته وردپرس، افزونه ها و تم ها کشف می شوند. به عنوان یک قاعده، افراد باهوشی که تم ها، پلاگین ها و خود CMS را توسعه می دهند، به روز رسانی ها را منتشر می کنند. تمام سفارشی‌سازی‌های شما در لحظه نصب این به‌روزرسانی‌ها ناپدید می‌شوند. به خصوص در موقعیتی با موضوعی عمیقاً اصلاح شده بد می شود. بسیار اسفناک است - در صورت عدم وجود نسخه پشتیبان.

برای اینکه تمام تغییرات خود را از دست ندهید، بهتر است آنها را در فایل های تم اصلی ایجاد نکنید.

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

1. یک پوشه تم فرزند ایجاد کنید:

mkdir wp-content/themes/twentytwelve-child

2. برای اینکه موضوع کار کند، به دو فایل نیاز دارید:

• style.css
• functions.php

بیایید آنها را ایجاد کنیم:

wp-content/themes/twentytwelve-child/style.css را لمس کنید
wp-content/themes/twentytwelve-child/fnctions.php را لمس کنید

3. نام تم در style.css تنظیم شده است. حداقل کد برای style.css:

/* نام موضوع: قالب Twenty Twelve Child: twentytwelve نویسنده: تیم وردپرس نسخه: 1.0 دامنه متن: twentytwelve-child */ @import url("../twentytwelve/style.css")

آخرین خط سبک‌ها را از موضوع مادر بارگیری می‌کند.

در این مرحله، موضوع در لیست تم ها در قسمت مدیریت وردپرس ظاهر می شود و به شکل زیر است:

screenshot.png را از تم مادر کپی کنید تا تصویر ظاهر شود. در صورت تمایل می توانید آن را ویرایش کنید:

cp wp-content/themes/twentytwelve/screenshot.png wp-content/themes/twentytwelve-child/

اکنون لیست موضوعات به شکل زیر است:

پس از این، تم می تواند فعال شود و حتی کار خواهد کرد.

تنها چیزی که باقی می ماند این است که تمام فایل های اصلاح شده را در پوشه تم کودک قرار دهید. مسئله این است که وردپرس اسکریپت ها/فایل های پوشه تم فرزند را به فایل ها/اسکریپت های تم مادر اولویت می دهد. اگر یکی از فایل ها در پوشه فرزند تم پیدا نشد، از تم مادر گرفته شده است.

موضوع استاندارد به شکل زیر است:

بیایید برای وضوح کمی آن را اصلاح کنیم. فایل header.php را از تم مادر کپی کردم، نمایش منوی داخل آن را تغییر دادم (بالای سربرگ) و نمایش توضیحات وبلاگ را حذف کردم. در همان زمان، header.php اصلی دست نخورده باقی ماند. اینطور معلوم شد:

همانطور که می بینیم، header.php از پوشه فرزند تم کار کرد.

کمین فقط با سبک ها. اگر در فایل style.css طرح زمینه فرزند خود، یک سبک نمایش جدید، مانند عرض ناحیه متن، اعلام کنید، کار نخواهد کرد.

برای اینکه کار کند، باید یک فایل سبک جداگانه ایجاد کنید و آن را متصل کنید:

wp-content/themes/twentytwelve-child/custom.css را لمس کنید

کد spoiler.site را به آن اضافه کنید:

سایت (حاشیه: 0 خودکار؛ حداکثر عرض: 90 درصد؛ سرریز: پنهان؛ )

متأسفانه، دستور URL @import فقط یک بار در فایل style.css کار می کند، بنابراین نمی توانید فایل سبک دوم را اضافه کنید.

در وردپرس، استایل ها با استفاده از تابع ()wp_enqueue_style در فایل functions.php فعال می شوند.

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

تابع get_child_template_directory_uri() ( بازگشت dirname(get_bloginfo("stylesheet_url"))؛ )

پس از این، می توانیم با خیال راحت از get_child_template_directory_uri() در سایر توابع سفارشی استفاده کنیم.

اکنون custom.css را وصل می کنیم:

تابع child_styles() ( wp_enqueue_style("twentytwelve-child-style", get_child_template_directory_uri() . "/custom.css"); ) add_action("wp_enqueue_scripts", "child_styles",12);

در صورت لزوم، می توانید خط را کپی کنید و فایل های css دیگری را اضافه کنید. همه چیز کار خواهد کرد.

فکر می کنم نیازی به توضیح نیست که چرا فایل functions.php باید با آن شروع شود

به هر حال، عدد در add_action() اولویت را تعیین می کند. 12 جالب‌ترین اکشن است، به طور ضمنی گفته می‌شود که سبک‌هایی که با استفاده از آن به هم متصل شده‌اند، بر سبک‌های استاندارد از تم مادر اولویت دارند.

با قیاس با استایل ها، می توانید توابع دیگر را بدون احتمال از دست دادن آنها در طول به روز رسانی اضافه کنید.

من بیشتر از این غر نمی زنم. تمام فایل هایی که ویرایش شده اند را در یک پوشه قرار دهید، تمام فایل های css لازم را به هم متصل کنید و هر چقدر که دوست دارید آپدیت کنید.

(بازدید شده 1,223 بار، 1 بازدید امروز)

توسعه دهندگان وردپرس قابلیت ایجاد تم های فرزند را اضافه کرده اند، اکنون شما این فرصت را دارید که زیر تم خود را بر اساس تم اصلی بسازید. ویژگی Create Child Theme به شما این امکان را می دهد که ظاهر تم والد را تغییر دهید و سپس بدون تأثیر بر روی طرح زمینه اول، تم تغییر یافته را جداگانه ذخیره کنید. در این راهنما، یاد خواهید گرفت که پوسته کودک وردپرس چیست و چگونه یک تم کودک در وردپرس ایجاد کنید.

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

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

قالب کودک وردپرس چگونه کار می کند؟

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

با استفاده از مناسب cssو phpشما می توانید تقریباً همه چیز را تغییر دهید، از گزینه های سبک و چیدمان گرفته تا اسکریپت هایی که تم کودک استفاده می کند.

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

قبل از شروع این راهنما، به موارد زیر نیاز دارید:

• دسترسی به داشبورد وردپرس
• دسترسی به (توصیه می شود) یا

مرحله 1 - ایجاد یک تم کودک در وردپرس

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

شما باید یک پوشه برای تم فرزند در فهرست قالب استاندارد وردپرس ایجاد کنید wp-content/themes. برای راحتی و حفظ نظم در دایرکتوری، بهتر است یک پوشه با انتهای آن ایجاد کنید -کودکبعد از نام موضوع اصلی در صورت تمایل می توانید نام پروژه خاصی را اضافه کنید. به یاد داشته باشید که نام دایرکتوری نباید دارای فاصله باشد تا از خطاهای احتمالی جلوگیری شود. برای ایجاد یک پوشه جدید، از یک سرویس گیرنده FTP یا مدیر فایل استفاده کنید. ما استفاده از سرویس گیرنده FTP رایگان FileZilla را توصیه می کنیم

در این آموزش از File Manager برای ایجاد یک تم فرزند بر اساس تم پیش‌فرض Twenty Seventeen استفاده می‌کنیم، بنابراین مسیر پوشه کامل به شکل زیر خواهد بود. wp-content/themes/twentyseventeen-child.

1. وارد کنترل پنل هاستینگر خود شوید و روی نماد کلیک کنید مدیر فایل.
2. به پوشه ای که وردپرس در آن نصب شده است بروید (معمولا public_html)، به علاوه wp-content → تم ها.
3. روی دکمه کلیک کنید پوشه جدید، نام تم فرزند را وارد کرده و کلیک کنید ايجاد كردن.

1. به پوشه کودک تم که ایجاد کردید بروید.
2. روی دکمه کلیک کنید فایل جدید، وارد style.cssبه عنوان نام فایل و کلیک کنید ايجاد كردن.

1. کد زیر را در فایل قرار دهید:

/* نام تم: آدرس تم بیست هفده کودک: http://hostinger-tutorials.ru/twentyseventeen-child/ توضیحات: تم بیست هفده کودک نویسنده: جان دو آدرس نویسنده: http://hostinger-tutorials.ru قالب: twentyseventeen نسخه: 1.1 دامنه متن: twentyseventeen-child */ CSS سفارشی بعد از این خط می رود

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

1. یک فایل اضافه کنید functions.phpدر همان دایرکتوری، اما کد را از موضوع اصلی در آنجا قرار ندهید، زیرا باید از آن جدا بماند. در عوض، یک فایل خالی ایجاد کنید یا توابع .php جدید مورد نیاز برای تم فرزند خود را اضافه کنید.
2. از داشبورد وردپرس خود، به ظاهر → مضامینو دکمه را فشار دهید فعال کنیددر موضوع کودک شما

1. به سایت خود بروید، ممکن است ببینید که موضوع کاملاً درست نمایش داده نمی شود (مانند تصویر زیر). نترسید، این به خاطر فایل است functions.phpهنوز CSS را از موضوع والد بارگیری نمی کند.

1. از داشبورد وردپرس خود، به ظاهر → ویرایشگرو فایل را انتخاب کنید functions.php.
2. وردپرس دارای یک ویژگی برای بارگیری CSS از قالب اصلی است. این کد را در یک فایل کپی کنید function.phpموضوع کودک:

1. کلیک به روز رسانی فایلدر پایین صفحه برای ذخیره تغییرات.
2. دوباره به سایت خود سر بزنید. اکنون CSS بارگیری شده است و طرح زمینه فرزند شما شبیه به طرح زمینه اصلی آن است.

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

مرحله 2 - تنظیم یک تم کودک وردپرس

اکنون احتمالاً می خواهید به سرعت شروع به تغییر ظاهر تم فرزند خود کنید. دقیقاً به همین دلیل آن را ایجاد کردید، درست است؟

مرحله 2.1 - سفارشی کردن ظاهر تم فرزندتان

برای سفارشی کردن ظاهر تم باید فایل را ویرایش کنید custom.cssدر دایرکتوری تم فرزند شما برای این کار می توانید از یک ویرایشگر متن و کلاینت FTP، مدیر فایل یا ویرایشگر وردپرس استفاده کنید (ظاهر → ویرایشگر). شما همچنین به دانش اولیه در مورد قوانین CSS و توانایی بازرسی عناصر سایت با استفاده از مرورگر نیاز دارید.

به عنوان مثال، برای تغییر رنگ پس زمینه، قوانین CSS زیر را به فایل اضافه کنید style.css:

سایت-محتوا-حاوی (رنگ پس زمینه: #d5ffa0؛ موقعیت: نسبی؛ )

در زیر نشان داده شده است که سایت شما پس از ایجاد تغییرات چگونه خواهد بود.

از این فرآیند می توان برای تغییر سایر عناصر سایت نیز استفاده کرد.

مرحله 2.2 - افزودن و حذف ویژگی ها

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

برای افزودن ویژگی های جدید به تم خود، کد PHP مورد نیاز را به فایل اضافه کنید functions.phpتم کودک شما به عنوان مثال، این کد عملکرد جستجوی وردپرس را غیرفعال می کند:

تابع disable_search($query، $error = true) (if (is_search()) ($query->is_search = false; $query->query_vars[s] = false; $query->query[s] = false ; / / به خطا اگر ($error == true) $query->is_404 = true ) ) add_action("parse_query", "disable_search"); add_filter("get_search_form"، create_function("$a"، "return null;"));

نتیجه

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

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

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

تم کودک چیست؟

تم فرزند در وردپرس تمی است که ظاهر و تمام عملکرد تم اصلی (اصلی) را به ارث می برد. این وراثت به شما این امکان را می دهد که به راحتی بدون تغییر خود تم اصلی، بخش های جداگانه تم اصلی را تغییر داده و تکمیل کنید. به لطف این رویکرد، به‌روزرسانی موضوع اصلی بر چنین تغییراتی تأثیری نخواهد داشت.

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

نحوه ایجاد تم کودک

ساده ترین طرح زمینه فرزند شامل یک فایل 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 در دایرکتوری تم فرزند خود ایجاد کنید: