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

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

63 3225 ۱۷ آبان ۹۴
به نام خدا و سلام. با جلسه 25 ام از دوره مجازی طراحی قالب وردپرس در خدمت شما هستیم. در جلسه قبل ما مباحث مربوط به حلقه ها رو گفتیم و در این جلسه به صورت عملی این موارد رو پیاده سازی می کنیم. در طرح قالبی که برای دوره در نظر گرفته بودیم بخش مطالب اصلی وب سایت دارای سه تب بود که در هر کدام مطالب متفاوتی نمایش داده میشه. به همین خاطر ما باید از حلقه wp_query برای این کار استفاده کنیم. در این مطلب آموزش پیاده سازی آرگومان های مورد نیاز و برای دریافت مطالب هر بخش رو توضیح میدیم و مطالب رو نمایش میدیم و هم چنین داده های هر مطلب رو در حلقه نمایش میدیم. در این جلسه خواهیم دید :
  • پیاده سازی نمایش تصاویر با استفاده از تابع get_post_thumbnail
  • اضافه کردن اندازه های دلخواه با تابع add_image_size و تنظیمات آن
  • پیاده سازی بخش مطالب اصلی قالب با حلقه WP_Query
  • پیاده سازی نمایش داده ها هر مطلب با توابع مربوطه
این مطلب یک جلسه از دوره مجازی آموزش جامع طراحی قالب حرفه ای وردپرس است و برای دیدن آن باید در این دوره ثبت نام کنید .
توضیحات : بعد از درخواست های فراوان دوستان برای برگزاری دوره آموزش طراحی قالب وردپرس به صورت حرفه ای و تلاش سون لرن برای انجام مقدمات برگزاری دوره بالاخره انتظار ها به پایان رسید.در این دوره یک قالب حرفه ای و مردن با افکت های زیبا را به همراه کد نویسی بهینه و هم چنین امکانات متعدد یک وب سایت دانلود و آموزش را با هم پیاده سازی خواهیم کرد.برای راحتی کار دوره به سه بخش کلی تقسیم شده که بخش اول طراحی قالب در فتوشاپ - بخش دوم تبدیل قالب طراحی شده به HTML و CSS و بخش سوم هم پیاده سازی قالب با امکانات حرفه ای در وردپرس هست.چنانچه قبلا در دوره های دیگر سون لرن شرکت کرده اید این دوره علاوه بر آموزش کامل وردپرس تمرینی بسیار حرفه ای برای شما خواهد بود و هم اکنون با محتوایی غنی تر و حرفه ای تر و قیمتی بسیار کمتر از آن چه در دوره های حضوری وجود دارد می توانید در آن ثبت نام کنید !
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 63 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    Mehdi Soli(۷ اسفند ۱۳۹۵)

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

    • ‏‏
      کیوان علی محمدی(۱۱ اسفند ۱۳۹۵)

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

  • ‏‏

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

    • ‏‏
      کیوان علی محمدی(۷ اردیبهشت ۱۳۹۶)

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

      • ‏‏

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

        • ‏‏
          کیوان علی محمدی(۸ اردیبهشت ۱۳۹۶)

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

      • ‏‏

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

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

        • ‏‏
          کیوان علی محمدی(۸ اردیبهشت ۱۳۹۶)

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

        • ‏‏

          نگاه کنین تگ 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
    ممنون

    • ‏‏
      کیوان علی محمدی(۲۴ تیر ۱۳۹۶)

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

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

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :