آموزش افزودن کد به وردپرس

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

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

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

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

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

چگونه کدهای سفارشی به وردپرس اضافه کنیم ؟

هنگام افزودن کد به وردپرس یا قالب، اکثراً با دو نوع کد سروکار داریم:

  • کدهای PHP
  • کدهای CSS

در ادامه ابتدا روش افزودن کدهای PHP و CSS به وردپرس را خواهیم آموخت و در انتها با یک روش جامع و حرفه‌ای برای افزودن همه کدها به نام پوسته فرزند آشنا می‌شویم..

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

اگر بخواهیم کدهای سفارشی را به طور مستقیم در پوسته وردپرس اضافه کنیم، ممکن است با ۳ مشکل اساسی مواجه هستیم:

  1. پس از به‌روز‌رسانی قالب وردپرس، تمام تغییرات ما از بین رفته و باید مجدداً کدها را به آن اضافه کنیم.
  2. ممکن است در هنگام ویرایش فایل‌ها، به اشتباه کدهای قبلی را تغییر داده یا حذف کنیم؛ در این صورت سایت ما با خطا مواجه خواهد شد.
  3. برای هر بار تغییر دادن کدها، نیاز است به ویرایش فایل‌های مختلف پوسته بپردازیم!

اگر از قالب اختصاصی خودتان استفاده می‌کنید، می‌بایست کدهای PHP را در فایل functions.php و کدهای CSS را به style.css پوسته خود اضافه کنید. این دو فایل به ترتیب به نام «توابع پوسته» و «شیوه‌نامه» شناخته می‌شوند. در آموزش ساختار فایل‌های قالب وردپرس کاربرد فایل‌های کد را بررسی کرده‌ایم.

افزودن کد PHP به وردپرس

برای افزودن کد PHP به پوسته وردپرس سه راه‌حل داریم:

  • استفاده از افزونه Code Snippet
  • ایجاد از افزونه اختصاصی خودمان
  • استفاده از پوسته فرزند

استفاده از افزونه Code Snippet

افزونه Code Snippet معروف‌ترین افزونه برای افزودن کدهای سفارشی به وردپرس است. این افزونه به سادگی به شما اجازه می‌دهد هر نوع کدی را در قالب PHP به قالب خود اضافه کنید.

در حقیقت برای افزودن هر قطعه کدی به فایل functions.php می‌توان از این افزونه کمک گرفت.

بنر و آرم افزونه Code Snippet
بنر و آرم افزونه Code Snippet

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

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

این صفحه از پنج بخش مختلف تشکیل شده است:

  • بخش عنوان: می‌توانید یک عنوان برای قطعه کد خود تعریف کنید تا بعداً بتوانید آن را راحت‌تر پیدا کرده و آن را ویرایش کنید.
  • بخش کد: قطعه کد PHP خود را باید در این باکس بنویسید.
  • تنظیمات اجرا: این تنظیمات به شکل دکمه‌های رادیویی در پایین باکس کد قرار گرفته‌اند. به وسیله این تنظیمات می‌توانیم محل اجرا کد و اولویت آن را مشخص کنیم.
  • توضیحات کد: در این بخش می‌توانیم توضیحاتی در مورد قطعه کد یا کدهایی که به وردپرس اضافه کردیم بنویسیم. این توضیحات فقط برای خودمان نمایش داده می‌شود و به ما در ویرایش‌های بعدی کمک خواهد کرد.
  • برچسب‌ها (Tags): می‌توانیم برای هر قطعه کد، یک برچسب تعیین کنیم. اگر تعداد کدهای شما (همان Code Snippetها) زیاد است، با تعریف برچسب‌های مرتبط، می‌توانیم آن‌ها را دسته‌بندی کنیم. چیزی بشیه به برچسب در وردپرس که فقط برای مدیران کاربرد دارد.

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

مراحل افزودن کد PHP به وردپرس

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

باکس کد و عنوان افزونه
باکس کد و عنوان افزونه

سپس وضعیت اجرای کد را مشابه تصویر زیر تنظیم می‌کنیم.

  • اجرا در همه‌جا: کد شما در هر بار بارگذاری تمام صفحات اجرا خواهد شد.
  • گزینه اجرا فقط در مدیریت: کدها فقط در هنگام بارگذاری صفحات مدیریتی (پیشخوان وردپرس) اجرا می‌شوند.
  • اجرا فقط در سمت کاربر: کدها فقط در محیط Frond End سایت اجرا می‌شوند.
  • اجرا فقط یک‌بار: پس از تعریف کدها، فقط یک‌بار فراخوانی می‌شوند.
تنظیمات چگونگی اجرای کد سفارشی
تنظیمات چگونگی اجرای کد سفارشی

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

آموزش PHP : یادگیری رایگان PHP از 0 تا پیشرفته به‌زبان ساده + تمرین

آموزش PHP : یادگیری رایگان PHP از 0 تا پیشرفته به‌زبان ساده + تمرین

در انتها نیز توضیحات کد را نوشته و برچسب‌های مرتبط را تنظیم می‌کنیم. سپس با کلیک روی «Save Changes and Active» قطعه کد خود را ذخیره و اجرا خواهیم کرد.

توضیحات و برچسب‌های قطعه کد
توضیحات و برچسب‌های قطعه کد

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

نمایی از افزونه افزودن کد سفارشی به وردپرس
نمایی از افزونه افزودن کد سفارشی به وردپرس

از بخش تنظیمات افزونه می‌توانید نوع ویرایشگر و یکسری تنظیمات جزئی دیگر را تغییر دهید.

همچنین از بخش «درون‌ریزی» خواهید توانست تمام کدهایی که از بخش «برون‌بری» و از سایت دیگری خروجی گرفته‌اید را وارد سایت خود کنید. عملکرد آن دقیقاً شبیه ابزار درون ریزی وردپرس است.

افزودن کد با افزونه اختصاصی سایت

یکی از روش‌هایی که ممکن است برایتان جذاب باشد، ایجاد یک افزونه اختصاصی برای اعمال تغییراتتان است.

برای این کار، می‌توان یک پوشه به نام دلخواه در مسیر wp-content/plugins/ ایجاد کرد. درون آن نیز یک فایل با همان نام و فرمت .php ایجاد کنیم.

پس از فعال‌سازی افزونه اختصاصی خودتان، با مراجعه به «ویرایشگر افزونه» یا تغییر مستقیم فایل از درون File Manager هاست خود، خواهید توانست کدهای سفارشی خود را به سایت اضافه کنید.

اگر مایلید نوشته‌های مرتبط را به سایتتان اضافه کنید، آموزش نمایش مطالب مرتبط در وردپرس با افزونه و با کد را ببینید.

افزودن کد CSS به وردپرس

کدهای CSS برای زیباسازی یا تغییر ظاهر سایت استفاده می‌شوند. یکی از راه‌های افزودن کد CSS به قالب سایت استفاده از قطعه کد زیر به functions.php یا افزونه Code Snippet است.

<?php
add_action( 'wp_head', function () { ?>
<style>

	/* write your CSS code here */

</style>
<?php } );

اما روشی ساده‌تر و بهینه‌تر هم وجود دارد:

استفاده از سفارشی‌سازی پوسته

در منوی پیشخوان وردپرس، در منوی «نمایش» > «سفارشی‌سازی» می‌توانیم برخی تنظیمات مربوط به ظاهر و نمایش پوسته خود را تغییر دهیم. آخرین بخش ابزار سفارشی‌ساز، «CSS اضافی» است.

با انتخاب این گزینه، وارد بخشی می‌شویم که یک باکس کد وجود دارد. هر کدی که در این باکس نوشته و سپس آن را ذخیره کنیم، در پوسته ما اعمال می‌شود. به همین سادگی!

افزودن CSS سفارشی به وردپرس
افزودن CSS سفارشی به وردپرس

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

آموزش بخش سفارشی سازی وردپرس

آموزش بخش سفارشی سازی وردپرس

افزودن کد به وردپرس با پوسته فرزند (Child Theme)

یک روش حرفه‌ای برای افزودن کد به وردپرس استفاده از پوسته فرزند است. بحث پوسته فرزند طولانی و خارج از بحث ماست. اما اگر پوسته‌ای که در اختیار دارید، یک نسخه Child Theme هم دارد، می‌توانید از این روش استفاده کنید.

به طور خلاصه، پوسته فرزند، یک پوسته سفارشی‌سازی شده و برگرفته از پوسته اصلی است.

شما می‌توانید کدهای PHP خود را درون فایل functions.php و کدهای CSS سفارشی خود را درون style.css پوسته فرزند قرار دهید.

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

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

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

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

جمع‌بندی: افزودن کد سفارشی به وردپرس

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

از نظر منطقی، برای افزودن کدهای کوتاه CSS بهتر است از ابزار سفارشی‌ساز وردپرس استفاده کنیم.

برای افزودن کدهای PHP به وردپرس نیز، هم روش افزونه Snippet و هم روش افزونه اختصاصی مناسب است. اگر میزان تغییرات شما زیاد بوده یا می‌خواهید کدهای مختلفی را بررسی کنید، ساده‌ترین روش استفاده از افزونه Code Snippet خواهد بود.

اگر تغییرات شما اساسی و نسبتاً زیاد است، پیشنهاد می‌کنم حتماً از پوسته فرزند در سایت خود استفاده کنید. در اینصورت، هیچ‌گاه نگران از بین رفتن کدهای خود نبوده و می‌توانید تغییرات بیشتری در پوسته خود ایجاد کنید.

امیدوارم از این آموزش استفاده کاربردی کرده باشید. اگر سؤال یا تجربه‌ای دارید، از بخش دیدگاه‌ها با ما و دوستانتان به اشتراک بگذارید.

این آموزش بخشی از یک آموزش جامع و قدم به قدم در سبز دانش است: دوره رایگان آموزش وردپرس