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

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

خب حالا وقت افزودن کد CSS و جاوا اسکریپت دلخواه به قالب وردپرس سایت مان است و در این آموزش می خواهیم به نحوه افزودن کد سی اس اس و جاوا اسکریپت به پردازیم و این کد ها را به قالب وردپرس خود اضافه کنیم و این مبحث یکی از پرتکرار ترین مباحث های می باشد که هر طراح سایتی یا فردی که تازه با وردپرس و کد نویسی آشنا شده است از ما سوال می کند و این بار می خواهیم برای همیشه به این افراد کامل توضیح دهیم که چطور می توانند این کار را انجام دهند

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

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

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

جاوا اسکریپت : زبانی برای وب و فراتر از آن

جاوا اسکریپت یک زبان برنامه‌نویسی پویا، شیءگرا و سبک‌وزن است که عمدتاً برای افزودن تعامل و پویایی به صفحات وب استفاده می‌شود. این زبان به طور گسترده در توسعه‌ی فرانت‌اند (سمت کاربر) وب سایت‌ها به کار می‌رود و امکان ایجاد انیمیشن‌ها، رویدادهای تعاملی، و به‌روزرسانی محتوای صفحات بدون نیاز به بارگیری مجدد کامل را فراهم می‌کند. با ظهور Node.js، جاوا اسکریپت از محدودیت‌های سمت مرورگر فراتر رفته و اکنون در توسعه‌ی بک‌اند (سمت سرور) و اپلیکیشن‌های دسکتاپ نیز مورد استفاده قرار می‌گیرد.

ویژگی اصلی جاوا اسکریپت، تفسیر آن به‌طور مستقیم در مرورگر است. این به معنای عدم نیاز به کامپایل اولیه کد قبل از اجرا است و فرایند توسعه را تسریع می‌کند. این زبان از ساختارهای داده مختلفی مانند آرایه‌ها و اشیاء پشتیبانی می‌کند و دارای توابع قدرتمندی برای دستکاری DOM (Document Object Model) است که به توسعه دهندگان امکان کنترل ساختار و محتوای صفحات وب را می‌دهد.

جاوا اسکریپت یک زبان چند پارادایمی است، به این معنی که از چندین سبک برنامه‌نویسی پشتیبانی می‌کند، از جمله شیءگرا، رویه‌ای و تابعی. این انعطاف‌پذیری آن را برای طیف وسیعی از پروژه‌ها مناسب می‌کند. فریم‌ورک‌ها و کتابخانه‌های متعددی مانند React، Angular و Vue.js بر پایه جاوا اسکریپت ساخته شده‌اند که توسعه وب را ساده‌تر و کارآمدتر می‌کنند. این فریم‌ورک‌ها با ارائه ساختار و الگوهای طراحی، تولید اپلیکیشن‌های وب پیچیده را تسهیل می‌کنند.

با وجود سادگی نسبی یادگیری اولیه، جاوا اسکریپت یک زبان بسیار قدرتمند و پیچیده است که یادگیری عمیق آن به تلاش و تمرین مستمر نیاز دارد. آشنایی با مفاهیم برنامه‌نویسی شیءگرا، الگوهای طراحی و همچنین مفاهیم پیشرفته مانند Async/Await و Promises برای تبدیل شدن به یک برنامه نویس ماهر جاوا اسکریپت ضروری است.

CSS : زبان طراحی وب

CSS یا Cascading Style Sheets، زبانی است که برای استایل‌دهی به صفحات وب استفاده می‌شود. این زبان، ظاهر و چیدمان عناصر HTML را کنترل می‌کند و به توسعه‌دهندگان وب این امکان را می‌دهد تا وب‌سایت‌های خود را زیبا، خوانا و کاربرپسند طراحی کنند. بدون CSS، صفحات وب خسته‌کننده و فاقد جذابیت بصری خواهند بود.

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

ویژگی‌های کلیدی CSS شامل کنترل رنگ‌ها، فونت‌ها، اندازه‌ها، فاصله‌ها، طرح‌بندی و چیدمان عناصر، و انیمیشن‌هاست. با استفاده از خواص CSS، می‌توان رنگ پس‌زمینه، رنگ متن، نوع فونت، اندازه متن، فاصله بین خطوط، حاشیه‌ها، پدینگ‌ها و بسیاری از ویژگی‌های دیگر را تنظیم کرد. همچنین، CSS امکان ایجاد طرح‌بندی‌های پیچیده، مانند طرح‌بندی‌های responsive (پاسخگو به اندازه صفحه نمایش) را فراهم می‌کند، که به معنی تطبیق ظاهر وب‌سایت با اندازه صفحه نمایش‌های مختلف (کامپیوترهای رومیزی، تبلت‌ها و تلفن‌های همراه) است.

امروزه، روش‌های پیشرفته‌ای برای استفاده از CSS وجود دارد، از جمله استفاده از preprocessors مانند Sass و Less که امکان نوشتن CSS به شکلی سازمان‌یافته‌تر و قدرتمندتر را فراهم می‌کنند و همچنین استفاده از CSS frameworks مانند Bootstrap و Tailwind CSS که مجموعه‌هایی از کلاس‌ها و استایل‌های از پیش تعریف شده را برای تسریع فرایند طراحی ارائه می‌دهند. استفاده از این ابزارها، باعث افزایش سرعت و کارایی در توسعه‌ی وب می‌شود.

در نهایت، CSS یک ابزار قدرتمند و اساسی در طراحی وب است که با HTML و JavaScript همکاری می‌کند تا وب‌سایت‌های پویا و جذاب ایجاد کند. تسلط بر CSS، برای هر توسعه‌دهنده وب حرفه‌ای ضروری است.

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

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

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

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'کد‌های جاوا اسکریپت یا سی اس اس خود را اینجا وارد کند';
}
?>

خب حالا باید بریم سراغ کد بالا ، این کد بالا که مشاهده می کنید یک بخش به فارسی وجود دارد که نوشته شده است (کد‌های جاوا اسکریپت یا سی اس اس خود را اینجا وارد کند) خب اینجا شما باید کد های سی اس اس یا کد های جاوا اسکریپت خود را بنویسید و در ضمن در نظر داشته باشید که برای مواقعه شما برای سایت خود کد های JQuery را به صورت دستی بارگذاری کنید

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

دلیل قرار دادن اسکریپت ها به نوبت چیست

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

در سیستم مدیریت محتوا وردپرس تابع های آن به نوبت شروع به اجرا می شود و این تابع ها نیز به صورت اصولی برای بارگذاری کد های جاوا اسکریپت و سبک آن فراهم می کند و در ضمن توجه داشته باشد که شما با استفاده از تابع 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$: بعضی مواقعه می خواهید اسکریپتی را در فوتر سایت بارگذاری و نمایش دهید بنابراین شما برای درست بودن این اطلاعات باید ارزش تعیین کرده و و اگر که بخواهید اسکریپت را در هدر بارگذاری کنید ، پس به شما تذکر می دهیم که این نادرست است

بعد از فراهم کردن و یا کد نویسی کردن این پارامتر ها شما باید در پارامتر اصلی یعنی Wp_Register_Script تنها می توانید اسکریپت را در ()Wp_Enqueue_Script قرار داده که باعث شود همه این کد را صدا بزند و بعد از آن در صف قرار داده شود و این اسکریپت شما را به راحتی در سایت های دیگر اجازه ثبت نام در اسکریپت شما را بدهد وصد البته این مورد در صورتی است که خبواهند بدون تغییر کد از افزونه استفاده کنند

قرار دادن صحیح کد CSS در صف نمایش

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

<?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 را که در کد بالا مشاهده می کنید ، هم برای اسکریپت استفاده می شود و هم برای نمایش دادن کد های CSS و در نتیجه این تابع برای هر دو نوع کد کار می کند و در کد بالا ما از تابع 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' );  
?>

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

موفق و سربلند باشید.