با درود خدمت همراهان بازار برتر. با آموزش اضافه‌کردن css و js به قالب وردپرس در خدمت شما هستیم.
علاوه بر ساخت انواع فایل‌ها در قالب وردپرس، شما همواره نیاز به اضافه‌کردن فایل‌های css و js به قالب وردپرس خود خواهید داشت.
ازآنجایی‌که استفاده از فایل‌های css و همین‌طور جاوا اسکریپت، تأثیر بسیار زیادی در ظاهر و کارکرد سایت شما برای کاربران را دارد، لذا شما باید با روش‌های استاندارد اضافه این فایل‌ها به قالب وردپرس آشنایی پیدا کنید.
به طور معمول چه‌کار می‌کنیم؟
وردپرس یک سیستم مدیریت محتوا (CMS) قدرتمند است که برای ساخت و مدیریت وبسایت‌ها و وبلاگ‌ها استفاده می‌شود. یکی از اصولی‌ترین بخش‌های وردپرس، قالب‌ها است که ظاهر وبسایت را شکل می‌دهند. هر قالب می‌تواند دارای فایل‌های CSS و JS باشد که کدهای مرتبط با طراحی و رفتار وبسایت را شامل می‌شوند.
در این آموزش، به شما نحوه اضافه کردن فایل‌های CSS و JS به قالب وردپرس را آموزش می‌دهیم. هدف اصلی افزودن این فایل‌ها، سفارشی‌سازی بهتر قالب و افزایش کارایی و بهینه‌سازی وبسایت شما است. همچنین، مطمئن شوید که همیشه نسخه‌های مناسب و به‌روز را برای فایل‌های CSS و JS استفاده می‌کنید.
قدم ۱: ایجاد فایل‌های CSS و JS: اولین قدم برای اضافه کردن فایل‌های CSS و JS به قالب وردپرس، ایجاد فایل‌های مورد نیاز است. برای این کار، فایل‌های CSS و JS را با استفاده از ویرایشگر متنی مانند Notepad++ یا Visual Studio Code ایجاد کنید.
- ایجاد فایل CSS: برای ایجاد فایل CSS، یک فایل با پسوند
.cssایجاد کنید. به عنوان مثال،styles.cssنام‌گذاری کنید. - ایجاد فایل JS: همچنین، برای ایجاد فایل JS، یک فایل با پسوند
.jsایجاد کنید. به عنوان مثال،scripts.jsنام‌گذاری کنید.
قدم ۲: قرار دادن فایل‌های CSS و JS در قالب: حالا که فایل‌های CSS و JS ایجاد شدند، آن‌ها را در قالب وردپرس خود قرار دهید. این کار به دو روش انجام می‌شود:
بیشتر بخوانید:
معرفی و آشنایی با افزونه Really Simple SSL Pro
روش ۱: قرار دادن فایل‌ها در مسیر قالب:
- وارد داشبورد وردپرس شوید.
- به بخش “پوشه‌ی قالب‌ها” بروید و قالب مورد نظرتان را انتخاب کنید.
- داخل پوشه‌ی قالب، پوشه‌ای به نام “assets” ایجاد کنید. این پوشه برای نگهداری فایل‌های CSS و JS استفاده می‌شود.
- فایل‌های CSS و JS را که در قدم ۱ ایجاد کردید، در پوشه‌ی “assets” قرار دهید.
روش ۲: استفاده از توابع وردپرس برای قرار دادن فایل‌ها: این روش، به شما اجازه می‌دهد فایل‌های CSS و JS را به طور مستقیم در قالب اضافه کنید.
- وارد داشبورد وردپرس شوید.
- به بخش “پوشه‌ی قالب‌ها” بروید و قالب مورد نظرتان را انتخاب کنید.
- فایل
functions.phpرا باز کنید که در پوشه‌ی قالب واقع شده است. - کد زیر را به
functions.phpاضافه کنید:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ |
function custom_enqueue_scripts() { // اضافه کردن فایل CSS wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/styles.css', array(), '۱.۰', 'all' ); // اضافه کردن فایل JS wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/assets/scripts.js', array(), '۱.۰', true ); } add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' ); |
قدم ۳: ذخیره تغییرات و بررسی وبسایت: پس از افزودن فایل‌های CSS و JS به قالب، تغییرات را ذخیره کنید و وبسایت خود را بارگذاری کنید تا تغییرات اعمال شود. حالا باید تغییرات موردنظر شما در وبسایت نمایش داده شود.
نکات پایانی:
- مطمئن شوید که نام فایل‌های CSS و JS در کد و اندازه‌گیری‌ها (enqueue) درست استفاده شده‌اند.
- از فایل‌های CSS و JS به‌روز و بهینه استفاده کنید تا کارایی وبسایت شما بهبود یابد.
- همیشه پیش از اعمال تغییرات، یک نسخه پشتیبان از قالب وردپرس خود بگیرید.
با انجام این مراحل، فایل‌های CSS و JS به قالب وردپرس شما اضافه می‌شوند و از آن‌ها برای سفارشی‌سازی و بهینه‌سازی وبسایت خود استفاده می‌کنید. توصیه می‌شود در هنگام انجام تغییرات، از Console مرورگر و ابزارهای مختلف برای بررسی همخوانی و بهینه‌سازی وبسایت استفاده کنید.
