دوره مجازی قالب وردپرس (جلسه 22): اضافه کردن style و script به قالب وردپرس و پیاده سازی اسلایدر

دسته بندی: وردپرس
زمان مطالعه: 1 دقیقه
۰۹ آبان ۱۳۹۴

به نام خدا و سلام. در جلسه 22 ام از دوره مجازی آموزش طراحی قالب وردپرس قراره با هم نحوه اضافه کردن کدهای style و script رو به قالبمون تمرین کنیم و هم چنین بعد از این موارد و توضیح کامل آموزش اونها میایم و اسلایدر قالب رو در وردپرس پیاده سازی می کنیم. البته این پیاده سازی بیشتر جنبه اضافه کردن کدهای اسلایدر با توجه به مطالب گفته شده هستش و پیاده سازی کامل مربوط میشه به بخش متادیتا در قسمت های بعدی دوره. قبل از همه موارد بالا منوی قسمت قبلی رو تکمیل می کنیم و منو رو تا سطح شماره 3 از زیر منو استایل میدیم. دوستان عزیز باید به عنوان تمرین منو رو تکمیل کنند و برای بنده ارسال کنند تا تمرین برتر در قسمت بعید معرفی بشه.

در این جلسه خواهیم دید :

  • تکمیل منوی اصلی و اضافه کردن سطح 3 برای زیر منو ها
  • آموزش تابع wp_register_style
  • آموزش تابع wp_enqueue_style
  • آموزش تابع wp_register_script
  • آموزش تابع wp_enqueue_script
  • معرفی هوک wp_enqueue_scripts برای اضافه کردن کدهای style و script
  • پیاده سازی اسلایدر قالب در وردپرس (بخش کدهای style و اسکریپت)
:: توجه

این مطلب یک جلسه از آموزش طراحی قالب وردپرس می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش طراحی قالب وردپرس

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

جلسات دوره

نظرات کاربران

جاسم روستا

با سلام
آقای علی محمدی ، چطور میشه کدهای اسلایدر رو “که مثلا از وب سایت های دیگه بدست آوردیم” با کدهای شرطی اسلایدر آموزشی شما تلفیق کنیم ؟!
من کدهایی که شما برای اسلایدر در آموزش توضیح می دید رو با چندین کد اسلایدر ” البته از نوع” slider jquery تلفیق میکنم اما متاسفانه خوب کار نمیکنه و اسلایدرها اغلب تصاویر رو به نمایش نمی گذارن یا اینکه بصورت خودکار نمی تونن تصاویر رو به اسلاید بزارن وفقط یکی از تصویرها به نمایش گذاشته میشه.
ممنون میشم پاسخگو باشید.

کیوان علی محمدی

سلام برای این کار نیازه حتما حتما اول از همه فایل های css و js مورد نیاز توی قالب قرار بگیره و بعد از اون ادرس تصاویر به صورت صحیح در کدهای html خود slider قرار بگیره و در نهایت اون تابع فراخوانی بشه.

زارعی هوشیار

سلام ….اقای علی خسته نباشید…..
تا اینجای دوره خیلی خوب بود…‌خسته نباشید میگم
یه سوال داشتم اونم اینکه من تا حالا با ورد پرس کار نکردم وقسمت های مختلف پیشخوان رو نمیدونم چطوری میشه مدیریت کرد…آیا تا آخر این دوره این موارد میشه یاد گرفت…منظورم اینکه شما به همه این موارد پیشخوان اشاره کردید؟

کیوان علی محمدی

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

زارعی هوشیار

آیا تو دوره ای که در حال حاضر برگزرای هستش منظورم دوره افزودن امکانات به وردپرس…..آیا آموزش ورد پرس رو اشاره کردین؟
ویه سوال مرتبط بااین جلسه داشتم اونم اینه که …‌خطایی که در رابطه با jquery برخورد کردیم…….چطوری میشه از تابع noconflict استفاده کرد وخطا رو رفع کرد.؟…‌تشکر از پاسخ هاتون… 😉

کیوان علی محمدی

نه در دوره جدید هم ما آموزش خود وردپرس نداریم وصرفا امکانات قالب هستش. برای وردپرس کلا بهتره به جای $ از jQuery استفاده کنید.

منصور

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

 //in functions.php
function add_assets(){
 echo “HELLO WORLD FROM ADD_ASSETS FUNCTION”;
 wp_register_style(‘responsive.style’, get_template_directory_uri() . ‘/css/nivo-slider.css’);
 wp_enqueue_style(‘responsive.style’);
}
add_action(‘wp_enqueue_scripts’,’add_assets’); 

نه تنها wp_enqueue_style و wp_register_style کار نمیکنن بلکه wp_register_script و wp_enqueue_script هم کار نمیکنن

کیوان علی محمدی

سلام. در ایمیل پاسخ شما رو دادم.

فرهاد

سلام استاد علیمحمدی. ببخشید یه سوال برام پیش اومده. شما گفتید که تعداد زیاد http request ها باعت افزایش سرعت لود صفحه میشه. آیا این موضوع در مورد زیاد بودن تعداد فایل های php هم مصداق داره؟ مثلا شما فایل اسلایدر و قسمت های دیگه قالب رو توی دایرکتوری partial قرار دادید و اون ها رو از فایل های اصلی قالب جدا کردید. ایا این موضوع هم می تونه باعث افزایش سرعت لود صفحه بشه یا این مورد فقط در مورد کدهای سمت کلاینت مصداق داره؟

لقمان آوند

سلام
ببخشید من جواب میدم
خیر این مورد تاثیر خیلی زیادی نداره و می شه نادیده اش گرفت. فقط چند تا دستور include اضافه اجرا میشه و سمت سرور این مورد خیلی سریع انجام میشه و تاخیرش مثل تعداد بالای httpRequest ها نیست.

سهیل محمدی

استاد بله ممنون کامل متوجه شدم .فقط اینو هنوز متوجه نشدم ک جرا برای استایل اسلایدر این کار انجام نشد؟یعنی شما توابعش رو نوشتید بعدش کامنت کردید.چرا؟

کیوان علی محمدی

سلام دلیل خاصی نداشت.

سهیل محمدی

استاد سلام .ببخشید شما که از تابع wp_enuque_styleاستفاده نکردید؟یعنی باید این مورد دستی اضافه میشد؟ چرا از تابع wp_enuque_scriptاستفاده شد؟خب جرا به صورت دستی و بدون این تابع این کار رو نکنیم؟ من هنوز متوجه فایده این توابع نشدم !!!

کیوان علی محمدی

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

سهیل محمدی

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

کیوان علی محمدی

خوب چون استفاده اس الزامی نداره. نه نمیتونیم آدرس بدیم باید از handle یا همون آیدی unique استفاده کنیم.

حمید حسینی تبار

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

کیوان علی محمدی

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

majid zare

جناب علی محمدی
با سلام
اگر فرض کنید در فایل main.js کدی وجود داشته باشه که فقط در یک صفحه سایت مورد نیاز باشه. حالا با وجود لود شدن این فایل در همه صفحات و در footer اصلی با یک error مبنی بر بی استفاده بودن یکی از کدهای موجود در main.js در یک صفحه روبر میشیم (هنگام inspect گرفتن).
سوال اینه که این error ها مشکلی در سایت ایجاد میکنه یا خیر و یا اینکه فقط یک هشدار به حساب میاد

کیوان علی محمدی

سلام بهتره جلوی این خطاها رو بگیرید چون بعضا باعث از از افتادن بقیه کدها میشه. اگه کد شما از پلاگین خاصی استفاده میکنه بهتره از کد $.fn.function استفاده کنید و چک کنید که آیا اون پلاگین لود شده یا نه اینطوری میزان خطا ها رو کاهش میدید.

پایان زمان پشتیبانی

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

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل