آموزش ساخت Child Theme در وردپرس

د

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

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

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

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

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

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

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

maniyaweb

maniyaweb child theme

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

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

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

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

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

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

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

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

Version: نسخه قالب.

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

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

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

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

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

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

maniyaweb/ad/ads.php

maniyaweb child theme/ad/ads.php

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

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

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

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

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

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

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

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

جمع بندی

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

از کارشناسان پرگاس انفورماتیک مشاوره تخصصی بگیرید

نرم افزار باشگاه مشتریان, طراحی سایت اختصاصی، نرم افزار مالی سپیدار

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)