روش افزودن تصویر شاخص به وردپرس

به تصویر هایی که توسط قالب بصورت اتوماتیک در جاهای مختلف سایت قرار میگیره تصویر شاخص میگن، تصاویر شاخص میتونن به اندازه های مختلف باشن، مثلا در ابعاد ۷۰۰ در ۲۰۰ پیکسل در اسلایدشو‏ها در بالای سایت نمایش داده بشن؛ اندازه ۳۰۰ در ۲۰۰ پیکسل در اول نوشته‏ها نمایش داده بشن، یا ۹۰ در ۹۰ پیکسل در بخش مطالب مرتبط، اما در هر اندازه و ابعادی و در هر کجای سایت که باشن باعث افزایش بازدید و علاقه کاربران به نوشته شما میشن و زیبایی مطالب شما رو دو چندان میکنن.

تصاویر شاخص در انتقال مفهوم نوشته‏ها هم بسیار موثرن، با انتخاب یه تصویر مناسب میتونید به کاربر بفهمونید که در نوشته شما چه چیزهایی قرار بفهمه و یاد بگیره و چه چیزی دستگیرش بشه.

نکته : این نوشته رو قبلا در سایت اعتماد به نفس منتشر کرده بودم، اما منتقلش کردم به اینجا و به همین دلیل زیر تصاویر لینک اعتماد به نفس گذاشته شده

افزودن امکان نمایش تصویر شاخص به قالب :

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

توضیح : برای اینکار باید از ویرایشگر قالب؛ داخل مدیریت وردپرس از منوی نمایش > ویرایشگر استفاده کنید
از لیست سمت چپ پنجره ویرایش فایل  functions.php رو انتخاب کنید تا در محیط ویرایشی باز بشه

و همچنین بخوانید :   wp-optimize - حذف ذخیره‌های خودکار در وردپرس

ویرایش قالب وردپرس     ویرایش قالب وردپرس - فایل فاکشن

کد زیر رو ( برای افزودن قابلیت تصویر شاخص به قالب ) در آخر فایل فانکشن کپی کنید

[html]
add_theme_support( ‘post-thumbnails’ );
[/html]

نکته ها :
– همیشه! ابتدا از فایل اصلی قبل از تغییر دادن یه کپی بگیرید که اگر چیزی اتفاقا پاک شد یا بهم ریخت یه نسخه ازش داشته باشید (خیلی مهمه)
– اگر فایل فانکشنتون به هر طریقی دچار مشکلی بشه و کدی رو اشتباه وارد کنید، حتی اگه شده یه نقطه یا ویرگول، احتمال داره سایتتون اصلا بالا نیاد و فقط یه صفحه سفید رو مشاهده کنید؛ در خیلی از موارد حتی بخش مدیریت هم بالا نمی یاد، پس حتما فکر این بخش رو هم بکنید که اگر کاری رو اشتباه انجام دادید و دچار مشکل شدید دسترسی به هاستتون دارید یا نه که از اونجا بتونید فانکشن رو تغییر بدید و اشتباهش رو اصلاح کنید.
– اگر  فایل functions.php داخل قالبتون نبود باید بصورت دستی یکی ایجاد کنید، ایجاد کردنش هم کاری نداره، یه فایل پی‏اچ‏پی خالی ایجاد میکنیدو طبق نوشته زیر کد رو داخلش قرار میدید.

[html]
<?php // تگ شروع دستور پی‏اچ‏پی

کدی که باید در فانکشن قرار بگیره

?> // تگ پایان دستور پی‏اچ‏پی
[/html]
– یادتون نره کد هایی که وارد میکنید باید حتما قبل از بسته شدن تگ پی‏اچ‏پی باشه نه بعدش

قرار دادن تصویری بعنوان تصویر شاخص : 

با استفاده از کد بالا قابلیت افزودن تصویر شاخص به محیط نوشتن مطلب شما اضافه میشه

افزودن تصویر شاخص به وردپرس

اگر اتفاقا این گزینه در صفحه نوشتن متن جدید ظاهر نشد از بالای صفحه روی دکمه تنظیمات صفحه کلیک کنید و تیک گزینه تصویر شاخص رو بزنید

و همچنین بخوانید :   افزونه لایک و دیس‏لایک نوشته ها در وردپرس

افزودن تصویر شاخص به وردپرس

خب تا اینجا ما فقط “افزودن تصویر شاخص” رو تونستیم به محیط وردپرسمون اضافه کنیم
برای اضافه کردن یک تصویر شاخص به نوشته باید روی لینک ” قرار دادن به عنوان تصویر شاخص” کلیک کنیم
و تصویر مورد نظر رو بعد از آپلود به عنوان تصویر شاخص معرفی کنید

مراحل انتخاب تصویر شاخص

نمایش تصویر شاخص داخل نوشته :

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

[html]
<?php the_post_thumbnail(); ?>;
[/html]

نکته : اگه زیاد از حلقه و این چیزها سر در نمی یارید کد نمایش تصویر شاخص رو  بالا یا پایین کد عنوان نوشته قرار بدید، عنوان نوشته ها معمولا با این کد نمایش داده میشن :
[html]
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
[/html]

تصویر شاخص با اندازه‏ای خاص : 

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

برای این کار کد زیر رو به  functions.php اضافه کنید

[html]
add_image_size( ‘single-post-thumbnail’, 220, 170 );
add_image_size( ‘slider’, 700, 310 );
[/html]
از این به بعد هر وقت تصویر شاخصی برای نوشته تون تعیین کنید خود وردپرس تصویر رو به دو اندازه مختلف برای تون ذخیره میکنه که با خواست شما در هر جایی که خواستید قرار میگیره
میتونید تعداد مختلفی کد برای این کار داشته باشید
این کد تصویر شما رو به نزدیکترن سایز شبیه به سایز مورد نظر شما تبدیل میکنه

و همچنین بخوانید :   افزونه مطالب مرتبط برای وردپرس

تعیین اندازه تصویر شاخص :

برای اینکه تصاویر شاخص حجم زیادی رو اشغال نکنن میشه کاری کرد که وردپرس در ابعاد دلخواه تصویر رو برش بده و در ابعاد مناسب رو در جای خودش نمایش بده

برای این کار کد زیر رو در فایل functions.php کپی کنید

[html]
add_image_size( ‘single-post-thumbnail’, 220, 170, true );
[/html]

فراخوانی تصویر شاخص بالا در نوشته با کد زیر صورت میگیره
کد رو در هر جایی که دوست داشتید دارای تصویر باشه قرار بدید
[html]
<?php the_post_thumbnail(‘single-post-thumbnail’); ?>
[/html]

منبع : wpbeginner.com



ارسال نظر

25 نظر

  1. abulfazl گفت:

    سلام
    من عادت ندارم هیچ وقت برای پستی نظر بدم !
    ولی دیدم کارت۲۰ دلم نیامد یه تشکراز نکنم ازت
    دمت گرم
     
     

  2. javid گفت:

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

    • مهدی گفت:

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

  3. someone گفت:

    مطلب خوبی بود.
    ممنون

  4. ضمن تشکر از مطلب خیلی مفیدتان.
    در بخش (تصویر شاخص با اندازه‏ای خاص)  گفته بودید که هرجایی که بخواهید می توانید از آن تصاویر استفاده کنید. برای مثال از همان قسمتی از کد که با عنوان ‘slider’ ذخیره می کند را چطور می توان جای دیگر استفاده کرد؟
    همچنین چطوری می توان برای پست هایی که به طور معمول در صفحه اول نمایش داده می شوند تعیین نمودن از کدام اندازه تصویر شاخص ذخیره شده استفاده کند؟

    • مهدی گفت:

      دوست عزیز شما میتونی متناسب با اندازه ای که دوست داری هر کجای از سایتت قرار بگیره براش اندازه تعیین کنی و توی فانکشن قرار بدی و اونو با دستور زیر فراخوانی کنی
      یعنی کد زیر رو در هر جایی از قالب (داخل حلقه وردپرس) که خواستی میتونی بزاری (صفحه اول یا دسته ها یا برگه ها) و عکس در همون ابعاد رو ببینی
      [html]
      <?php the_post_thumbnail(‘slider’); ?>;
      [/html]
      در اینجا ما ابعاد رو بنابر به سلیقه و نیاز خودمون ۷۰۰ در ۳۱۰ قرار دادیم
      شما میتونی بنابر نیاز خودت چند تا ابعاد تعریف کنی و هر کجا نیاز بود اون سایز مورد نظر خودت رو فراخوانی کنی
      مثلا
      [html]
      add_image_size( ‘slider’, 700, 310 );
      add_image_size( ‘slider-homepage’, 400, 200 );
      add_image_size( ‘slider-gallery’, 1000, 750 );
      [/html]

      بعد با یکی از دستورات زیر فراخوانیش کنی

      [html]
      <?php the_post_thumbnail(‘slider’); ?>;
      یا
      <?php the_post_thumbnail(‘slider-homepage’); ?>;
      یا
      <?php the_post_thumbnail(‘slider-gallery’); ?>;

      [/html]

  5. حمید گفت:

    سلام
    به یک مشکل برخورد کردم!!!
    اود دکمه تصویر شاخص هم میاد ولی وارد کتابخانه نمیشه و تصویر هم آپلود میکنم ارور میده؟

  6. شهاب گفت:

    حیفم اومد تشکر نکنم – تشکر

  7. حمید گفت:

    آقا یه دنیا ممنون واقعا خیلی دنبال این مطلب میگشتم دستت طلا 
    یه قالب داشتم که تصویر شاخص رو خودش تشخیص میداد فقط حالا هرچی بهش میگم آخه داداش من عزیز من اگه تو تشخیص ندی من کیو باید ببینم ؟! فایده نداشت حرف حالیش نمیشد و از هر ده تا مطلب واسه یکی تصویر شاخص میذاشت 
    تا اینکه بعد از سرچهای متوالی به وبسایت شما رسیدیمو تا همون خطی که باید به function اضافه میکردمو انجام دادم مشکل حل.
    موفق باشید – یا حق.

    • مهدی گفت:

      ممنون که وقت گذاشتید و نظرتونو نوشتید
      خوشحالم بدردتون خورد

      • حمید گفت:

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

  8. شهاب گفت:

    سلام -اقا سایتتون یک باگ داره -منو اد کنید تا داخل یاهو بگم

  9. یو پی اس گفت:

    با سلام
    ممنون عالی بود

  10. درود

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

  11. saber گفت:

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

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

    با تشکر

  12. سلام، ممنون مشکل ام با آموزش شما حل شد، آموزشتون دقیق و کامل بود ، بدون هیچ کم و کاستی !

    خدا خیرتون بده ، یه دنیا ممنون