campaign-Ghorban-to-Ghadir

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



visibility  
mode_comment   ۳۸

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

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

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

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

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

comment دیدگاه کاربران
mehdi karimi replyپاسخ

سلام ، اگر بخوایم چند فایل css یا js رو فراخوانی کنیم باید چی کار کنیم ؟ آیا در تابع wp_enqueue_style باید به ترتیب آی دی بدیم ؟ به این مورد اشاره ای نکردید در ویدئو

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

سلام برای هر فایل باید یکی آیدی مشخص کنیدو به ترتیب دلخواه لود کنید.

mehdi karimi

یعنی به این ترتیب ?

یا جدا جدا ؟
ممنون

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

سلام جدا جدا.

حمید رضا مصطفی زاده replyپاسخ

سلام
امکانش هست برای ماندگار شدن بیشتر این دوره در انتها که غالب تمام شد در یک هاست و دامنه قرار بدهید غالب دوره رو؟

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

سلام بررسی می کنیم اگه شرایط مهیا بود همین کارو انجام میدیم.

sajadprm replyپاسخ

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

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

سلام بنده خودم این مورد رو تست نکردم ولی برای گزینه های منو کلاس های wowjs رو قرار بدین. مثلا کلاس های wow fadeInLeft رو قرار بدین

sajadprm

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

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

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

sajadprm replyپاسخ

استاد از منو های آکاردئونی مثل منویی که در سایت دیجی کالا هستش توضیح نمی دید
خیلی منو های زیبایی هستن اون ها هم کد نویسی داره یا با نرم افزار خاصی این کار انجام می شه ؟

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

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

majid zare replyپاسخ

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

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

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

Alireza Ph replyپاسخ

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

فایل فوتر هم توی صفحه index لود کردم

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

سلام تابع add_action رو اشتباه نوشتین.به شکل زیر تصحیح کنید.

add_action( 'wp_enqueue_scripts', 'Java_Scripts_File' );

Alireza Ph replyپاسخ

میشه یه بررسی بفرمایید ؟

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

سلام دقیق تر توضیح بدید.

majid zare replyپاسخ

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

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

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

حمید حسینی تبار replyپاسخ

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

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

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

سهیل محمدی replyپاسخ

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

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

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

سهیل محمدی

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

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

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

سهیل محمدی replyپاسخ

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

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

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

فرهاد replyپاسخ

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

لقمان آوند

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

منصور replyپاسخ

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

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

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

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

زارعی هوشیار replyپاسخ

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

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

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

زارعی هوشیار

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

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

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

جاسم روستا replyپاسخ

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

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

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

ارسال نظرات

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