چگونه کدهای سفارشی را به وردپرس اضافه کنیم؟
گاهی اوقات می‌خواهید تغییری در وردپرس ایجاد کنید. این تغییر می‌تواند یک عنصر طراحی مانند موقعیت لینک‌های اجتماعی در موبایل باشد، یا یک عملکرد اصلی همچون نظرات، یا یک ویژگی درآمدزایی مثل قرار دادن تبلیغات. اغلب راه‌حل این است که از یک افزونه استفاده کنید، اما اگر فقط نیاز به یک ویرایش دارید، چرا همه آن دردسرها را به خود بدهید؟ به جای آن می‌توانید از یک قطعه کد استفاده کنید.
راهنمای مطالعه:
کد اسنیپت چیست؟
در وردپرس، کد اسنیپت قطعه‌ای ساده از کدهای PHP، JS، CSS یا HTML است. اسنیپت‌ها برای ویرایش ویژگی‌های پیش‌فرض وردپرس استفاده می‌شوند، به جای اضافه کردن یک فایل کاملاً جدید یا نصب یک افزونه.
قطعه کد چه کاری انجام می‌دهد؟
معمولاً از یک قطعه کد برای افزودن یک ویژگی یا عملکرد خاص به وب‌سایت شما استفاده می‌شود. هر قطعه کد هدفی مشخص و مستقیم دارد، و عملکرد هر قطعه به محتوای آن قطعه بستگی دارد.
نمونه‌هایی از قطعه کدها
- یک قطعه کد اضافه کنید تا با استفاده از یک کد کوتاه (Shortcode) سال جاری را نمایش دهد و دیگر مجبور نباشید هر ژانویه سال را در حق تکثیر (Copyright) خود به‌روز کنید.
- تعداد پست‌هایی را که در نتایج جستجو نمایش داده می‌شوند ویرایش کنید تا سایت خود را سازماندهی کنید.
- منوی مدیریتی در بخش پشتی وردپرس را شخصی‌سازی کنید تا موارد خاصی از منوها، لینک‌های سریع یا یک پیام خوش‌آمد متفاوت نمایش دهد.
- عملکرد پیش‌فرض وردپرس مانند تعبیه‌ها (embeds) یا بارگذاری تنبل (lazy loading) برای تصاویر را غیرفعال کنید.
- فید RSS خود را با حذف دسته‌های خاص، اضافه‌کردن تصاویر، تأخیر در ارسال‌ها و موارد دیگر مدیریت کنید.
چگونه به صورت دستی قطعات کد را به وردپرس اضافه کنیم
یکی از روش‌های افزودن قطعات کد این است که به‌صورت دستی یک پوسته (تم) فرزند ایجاد کنید که فایل‌های وردپرسی که می‌خواهید کد را به آنها اضافه کنید را شامل شود. این فرآیند خیلی پیچیده نیست، با این حال پیشنهاد می‌کنیم تنها در صورتی که با کدنویسی راحت هستید سراغ این روش بروید. از آنجا که مراحل کار بسته به پوسته و قطعات کد متغیر است، این روش را به‌عنوان یک مرور کلی از فرآیند دستی در نظر بگیرید تا یک آموزش گام به گام کامل.
ایجاد یک پشتیبان از سایت خود
بدلیل اینکه شما قصد دارید یک قالب فرزند ایجاد کنید و فایل‌ها را ویرایش کنید، انجام مرتب و کامل پشتیبان‌گیری از سایتتان بسیار حیاتی است. به این صورت اگر در حین ویرایش چیزی دچار مشکل شود، همیشه می‌توانید به نسخهٔ قبلی سایت بازگردید. می‌توانید دربارهٔ روش‌های پشتیبان‌گیری در راهنمای پشتیبان‌گیری وردپرس ما اطلاعات کسب کنید.
ساختن یک پوسته فرزند
بهتر است از افزودن کد سفارشی مستقیماً به فایل‌های پوسته اصلی وردپرس خود، خودداری کنید. دلیل این امر این است که ناچاراً نیاز دارید تا پوسته وردپرس خود را به‌روزرسانی کنید، و زمانی که این کار را انجام می‌دهید، فایل‌های جدید به‌روزرسانی شده جایگزین فایل‌های قدیمی خواهند شد – کد سفارشی‌سازی شده شما هم شامل آن می‌شود.
برای نگه‌داشتن فایل‌های پوسته در شرایط ایده‌آل و همچنین برای حفظ کد سفارشی‌شده، بهتر است از یک پوسته فرزند استفاده کنید. پوسته فرزند را مانند یک نسخه کپی از پوسته اصلی یا “والد” خود در نظر بگیرید. این پوسته به بیشتر فایل‌های پوسته والد تکیه می‌کند اما به شما اجازه می‌دهد تا به هر میزان که دوست دارید، سفارشی‌ساز کنید.
افزودن فایل‌ها
برای ساختن تم فرزند، شما به یک ویرایشگر کد و دسترسی FTP به سایت وردپرس خود نیاز دارید. ابتدا یک پوشه تم جدید را زیر پوشه wp-content/themes ایجاد کنید. در این پوشه، یک فایل style.css که استایل شیت تم فرزند شماست (برای تغییرات طراحی) و یک فایل functions.php اضافه کنید که کدی برای فراخوانی استایل شیت از تم والدتان باید شامل باشد. برای یادگیری بیشتر در مورد چگونگی ساخت تم فرزند و دریافت کد دقیق برای اضافه کردن به فایل functions.php می‌توانید راهنمای تم بچه وردپرس ما را مطالعه کنید.
وقتی تم فرزند شما آماده شد، با خیال راحت آن را بر روی سایت وردپرس خود فعال کنید (از ظاهر > تم‌ها).
ویرایش فایل‌ها
حال می‌توانید فایل functions.php تم کودکتان را در یک ویرایشگر کد (یا از طریق ظاهر > ویرایشگر فایل‌تم در وردپرس) باز کرده و کدهای خود را اضافه کنید. بیشتر کدها به فایل functions.php اضافه می‌شوند (هر چند استثنائاتی هم وجود دارد).
فقط کافی است دستورالعمل‌های منبع کدی که استفاده می‌کنید را دنبال کرده تا مطمئن شوید که کدها را به درستی کپی، جایگذاری و ویرایش می‌کنید. تنها پیشنهاد ما این است که به منابع معتبر (مانند WPCode، WPMUdev، WPBeginner، Elegant Themes، Tuts+، Elementor و غیره) مراجعه کنید. به این صورت کدهای استفاده شده احتمالا صحیح و ایمن خواهند بود.
البته این یک راهنمای سطحی است – زیرا نمی‌توانیم قدم به قدم نحوه افزودن، ویرایش و مدیریت هر کد احتمالی برای وردپرس را توضیح دهیم.
اما می‌توانیم یک روش بهتر و آسان‌تر برای افزودن کدها به وردپرس پیشنهاد کنیم.
چگونه به راحتی کدهای مختلف را با WPCode به وردپرس اضافه کنیم
در حالی که می‌توانید کدها را به فایل‌های تم خود اضافه کنید، این روش را توصیه نمی‌کنیم. چون در وردپرس کار می‌کنیم، تعداد زیادی پلاگین‌های کد کوتاه وجود دارد که می‌توانید از آنها استفاده کنید. ما به‌خصوص به WPCode علاقه داریم.
WPCode یک پلاگین رایگان وردپرس است که شما می‌توانید از آن برای اضافه کردن کدها به وردپرس استفاده کنید، بدون اینکه نیاز به ایجاد یک تم فرزند یا ویرایش دستی فایل‌ها داشته باشید. این پلاگین همچنین تمام کدهای شما را در یک مکان مرتب نگه می‌دارد، بطوریکه به راحتی می‌توانید آنها را پیدا کنید، ویرایش کنید و یا حتی حذف کنید.
نصب افزونه رایگان WPCode
برای شروع، ابتدا باید افزونه را نصب کنید – آموزش نصب افزونه وردپرس. این کار بسیار ساده است زیرا نسخه رایگان WPCode به‌راحتی از داشبورد وردپرس شما قابل دسترسی است. فقط به افزونه‌ها > افزودن جدید بروید و “WPCode” را جستجو کنید.
سپس دکمه نصب و فعال‌سازی افزونه را بزنید. حالا آماده‌اید که قطعات کد خود را اضافه کنید!
افزودن یک قطعه کد
در قسمت جدید “قطعه‌های کد” در داشبورد وردپرس خود، بر روی گزینه منو “افزودن قطعه کد+” کلیک کنید. این شما را به صفحه‌ای می‌برد که می‌توانید با یک قطعه کد خالی شروع کنید یا از کتابخانه قطعه کدهای WPCode مرور نمایید.
به طور جایگزین، برای افزودن یک قطعه کد سفارشی، روی لینک قطعه کد خالی در صفحه “افزودن قطعه کد+” کلیک کنید. این دکمه یک ویرایشگر را باز می‌کند که در آن می‌توانید کد قطعه خود را وارد کنید. زیرا شما با یک قطعه کد خالی شروع می‌کنید، هیچ‌کدام از تنظیمات اعمال نشده‌اند.
برای استفاده از یک قطعه کد موجود از کتابخانه کد، از باکس جستجو برای پیدا کردن یک قطعه کد استفاده کنید. در نسخه رایگان پلاگین، 59 قطعه کد رایگان در دسترس است و در نسخه حرفه‌ای بیش از 100+ قطعه کد موجود است. با استفاده از یک قطعه موجود، تنظیمات پیش‌فرض انتخاب شده داشته و شما می‌توانید قبل از ذخیره و فعال‌سازی ویرایش کنید.
برای مثال، فرض کنید می‌خواهید عبارت “خوش آمدید، نام‌کاربری” که در گوشه بالا سمت راست داشبورد وردپرس نمایش داده می‌شود را به عبارتی کمی حرفه‌ای‌تر تغییر دهید.
اگر به دنبال “howdy” بگردید، می‌بینید که یک قطعه کد در کتابخانه وجود دارد برای “سفارشی‌سازی پیام howdy در نوار مدیریت”، روی قطعه‌ای که می‌خواهید استفاده کنید شناور شوید و روی دکمه آبی که ظاهر می‌شود کلیک کنید تا “قطعه کد را استفاده کنید”.
تنظیمات کد قابل ویرایش
این پنجره ویرایش کد را باز می‌کند که در آن کد و تنظیمات پیش‌فرض برای کد از قبل اضافه شده است. در اینجا، کد یک عنوان برای خود دارد، نوع کد به طور پیش‌فرض به PHP تنظیم شده و پیش‌نمایش کد ایجاد شده است تا “Howdy” را به “Welcome” تغییر دهد. اگر می‌خواهید “Howdy” چیز دیگری بگوید، فقط کد را در خط 4 ویرایش کنید.
پایین‌تر از پیش‌نمایش کد، قوانین جاگذاری کد خود را پیدا خواهید کرد. بخاطر اینکه ما گزینه‌هایی از پیش آماده را انتخاب کرده‌ایم، گزینه‌ها از قبل انتخاب شده‌اند. برای روش، این کد به “درج خودکار” تنظیم شده است، اما گزینه‌ای برای قرارداد کوتاه (Shortcode) وجود دارد اگر می‌خواهید کد خود را در صفحات یا پست‌های خاص درج کنید. و برای مکان، گزینه به “فقط مدیر” تنظیم شده چون کد ما طراحی شده تا کلمه “Howdy” را در سمت سرور یا پنل مدیریت سایت وردپرس ویرایش کند.
دیگر گزینه‌های مکان در نسخه رایگان شامل موارد زیر است:
- جهانی: اجرا در همه جا، فقط در بخش کاربر، فقط در مدیریت، منطق شرطی در بخش کاربر، هدر سراسر سایت، بدنه سراسر سایت، پاورقی سراسر سایت
- صفحه خاص: قبل/بعد از پست، قبل/بعد از محتوا، قبل/بعد از پاراگراف، قبل/بعد از خلاصه، بین پست‌ها
و نسخه حرفه‌ای مکان‌های بیشتری برای کدهای PHP اضافه می‌کند، هرجا (CSS Selector)، ووکامرس، خرید دیجیتال آسان و MemberPress
مرحله بعدی نوع دستگاه است. برای بسیاری از کدها، از جمله نمونه ما، گزینه هر نوع دستگاه بهترین انتخاب خواهد بود. اما اگر یک کد سفارشی برای غیرفعال کردن فرم نظر در دستگاه‌های کوچک اضافه می‌کنید، ممکن است بخواهید کدتان فقط در موبایل بارگذاری شود.
WPCode همچنین گزینه‌ای برای افزودن منطق شرطی هوشمند ارائه می‌دهد. این به شما امکان می‌دهد تا مشخص‌کننده‌های خاص‌تری برای بارگیری کد خود اضافه کنید. به عنوان مثال، شاید بخواهید “Howdy” پیام‌های مختلفی بر اساس نقش کاربر بگوید. شما می‌توانید منطق شرطی اضافه کنید تا نسخه “Welcome” فقط برای مدیران شما نمایش داده شود و سپس تغییرات دیگری برای نقش‌های مرتبط دیگر در سایت خود اضافه کنید.
در نهایت بخشی برای ویراستگی کد مشاهده خواهید کرد که یک ویژگی فقط برای نسخه حرفه‌ای است، که به دنبال آن اطلاعات پایه‌ای برای کد شما می‌آید. این شامل هر برچسبی است که می‌خواهید برای سازماندهی بهتر کدهای خود استفاده کنید، اولویتی (این مشخص می‌کند کدها به چه ترتیب بارگذاری شوند) و یادداشتی برای خودتان درباره استفاده از کد.
پس از اتمام کار، دکمه آبی رنگ بالای صفحه را برای ذخیره یا به‌روزرسانی کد خود فشار دهید.
قطعه کد خود را فعال کنید
اکنون آماده‌اید تا قطعه کد خود را به کار بگیرید! به منوی اصلی «قطعه‌های کد» بروید – در اینجا می‌توانید همه قطعه‌های خود را در نمایی فهرستی و مفید مشاهده کنید.
برای فعال‌سازی قطعه کد، دکمه تعویض در ستون انتهایی را بزنید تا به موقعیت روشن برود. اکنون صفحه‌ای را که انتظار دارید قطعه کد شما در آن اثر کند، تازه‌سازی یا مشاهده کنید. از آنجا که نمونه قطعه کد ما پیام مدیر را ویرایش می‌کند، صفحه را تازه‌سازی کردیم و “خوش آمدید” را به‌درستی در گوشه بالا سمت راست مشاهده کردیم.
ویژگی‌های دیگر پلاگین
حالا که یاد گرفتید چگونه از طریق پلاگین WPCode یک قطعه کد به وردپرس اضافه کنید، بیایید نگاهی کوتاه به چندین ویژگی دیگر این پلاگین بیندازیم که ممکن است بخواهید استفاده کنید.
با استفاده از هدر و فوتر جامعه می‌توانید به سرعت یک اسکریپت به سایت خود اضافه کنید. این روش برای فعال‌سازی خدمات شخص ثالث یا انجام سفارشی‌سازی‌های متنوع در سایتتان بی‌نهایت مفید است. مثلا اگر می‌خواهید گوگل آنالیتیکس را برای سایت وردپرسی خود فعال کنید، باید کد پیگیری را به فایل header.php اضافه کنید. به جای اینکه فایل را به صورت دستی ویرایش کنید، می‌توانید به سادگی کد پیگیری خود را اینجا وارد کنید.
مشابه با کتابخانه‌ی قطعات کد، تولیدکننده WPCode قطعات کدی از پیش نوشته شده ارائه می‌کند که می‌توانید آنها را طبق نیازهای سایت خود ویرایش کنید. تفاوت آن این است که قطعات تولیدکننده به کمی تنظیمات بیشتری نیاز دارند زیرا ممکن است پیچیده‌تر باشند (مانند ثبت و استفاده از استایل‌های جدید، افزودن نوع‌های پست و طبقه‌بندی‌ها یا حتی برنامه‌ریزی وظایف خاص با کرون جاب).
صفحه ابزارها گزینه‌هایی برای وارد کردن قطعات کد از منابع دیگر (یا پلاگین‌های قطعه کد دیگر) را به همراه خروجی‌گیری از قطعات کد کنونی سایت فراهم می‌کند.
و تحت بخش تنظیمات، گزینه‌های عمومی برای اتصال به کتابخانه WPCode (برای دسترسی به تمامی ۵۹ قطعه کد رایگان)، فعال‌سازی گزارشات خطا و اضافه کردن کلید لایسنس خود را خواهید یافت، اگر تصمیم دارید به نسخه پرو ارتقاء دهید.
WPCode Pro
و وقتی صحبت از نسخه حرفه‌ای (پرو) می‌شود – اگر علاقه‌مند باشید، ویژگی‌های بیشتری را اضافه می‌کند. همان‌طور که ذکر شد، نسخه‌های حرفه‌ای WPCode تعداد قطعه‌کدهای موجود در کتابخانه را به بیش از ۱۰۰ عدد افزایش می‌دهد. همچنین پشتیبانی برای کتابخانه خصوصی قطعه‌کدهای شما، تجدیدنظرهای پیشرفته، فعال‌سازی برنامه‌ریزی‌شده قطعه‌کدها، قطعه‌کدهای سفارشی بلوک گوتنبرگ و غیره را اضافه می‌کند.
اگر نسخهٔ خود را ارتقاء دهید، بخش‌های مفید دیگری نیز برای پیکسل‌های تبدیل وجود دارد (که با شبکه‌های اجتماعی ادغام می‌شوند) تا ردیابی رویدادهای تجارت الکترونیک را فعال کنند. یک ویرایشگر فایل وجود دارد که می‌تواند برای به‌روزرسانی فایل‌ها از داشبورد مدیریتی شما استفاده شود (مانند robots.txt، ads.text شما و غیره) و تنظیمات اضافی برای کنترل دسترسی برای انتخاب نقش‌های کاربری که می‌توانند به ویژگی‌های افزونه دسترسی داشته باشند.
آیا باید به WPCode Pro ارتقا دهید؟
WPCode Pro از قیمت $49/yr برای یک مجوز سایت آغاز می‌شود. اما آیا باید ارتقا دهید؟ به نظر ما، برای اکثر کاربران نسخه رایگان عالی است. شما می‌توانید به راحتی تکه کدهای خود را اضافه و مدیریت کنید، که همین کافی است. اما برای سایت‌های تجارت الکترونیک که نیاز به استفاده از پیکسل‌های ردیابی دارند یا سایت‌هایی که تیمی از افراد به طور منظم تکه‌های کد را اضافه یا ویرایش می‌کنند، باید به فکر ارتقا باشید. در این موارد، نسخه Pro امکاناتی را اضافه می‌کند که در بلند مدت زندگی شما را ساده‌تر می‌کند.
امیدوارم این راهنما برای شما مفید بوده باشند و اکنون با اعتماد به نفس بیشتری بتوانید تکه‌های کد را به سایت وردپرس خود اضافه کنید! برای مبتدیان، به شدت معتقدیم که بهتر است از یک افزونه مانند WPCode استفاده کنید (که بالاترین توصیه ماست). این کار افزودن و مدیریت تکه‌های کد را به خصوص با کتابخانه تکه کد آماده در دستان شما بسیار آسان‌تر می‌کند. اما اگر سوالی درباره افزودن تکه کد به وردپرس دارید که در این پست پوشش داده نشده است، در بخش نظرات زیر این متن بپرسید! با خوشحالی کمک خواهیم کرد.
دیدگاه و پرسش