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

اگر بخواهیم قطعه کد PHP سفارشی در سایت خود قرار دهیم مجبور هستیم که آن کد PHP را در فایل Functions.php قالب خود قرار دهیم تا اجرا شود. اما این کار سخت، زمانبر و انرژی‌گیری است که هر دفعه برای این منظور یا ویرایش کد مورد نظر به کنترل پنل هاست خود برویم و به قسمت فایل منیجر هاست و پوشه قالب و فایل functions.php مراجعه کنیم.

یا مثلا اگر بخواهیم یک کد CSS بر روی هر قسمت از سایت خود اعمال کنیم مجبور هستیم کد خود را در فایل style.css قالب قرار دهیم.

یک راه اصولی و سریع استفاده از افزونه است تا بتوانیم در همان محیط پیشخوان وردپرس به کلیه کدهای PHP و CSS و JS خود دسترسی کامل داشته باشیم و بتوانیم آنها را حذف، ویرایش و مدیریت کنیم.

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

• افزودن کد PHP سفارشی برای گسترش عملکردهای وردپرس
• افزودن کد به Header و Footer (همچون کد Google Analytics، کدهای تبلیغات، ساماندهی و غیره)
• کد CSS سفارشی برای انواع پست/صفحه خاص
• کدهای جاوا اسکریپت سفارشی
• محتوای پویا برای انواع مختلف مکان‌ها مانند محتوای قبل/پس از پست یا Footer
• کد کوتاه پویا (Dynamic Shortcode)

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

• Code Snippets
• WPCode
• FluentSnippets
• WPCodeBox
• Advanced Scripts
• Insert PHP Code Snippet
• Woody code snippets
• Header Footer Code Manager

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

مدیریت قطعه کدهای سفارشی با افزونه FluentSnippets

افزونه FluentSnippets افزونه‌ای بسیار سبک و با کدنویسی تمیز و عالی است و رابط کاربری بسیار ساده و تمیزی دارد و میزان مصرف رم و میزان تاثیر بر روی سرعت سایت بسیار کم و ناچیزی دارد. شاید شما تا امروز تعریف و استقبال زیادی از افزونه‌هایی همچون Code Snippets و WPCode دیده و شنیده باشید اما به جرات و اطمینان می‌توان گفت که افزونه FluentSnippets نسبت به هر دو بسیار سرتر است و قابلیت‌ها و توانمندی‌های بسیار بیشتری نسبت به آنها دارد.

در تصویر پایین مقایسه سه افزونه FluentSnippets و Code Snippets و WPCode را به لحاظ Memory usage (میزان مصرف رم) و Page speed impact (تاثیر سرعت صفحه) در یک تست برابر را قرار داده‌ایم:

همانطور که در نتایج تست بالا مشاهده می‌کنید، افزونه FluentSnippets به مراتب میزان مصرف رم کمتر و تاثیر سرعت صفحه نزدیک به صفری نسبت به دو افزونه دیگر دارد.

مقایسه افزونه FluentSnippets با افزونه Code Snippets و WPCode

یکی از ضعف‌های اساسی افزونه‌هایی همچون Code Snippets و WPCode از بعد عملکردی و امنیتی این است که قطعه کدهای سفارشی را در دیتابیس وردپرس ذخیره می‌کنند و در هر درخواست وردپرس یک به یک آنها را فراخوانی و ارزیابی می‌کنند. این روش و عملکرد معایبی دارد:

• کوئری به MySQL Database در هر درخواست
• ارزیابی هر قطعه کد در بارگذاری WP یک فرآیند کند و آهسته است
• قطعه کدها را می‌توان با آسیب‌پذیری SQL injection دیگر افزونه‌ها تغییر داد.

تفاوت اصلی افزونه FluentSnippets با سایر افزونه‌های اشاره‌شده در بالا این است که کدهای سفارشی را در یک فایل فلت و بر روی فضای میزبانی هاست شما ذخیره می‌کند (File-based). داده‌ها یکبار تجزیه شده و در index.php ذخیره و کش می‌شوند، بنابراین نیازی به تجزیه هر قطعه کد موجود در افزونه در هر درخواست وردپرس نیست. سپس در زمان اجرا به راحتی و به سرعت در زمان و مکان درخواستی شما اجرا می‌شوند. این کار باعث می‌شود که میزان کوئری‌ها به پایگاه‌داده توسط افزونه FluentSnippets به صفر برسد.

ویژگی‌ها و قابلیت‌های افزونه FluentSnippets

ویژگی Advanced Conditional Logics

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

• موقعیت و نقش کاربر (کاربر مهمان یا وارد شده و نقوش کاربری تعریف شده درسایت شما)
• صفحات سایت شما
• انواع پست تایپ‌ها
• تاکسونومی‌ها و ترم‌ها
• بر اساس آدرس صفحه / پست
• زمان و تاریخ
• و غیره

ویژگی Automatic Error Handling

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

قابلیت Custom Shortcode

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

قابلیت Stand-alone Mode

ویژگی عجیب دیگر افزونه FluentSnippets قابلیت Stand-alone Mode است. بوسیله این ویژگی شما می‌توانید افزونه را غیرفعال و یا حذف کنید و همچنان به اجرای کدهای سفارشی خود در حالت مستقل (stand-alone) ادامه دهید. کدهای سفارشی و قطعه‌کدهای شما همچنان از طریق معماری mu-plugins اجرا خواهند شد. هنگامی که افزونه را دوباره فعال می‌کنید، می‌توانید کدهای سفارشی و قطعه‌کدهای خود را مانند قبل با خود افزونه مدیریت کنید.

ویژگی Snippet Group و Tags

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

انواع کدهای سفارشی در افزونه FluentSnippets

بطور کلی شما می‌توانید 4 نوع کد سفارشی را در محیط ویرایشگر کد افزونه وارد و استفاده کنید:

• Functions – PHP Snippet
  شما میتوانید کلیه قطعه کدهای PHP را در این قسمت قرار دهید (ایجاد انواع function و class – قلاب به سایر action ها و filter ها و غیره)
• Content – PHP + HTML
  این بخش برای درج محتوا به مکان‌های مختلف مانند هدر، پاورقی، before-post content، after-post content و غیره استفاده می‌شود. می توانید کدهای php / html / js / css را در این بخش بنویسید.
• CSS
  افزودن کد‌های CSS اختصاصی به قسمت‌های مختلف جلو (Frontend) یا پیشخوان سایت (Admin)
• JS
  افزودن کدهای جاوا اسکریپت اختصاصی به قسمت‌های مختلف سایت

نصب افزونه FluentSnippets

برای نصب افزونه FluentSnippets می‌تواند آن را از مخزن وردپرس دانلود و بر روی سایت خود نصب کنید یا مستقیما از بخش افزونه‌ها -> افزودن می‌توانید با جستجوی نام آن، افزونه را یافته و نصب نمایید.

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

اضافه کردن کدهای سفارشی به سایت

برای افزودن قطعه کد به ویرایشگر افزونه، باید گزینه New Snippet را زده تا وارد محیط ویرایشگر افزونه شویم.

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

همچنین در قسمت Where to Run می‌توانید مشخص کنید که کد شما در کدام قسمت از سایت اجرا شود.

در این قسمت شما می‌توانید انتخاب و معین کنید که کد سفارشی شما در کدام قسمت از سایت اجرا شود. همه جای سایت یا فقط در پیشخوان وردپرس (Admin) یا فقط در جلوی سایت (Frontend)

همچنین در قسمت Advanced Conditional Logic می‌توانید شروط منطقی پیشرفته‌ای برای مکان، زمان و شرایط اجرای کد خود مشخص کنید.

در انتها می‌توانید با زدن دکمه Create Snippet بلوک کد خود را ایجاد و ذخیره نمایید.

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

سخن پایانی و نتیجه‌گیری

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

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