روش استفاده از جی کوئری در وردپرس: 2 روش (به صورت دستی و با استفاده از یک افزونه)

توسعه دهندگان وردپرس از جاوا اسکریپت و کتابخانه ها برای ایجاد عناصر تعاملی استفاده می کنند روی یک وب page و کد نویسی را ساده کنید process. یکی از محبوب ترین گزینه ها jQuery است.

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

اگر می خواهید با استفاده از جی کوئری وب سایت های جذابی ایجاد کنید، این مقاله شما را در کل راهنمایی می کند process. همچنین درباره چیستی جی کوئری، مزایای کلیدی آن و روش افزودن جی کوئری به وردپرس بحث خواهیم کرد.

چرا از جی کوئری استفاده کنیم

به غیر از اکوسیستم پلاگین آن، دلایل دیگری برای استفاده از کتابخانه jQuery در وردپرس عبارتند از:

• مبتدی دوستانه. از آنجایی که از یک فرمت متنی ساده و کوتاه استفاده می کند، کد jQuery خواندن و نوشتن آسان است.
• فشردگی. یک فایل jQuery معمولا کوچکتر از جاوا اسکریپت ساده است و به شما امکان می دهد کارهای مشابه را با کاراکترهای کمتر انجام دهید.
• سازگاری بین مرورگرها. مرورگرهای معروفی که از jQuery پشتیبانی می کنند عبارتند از گوگل کروم، مایکروسافت اج، موزیلا فایرفاکس، سافاری، و اپرا.
• پشتیبانی از AJAX. توسعه دهندگان می توانند AJAX را برای ایجاد یک وب سایت پاسخگو و کاربر پسند پیاده سازی کنند.
• استفاده از پهنای باند کمتر. جی کوئری می تواند افکت های انیمیشن را مستقیما اجرا کند روی مرورگر کاربر و در نتیجه استفاده از پهنای باند کمتری دارد.

روش استفاده از جی کوئری در وردپرس

دو راه برای افزودن اسکریپت های جی کوئری به سایت وردپرس وجود دارد – به صورت دستی یا با استفاده از افزونه وردپرس.

بیایید با روش دستی شروع کنیم.

اضافه کردن jQuery به صورت دستی

اگر تجربه ای در زمینه توسعه جاوا اسکریپت و وردپرس دارید، مراحل زیر را دنبال کنید:

1. به حالت سازگاری بروید

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

به طور پیش فرض، جی کوئری از $ به عنوان میانبر امضا کنید:

$(document) .ready (function() {
$("button") .click (function () {

با این حال، سایر کتابخانه های جاوا اسکریپت روی سایت شما همچنین علامت دلار را در نحو خود پیاده سازی می کند. برای جلوگیری از تداخل، با جایگزین کردن آن وارد حالت سازگاری شوید $ با جی کوئری.

به کد زیر دقت کنید:

jQuery(document) .ready (function() {
jQuery("button") .click (function () {

تنها مشکل این حالت نوشتن jQuery است به جای میانبر به معنای ترکیب کاراکترهای بیشتر است که منجر به اسکریپت های متورم می شود.

برای حل این مشکل، نام متغیر جدیدی را برای جایگزینی علامت دلار انتخاب کنید. رایج ترین آن است $j.

به سادگی این کد را در بالای اسکریپت های جی کوئری خود اضافه کنید:

var $j = jQuery.noConflict()

2. یک فایل اسکریپت بسازید

پس از آن، یک فایل اسکریپت سفارشی با پسوند js ایجاد کنید. هاستینگer کاربران می توانند این مراحل را دنبال کنند:

1. دسترسی داشته باشید hPanel → میزبانی → مدیریت کنید.
2. در منوی سمت چپ، را انتخاب کنید فایل ها → مدیر فایل.
3. وارد public_html → wp-content.

4. باز کن تم ها پوشه و یکی از تم های نصب شده را انتخاب کنید.
5. در منوی سمت چپ، کلیک کنید پوشه جدید و پوشه را نامگذاری کنید js.
6. کلیک فایل جدید برای ایجاد یک فایل .js جدید – به عنوان مثال: new_script.js.

7. اسکریپت های جی کوئری را به فایل اضافه کنید.
8. همین مراحل را برای سفارشی سازی افزونه های وردپرس تکرار کنید.

3. کد را به فایل functions.php اضافه کنید

قبل از افزودن اسکریپت های درون خطی به وردپرس، محل را پیدا کنید functions.php فایل در پوشه تم

فایل را باز کنید و تابع jQuery زیر را در بالا اضافه کنید:

function add_my_scripts() {
    wp_enqueue_script( ‘new-script', get_template_directory_uri() . '/js/new_script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_my_scripts' )

حتما تعویض کنید اسکریپت جدید و new_script.js با نام فایل های واقعی

با قرار دادن wp_enqueue_script با استفاده از کد PHP، کاربران می توانند یک اسکریپت سفارشی اضافه کنند و به وردپرس اطلاع دهند که به آن متکی است روی جی کوئری.

همچنین به وردپرس کمک می کند تا فایل اسکریپت را بیابد و تم را سفارشی کند روی اسکریپت های جی کوئری شما

افزودن jQuery از طریق افزونه وردپرس

اگر افزودن دستی اسکریپت ها به وردپرس برای شما بسیار فنی است، توصیه می کنیم از افزونه های وردپرس جی کوئری استفاده کنید.

در اینجا به این صورت است:

1. یک پلاگین را انتخاب کنید

وردپرس پلاگین های مختلفی را برای ایجاد وب سایت های تعاملی با جی کوئری ارائه می دهد. در اینجا بهترین انتخاب های ما برای موارد استفاده مختلف وجود دارد:

• jQuery Updater. در حالی که جی کوئری با وردپرس از قبل بارگذاری شده است، این پلتفرم اغلب از نسخه قدیمی استفاده می کند. jQuery Updater تضمین می کند که سایت شما به طور خودکار آخرین نسخه این کتابخانه جاوا اسکریپت را نصب می کند.
• فیلدهای سفارشی پیشرفته. این ابزار برای افزودن فیلدهای سفارشی به پست ها و صفحات مناسب است. برخی از آن فیلدهای مبتنی بر جی کوئری شامل Color Picker، Google Map، Date Picker و Time Picker.
• اعتبار سنجی جی کوئری برای فرم تماس 7. این افزونه به شما امکان می دهد زمانی که کاربران داده های نامعتبر را وارد می کنند، پیام های خطا را نمایش دهید روی فرم تماس 7. می توانید قوانین اعتبارسنجی برای URL ها، تاریخ ها، کارت های اعتباری و شماره تلفن ایجاد کنید.
• jQuery Post Splitter. این افزونه که با اکثر تم های وردپرس سازگار است، به شما امکان می دهد پست ها و صفحات را به اسلایدرها تقسیم کنید.

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

نتیجه

دانستن روش استفاده از جی کوئری در وردپرس برای صاحبان و توسعه دهندگان سایت بسیار مهم است.

jQuery یک راه حل سبک وزن برای ایجاد عناصر تعاملی، ویرایش صفحات و سفارشی کردن ظاهر کلی یک وب سایت وردپرس ارائه می دهد.

برای افزودن jQuery به اسکریپت های وردپرس به صورت دستی، به حالت سازگاری آن بروید، یک فایل اسکریپت ایجاد کنید و آن را سفارشی کنید. functions.php فایل در پوشه تم شما.

برای مبتدیان، افزونه های جی کوئری وردپرس مانند فیلدهای سفارشی پیشرفته کمک خواهد کرد process.

امیدواریم این مقاله به شما کمک کند تا یک وب سایت منحصر به فرد و جذاب تر ایجاد کنید. موفق باشید.

jQuery در سوالات متداول وردپرس

در زیر اطلاعات اضافی درباره jQuery در وردپرس آورده شده است.