گروه آموزش طراحی سایت 07 اردیبهشت 1394 16 2094 بازدید دوره مجازی آموزش طراحی قالب وردپرس

در ادامه ی مباحث دوره آموزش طراحی قالب وردپرس آنلاینر؛ به سراغ کار با تصاویر شاخص (featured image / post thumbnail) و نمایش آن ها در قالب وردپرس سایت می رویم. در این فیلم آموزشی که مدت زمان آن 57 دقیقه و 28 ثانیه است، به صورت کاملا کاربردی و دقیق به بررسی کار با تصاویر شاخص در وردپرس می پردازیم و نکاتی که یک طراح قالب وردپرس هنگام کار با تصاویر شاخص، از هنگام انجام تنظیمات تا آپلود و بارگزاری و تا زمان استفاده و فراخوانی در قالب وردپرس را خدمت شما آموزش می دهیم.

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

آنچه در این فیلم آموزش وردپرس، درباره تصاویر شاخص تقدیم شما میگردد:

  • تعریف تصویر شاخص در وردپرس
  • آموزش مجهز کردن قالب وردپرس به امکان پشتیبانی از تصاویر شاخص با استفاده از add_theme_support
  • آموزش کار با تابع the_post_thumbnail در طراحی قالب وردپرس
  • تعیین و مقدار دهی به صفت های تصویر شاخص در خروجی HTML آن (نام کلاس، title و …)
  • آموزش کار با تنظیمات ابعاد تصاویر شاخص
  • مشاهده ی برش خوردن تصاویر و resize شدن آن ها پس از آپلود (بارگزاری) در بخش رسانه های وردپرس و همچنین بخش تصاویر شاخص
  • کنترل وجود تصویر شاخص برای نوشته ها و برگه ها و آموزش کار با تابع has_post_thumbnail در طراحی قالب وردپرس
  • آموزش کار با تابع get_the_post_thumbnail در طراحی پوسته وردپرس

جهت دانلود محتوای این جلسه از آموزش های وردپرس، شامل فیلم آموزشی و فایل پوسته وردپرس مربوطه (تکمیل شده تا این جلسه) بر روی لینک زیر کلیک نمایید:

خرید این فیلم آموزشی به صورت تک (2200 تومان) :
22,000 ریال – خرید
ثبت نام و دسترسی کامل به تمام فیلم ها و محتوای دوره آموزش طراحی قالب وردپرس قبلا ثبت نام کرده ام؛ ورود

دسترسی سریع :

نظرات کاربران (16)




  1. سلام خسته نباشید
    من یه مشکلی در مورد تصویر شاخص داشتم و اونم اینه که وقتی تصویر رو آپلود میکنم و از اون به عنوان تصویر شاخص استفاده میکنم
    در مطلب عکس رو نشون میده ولی انگار عکس رو crop کردی در صورتی که عکس با اندازه و کیفیت خوب آپلود شده و در کتابخانه دارمش ولی تو سایت هم کیفیتش بد هستش و هم از 4 گوشه از عکس crop میکنه
    تو تنظیمات هم رفتم ولی نتونستم کاری انجام بدم

    تو رو خدا جوابم رو بدید کلافه شدم

    • گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      توجه داشته باشید که پاسخگویی در این بخش برای دانش پذیران دوره ی آموزش طراحی قالب وردپرس هست؛ اما برای راهنمایی حضرتعالی:
      لطفا عنصر تولید شده ی مربوطه را inspect کنید و ببینید که چه عرض و ارتفاعی به عکس مربوطه با CSS داده شده است.

  2. mehdi

    سلام استاد

    وردپرس میاد خاصیت عرض و ارتفاع رو به عکس میده به طور پیشفرض. نمیشه کاری کرد که عکس رو اون سایز دلخواه ما کنه ولی خاصیت عرض و ارتفاع رو بش نده که بشه عکس رو با مثلا
    image{
    max-width:100%;
    height:auto
    }
    ریسپانسیوش کنیم. با !important فک کنم کارمون راه بی افته اما ندیدم کسی این کارو کنه.

    • گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      برای چند اندازه ی پیش فرض و اولیه ی وردپرس، خود وردپرس یکسری اندازه ها را به عکس اعمال می کند که این ابعاد نه با CSS که به وسیله ی برش زدن عکس و تغییر سایز عکس به دست می آیند.
      مثلا برای هر کدام از حالات thumb, medium, large یکسری اندازه های پیش فرض وجود دارد؛ اما نکته ی مهم اینجاست که این اندازه ها را میتوان در بخش مدیریت وردپرس و از مسیر “تنظیمات > رسانه ها” تغییر داد و یا در خود قالب نیز توابعی برای تغییر اندازه های پیش فرض این مقادیر تعریف کرد.

  3. توسعه دهنده وب

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

    • گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      لطفا مجدد به محتوای فیلم آموزشی دقت بفرمایید؛ علت حذف تصویر شاخص و جایگزین کردن آن در فیلم آموزشی، این هست که محتوا را از یک فایل XML آماده (که قبلا برای دانلود در اختیار شما نیز قرار داده ایم) درون ریزی کرده ایم اما تیک دانلود attachment ها را نزده بودم به همین خاطر مشکل وجود داشت. اما به طور کلی اصلا نیازی به این کار نیست.

  4. احمد

    سلام.

    شما وقتی آرایه attr$ رو مقدار دهی میکردید از توابع get_the_title و get_the_excerpt استفاده کردید. همون طور که در درس های قبلی توضیح داده بودید، این توابع فقط یک مقداری رو برمیگردونن و چیزی رو در خروجی چاپ نمیکنن؛ اما چرا در ارایه attr$ اینها عملاً دیدیم که یک مقداری رو در خروجی چاپ کردن؟ مثلا تابع get_the_title برای خاصیت title ، مقداری رو چاپ کرد بدون اینکه از دستور echo استفاده شده باشه.

    • گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      توابع get_the_title و get_the_excerpt خروجی شان را به متغیر هایی که در آرایه ی $attr وجود دارند، انتساب می دهند. سپس این تابع the_post_thumbnail هست که خروجی ها را (با استفاده از آرایه ی مربوطه) چاپ می کند. بنا براین توابعی که فرمودید، چیزی را چاپ نمی کنند، بلکه فقط مقادیر را در آرایه ی مذکور ذخیره می کنند.
      قبلا هم به همین روش مثال هایی زده بودیم که مقدار خروجی این توابع در یک متغیر ذخیره میشد و در نهایت مثلا به وسیله ی دستور echo چاپ می شدند.

  5. احمد

    در رابطه با تصویر شاخص برای برگه ها هم اگر ممکنه توی آموزش ها یه مثال عملی داشته باشید.
    خیلی ممنون میشم.

    • گروه آموزش طراحی سایت

      در مباحث کوئری دلخواه (Custom Query ها) یادآوری بفرمایید؛ چشم

  6. احمد

    من در قالب های وردپرس دیدم که از طریق فایل functions.php اندازه های دلخواهی رو برای تصاویر شاخص تعیین میکنن و بعد از اونها در تابع the_post_thumbnail() استفاده میکنن.
    شما در فیلم اشاره ای به ابن مسئله نداشتید. در ادامه اموزش ها این مسئله رو داریم؟
    آیا اصلا این کار لازمه؟
    چون ما میتونیم از طریق تنظیمات رسانه در خود پنل وردپرس، بریم و سایز دلخواهمون رو برای حالت thumbnail تنظیم کنیم.
    ممنون میشم که در این مورد هم راهنمایی بفرمایید.

    • گروه آموزش طراحی سایت

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

  7. احمد

    سلام.

    شما تصاویر شاخص پست هارو درون تگ a قرار دادید و از حالت thumbnail استفاده کردید که سایزش 150 در 150 بود.
    از طرفی تگ a در فایل style.css این ابعاد براش تعیین شده: width: 114px; height: 103px

    یعنی در واقع تصاویر شاخص دیگه در سایز 150 در 150 نمایش داده نمیشن و تگ a سایز اونهارو کوچیک میکنه.

    خوب در این حالت باید چیکار کرد؟ باید تگ a رو ابعادش رو با ابعاد تصاویر شاخص منطبق کرد یا اینکه برعکس، ابعاد تصاویر شاخص رو با ابعاد تگ a منطبق کرد؟

    • گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      بله شما میتوانید در CSS این ابعاد را تغییر بدهید. در حقیقت نکته اینجاست که تصاویر به صورت 150 * 150 بارگزاری میشوند (و به همان میزان حجم پهنای باند و زمان بارگزاری نیاز دارند) اما در CSS در ابعاد کوچکتری نمایش داده شده اند که طراح پوسته وردپرس خودش میتواند این تغییرات را روی قالب HTML و بر روی کدهای CSS مربوطه لحاظ نماید.

      • احمد

        من خیلی متوجه منظور شما نشدم.

        ببینید اندازه لینکی که تصاویر شاخص در اون قرار داده شده، 114 در 103 هست.
        خوب بهتر نبود که از پنل تنظیمات رسانه، سایز تصویر شاخص در حالت thumbnail رو همون 114 در 103 تعیین بکنیم؟

        شاید هم منظور شما همین بود و من متوجه نشدم.

        • گروه آموزش طراحی سایت

          این یک مثال عینی از آن چیزی است که در کارهای واقعی رخ می دهد، یعنی طراح صفحه ی وب (مسئول کدنویسی استاتیک قالب با html, css, jquery) اندازه هایی را اعمال می کند که با نظر شما متفاوت است. بنابر این بستگی به تصمیم شما دارد که بخواهید اندازه هایی که در قالب html هست را در تنظیمات پیشخوان وردپرس اعمال کنید و یا برعکس، اندازه هایی که در کدهای css هستند را تغییر بدهید و آن ها را بر اساس آن چه که در وردپرس مورد نظر شماست، تغییر بدهید.
          و اما به طور کلی اینکه شما می فرمایید این اندازه ها بهتر نیست یکسان باشند؟ پاسخ شما مثبت است و حتما بهتر است دقت کنیم تا یکسان باشند.