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

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

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

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

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

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

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

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

جلسات دوره

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

نازمحمد گری

با سلام شما
تا اینجا جلسات خوبی رو گذراندم و بسیار عالی بودند
ولی امروز که برنامه xamp رو اجرا کردم و در مرورگر مسیر پروژه را دادم خطای زیر رو صادر کرد لطفا راهنمایی نمایید که این خطا را رفع کنم./
Error establishing a database connection/
تا جایی که خودم متوجه شدم ارتباط پروژه با پایگاه داده قطع شده /

مرتضی مهاچر

باسلام خدمت استاد عزیز
وقتی که ادرس loops.loop,all رو توی main-content وارد می کنم انگار (همه مطالب) من اپلود نمیشه(وقتی loop تنها رو وارد می کنم آپلود میشن) ، بنظر تمام کدهامم درست وارد کردم بنظر شما مشکل از کجاست؟

<?php get_template_part(‘loops/loop’,’all’);?>
مرتضی مهاچر

گرچه که یک روز درحال تفکر بودم ولی درنهایت فهمیدم که فایل LOOPS رو من توی یک پوشه قبل تر از SL-THEME درست کرده بودم و ادرس فراخوانی نمیشد و…

Masoud Azimi

سلام و ادب
سوال؟
سایز تصاویری که با استفاده از تابع add_image_size ایجاد میکنیم حتی با دادن عرض و طول به این تابع، دقیقا همون سایز رو نمیده – من عرض 260 رو برای تابع add_image_size درنظر گرفتم ولی اونرو تبدیل به 225 پیکسل تبدیل کرد (برای شما ارتفاع 150پیکسل رو تبدیل به 149 کرد) که میتونه تو ظاهر سایت تأثیر داشته باشه – حتی با استیال دادن اینلاین با Important دادن هم سایز تصویر تغییر نکرد ؟ آیا راهی وجود دارد برای حل این مورد؟
با سپاس

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

تابع add_image_size یک آرگومانی به نام crop داره که مقدار پیش فرضش false هست اگر اینو true کنید به سایز دقیق تبدیل میشه.

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

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

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

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

mostafash

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

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

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

mostafash

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

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

mostafash

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

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

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

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

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

mostafash

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

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

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

Mehdi Soli

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

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

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

سحر بشری

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

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

سلام بهتره خطایی که میده رو بررسی کنید.

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

قبلا گفته بودیم که در کدهای سمت سرور باید مقدار per_page رو در کدهای WP_Query رو تغییر بدین. مثلا مقدارش رو همین 10 انتخاب کنید.

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

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

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

نیاز به لاگین

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