آموزش ساخت Child Theme (قالب فرزند) در وردپرس

639 بازدید
دوشنبه ۱۲ مهر ۱۳۹۵
آموزش ساخت Child Theme (قالب فرزند) در وردپرسReviewed by جواد نبوی on Oct 3Rating: 4.5

سلام؛ هزاران قالب برای وردپرس وجود دارد که هر کدام طرح و تنظیمات خاص خودشان را دارند. اما این پوسته ها اغلب دست نخورده باقی نمی مانند. بیشتر کاربران دوست دارند بر اساس سلیقه خود به ویرایش قالب بپردازند و آن را اختصاصی کنند. صرفا ویرایش قالب هیچ اشکالی ندارد. اما انجام اینکار با دستکاری فایل های قالب اصلی کمی میتواند مشکل ساز باشد. چرا که برای قالب های پیشرفته و استاندارد، همیشه آپدیت ها و بروزرسانی هایی ارائه می شود که با جایگزین کردن آن بر روی قالب اصلی، تمامی ویرایش هایی که انجام داده اید از بین می رود. بنابراین وردپرس قابلیتی را ارائه داده است که بدون اینکه نیاز باشد فایل های قالب اصلی را دستکاری کنید، بتوانید به ویرایش قالب خود بپردازید. این ویژگی همان Child Theme ها هستند که امروز می خواهیم نحوه ساخت و استفاده از آن ها را به شما یاد بدهیم. اصلا سخت نیست. خیلی هم آسان است.

آموزش نصب و استفاده از Child Theme

چرا باید از Child Theme ها استفاده کنیم؟

استفاده از Child Theme ها به این دلیل است که ویرایش های شما بر روی قالب از بین نرود. چرا که با آپدیت پوسته، تمامی فایل های جدید جایگزین فایل های قبلی قالب می شوند. اما اگر Child Theme یا فرزند پوسته ایجاد کنید ویرایش های شما بر روی قالب اصلی اعمال نمی شود بلکه روی Child Theme اعمال می شود. بهتر است در ادامه با ما باشید تا ببینیم نحوه ایجاد یک Child Theme و استفاده از آن به چه صورت است.

قدم اول: ایجاد پوشه Child Theme

در اولین قدم شما باید یک فولدر جدید در کنار فولدر قالب خود بسازید. برای اینکار، به فایل منیجر هاست خود بروید و از روت هاست خود (جایی که پوشه هایی مثل wp-content و wp-admin را می بینید) به مسیر wp-content/themes بروید. در اینجا پوشه های قالب های تان را می بینید.

خب کافیست یک فولدر جدید با نام دلخواه بسازید. مثلا اگر نام قالب اصلی شما webtoaster است، نام این فولدر را بگذارید webtoaster child theme . یا هر چیزی که دوست دارید.

پس حواستان باشد که این فولدر باید در کنار فولدر قالب اصلی شما باشد. یعنی مثلا شما باید در فولدر themes پوشه های تان را به شکل زیر ببینید:

webtoaster

webtoaster child theme

سپس وارد فولدر webtoaster child theme (یا همان نامی که خودتان انتخاب کردید) شوید و یک فایل با نام style.css بسازید. کد زیر را درون این فایل قرار دهید:

/*
 Theme Name: Webtoaster Child Theme
 Theme URI: http://www.webtoaster.ir/
 Description: Webtoaster Child Theme
 Author: WebToaster
 Author URI: http://www.webtoaster.ir
 Template: Webtoaster
 Version: 1.0.0
 */

@import url("../webtoaster/style.css");

/* =Child Theme Styles
 ------------------------------------------------------- */

خب حالا کافیست اطلاعات را بر اساس قالب اصلی خودتان تکمیل کنید. به توضیحات زیر دقت کنید:

Theme Name: هر چیزی می تواند باشد.

Theme URI: آدرس صفحه قالب را بنویسید.(هر چیزی باشد)

Description: توضیحات قالب.

Author: نویسنده قالب.

Author URI: سایت سازنده قالب.

Template: این یکی مهم است. حتما باید نام قالب اصلی باشد. یعنی نام فولدر قالب اصلی. به مسیر root/wp-content/themes در فایل منیجر هاست خود بروید و نام فولدر قالب اصلی را پیدا کنید و اینجا وارد کنید.

Version: نسخه قالب.

پس از وارد کردن این موارد، در تکه کد @import url("../webtoaster/style.css"); به جای عبارت webtoaster باید نام فولدر قالب اصلی را بنویسید.

خب حالا فایل style.css را ذخیره کنید.

از این به بعد اگر میخواهید استایل قالب خود را تغییر دهید یا کد های CSS بنویسید باید درون همین فایل style.css قالب child theme انجام دهید. توجه داشته باشید که اگر میخواهید یک کلاس یا ID از استایل اصلی را ویرایش کنید کافیست فقط همان کلاس را با مشخصات جدید درون فایل style.css چایلد تم قرار دهید نه اینکه کل کد های فایل استایل قالب اصلی را درون فایل استایل چایلد تم کپی کنید.

قدم دوم: ویرایش فایل های قالب

در دومین قدم میرسیم به ویرایش فایل های دیگر قالب مثل فایل های php. اگر میخواهید یک فایل php از قالب را (مثلا index.php) تغییر دهید، باید کل آن فایل را کپی کنید و در مسیر درست از فولدر child theme پیست کنید. مثلا اگر میخواهید یک فایل با نام ads.php که درون فولدر ad در قالب اصلی قرار گرفته را ویرایش کنید، نمیتوانید فایل ads.php را درون فولدر child theme قرار دهید. بلکه باید یک فولدر با نام ad درون چایلد تم ایجاد کنید و آن فایل را درونش قرار دهید.

به عبارت بهتر دقیقا در همان مسیری که فایل درون قالب اصلی قرار گرفته، باید در چایلد تم هم قرار گرفته باشد تا وردپرس بفهمد که این فایل باید جایگزین آن فایل شود و به جای آن استفاده شود. مثلا اینجوری:

webtoaster/ad/ads.php

webtoaster child theme/ad/ads.php

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

فراخوانی فایل ها و اسکریپت ها از child theme

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

<?php echo get_stylesheet_directory_uri(); ?>

این کد آدرس دقیق فولدر چایلد تم را بر می گرداند. یعنی مثلا اگر نام چایلد تم شما webtoaster child theme باشد، کد بالا آدرس زیر را بر می گرداند:

http://yoursite.com/wp-content/themes/webtoaster child theme

سپس در ادامه کد می توانید فایل مورد نظرتان را فراخوانی کنید مثلا اگر میخواهید استایل اصلی چایلد تم را فراخوانی کنید از کد زیر استفاده کنید:

<link rel='stylesheet' href='<?php echo get_stylesheet_directory_uri(); ?>/style.css' type='text/css' media='all' />

نصب و استفاده از Child Theme

برای نصب child theme باید ابتدا قالب اصلی را در هاست آپلود کرده و نصب کنید. سپس فولدر child theme را با فرمت zip فشرده کنید و مثل قالب های دیگر درون هاست خود (در مسیر wp-content/themes) آپلود کنید. سپس از بخش نمایش در پیشخوان وردپرس، Child Theme خود را فعال کنید.

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

تمام شد. امیدواریم از این آموزش لذت برده باشید. با آرزوی موفقیت.

تبلیغات

نویسنده (مدیر سایت)

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

7 دیدگاه برای “آموزش ساخت Child Theme (قالب فرزند) در وردپرس”

  1. رضا گفت:

    سلام
    یک سوال
    اگر بخوام یک برگه که در قالب اصلی نیست (مثلاً یک طراحی جدید برای برگه دسته ها ) درست کنم ، اگر در فقط در قالب فرزند قرار بدم کافی هستش .

    مطلب کوتاه و خوبی بود
    امید وارم از اینگونه مقالات بیشتر داشته باشید
    موفق باشید

    1. جواد نبوی گفت:

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

  2. زهرا محمدپور گفت:

    عالی بود

  3. مجله هذلولی گفت:

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

    1. جواد نبوی گفت:

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

  4. قاسمی مشرف گفت:

    سلام.وقتتون بخیر
    دارم روی قالب dooplay کار میکنم و چایلد تم هم ازش ساختم ولی خیلی از فایل ها رو با وجودی که کپی از اون هارو در چایلد تم با تغییرات کم قرار دادم باز هم از فایل های اصلی میخونه و فایل داخل چایلد رو لحاظ نمیکنه. بنظرتون مساله چیه؟

    1. جواد نبوی گفت:

      با سلام
      مطمئن شوید که فایل های جایگزین درون چایلد تم در همان مسیری از فولدر چایلد تم قرار گرفته اند که فایل اصلی در قالب اصلی قرار گرفته. در غیر اینصورت ممکن است طراح قالب اصلی توابعی را ایجاد کرده باشد که جلوی ویرایش فایل ها در چایلدتم گرفته شود

پاسخ دهید

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