آموزش ساخت child theme در وردپرس

ساخت تم فرزند در وردپرس

ساخت تم فرزند در وردپرس (Child Theme) یکی از راه های سفارشی سازی سایت و قالب های وردپرسی است که در این مقاله روش ساخت آن را توضیح خواهیم داد.

دلیل ساخت تم فرزند در وردپرس چیست؟

تم فرزند یا چایلد تم بهترین راه برای سفارشی کردن تم های وردپرس است. تم فرزند تمامی ویژگی ها و ظاهر تم اصلی (والد) را دارا می باشد و می توانید آن را بدون تحت تأثیر قرار دادن تم اصلی سفارشی سازی کنید. همچنین از این طریق بدون هیچ نگرانی برای از دست دادن تغییرات ثبت شده ، قالب اصلی را به روز رسانی کنید.

ایجاد چایلد تم وردپرس

برای ساخت تم فرزند در وردپرس ، دانش اولیه از CSS / HTML مورد نیاز است، در این صورت شما می توانید تغییرات مد نظر خود را ایجاد کنید. علاوه بر آن ، آشنایی با زبان برنامه نویسی PHP قطعاً می تواند به شما کمک کند. همچنین مهارت در کپی و استفاده از کدهای مخفی از منابع دیگر کارآمد خواهد بود.

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

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

یک ویرایشگر متن همچون نوت پد باز کرده و کد زیر را در آن قرار دهید :

سپس فایل را به عنوان style.css در پوشه ای که برای تم فرزند ایجاد کرده اید ذخیره کنید.

اکثر این موارد واضح هستند ولی آنچه باید به آن توجه کنید عبارت  Template: twentythirteen. است. این کد در واقع به وردپرس می گوید تم ما یک تم فرزند می باشد و نام تم اصلی twentyteen است. دقت داشته باشید که این دستور به حروف کوچک و بزرک حساس است و اگر نام آن را به صورت Template: TwentyThirteen ثبت کنیم ، عمل نخواهد کرد. خط آخر کد بالا ، استایل شیت تم اصلی را به تم فرزند وارد می کند . نکات ذکر شده حداقل موارد مورد نیاز برای ساخت تم فرزند در وردپرس است. اکنون می توانید به مسیر “نمایش » پوسته ها” در پیشخوان وردپرس بروید و در آن قالب WPB Child را مشاهده کنید. برای شروع استفاده از تم فرزند در سایت خود ، باید روی دکمه ی “فعال کردن” کلیک کنید.

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

سفارشی سازی تم فرزند در وردپرس

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

این کار صفحه مرورگر شما را به دو قسمت تقسیم می کند. در قسمت پایین صفحه، HTML و CSS صفحه را خواهید دید.

همانطور که موس خود را بر روی خط های متفاوت HTML حرکت می دهید ، ابزار Inspect Element کروم در بالای پنجره آن را هایلایت می کند. همانطور که در تصویر مشاهده می کنید ما منوی ناوبری را انتخاب کرده ایم. این کار همچنین قوانین CSS مربوط به بخش هایلایت شده را در پنجره سمت راست نشان می دهد. شما می توانید CSS را رد سمت راست ویرایش کرده تا تغییرات را مشاهده کنید. بیاید رنگ تصویر پس زمینه navbar. را به e8e5ce# تغییر دهیم.

پس از انجام آن ، خواهید دید که رنگ پس زمینه نوار ناوبری تغییر کرده است. اگر این مورد را دوست داشتید ، می توانید این دستور CSS را کپی کنید و در فایل style.css در Theme Child خود کپی کنید.

تغییرات ایجاد شده در فایل style.css را ذخیره کرده و سپس پیش نمایش سایت را مشاهده کنید. این پروسه را برای اعمال تمامی تغییرات مدنظر در استایل شیت قالب تکرار کنید.

نوشته های مشابه