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

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

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

---

مراحل اضافه کردن کدهای سفارشی به وردپرس

شروع کار با یک نسخه پشتیبان

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

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

نوع کد سفارشی خود را بررسی کنید

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

شناسایی نحو CSS بسیار آسان است و نحو آن‌ها معمولا شبیه به زیر است:

.classname {
  color: #111111;
  background: #efefef;
  display: block;
}

این تکه کدها همیشه یک یا چند زوج ویژگی و مقدار هستند که هر کدام در یک خط نوشته می‌شوند و خطوط مرتبط میان کروشه {} قرار می‌گیرند.

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

    the function() keyword
    add_action()
    add_filter()

اگر در راهنمای کدها گفته شد که تکه کدهای سفارشی را به فایل functions.php اضافه کنید، مطمئن باشید که این کدها از نوع PHP هستند.

کدهای CSS سفارشی خود را از طریق Customizer اضافه کنید

نسخه‌های جدیدتر وردپرس به شما این امکان را می‌دهد که کدهای CSS خود را از طریق Theme Customizer به کدهای CSS سایت اضافه کنید. برای دسترسی به Customizer، در پیشخوان مدیریت روی منو Appearance > Customize کلیک کنید.

Customizer، صفحه اصلی سایت شما را باز می‌کند و یک منوی عمودی در سمت صفحه اضافه می‌کند. در این منو می‌توانید گزینه‌های سفارشی سازی را انتخاب کنید. این گزینه‌ها در تمپلیت‌های مختلف متفاوت است اما از وردپرس نسخه 4.7، تمام تمپلیت‌ها برای اضافه کردن کد CSS سفارشی، شامل گزینه  Additional CSS می‌شوند.

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

کدهای CSS یا PHP سفارشی شده خود را به Child Theme اضافه کنید

اگر تنها می‌خواهید خطوط بسیار کمی از کدهای CSS را به سایت اضافه کنید، استفاده از Customizer بسیار آسان‌تر است. اما اگر قصد دارید هم کدهای PHP و هم کدهای CSS به سایت خود اضافه کنید، Child Theme بهترین راه حل است. Child Theme در رابطه با تمپلیت والدش عمل می‌کند و رابطه آن‌ها شبیه به رابط فرزند و والد است. تمپلیت فرزند تمامی ویژگی‌های ظاهری و عملکردی سایت را به ارث می‌برد، با این تفاوت که شما می‌توانید آن‌ها را دستکاری کنید.

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

اگرچه چندین افزونه برای اینکار وجود دارد، ساده‌ترین آن‌ها، Child Themify است و تنها با یک کلیک کار را به سرعت انجام می‌دهد. برای نصب و فعالسازی آن، باید از مسیر Plugins > Add New در منوی پیشخوان مدیریت وردپرس استفاده کنید.

این افزونه به منوی Apearance ، یک زیرمنو به نام Child Theme اضافه می‌کند. روی این زیر منو کلیک کنید، تمپلیت والد خود را انتخاب کنید و سپس به سادگی یک نام برای تمپلیت فرزند خود انتخاب کنید.

ورردپرس توصیه می‌کند که برای نامگذاری تمپلیت‌های فرزند از قواعد نامگذاری مرسوم استفاده کنید. اما شما می‌توانید هر نامی برای تمپلیت خود در نظر بگیرید. اگر قصد دارید از این قواعد پیروی کنید، ابتدا نام تمپلیت والد را بنویسید و رشته “Child” را به آن اضافه کنید. برای مثال، تمپلیت فرزند برای تمپلیت “Twenty Seventeen” به صورت “Twenty Seventeen Child” نامگذاری می‌شود.

پس از ایجاد تمپلیت فرزند، می‌توانید آن را در منو Appearance > Themes در پیشخوان مدیریت مشاهده کنید.

پس از آن، برای اضافه کردن کدهای خود به این تمپلیت، می‌توانید از ویرایشگر تمپلیت که در منو Apearence > Editor قرار دارد، استفاده کنید. در ویرایشگر تمپلیت، ابتدا از سمت راست صفحه، منوی کشویی Select theme to edit ، تمپلیت موردنظر خود برای ویرایش را انتخاب کنید و سپس روی دکمه Select کلیک کنید.

در تمپلیت فرزند، دو فایل وجود دارد، styles.css برای کدهای CSS سفارشی و فایل functions.php برای کدهای PHP سفارشی.

اضافه کردن کدهای CSS سفارشی به تمپلیت فرزند

برای اضافه کردن این کدها، فایل style.css را در سمت راست صفحه پیدا کنید و کدهای CSS را به انتهای کدهای موجود در فایل و پس از قانون @import ، اضافه کنید.

شبیه به Customizer، ویرایشگر تمپلیت نیز می‌تواند خطاهای موجود در کدهای سفارشی را به شما نشان دهد. پس از اضافه کردن کدهای خود، روی دکمه  Update Fileکلیک کنید تا تغییرات شما ثبت شود.

کدهای PHP سفارشی خود را به تمپلیت فرزند اضافه کنید

برای اضافه کردن کدهای PHP سفارشی، باید به سراغ فایل functions.php بروید. این فایل شامل توابع سفارشی PHP است.

کدهای PHP خود را در انتهای فایل بنویسید. اگر فایل خالی بود، ابتدا باید تگ <?php را در انتهای فایل بنویسید. پس از وارد کردن کدهای خود و تغییر آن‌ها، برای ثبت تغییرات خود، روی دکمه  Update Fileکلیک کنید.

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

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

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

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

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

به سادگی، کد سفارشی خود را در ویرایشگر  Add New Snippet وارد کنید و مکان اجرای این تکه کد را هم انتخاب کنید. در اغلب موارد، گزینه Run snippert everywhere گزینه مناسبی خواهد بود. پس از آن یک عنوان وارد کنید و در صورت تمایل می‌توانید برای کد خود چند برچسب وارد کنید. در نهایت، روی دکمه Save Changes and Activate کلیک کنید.

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