آموزش ساخت child theme یا پوسته فرزند در وردپرس با فیلم آموزشی

آموزش ساخت child theme یا پوسته فرزند در وردپرس با فیلم آموزشی

آیا دنبال یک آموزش ساده و تصویری برای ساخت child theme یا پوسته فرزند در وردپرس هستید؟ هنگامی که از آموزش های وردپرس بهره بردید، و با وردپرس آشنا شدید، شاید بخواهید پوسته ی وب سایت خود را ویرایش کنید. ما معتقدیم پوسته فرزند با child theme ها بهترین گزینه برای انجام این کار هستند. در این سری از مقالات آموزش وردپرس و آموزش قالب وردپرس، به آموزش ساخت child theme یا پوسته فرزند در وردپرس با فیلم آموزشی می پردازیم.

فیلم آموزش ساخت child theme یا پوسته فرزند در وردپرس

 

 

دانلود زیرنویس  :    دانلود

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

تم های کودک بهترین راه برای سفارشی کردن تم های وردپرس شماست. child theme تمامی ویژگی ها و خصوصیات ظاهری پوسته والد را به ارث می برد. شما میتوانیداین پوسته ها را بدون صدمه زدن به پوسته والد ویرایش کنید. این کار باعث میشود شما بدون ترس از دست دادن تغییرات و زحماتی که بر روی قالب اصلی کشیده اید، آن ها را بروز رسانی کنید.

نیازمندی ها

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

توصیه میکنیم برای تمرین و آزمون و خطای این آموزش، ابتدا در محیط local و یا سرور wamp این کار را انجام بدید.

شروع آموزش 

هر قالب وردپرس خوب می تواند به عنوان یک تم والد استفاده شود. با این حال، انواع مختلفی از تم ها وجود دارد و برخی ممکن است به اندازه ی باقی تم ها آسان نباشد. در این آموزش، ما از قالب Twenty Thirteen برای ساخت child theme یا پوسته فرزند استفاده میکنیم.

آموزش ساخت child theme یا پوسته فرزند در وردپرس

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

آموزش ساخت child theme یا پوسته فرزند در وردپرس

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

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

اکثر این موارد در این فایل خود توضیحی است. آنچه شما واقعا باید به آن توجه کنید، Template: twentythirteen است.

این به وردپرس می گوید که موضوع ما یک تم کودک است و نام پوشه قالب اصلی ما twentyteen است. نام پوشه حساس به حروف کوچک و بزرگ است پس دقت کنید. اگر وردپرس را با Template: TwentyThirteen ارائه بدیم، در این حالت نتیجه ای مشاهده نخواهیم کرد.

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

این حداقل نیازمندی برای ایجاد یک پوسته فرزند است. اکنون می توانید به نمایش » پوسته ها که در آن تم فرزند WPB را مشاهده خواهید کرد. برای شروع استفاده از child theme یا تم کودک در سایت خود، باید روی دکمه فعال کلیک کنید.

آموزش ساخت child theme یا پوسته فرزند در وردپرس با فیلم آموزشی

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

سفارشی کردن تم کودک شما

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

برای این بخش شما نیاز به کمی از دانش CSS دارید.

گوگل کروم و فایرفاکس با ابزار بازرسی داخلی ساخته شده اند. این ابزار به شما اجازه می دهد در هر صفحه وب HTML و CSS و کد نویسی آن را نگاه کنید.

اگر میخواهید CSS مورد استفاده برای منوی ناوبری را ببینید، به سادگی ماوس خود را به منوی ناوبری بروید و با کلیک راست بر روی Select Inspect Element را انتخاب کنید.

آموزش ساخت child theme یا پوسته فرزند در وردپرس با فیلم آموزشی

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

آموزش ساخت child theme یا پوسته فرزند در وردپرس با فیلم آموزشی

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

همچنین شما می توانید قوانین CSS مربوط به عنصر برجسته در پنجره سمت راست را نشان دهید. شما می توانید CSS را درست در ههینجا ویرایش کرده و تغییرات را مشاهده کنید.

بیایید سعی کنیم که رنگ پس زمینه .navbar را به #e8e5ce تغییر دهیم.

آموزش ساخت child theme یا پوسته فرزند در وردپرس با فیلم آموزشی

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

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

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

ویرایش فایل های الگو

آموزش ساخت child theme یا پوسته فرزند در وردپرس با فیلم آموزشی

هر تم وردپرس دارای یک طرح متفاوت است. بیایید به طرح Twenty Thirteen نگاهی کنیم. شما هدر، منوهای ناوبری، حلقه محتوا، منطقه ویجت پاورقی، منطقه ویجت ثانویه و پاورقی دارید.

هر کدام از این بخش ها توسط فایل های مختلف در پوشه twentyteen قرار می گیرد. این فایل ها به نام الگو یا templates هستند.

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

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

به عنوان مثال، شما می خواهید پیوند “Powered by WordPress” را از قسمت پایین صفحه حذف کنید و یک یادداشت کپی رایت در آن اضافه کنید. تنها کافی است فایل footer.php را در تم کودک خود کپی کنید و سپس آن را در یک ویرایشگر متن ساده مانند notepad باز کنید. خطوطی را که میخواهید حذف کنید و آنها را با خودتان جایگزین کنید پیدا کنید. مثل این:

در این کد، ما با اعتبار کپی رایت قالب Twenty Thirteen را با یک یادداشت کپی رایت دیگر جایگزین کردیم.

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

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

به این مطلب رای بدید
[تعداد آرا : 1 میانگین : 5]

شما اینجا هستید : خانه » بلاگ » آموزش ساخت child theme یا پوسته فرزند در وردپرس با فیلم آموزشی

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

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