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

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

آموزش اضافه نمودن استایل سفارشی در وردپرس

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

<?php add_action('wp_head', 'wpb_bad_script'); function wpb_bad_script() { echo 'jQuery goes here'; } ?>

علت گذاشتن اسکریپت در نوبت چیست ؟

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

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

قرار دادن صحیح اسکریپت در صف

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

<?php function wpb_adding_scripts() { wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true); wp_enqueue_script('my_amazing_script'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); ?>

ما از طریق تابع () wp_register_script به ثبت نام اسکریپت خود می پردازیم این تابع دارای 5 پارامتر است :

handle$: نام اسکریپت با این پارامتر مشخص می شود. ما آن را “my_amazing_script” نامیده ایم .

src$: این مورد مکان اسکریپت میباشد این تابع آدرس افزونه برای بدست آوردن آدرس صحیحی از فولدر افزونه استفاده میکنیم. پس از اینکه وردپرس آنرا پیدا کرد سپس به دنبال فایل amazing_script.js در فولدر میگردد.

deps$: این پارامتر برای وابستگی میباشد. از آنجا که اسکریپت از جی کوئری استفاده میکند ما جی کوئری را در بخش وابستگی اضافه میکنیم. وردپرس بصورت خودکار جی کوئری را اگر در سایت در حال بارگذاری نباشد بار گذاری میکند.

ver$: این پارامتر نسخه ی اسکریپت ما را نشان میدهد. این پارامتر مورد نیاز نمیباشد.

in_footer$: میخواهیم اسکریپت را در فوتر بارگذاری کنیم بنابراین برای درست بودن باید ارزش تعیین کنیم. اگر بخواهید اسکریپت را در هدر بارگذاری کنید پس به شما میگوید نادرست است.

مطلب پیشنهادی  ترفند هایی برای فایل htaccess.

در صف قرار دادن صحیح سی اس اس

درست مثل اسکریپت ها میتوانید سی اس اس خود را در صف قرار دهید. به مثال زیر توجه کنید:

<?php function wpb_adding_styles() { wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__)); wp_enqueue_script('my_stylesheet'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' ); ?>

توجه کنید که ما از قلاب عمل wp_enqueue_scripts هم برای اسکریپت و هم برای سبک استفاده کرده ایم. پس این تابع برای هر دو حالت کار میکند. در مثال بالا ما از  plugins_url برای اشاره کردن به مکان اسکریپت و یا سبک که میخواهیم در صف قرار دهیم استفاده کرده ایم. با این حال اگر از تابع اسکریپت صف در قالب خود استفاده میکنید پس از ()get_template_directory_uri استفاده کنید. اگر با قالب کودک کار میکنید از () get_stylesheet_directory_uri استفاده کنید مانند مثال زیر:

<?php function wpb_adding_scripts() { wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true); wp_enqueue_script('my_amazing_script'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); ?>

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

<link rel="stylesheet" type="text/css" href="path/to/your/style.css">

توجه داشته باشید تگ link می تواند خصوصیات دیگری را نیز داشته باشد . لازم به ذکر است زمانی که بخواهیم یک فایل جاوا اسکریپت را به قالب مورد نظر خود اضافه کنیم از کدی مانند کد زیر بهره می گیریم :

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D'text%2Fjavascript'%20src%3D'path%2Fto%2Fyour%2Fscript.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

فایل های استایل و جاوا اسکریپت در وردپرس

در وردپرس برای پیوست استایل ها و جاوا اسکریپت دو تابع با نام های wp_enqueue_style و wp_enqueue_script می باشد که موجب پیوست صحیح فایل های مربوط در قالب و همچنین تعیین ورژن، نوبت افزوده شدن و … آنها در قالب است .

تابع wp_enqueue_style

برای یافتن و یا درک توضیحات عمومی این تابع به کد های زیر توجه کنید :

$handle
نام استایل را مشخص میکند و لازم است که حتما منحصر به فرد باشد

$src
محل قرار گیری استایل را مشخص میکند. این مسیر میتواند کامل بوده یا بر اساس روت محل نصب وردپرس آدرس دهی شود

$deps
مشخص میکند که فایل استایل فعلی به کدام استایل ها وابسته است

$ver
ورژن فایل استایل را مشخص میکند.

$media
نوع مدیایی که این استایل بر روی آن تاثیر دارد را تعیین میکند. بنابراین میتوانید از مقادیری مثل :
all, print, screen, max-width:640
و موارد مشابه استفاده کنید.

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

اگر بخواهید یک فایل استایل ساده مانند style.css را ایجاد کنید وآن را فراخوانی نمایید باید به صورت زیر عمل کنید :

wp_enqueue_style( 'mainstyle', get_template_directory_uri().'/style.css', array(), '1.0' );

نام استایل ما در کد بالا mainstyle می باشد که شما می توانید آن را تغییر دهید مقدار بعدی از get_template_directory_uri().’/style.css’ را قرار داده ایم که برای فراخوانی مورد استفاده است . در آخر نیز با استفاده از array() اعلام کرده ایم که این فایل، به فایل دیگری وابستگی ندارد.

تابع wp_enqueue_script

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

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

$deps
نشان میدهد که این اسکریپت به چچه اسکریپت های دیگری وابستگی دارد. مقدار باید به صورت آرایه ارائه شود

$ver
ورژن فایل جاوااسکریپت را مشخص میکند

مطلب پیشنهادی  آموزش قرار دادن کد تبلیغات کلیکی در وب سایت

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

مجددا تمامی مقادیر فوق بجز نام اسکریپت اختیاری هستند.

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

wp_enqueue_script('jsname', get_template_directory_uri().'/scripts.js', array(), '1.3.2', false );

محل قرار دادن کد ها

این کد ها را میتوانید در فایل functions.php قالب وردپرس خود قرار دهید توجه داشته باشید کد هایی را که برای افزودن استایل و اسکریپت به قالب اضافه می کنید را باید درون یک تابع قرار داده و سپس با استفاده از تابع add_action به وردپرس اعلام کنید که می خواهید تابع مورد نظر در چه زمانی اجرا شود. به مثال زیر توجه کنید :

function mrcodeirwp_scripts() {
wp_enqueue_style( 'stylename', get_template_directory_uri().'/style.css', array(), '1.0' );
wp_enqueue_script('jsname', get_template_directory_uri().'/scripts.js', array(), '1.3.2', false );
}
add_action( 'wp_enqueue_scripts', 'mrcodeirwp_scripts' );

افزونه Simple Custom CSS and JS

افزونه ای که برای سفارش سازی قالب و افزونه ها می توان استفاده کرد این افزونه می باشد چرا که این افزونه برای اضافه کردن تغییرات CSS سفارشی سایت بسیار مناسب است . این افزونه ۹۰۰۰۰ نصب و فعال سازی شده است .

ویژگی های افزونه Simple Custom CSS and JS

• برخورداری از ویرایشگر پیشرفته
• امکان نمایش کد در هدر و فوتر
• افزودن بخش CSS یا JS به پنل مدیریت وردپرس
• افزودن کد ها به بخش های مختلف
• امکان حفظ تغییرات انجام شده در قالب حتی بعد از تغییر قالب
• نمایش کدهای inline در فایل های خروجی

این افزونه را نصب و فعال سازی کنید بعد از نصب و فعال سازی افزونه عبارت  Custom CSS and JS در پنل وردپرس ظاهر می شود که دارای زیر منوهایی می باشد.

بر روی گزینه ی اول یعنی All custom Code کلیک کنید در صفحه ای که باز می شود شما سه تب را پیش روی خود دارید .

Add Css Code: کدهای css خود را این قسمت درج کنید.

Add js Code: کدهای js خود را این قسمت درج کنید.

Add Html Code: کدهای Html خود را این قسمت درج کنید.

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

افزونه Custom Code

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

از جمله ویژگی های این افزونه :

• اضافه کردن اسکریپت سفارشی و کد CSS به هدر
• افزودن کد سفارشی به پاورقی
• افزودن کد سفارشی قبل از محتوای پست
• افزودن کد سفارشی بعد از محتوای پست
• امکان افزودن کدهای HTML، CSS و جاوا اسکریپت

ابتدا افزونه را نصب و فعال سازی نمایید پس از نصب روی قسمتAdd new custom post کلیک کنید خواهید دید صفحه ای مانند صفحه ی نوشتن مطالب و انتشار آن برای شما باز خواهد شد که می توانید کد مورد نظر خود را در آن قرار دهید و سپس در قسمت Code Position مکانی که می خواهید کد نمایش داده شود را مشخص نمایید .