روش افزودن جاوا اسکریپت به وردپرس با استفاده از افزونه و قلاب های وردپرس + نکات مفید

یک توسعه دهنده مشتاق وردپرس باید بداند که چگونه جاوا اسکریپت را به سیستم مدیریت محتوا (CMS) اضافه کند. در حالی که پلتفرم یک رابط کاربری گرافیکی ارائه می دهد، کد سفارشی به شما امکان می دهد وب سایت خود را بیشتر شخصی کنید.

در وردپرس، جاوا اسکریپت به شما امکان می دهد پلاگین ها یا تم ها را تغییر دهید تا عملکرد سایت خود را گسترش دهید. همچنین می توانید از زبان برنامه نویسی برای بهبود وب خود استفاده کنید page ظاهر با ایجاد محتوای پویا و تعاملی.

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

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

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

چگونه با استفاده از افزونه WPCode جاوا اسکریپت را به وردپرس اضافه کنیم

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

یک افزونه جاوا اسکریپت وردپرس نیز قطعه سفارشی شما را ذخیره می کند و پس از تغییر یا به روز رسانی تم ها، کد را حفظ می کند. یکی از محبوب ترین گزینه ها این است WPCode.

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

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

1. افزونه وردپرس را دانلود و نصب کنید. کلیک کنید بر روی قطعه کد منو از نوار کناری داشبورد وردپرس شما.
2. کلیک Snippet را اضافه کنید. از آنجایی که ما یک اسکریپت سفارشی اضافه می کنیم، نشانگر را روی آن قرار دهید کد سفارشی خود را اضافه کنید (قطعه جدید) و کلیک کنید از Snippet استفاده کنید.
3. نام قطعه سفارشی خود را وارد کنید. انتخاب کنید قطعه جاوا اسکریپت از نوع کد فهرست کشویی.
4. کد خود را در آن بنویسید پیش نمایش کد رشته. به عنوان مثال، ما یک اسکریپت اضافه می کنیم که یک پنجره پیام خوشامدگویی را نشان می دهد.
5. را فشار دهید فعال سازی تغییر دهید و کلیک کنید ذخیره قطعه.

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

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

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

روش اضافه کردن جاوا اسکریپت به وردپرس به صورت دستی با استفاده از قلاب wp_head و wp_footer

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

معمولاً باید دانلود کنید functions.php، آن را به صورت محلی با استفاده از یک ویرایشگر متن ویرایش کنید و دوباره آن را آپلود کنید. در هاستینگer، می توانید فایل های تم فرزند را مستقیماً در مرورگر وب خود با استفاده از مدیر فایل ویرایش کنید.

در غیر این صورت، می توانید جاوا اسکریپت را نیز با استفاده از افزونه Insert Headers and Footers در سربرگ یا پاورقی قرار دهید.

برای افزودن جاوا اسکریپت به سایت وردپرس خود، از wp_head و wp_footer قلاب ها همچنین می‌توانید انتخاب کنید که قطعه در سراسر سایت اعمال شود یا آن را درج کنید روی یک خاص page.

روش استفاده از wp_head Hook

را wp_head هوک کد جاوا اسکریپت را در قسمت هدر سایت شما وارد می کند. به‌طور پیش‌فرض، قطعه را برای همه پست‌ها یا صفحات در کل سایت اعمال می‌کند. در اینجا یک کد مثال است:

function javascript_function() { 
   ?>
   <script>
      // insert your JavaScript code here
   </script>
   <?php
}
add_action ('wp_head', 'javascript_function');

کد جاوا اسکریپت سفارشی خود را در آن قرار دهید برچسب بزنید و جایگزین کنید javascript_function با نام تابع مورد نظر شما

روش استفاده از wp_footer Hook

اضافه کردن کد جاوا اسکریپت سفارشی با استفاده از wp_footer قطعه را در تمام پاورقی ها در کل سایت وردپرس درج می کند. ساختار کد مشابه است wp_head، به جز ما یک قلاب دیگر در add_action عملکرد پاسخ به تماس:

function javascript_function() { 
   ?>
   <script>
      // insert your JavaScript code here
   </script>
   <?php
}
add_action ('wp_footer', 'javascript_function');

چگونه جاوا اسکریپت را به یک صفحه یا پست خاص اضافه کنیم

برای افزودن کد جاوا اسکریپت سفارشی فقط به یک وردپرس page، استفاده کنید اگر منطق شرطی بیانیه با is_page تابع. اضافه کردن wp_header یا wp_footer قلاب ها برای تعیین مکان.

به عنوان مثال، ما اسکریپت را در فوتر یک وردپرس قرار می دهیم page با 338 شناسه با استفاده از قطعه کد زیر:

function javascript_function() {
if (is_page ('338')) { 
   ?>
   <script> 
      // insert your JavaScript code here
   </script>
   <?php
   }
}
add_action('wp_footer', 'javascript_function');

متناوبا، استفاده کنید مجرد است تابع برای درج کد در یک پست خاص وردپرس. کد مشابه است:

function javascript_function() {
if (is_single ('338')) { 
   ?>
   <script> 
      // insert your JavaScript code here
   </script>
   <?php
   }
}
add_action('wp_footer', 'javascript_function');

روش قرار دادن جاوا اسکریپت در وردپرس با استفاده از تابع wp_enqueue_script

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

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

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

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

window.addEventListener('load', function() {
   alert('Welcome to the website');
})';

ما فایل را در قسمت ذخیره می کنیم js پوشه داخل پوشه فعال تم وردپرس. برای اعمال اسکریپت، تماس بگیرید Welcome_box.js با افزودن موارد زیر wp_enqueue_script عملکرد در functions.php فایل:

function enqueue_welcome_message_script() {
   wp_register_script('welcome-message', get_template_directory_uri()  
   . '/js/welcome_box.js', array('jquery'), '1.0', true);
   wp_enqueue_script('welcome-message');
}
add_action('wp_enqueue_scripts', 'enqueue_welcome_message_script');

را get_template_directory_uri() تابع مکان فایل اسکریپت را دریافت می کند. را آرایه وابستگی های فایل جاوا اسکریپت شما، یعنی JQuery را فهرست می کند. اگر پستی یا page شناسه، کد به طور پیش فرض برای کل وب سایت اعمال می شود.

نکاتی برای افزودن جاوا اسکریپت به وردپرس

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

اطمینان حاصل کنید که اسکریپت به خوبی نوشته شده است

قرار دادن کد جاوا اسکریپت اشتباه در وردپرس ممکن است باعث ایجاد مشکلاتی شود که ظاهر یا عملکرد وب سایت شما را خراب کند. علاوه بر این، می تواند منجر به خرابی شود و به اعتبار کسب و کار شما آسیب برساند.

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

می توانید از XAMPP برای راه اندازی یک محیط تست محلی وردپرس استفاده کنید روی کامپیوتر شما. در هاستینگer، همه برنامه های میزبانی وردپرس ما یک ابزار مرحله بندی ارائه می دهند که به شما امکان می دهد قبل از استقرار تغییرات به راحتی آنها را با خیال راحت بررسی کنید.

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

از JavaScript Minifier استفاده کنید

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

برای بهبود عملکرد، کاراکترهای غیرضروری مانند فضاهای خالی، کاراکترهای اضافی یا نظرات را از کد خود حذف کنید. در حالی که این عناصر در طول توسعه مفید هستند، مرورگرهای وب می توانند process کد بدون آنها

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

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

از یک کنترل نسخه استفاده کنید

به غیر از تهیه نسخه پشتیبان، از یک سیستم کنترل نسخه مانند ردیاب اطلاعات جهانی (Git) استفاده کنید تا به شما در ردیابی تغییرات و بازیابی کد در هنگام مواجهه با خطا کمک کند. علاوه بر این، کارایی توسعه و همکاری را بهبود می بخشد.

Git به چندین کاربر اجازه کار می دهد روی یک پروژه به طور همزمان بدون تأثیر بر روی کد یکدیگر. علاوه بر این، آنها می توانند کار کنند روی فایل را به صورت محلی و تغییرات را مستقیماً از رایانه شخصی خود به محیط زنده فشار دهید.

هاستینگer برنامه های میزبانی وردپرس با سیستم کنترل نسخه Git ادغام می شود. کاربران به راحتی می توانند یک مخزن را مستقر کنند و با رفتن به آن، استقرار خودکار را فعال کنند Git منو در hPanel.

نتیجه

افزودن جاوا اسکریپت به وردپرس به شما امکان می دهد تم ها و افزونه ها را تغییر دهید تا عملکرد سایت خود را گسترش دهید. سه روش برای انجام این کار وجود دارد: استفاده از یک افزونه قطعه کد مانند WPCode، سیستم قلاب وردپرس و wp_enqueue_script تابع.

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

را wp_header hook کد شما را به عنوان وب سایت اضافه می کند، در حالی که wp_footer آن را در پاورقی وردپرس درج می کند. برای نمایش اسکریپت روی یک مجرد page یا پست کنید، از اگر بیانیه با مجرد است یا is_page کارکرد.

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

سوالات متداول جاوا اسکریپت وردپرس

جاوا اسکریپت چیست؟

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

جاوا اسکریپت در کنار سایر زبان های توسعه وب مانند HTML و CSS کار می کند. علاوه بر این، برای برنامه نویسی سمت سرور و ایجاد یک درخواست API مفید است.

چرا جاوا اسکریپت را به وردپرس اضافه کنیم؟

استفاده از جاوا اسکریپت در وردپرس به کاربران امکان می دهد محتوای اضافی را به سایت خود اضافه کنند، API ها را یکپارچه کنند و رفتار پلاگین ها یا تم ها را تغییر دهند.

علاوه بر این، جاوا اسکریپت به آنها اجازه می دهد تا ابزار نظارتی شخص ثالث را راه اندازی کنند. به عنوان مثال، کاربران می توانند کد رهگیری Google Analytics را برای ثبت داده هایی مانند تعامل کاربر در سایت های وردپرس خود اضافه کنند.

آیا وردپرس از PHP یا جاوا اسکریپت استفاده می کند؟

یک وب سایت وردپرس عمدتاً از PHP برای برنامه اصلی و عملکرد سمت سرور استفاده می کند. بیشتر افزونه ها و تم ها از زبان برنامه نویسی نیز استفاده می کنند.

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