تخته امتیازات

درود. اول باید یک اندازه جدید و دلخواه تصویر شاخص به قالب معرفی کنید. کد زیر رو داخل فایل functions.php قرار بدید : add_action( 'after_setup_theme', 'masih_theme_setup' ); function masih_theme_setup() { add_image_size( 'bistscript', 300, 200, true ); } add_filter( 'image_size_names_choose', 'masih_define_img' ); function masih_define_img( $sizes ) { $custom_sizes = array( 'bistscript' => 'Single IMG' ); return array_merge( $sizes, $custom_sizes ); } بعد کد زیر رو دقیقا با کدی که در پاسخ قبلیتون دادید جایگزین کنید. <div class="post"> <div class="singletopo"> <div class="singletopodet"> <span class="roo-titr"><?php the_field( "rotitr_kl" ); ?></span> <h1 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h1> <span class="roo-titr2"><?php the_field( "zirtitr_kl" ); ?></span> </div> <?php if(has_post_thumbnail()){ ?> <div class="singlepostimag"><a class="post-thumb" href="<?php the_permalink(); ?>"><img src="<?php $image=wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'bistscript'); echo $image[0];?>" alt="<?php the_title(); ?>"></a></div> <?php } ?> </div> بعد کدهای زیر رو در یک فایل CSS قالبتون قرار بدید : .singletopo {width: 830px;max-width: 100%;} .singletopodet {float: left;width: 60%;} .roo-titr2 {background: #f9f9f9;padding: 6px;border-radius: 2px;} .singlepostimag .post-thumb {float: right !important;} .singlepostimag img {width: 300px;height: 200px;} @media screen and (max-width: 480px) { .singletopodet {width: 100%;} } @media screen and (max-width: 320px) { .singletopodet {width: 100%;} } @media screen and (max-width: 568px) { .singletopodet {width: 100%;} } بعد از اینکار، اول کش مرورگر رو خالی کنید، بعد افزونه Regenerate Thumbnails رو نصب کنید و ازش استفاده کنید تا تصاویر شاخص قبلی مجددا طبق اندازه جدیدی که تعریف کردیم ساخته بشن. و بعد از ساخته شدن تصاویر شاخص در اندازه جدید، میتونید افزونه رو غیرفعال و حذف کنید. چون بعد از این، مطالب جدیدی که ارسال کنید، تصاویر شاخص در اندازه جدید هم ساخته میشن و نیازی به این افزونه نیست. در ضمن دقت داشته باشید که این کدهای CSS ممکنه توی همه دستگاه ها به خوبی نمایش داده نشه. چون رسپانسیو کردن کامل نیاز به آزمون و خطا داره و چون این تغییراتی که گفتم روی Inspector Elements مرورگر انجام شده، باید مدام تغییرات ذخیره و بررسی بشن تا بشه برای همه دستگاه ها مثل موبایل و تبلت و ... در بهترین حالت نمایش قرارش داد. ولی به هرحال با دستور media کار کنید و اندازه ها رو طبق میل خودتون تغییر بدید. نتیجه کار با انجام مراحل بالا، چنین چیزی خواهد بود: موفق باشید.