ویرایش قالب وردپرس؛ آموزش گام‌به‌گام با و بدون افزونه

مانیتور نمایش‌دهنده هم‌زمان پنل سفارشی‌سازی دیداری سایت و محیط ویرایش کدهای CSS و PHP
آنچه در این مطلب می‌خوانید

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

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

پیش از شروع: آیا واقعاً به ویرایش قالب نیاز دارید؟ (به همراه نکات ایمنی)

پس از طی کردن مراحل آموزش نصب قالب وردپرس، گام بعدی شخصی‌سازی ظاهر قالب مطابق نیاز سایت است. پیش از شروع تغییرات، باید مطمئن شوید که تغییر مورد نظر به قالب مربوط است و پیش‌نیازهای ایمنی را رعایت کرده‌اید.

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

قالب‌های وردپرس طراحی و شیوه نمایش محتوا را کنترل می‌کنند و افزونه‌ها (پلاگین‌ها) کارکردهای جدیدی به سایت اضافه می‌کنند. برای کارهایی مانند بهبود سئو با کمک آموزش سئو سایت، راه‌اندازی فروشگاه، ثبت انواع پست سفارشی (Custom Post Types)، ایجاد فیلدهای سفارشی یا افزودن ویجت، بهتر است افزونه نصب کنید.

پیش از تصمیم به ویرایش فایل functions.php قالب، از خود بپرسید: «آیا در صورت تغییر دادن قالب در آینده، همچنان به این کارکرد نیاز خواهم داشت؟» اگر پاسخ مثبت است، بهتر است کد مورد نظر را در قالب قرار ندهید و از پلاگین استفاده کنید. برای چیدمان و ویرایش محتوای نوشته‌ها و برگه‌ها هم نیازی به دستکاری کدهای پوسته ندارید؛ آشنایی با ویرایشگر وردپرس (ویرایشگر بلوکی) برای این کار کافی است.

دو اقدام ضروری قبل از دستکاری قالب (بکاپ و قالب فرزند)

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

صفحه پوسته‌ها در پیشخوان وردپرس با نمایش قالب اصلی و فعال بودن قالب فرزند
  • تهیه نسخه پشتیبان (Backup): پیش از هر تغییر در فایل‌های قالب، از سایت نسخه پشتیبان تهیه کنید تا در صورت بروز خطا، فایل‌های اصلی را در اختیار داشته باشید.
  • ساخت و استفاده از قالب فرزند (Child Theme): اگر از قالب شخص ثالث، یعنی قالب خریداری‌شده یا دانلودی، استفاده می‌کنید، تغییرات کدنویسی را روی «پوسته فرزند» انجام دهید. در غیر این صورت، به‌روزرسانی‌های بعدی قالب اصلی، تغییرات شما را بازنویسی و پاک خواهد کرد.
  • تست در محیط آزمایشی: پیش از اعمال تغییرات روی سایت اصلی، کدها را در یک سایت توسعه لوکال (Local) یا یک سایت فرعی (Staging) تست کنید.
  • ذخیره تغییرات هنگام تعویض پوسته: اگر قصد تعویض کامل پوسته و حذف قالب وردپرس فعلی را دارید، تغییرات سفارشی را در پوشه‌ای جداگانه ذخیره کنید تا پس از فعال‌سازی قالب جدید بتوانید دوباره آن‌ها را اعمال کنید.
روش ویرایش قالبنیاز به دانش کدنویسیمیزان ریسک برای سایتکاربرد اصلی
بخش سفارشی‌سازی (Customizer)نداردبسیار کمتغییر لوگو، نمادک، رنگ‌ها، فونت و تنظیمات پایه
افزونه‌های صفحه‌سازندارد (کشیدن و رها کردن)کمطراحی چیدمان صفحات، افزودن سطر، ستون و المان‌های بصری
افزونه‌های تغییر استایل و تزریق کدندارد تا متوسط (CSS/JS)متوسطتغییر دیداری ظاهر (مداد زرد) یا افزودن کد بدون دستکاری قالب
ویرایشگر پرونده پوسته / کدنویسیدارد (HTML, CSS, PHP)زیاد (نیازمند چایلد تم و بکاپ)تغییر ساختار فایل‌های تمپلیت، توابع و استایل‌های اختصاصی

روش اول: ویرایش قالب وردپرس بدون افزونه و بدون کدنویسی

استفاده از امکانات پیش‌فرض وردپرس و پنل تنظیمات قالب، سریع‌ترین و امن‌ترین راه برای تغییر ظاهر سایت است.

استفاده از بخش «سفارشی‌سازی» (Customizer) در پیشخوان

برای دسترسی به تنظیمات ظاهری، ابتدا عبارت /wp-admin را به انتهای آدرس سایت اضافه کنید؛ مثلاً www.mysite.com/wp-admin. سپس با وارد کردن نام کاربری و رمز عبور، مراحل ورود به پیشخوان وردپرس را طی کنید. پس از ورود، از دو مسیر به ابزار سفارشی‌سازی دسترسی دارید:

بخش هویت سایت در سفارشی‌سازی وردپرس برای تنظیم عنوان و بارگذاری نمادک ۵۱۲ در ۵۱۲ پیکسل
  1. هنگام بازدید از صفحات سایت، در نوار مدیریت بالای صفحه روی گزینه «تنظیمات قالب» (Customize) کلیک کنید.
  2. در منوی سمت راست پیشخوان، به مسیر نمایش > سفارشی‌سازی (Appearance > Customize) بروید.

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

  • هویت سایت (Site Identity): سه گزینه اصلی این بخش عبارت‌اند از:
  1. عنوان سایت: نام اصلی برند یا فروشگاه شما.
  2. معرفی کوتاه (شعار سایت): توضیح مختصری درباره فعالیت سایت که زیر عنوان یا در تب مرورگر نمایش داده می‌شود.
  3. نمادک سایت (Favicon): آیکون کوچکی که کنار عنوان سایت در تب مرورگر، بخش علاقه‌مندی‌ها (Bookmarks) و گاهی نتایج جست‌وجو دیده می‌شود. برای نمادک معمولاً پیشنهاد می‌شود تصویری مربعی، واضح و مرتبط با برند، با ابعاد ۵۱۲ در ۵۱۲ پیکسل و فرمت PNG یا JPG بارگذاری کنید.
  • تایپوگرافی (در بخش استایل): در این قسمت می‌توانید فونت کلی سایت یا فونت بخش‌هایی مانند عنوان‌ها (Headings)، متن بدنه، منوها و دکمه‌ها را جداگانه تغییر دهید. اندازه فونت، ضخامت آن (Bold یا معمولی)، فاصله بین خطوط و نحوه نمایش حروف را هم در همین بخش تنظیم می‌کنید.
  • سربرگ (Header): این بخش امکان تغییر لوگو و به‌کارگیری اصول آموزش طراحی لوگو، تنظیم موقعیت منوها و استایل دکمه‌ها، نمایش شماره تماس و آیکون شبکه‌های اجتماعی را در اختیار شما می‌گذارد. چسبنده بودن (Sticky) سربرگ هنگام اسکرول صفحه را نیز از همین‌جا تنظیم می‌کنید.
  • ابزارک‌ها و فهرست‌ها: این دو بخش در اکثر قالب‌ها وجود دارند و برای مدیریت منوهای ناوبری و المان‌های جانبی در سایدبار یا فوتر به کار می‌روند.
  • تنظیمات ووکامرس (WooCommerce): اگر افزونه فروشگاه‌ساز ووکامرس را نصب کرده باشید، این گزینه اضافه می‌شود. از این بخش می‌توانید تعداد محصولات در هر ردیف، چیدمان صفحه محصول و سبد خرید و رنگ دکمه‌های خرید را تنظیم کنید.

پنل تنظیمات اختصاصی قالب (چرا گزینه سفارشی‌سازی را نمی‌بینم؟)

گاهی گزینه «سفارشی‌سازی» در منوی نمایش دیده نمی‌شود یا گزینه‌های آن بسیار محدودتر از چیزی است که در آموزش‌ها می‌بینید. این وضعیت دو دلیل دارد:

برخی قالب‌ها تمام تنظیمات خود را در بخش سفارشی‌سازی وردپرس قرار نمی‌دهند و منویی مستقل در پیشخوان با نام «تنظیمات قالب» یا نام خود قالب ایجاد می‌کنند؛ مانند منوی اختصاصی قالب‌های اهورا یا Astra. در این حالت، باید از منوی سمت راست پیشخوان وارد پنل اختصاصی همان قالب شوید.

دلیل دوم این است که بسیاری از قالب‌ها دو نسخه رایگان و پولی دارند. تنظیمات نسخه‌های رایگان معمولاً محدودتر است، اما نسخه‌های حرفه‌ای (پریمیوم) امکانات کاملی برای تغییر هدر و فوتر، ساختار وبلاگ، رنگ‌بندی و فونت‌های اختصاصی دارند. دسته‌ای از پوسته‌ها نیز با عنوان «فریم‌ورک‌های قالب» (Theme Frameworks)، مانند Divi، وجود دارند. این مجموعه‌ها شامل یک قالب والد (فریم‌ورک) و چندین قالب فرزند هستند و برای سفارشی‌سازی، محیطی با قابلیت کشیدن و رها کردن در اختیار شما می‌گذارند.

مشاهده دوره های آموزش وردپرس مکتب‌خونه به تسلط کامل شما بر مدیریت سایت و تنظیمات پیشخوان کمک خواهد کرد.

روش دوم: ویرایش قالب وردپرس با افزونه (بدون کدنویسی و با کدنویسی)

اگر تنظیمات پیش‌فرض قالب نیاز شما را برطرف نمی‌کند، با نصب افزونه ویرایش قالب وردپرس می‌توانید ساختار صفحات، استایل‌های ظاهری یا کدهای قالب را تغییر دهید.

تغییر ساختار و ظاهر با افزونه‌های صفحه‌ساز (SiteOrigin و المنتور)

افزونه‌های صفحه‌ساز (Page Builders) رابط کاربری دیداری (WYSIWYG) و قابلیت کشیدن و رها کردن (Drag & Drop) دارند. این ابزارها به شما امکان می‌دهند چیدمان نوشته‌ها و برگه‌ها را بدون کدنویسی طراحی کنید و هم‌زمان نتیجه را ببینید.

پنجره افزودن ردیف و تنظیم استایل ستون‌ها در افزونه صفحه‌ساز SiteOrigin وردپرس

ویژوال کامپوزر (Visual Composer) و المنتور (Elementor) از محبوب‌ترین صفحه‌سازها هستند. المنتور روی قالب‌های سازگار، مانند قالب Hello Elementor، انعطاف‌پذیری بالایی دارد. اگر از نسخه المنتور پرو استفاده کنید، علاوه بر طراحی بصری، امکان افزودن مستقیم کدهای جاوا اسکریپت (JS) و سفارشی به سایت را هم دارید. برای این کار، از طریق منوی «کد سفارشی» (یا کد دلخواه) و با کمک آموزش جاوا اسکریپت می‌توانید کدها را اضافه کنید و دیگر به ویرایش فایل‌های قالب نیازی نخواهید داشت.

افزونه SiteOrigin با بیش از ۱ میلیون نصب فعال، گزینه‌ای کاربردی برای کسانی است که صفحه‌سازی رایگان، سبک و سازگار با قالب‌های مختلف می‌خواهند. برای طراحی و ویرایش صفحات با این افزونه، مراحل زیر را انجام دهید:

  1. نصب افزونه و مکمل آن: از مسیر افزونه‌ها > افزودن در پیشخوان، افزونه SiteOrigin را از مخزن وردپرس نصب و فعال کنید. برای دسترسی به ابزارک‌های بیشتر این صفحه‌ساز، افزونه مکمل و رایگان SiteOrigin Widgets Bundle را نیز نصب کنید.
  2. ورود به محیط ویرایشگر: پس از فعال‌سازی، وارد بخش ویرایش برگه یا نوشته شوید. این افزونه برای ارسال‌های جدید، ویرایشگر کلاسیک را به‌صورت پیش‌فرض فعال می‌کند و تب صفحه‌ساز را به آن اضافه می‌کند.
  3. افزودن ردیف و ستون (Add Row): روی دکمه Add Row کلیک کنید. در پنجره‌ای که باز می‌شود، می‌توانید تعداد ستون‌ها و نسبت عرض آن‌ها را از منوی کشویی انتخاب کنید یا با کشیدن و رها کردن تغییر دهید.
  4. تنظیم استایل ردیف (Row Styles): بخش Row Styles در سمت راست همان پنجره قرار دارد. در این بخش می‌توانید رنگ پس‌زمینه و تصاویر را تغییر دهید و کدهای CSS اختصاصی به آن ردیف اضافه کنید. پس از تنظیم، روی Insert کلیک کنید.
  5. افزودن ابزارک‌ها (Add widget): روی گزینه Add widget کلیک کنید تا فهرست ابزارک‌های سایت و افزونه باز شود. هر ابزارک با کلیک به سطر اضافه می‌شود. می‌توانید جای آن را با کشیدن و رها کردن تغییر دهید یا برای ویرایش محتوا روی آن کلیک کنید. این افزونه ویرایشگر خطی متن هم دارد که امکان ویرایش مستقیم متن‌ها را در جای خود فراهم می‌کند.
  6. استفاده از طرح‌های آماده (Layouts): با کلیک روی دکمه Layouts می‌توانید از طرح‌بندی‌های آماده افزونه برای چیدمان سریع‌تر صفحه استفاده کنید.
  7. پیش‌نمایش زنده و بررسی ریسپانسیو (Live Editor): با کلیک روی دکمه Live Editor، محیط پیش‌نمایش زنده باز می‌شود. از آنجا که SiteOrigin صفحات را برای موبایل و تبلت واکنش‌گرا (Responsive) می‌کند، در این بخش می‌توانید با کلیک روی آیکون دستگاه‌های مختلف، نحوه نمایش المان‌ها را در موبایل و تبلت بررسی کنید.
  • در افزونه SiteOrigin، محتوای صفحات ساخته‌شده حتی پس از غیرفعال کردن پلاگین در سایت باقی می‌ماند. با این حال، بهتر است دو افزونه صفحه‌ساز مختلف را هم‌زمان روی وردپرس نصب نکنید؛ زیرا احتمال تداخل آن‌ها زیاد است.

افزونه‌های تغییر استایل و افزودن کد سفارشی (مداد زرد و Simple Custom CSS and JS)

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

  • افزونه مداد زرد (Yellow Pencil): این ویرایشگر دیداری امکان شخصی‌سازی ظاهر سایت را بدون کدنویسی فراهم می‌کند. مداد زرد معمولاً تغییرات را با CSS انجام می‌دهد، بدون اینکه کد PHP یا جاوا اسکریپت به صفحات تزریق کند. این افزونه در دو نسخه عرضه شده است: نسخه رایگان با امکانات محدودتر در مخزن وردپرس و نسخه پرو.
  • افزونه Simple Custom CSS and JS: این افزونه برای افزودن کدهای سفارشی CSS، JS و حتی HTML به محتوای سایت طراحی شده است. مزیت اصلی آن این است که کدهای شما در آپدیت‌های بعدی قالب پاک نمی‌شوند و امکان سفارشی‌سازی شرایط و روش تزریق کد به سایت را دارید. این پلاگین هم دو نسخه رایگان و پرو (Simple Custom CSS and JS Pro) دارد.

افزونه‌های دسترسی به فایل‌های قالب (Theme Editor و What The File)

اگر دانش فنی دارید و می‌خواهید بدون ورود به هاست، فایل‌های قالب را از پیشخوان مدیریت کنید یا تشخیص دهید که هر صفحه از کدام فایل‌های کدنویسی تشکیل شده است، دو افزونه زیر کاربرد دارند:

منوی بازشده افزونه What The File در نوار ابزار بالای سایت با نمایش فایل‌های single.php و content.php
  • افزونه Theme Editor: این پلاگین با بیش از ۵۰,۰۰۰ نصب فعال، امکانات پیشرفته‌تری نسبت به ویرایشگر پیش‌فرض وردپرس دارد:
  • ویرایش مستقیم فایل‌های PHP، HTML، CSS و JavaScript در قالب‌ها و افزونه‌ها.
  • ساخت و حذف پوشه و فایل، آپلود و دانلود فایل‌ها و دانلود کل قالب و افزونه.
  • ساخت قالب فرزند (Child Theme) جدید، تکثیر چایلد تم موجود و انتقال فایل‌ها از قالب والد به قالب فرزند.
  • مدیریت دسترسی کاربران و ارسال ایمیل اطلاع‌رسانی به مدیر.
  • پیش از نصب Theme Editor به خطاهای گزارش‌شده توجه کنید. برخی کاربران در بخش نظرات مخزن وردپرس، خطاهایی مانند کپی شدن ناخواسته کدهای PHP از یک افزونه به افزونه دیگر را گزارش کرده‌اند؛ یعنی رونویسی شدن فایل اصلی پلاگین بدون اطلاع کاربر. حذف خودکار شماره نسخه (Version Numbers) از فایل‌های CSS قالب هم از خطاهای گزارش‌شده است و باعث می‌شود تغییرات استایل بدون پاک کردن دستی کش مرورگر نمایش داده نشوند. بنابراین پیش از استفاده از این افزونه، نسخه پشتیبان تهیه کنید.
  • افزونه What The File: پیدا کردن فایل مربوط به صفحه فعلی یکی از دشواری‌های ویرایش کدهای قالب است. این افزونه رایگان با بیش از ۶۰,۰۰۰ نصب فعال، تنظیمات پیچیده‌ای ندارد. پس از فعال‌سازی، وارد صفحه یا بخش مورد نظر سایت شوید و در نوار ابزار بالای صفحه (نوار پیشخوان) روی نام افزونه کلیک کنید. این ابزار نام فایل‌های تشکیل‌دهنده آن بخش، مانند single.php یا content.php، را نشان می‌دهد. با کلیک روی نام هر فایل، می‌توانید مستقیماً وارد بخش ویرایش آن شوید.
آموزش جامع طراحی سایت با وردپرس
آموزش جامع طراحی سایت با وردپرس
1,599,000 479,700 تومان
70%

روش سوم: ویرایش مستقیم کدهای قالب وردپرس (بدون افزونه)

اگر قالب سایت را خودتان به‌صورت اختصاصی طراحی کرده‌اید یا قالب فرزند (Child Theme) ساخته‌اید و به CSS و PHP مسلط هستید، ویرایش مستقیم کدها بیشترین میزان کنترل را در اختیار شما قرار می‌دهد.

پیدا کردن کدهای ظاهری با ابزار Inspect مرورگر و بخش CSS اضافی

تغییرات ظاهری جزئی، مانند گرد کردن حاشیه کادر متن‌ها یا سایه دادن به باکس مقالات، به نصب افزونه نیاز ندارند. برای این کار می‌توانید از ابزار توسعه‌دهندگان مرورگر و بخش «CSS اضافی» استفاده کنید:

پنجره Inspect مرورگر هنگام تست کدهای border-radius و box-shadow روی کلاس holder1
  1. وارد صفحه مورد نظر سایت شوید، روی بخش دلخواه راست‌کلیک کنید و گزینه Inspect را انتخاب کنید.
  2. در پنجره‌ای که باز می‌شود، کلاس استایل مربوط به آن بخش را پیدا کنید؛ برای مثال، فرض کنید کلاس باکس مقالات holder1 است.
  3. تغییرات CSS را در همان بخش Inspect بنویسید و تست کنید. این تغییرات موقتی هستند و با رفرش (Refresh) کردن صفحه از بین می‌روند.
  4. پس از رسیدن به ظاهر دلخواه، قطعه‌کد نهایی را کپی کنید. برای مثال، کد زیر برای کلاس holder1 یک حاشیه گرد ۴ پیکسلی و سایه ملایم ایجاد می‌کند:
.holder1 {
    margin-top: 27px;
    background-color: #fff;
    overflow: hidden;
    transition: .3s;
    -webkit-transition: .3s;
    border-radius: 4px;
    box-shadow: 0 5px 35px rgba(119,132,157,.14);
    -webkit-box-shadow: 0 5px 35px rgba(119,132,157,.14);
}
  1. برای ذخیره دائمی کد، در پیشخوان وردپرس به مسیر نمایش > سفارشی‌سازی > CSS اضافی بروید و کد را آنجا قرار دهید. همچنین می‌توانید آن را به فایل استایل قالب فرزند اضافه کنید.

کار با «ویرایشگر پرونده پوسته» و شناخت فایل‌های اصلی قالب

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

صفحه ویرایشگر پرونده پوسته در وردپرس با فهرست فایل‌های style.css و functions.php

برای تغییر مستقیم فایل‌های PHP، HTML، CSS و JQuery در این بخش، به دانش فنی و مطالعه آموزش برنامه نویسی وردپرس نیاز دارید. فایل‌های اصلی که در ویرایشگر پرونده پوسته با آن‌ها کار می‌کنید عبارت‌اند از:

  • شیوه‌نامه (style.css و rtl.css): فایل style.css کدهای استایل‌دهی چیدمان، رنگ‌ها و فونت‌ها را در خود دارد. فایل rtl.css هم حاوی کدهای CSS برای راست‌چین کردن قالب است. اگر می‌خواهید کد CSS جدیدی به این فایل‌ها اضافه کنید، آن را برای حفظ خوانایی و جلوگیری از تداخل با کدهای قبلی در انتهای فایل‌ها قرار دهید.
  • توابع پوسته (functions.php): این فایل شامل کدهای مهم PHP قالب است و ویژگی‌ها و عملکردهای پوسته، مانند پشتیبانی از ابزارک‌ها (ویجت‌ها)، تصاویر شاخص و لوگوهای سفارشی، را تعیین می‌کند.
  • فایل‌های تمپلیت (Template files): این فایل‌ها ترکیبی از کدهای html، تگ‌های قالب و کدهای PHP هستند و خروجی هر بخش یا صفحه را مشخص می‌کنند؛ مانند سربرگ (هدر)، پابرگ (پاورقی یا فوتر)، برگه نوشته‌های تکی (single.php)، صفحه خطای ۴۰۴ و صفحات بایگانی (Archive).

یک مثال عملی از ویرایش فایل‌های تمپلیت:

فرض کنید قالبی اختصاصی دارید که سه ستون با دکمه‌های «اطلاعات بیشتر» (More Information) دارد، اما با کلیک روی دکمه‌ها صفحه‌ای باز نمی‌شود یا فقط یک پاپ‌آپ باز می‌شود. کد فایل تمپلیت مربوط را که بررسی می‌کنید، می‌بینید طراح از تگ <button> بدون لینک یا اکشن onclick استفاده کرده است. برای اینکه هر دکمه کاربر را به یک آدرس اینترنتی مشخص هدایت کند، اگر این HTML توسط قالب اختصاصی تولید شده باشد، باید در فایل تمپلیت مربوط در قالب، تگ <button> را با تگ لینک <a> و صفت href جایگزین کنید. این روش برای HTML تولیدشده از طریق ویرایشگر وردپرس نیست:

<a href="https://example.com/your-page/" class="inline-flex items-center gap-2 border border-white/25 px-4 py-2 font-mono text-[14px] uppercase tracking-[0.16em] text-[var(--warm-white)] transition-colors hover:bg-white/10">
    More information
</a>

سپس برای هر دکمه، به‌جای https://example.com/your-page/ آدرس صفحه مقصد را قرار دهید. در حالت ایده‌آل، توسعه‌دهنده قالب باید برای هر ستون یک فیلد URL قابل ویرایش در پیشخوان تعریف کند تا هر بار برای تغییر لینک، مجبور به ویرایش کد نباشید.

چرا نباید فایل‌های قالب را مستقیم از ویرایشگر پیشخوان تغییر دهیم؟

وقتی وارد بخش «ویرایشگر پوسته» در پیشخوان می‌شوید، وردپرس پیامی هشدارآمیز نمایش می‌دهد و توصیه می‌کند فایل‌ها را مستقیماً از این بخش ویرایش نکنید. پرهیز از ویرایش مستقیم در این محیط دو دلیل فنی مهم دارد:

پنجره پیام اخطار وردپرس هنگام ورود به بخش ویرایشگر مستقیم فایل‌های پوسته
  1. پاک شدن تغییرات با به‌روزرسانی: از آنجا که به دلایل امنیتی توصیه می‌شود قالب سایت را به‌روز نگه دارید، اگر فایل‌های قالب را مستقیماً ویرایش کنید، در آپدیت وردپرس و قالب، کدهای شما بازنویسی می‌شوند و از بین می‌روند.
  2. نبود سیستم کنترل نسخه و خطر از کار افتادن سایت: ویرایشگر پیشخوان سیستم کنترل نسخه (Version Control) ندارد. اگر هنگام ویرایش فایل حساسی مانند functions.php یک علامت نگارشی را اشتباه وارد کنید و سایت از کار بیفتد، از داخل پیشخوان نمی‌توانید خطا را ردگیری کنید یا به نسخه قبلی برگردید.

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

https://maktabkhooneh.org/mag/edit-wordpress-theme/
تصویر مهناز محمدی

مهناز محمدی

0 0 امتیازها
امتیاز دهی به محتوا
مشترک شوید
اطلاع از
guest
0 دیدگاه
قدیمی ترین
جدید ترین دیدگاه با تعداد رای زیاد
مقالات بیشتر
محیط ویرایشگر بلوک گوتنبرگ وردپرس روی صفحه مانیتور با بلوک‌های متن و تصویر

آموزش گوتنبرگ وردپرس؛ راهنمای کار با ویرایشگر بلوک به زبان ساده

نوار آدرس مرورگر با قفل امنیتی HTTPS در کنار پنل تنظیمات گواهی SSL دایرکت ادمین

آموزش نصب SSL در دایرکت ادمین (رایگان و تجاری) + رفع خطاها

نمایش نوار آدرس مرورگر با پروتکل امن HTTPS و آیکون قفل در کنار پیشخوان وردپرس

آموزش نصب SSL در وردپرس (با افزونه و دستی) + رفع خطاها

فرم ورود کد تایید در لپ‌تاپ در کنار گوشی هوشمند حاوی پیامک کد یک‌بارمصرف

آموزش افزونه دیجیتس (Digits)؛ راهنمای تنظیمات ثبت نام پیامکی در وردپرس

نمایش محیط کنترل‌پنل سی‌پنل و پنجره نصب وردپرس روی مانیتور

آموزش نصب وردپرس در cPanel (راهنمای گام‌به‌گام و تصویری)

نمایش هم‌زمان بخش Domains در پنل هاست و فرم تنظیمات نیم‌سرور روی مانیتور

آموزش اتصال دامنه به هاست در سی پنل (راهنمای گام‌به‌گام تنظیم DNS)