دوره مجازی قالب وردپرس (جلسه 25): پیاده سازی مطالب وب سایت در قالب

- visibility ۶۳ mode_comment

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

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

  • پیاده سازی نمایش تصاویر با استفاده از تابع get_post_thumbnail
  • اضافه کردن اندازه های دلخواه با تابع add_image_size و تنظیمات آن
  • پیاده سازی بخش مطالب اصلی قالب با حلقه WP_Query
  • پیاده سازی نمایش داده ها هر مطلب با توابع مربوطه
info توجه

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

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

comment دیدگاه کاربران
Mehdi Soli

سلام جناب علی محمدی، روزتون خوش، هنگامی که بین “همه مطالب” و “آخرین مطلب” و “آخرین دانلود” برای اولین بار کلیک می کنیم (در واقع سوئیچ می کنیم) تا موس کاربر حرکت نکند، افکت دیده نمی شود و پست ها لود نمی شوند. خود من یه نیم ساعتی سرکار بودم تا دیدم در سورس صفحه هستند و به مطلب پی بردند. این ممکن است برای کاربر سایت ما هم اتفاق بیفتد یعنی تا اسکرول نکند، پست ها نمایش داده نشده و اگر مثلا صفحه طوری باشد که اسکرول نشود، عملا کاربر فکر می کند پستی در این بخش وجود ندارد. چطور می شود این مشکل رو در wow.js حل کرد که نیازی به اسکرول نباشد و بدون اسکرول انیمیشن ها لود شوند؟ آیا این امکان در این کتابخانه موجود هست؟ ممنون میشم که راهنمایی بفرمایید. بسیار ممنون از لطف و محبت شما

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

سلام دوست عزیز. پیشنهاد میکنم در هنگام لود شدن هر تب تابع WOW().init() رو فراخوانی کنید.

mostafash

استاد سلام
من دارم از تصویر توی طراحی خودم استفاده می کنم.آدرس عکس رو با استفاده از src وقتی میدم ،عکس رو لود نمی کنه ولی وقتی بجاش از data-original استفاده می کنم عکس رو نشون میده.
مشکل چیه؟
خیلی گیر کردم.
ممنون میشم راهنمایی کنین.

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

سلام. شما احتمالا از پلاگین lazy load برای نمایش تصاویر استفاده می کنید چون data-original مربوط به این پلاگین هستش.

mostafash

استاد چرا وقتی از src توی تگ img استفاده می کنم،عکس رو لود نمیکنه.پلاگین lazy load رو چه جوری باید استفاده کنم که تگ img تمامی عناصرش رو بشه بدرستی استفاده کرد.من باید برای تگ img حتما از src استفاده کنم.چه جوری باید ازش استفاده کنم وقتی پلاگین lazy load فعاله

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

میتونی در کدهای جی کوئری بگی مثلا تگ های img که کلاس فلان رو دارن فقط از طریق lazy load اجرا بشن و بقیه به صورت عادی نمایش داده بشه.باید lazy load رو محدود کنی.

mostafash

استاد این کد رو ببینین

پلاگین lazy load داره میگه که بعد از تگ img بلافاصله از data-original استفاده کنید.من همین کار رو انجام دادم وتصویر هم نمایش داده میشه ولی وقتی لود میشه ،تمام تگ های html بعد از data-original هم نمایش داده میشه .چیکار کنم که اون تگ ها نمایش داده نشه و وفقط عکس لود بشه

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

متوجه منظور شما نشدم که تمام تگ های html بعد از اون هم لود میشه.

mostafash

نگاه کنین تگ img یک سری خصوصیات به خودش نیاز داره مثل src یا width یا height یا alt و title.
پلاگین lazy load داره میگه که شما بجای src باید از data-original استفاده کنین تا تصویر نمایش داده بشه.
وقتی من از data-original استفاده می کنم تصویر شاخص نمایش داده میشه.و خصوصیا دیگه ای هم که برای تگ img تعیین کردیم هم داره به کاربر نشون میده.مثلا گفتیم width=100 , height=200 این خصوصیات هم داره نمایش داده میشه.در حالیکه این خصوصیات باید پنهان باشه و موقع اجرای تصویر شاخص نباید نمایش داده بشه
من فکر میکنم یه ترفندی داره که من بلد نیستم

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

سلام . توی تنظیمات lazy load هم چین چیزی وجود نداره و فکر می کنم به خروجی تگ های html که شما نوشتین مربوط میشه. شما باید اون قسمت از کد رو inspect کنید و ببینید کجای تگ ها مشکلی داره. احتمالا درست بسته نمیشه تگ.

علی اصغر جهانی

سلام استاد . خسته نباشید .
من از تابع add_image_size در قالب صحیفه استفاده میکنم . ولی هر تصویری رو یه جوری نمایش میده . اینم آدرس سایتم خودتون ببینید . www.learnschool.ir
ممنون

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

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2 3