روش های افزودن CSS و جاوا اسکریپت سفارشی به قالب وردپرس
[ad_1]
در این مطلب می خواهیم به شما نحوه افزودن جاوا اسکریپت را به صفحات یا نوشته های وردپرستان آموزش دهیم. برخی مواقع ممکن است شما بخواهید یک کد جاوا اسکریپت را به کل وب سایت و یا به صفحات خاص سایت خود اضافه کنید. به طور پیش فرض، وردپرس به شما این امکان را نمی دهد که کد را مستقیما در پست های خود اضافه کنید. برای حل این مشکل در ادامه با ما همراه باشید.
جاوا اسکریپت چیست؟
جاوا اسکریپت یک زبان برنامه نویسی می باشد که بر روی سرور شما اجرا نمی شود و در مرورگر کاربر اجرا می شود. این برنامه نویسی در سمت سرویس گیرنده به توسعه دهندگان این امکان را می دهد تا کارهای جالبی انجام دهند، بدون اینکه سرعت وب سایتشان را کاهش دهد.
در صورتی که می خواهید یک پخش کننده فیلم جاسازی نمایید، یک ماشین حساب یا یک سرویس دیگر شخص ثالث اضافه کنید، معمولا از شما خواسته می شود که یک کد جاوا اسکریپت را در وب سایت خود کپی و جاگذاری کنید.
قطعه معمول کد جاوا اسکریپت ممکن است شبیه به این باشد:
|
|
<script type=“text/javascript”>
// Some JavaScript code
</script>
<!— Another Example: —!>
<script type=“text/javascript” src=“/path/to/some-script.js”></script>
|
حالا در صورتی که یک قطعه کد جاوا اسکریپت را به یک پست یا صفحه وردپرس بیافزایید، آنگاه توسط وردپرس هنگام تلاش برای ذخیره حذف یا شکسته خواهد شد.
در ادامه نگاهی به افزودن جاوا اسکریپت به وردپرس بدون شکستن وب سایت می اندازیم.
روش ۱) افزودن جاوا اسکریپت با بکار بردن سربرگ ها و پاورقی ها (هدر – فوتر)
برخی مواقع از شما خواسته می شود یک قطعه کد جاوا اسکریپت را در وب سایت خود کپی نمایید و بچسبانید تا یک ابزار شخص ثالث بیافزایید. این اسکریپت ها معمولا پیش از تگ </ body> وب سایت شما به بخش سر یا پایین در می آیند. به این ترتیب کد در هر صفحه نمایش بارگذاری می شود.
مثلا، کد نصب Google Analytics باید در هر صفحه وب سایت شما حضور داشته باشد تا بتواند بازدیدکنندگان وب سایت شما را دنبال کند.
شما می توانید این کد را به فایل header.php یا footer.php تم وردپرس خود بیافزایید. بنابراین زمانی که قالب وردپرس خود را بروزرسانی می کنید یا تغییر می دهید، این تغییرات از بین می روند.
پس ما به کار بردن افزونه وردپرس را برای افزودن جاوا اسکریپت به وردپرس توصیه می کنیم.
اولین کار، شما باید افزونه Insert Headers and Footers را نصب و فعال کنید. لینک دانلود این افزونه در پایان مطالب قرار داده شده است.
بعد از نصب و فعال سازی این افزونه گزینه ی جدید با نام Insert Headers and Footers در تظیمات وردپرس نمایش داده می شود. پس از کلیک بر روی این گزینه دو جعبه به شما نمایش داده می شود. یکی برای هدر و یکی برای فوتر. (دقت کنید که در بعضی از قالب های وردپرس این ویژگی وجود دارد و نیازی به نصب افزونه ندارید)
در این جا شما می توانید کد جاوا اسکریپت را به یکی از این جعبه ها کپی کنید و بعد روی دکمه ذخیره کلیک کنید.
کار تمام شدو الان شما می توانید کد را در هر صفحه وب سایت خود بارگذاری نمایید.
روش ۲) افزودن کد جاوا اسکریپت به صورت دستی با بکار بردن کد
در این روش نیاز به افزودن کد به فایل های وردپرس وجود ندارد.
اول به بررسی نحوه اضافه کردن کد به سرصفحه سایت وردپرس می پردازیم. شما باید کد زیر را به فایل functions.php یا یک افزونه خاص سایت اضافه کنید.
|
|
function wpb_hook_javascript() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action(‘wp_head’, ‘wpb_hook_javascript’);
|
افزودن جاوا اسکریپت به وردپرس یا صفحه خاص با بکار بردن کد
تصور کنید شما فقط می خواهید این جاوا اسکریپت را در یک نوشته خاص وردپرس بارگذاری نمایید. جهت این کار، باید منطق شرطی را به کد بیافزایید. به مثال زیر توجه کنید:
|
|
function wpb_hook_javascript() {
if (is_single (’16’)) {
?>
<script type=“text/javascript”>
// your javscript code goes here
</script>
<?php
}
}
add_action(‘wp_head’, ‘wpb_hook_javascript’);
|
با دقت در کد بالا، می بینید که کد جاوا اسکریپت را در اطراف منطق شرطی قرار داده اید تا با یک شناسه پست خاص مطابقت داشته باشد. شما می توانید شناسه نوشته خود را با ۱۶ جایگزین نمایید.
این کد برای هر نوع نوشته به جز صفحات کار می کند. در ادامه، مثال دیگری را بررسی می کنیم. پیش از افزودن کد جاوا اسکریپت به قسمت بالای صفحه، برای یک شناسه صفحه خاص بررسی می شود.
|
|
function wpb_hook_javascript() {
if (is_page (’10’)) {
?>
<script type=“text/javascript”>
// your javscript code goes here
</script>
<?php
}
}
add_action(‘wp_head’, ‘wpb_hook_javascript’);
|
به جای is_single، ما اکنون is_page را برای شناسایی صفحه بکار می بریم.
ما می توانیم همان کد را با اصلاح کمی بکار ببریم تا کد جاوا اسکریپت را به فوتر سایت اضافه کنیم. به مثال زیر دقت کنید.
|
|
function wpb_hook_javascript_footer() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action(‘wp_footer’, ‘wpb_hook_javascript_footer’);
|
به جای اینکه ما تابع را به wp_head متصل نماییم، حالا آن را به wp_footer متصل کرده ایم. شما می توانید برچسب های شرطی را جهت افزودن جاوا اسکریپت به نوشته ها یا صفحات خاص بکار ببرید.
امیدوارم این مطلب برایتان مفید بوده باشد.
نوشته روش های افزودن CSS و جاوا اسکریپت سفارشی به قالب وردپرس اولین بار در اسکریپت ها پدیدار شد.
[ad_2]
لینک منبع مطلب
