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

بعد از تغییر قالب وردپرس ممکنه بعضی تصاویر شاخص کشیده، تار، کوچک یا با برش نامناسب نمایش داده بشن. معمولاً فایل اصلی تصاویر خراب نشده و مشکل از اینه که تصاویر بندانگشتی قدیمی با اندازه‌های موردنیاز قالب جدید هماهنگ نیستن. پس در بیشتر سایت‌ها لازم نیست همه عکس‌ها رو دوباره آپلود کنید.

در این راهنما اول دلیل مشکل رو پیدا می‌کنیم، بعد با افزونه Force Regenerate Thumbnails اندازه‌های تازه رو می‌سازیم. همین‌طور سراغ مشکل برش، کش سایت، افزونه‌های بهینه‌سازی و روش حرفه‌ای WP-CLI می‌ریم تا بتونید مناسب‌ترین راه رو برای سایتتون انتخاب کنید.

چرا تصاویر شاخص بعد از تغییر قالب به‌هم می‌ریزن؟

هر قالب وردپرس می‌تونه اندازه‌های مخصوص خودش رو برای تصاویر ثبت کنه. مثلاً قالب قبلی شاید تصویر شاخص نوشته‌ها رو با نسبت مربع می‌ساخته، ولی قالب جدید برای همون بخش به تصویر مستطیلی نیاز داره. تصاویر قدیمی قبل از نصب قالب تازه ساخته شدن، پس اندازه جدید هنوز برای اون‌ها آماده نشده.

تفاوت اندازه و نسبت تصاویر در قالب قبلی و قالب جدید

اندازه تصویر با تعداد پیکسل‌های عرض و ارتفاع مشخص می‌شه؛ مثلاً ۱۲۰۰ در ۸۰۰ پیکسل. نسبت تصویر هم رابطه عرض با ارتفاعه. دو تصویر می‌تونن اندازه متفاوتی داشته باشن، ولی نسبت هر دو ۳ به ۲ باشه. اگه نسبت موردنیاز قالب تازه با تصویر اصلی فرق داشته باشه، بخشی از عکس موقع برش حذف می‌شه.

فرق فایل اصلی با بندانگشتی‌هایی که وردپرس می‌سازه

وقتی عکسی رو در کتابخانه رسانه آپلود می‌کنید، وردپرس فایل اصلی رو نگه می‌داره و چند نسخه کوچک‌تر از اون می‌سازه. به این نسخه‌ها بندانگشتی یا Thumbnail گفته می‌شه. قالب معمولاً یکی از همین نسخه‌ها رو در صفحه نوشته‌ها، آرشیو، ابزارک یا محصولات نمایش می‌ده.

تغییر قالب باعث نمی‌شه وردپرس به‌صورت خودکار همه فایل‌های قدیمی رو دوباره پردازش کنه. به همین دلیل، تصاویر تازه‌ای که بعد از تغییر قالب آپلود می‌کنید ممکنه درست باشن، ولی تصاویر قدیمی همچنان نامرتب دیده بشن.

از کجا بفهمید مشکل از اندازه، برش یا کشه؟

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

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

قبل از بازسازی تصاویر شاخص چه کارهایی انجام بدید؟

بازسازی تصاویر کار پیچیده‌ای نیست، ولی روی تعداد زیادی فایل و اطلاعات ثبت‌شده برای اون‌ها اثر می‌ذاره. قبل از شروع این چند مرحله رو انجام بدید تا اگه نتیجه مناسب نبود، راه برگشت داشته باشید.

اندازه پیشنهادی قالب جدید رو پیدا کنید

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

از فایل‌ها و پایگاه داده نسخه پشتیبان بگیرید

از پوشه wp-content/uploads و پایگاه داده سایت نسخه پشتیبان بگیرید. فایل‌های تصویری داخل پوشه آپلودها هستن و اطلاعات مربوط به اندازه‌ها و پیوست‌های رسانه‌ای هم در پایگاه داده ثبت می‌شن. افزونه Force Regenerate Thumbnails برای ساخت نسخه‌های تازه، فایل‌های بندانگشتی رو پردازش می‌کنه؛ پس داشتن هر دو نسخه پشتیبان کمک می‌کنه اگه پردازش ناقص موند یا نتیجه مناسب نبود، راحت‌تر به وضعیت قبلی برگردید.

کش سایت رو پاک کنید

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

حل مشکل بهم ریختگی تصاویر شاخص با Force Regenerate Thumbnails

افزونه Force Regenerate Thumbnails چه کاری انجام می‌ده؟

Force Regenerate Thumbnails از فایل اصلی هر تصویر برای ساخت دوباره اندازه‌هایی کمک می‌گیره که وردپرس، قالب و افزونه‌های فعال ثبت کردن. این افزونه برای پاک‌کردن اندازه‌های قدیمی و ساخت نسخه‌های فعلی طراحی شده و معمولاً مشکل تصاویر قدیمی بعد از تغییر قالب رو بدون آپلود دوباره حل می‌کنه. بهتره قبل از اجرا توضیحات نسخه‌ای رو که نصب می‌کنید بخونید، چون رفتار و گزینه‌های افزونه ممکنه با به‌روزرسانی‌ها تغییر کنن.

چطور افزونه رو از پیشخوان وردپرس نصب کنید؟

1. وارد پیشخوان وردپرس بشید.
2. از منوی «افزونه‌ها» روی «افزودن افزونه تازه» کلیک کنید.
3. عبارت Force Regenerate Thumbnails رو در کادر جست‌وجو بنویسید.
4. نام و سازنده افزونه رو با صفحه رسمی اون در مخزن وردپرس تطبیق بدید، بعد افزونه رو نصب و فعال کنید.

چطور همه تصاویر شاخص رو دوباره بسازید؟

بعد از فعال‌کردن افزونه، صفحه مربوط به Force Regenerate Thumbnails رو از منوی «ابزارها» باز کنید. اگه نام یا جای این گزینه در نسخه نصب‌شده فرق داشت، توضیحات همون نسخه رو در صفحه رسمی افزونه بررسی کنید.

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

چطور فقط چند تصویر یا یک تصویر رو بازسازی کنید؟

اول وارد «رسانه» و بعد «کتابخانه» بشید و حالت نمایش فهرستی رو انتخاب کنید. بررسی کنید نسخه نصب‌شده افزونه برای هر تصویر یا فهرست کارهای دسته‌جمعی گزینه بازسازی داره یا نه. اگه این گزینه در کتابخانه رسانه دیده می‌شه، فقط تصویرهای مشکل‌دار رو انتخاب و همون‌ها رو بازسازی کنید. اگه چنین گزینه‌ای ندارید، باید از صفحه اصلی افزونه کمک بگیرید.

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

هنگام بازسازی تصاویر به چه نکته‌هایی توجه کنید؟

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

حل مشکل برش نامناسب تصاویر در قالب جدید

فرق بازسازی اندازه تصاویر با تغییر کادر تصویر

بازسازی بندانگشتی یعنی وردپرس نسخه‌های تازه‌ای از فایل اصلی می‌سازه. تغییر کادر یعنی شما مشخص می‌کنید کدوم قسمت عکس داخل قاب دیده بشه. افزونه بازسازی می‌تونه اندازه درست رو بسازه، ولی نمی‌تونه حدس بزنه سوژه مهم عکس دقیقاً کجاست.

چرا بازسازی همیشه مشکل برش رو حل نمی‌کنه؟

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

چه زمانی بهتره فایل اصلی رو ویرایش کنید؟

اگه صورت فرد، نوشته داخل تصویر یا محصول از کادر بیرون افتاده، فایل اصلی رو با نسبت مناسب ویرایش کنید یا تصویر تازه‌ای انتخاب کنید. برای کنترل کادر بندانگشتی‌های مهم هم می‌تونید از روش‌های معرفی‌شده در آموزش برش تصاویر بندانگشتی در وردپرس کمک بگیرید.

چطور نسبت مناسب قالب جدید رو پیدا کنید؟

به مستندات قالب، تنظیمات نوشته‌ها و نمونه نمایشی قالب سر بزنید. عدد ثابتی مثل ۶۰۰ در ۶۰۰ برای همه سایت‌ها مناسب نیست. اندازه درست به چیدمان قالب، عرض ستون محتوا و نسبت قاب تصاویر بستگی داره. بهتره فایل اصلی کمی بزرگ‌تر از اندازه نمایشی باشه تا در نمایشگرهای با وضوح بالا تار دیده نشه.

اهمیت انتخاب یک قالب حرفه‌ای مثل اهورا

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

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

اگه تصاویر هنوز درست نمایش داده نمی‌شن چه کار کنید؟

کش مرورگر، سایت و CDN رو پاک کنید

اول صفحه رو در یک پنجره ناشناس مرورگر باز کنید. بعد کش افزونه، کش هاست و CDN رو پاک کنید. اگه آدرس فایل تصویر در کد صفحه با فایل تازه فرق داره، احتمالاً یکی از لایه‌های کش هنوز نسخه قدیمی رو تحویل می‌ده.

تنظیمات رسانه وردپرس رو بررسی کنید

از پیشخوان به «تنظیمات» و بعد «رسانه» برید. در این صفحه اندازه‌های بندانگشتی، متوسط و بزرگ دیده می‌شن. این گزینه‌ها همه اندازه‌های اختصاصی قالب رو نشون نمی‌دن، ولی کمک می‌کنن تنظیمات عمومی سایت رو بررسی کنید.

تداخل افزونه‌های بهینه‌سازی تصویر رو بررسی کنید

افزونه‌های فشرده‌سازی، تبدیل WebP، بارگذاری تنبل یا انتقال تصاویر به CDN ممکنه نسخه متفاوتی از عکس رو نمایش بدن. WebP یک فرمت کم‌حجم تصویریه. برای آزمایش، تنظیمات این ابزارها رو بررسی کنید و فقط اگه نسخه پشتیبان دارید، قابلیت‌های مرتبط رو موقتاً غیرفعال کنید.

ثبت اندازه‌های تصویر در قالب رو بررسی کنید

قالب باید اندازه‌های موردنیازش رو در وردپرس ثبت کرده باشه. اگه حتی تصاویر تازه هم اندازه درستی ندارن، احتمال داره تنظیمات قالب کامل نباشه. ممکنه قالب هم یک فایل کوچک رو در قاب بزرگ‌تر نشون بده یا با CSS، یعنی کدهای مربوط به ظاهر صفحه، تصویر رو بکشه و نسبت اون رو تغییر بده. در این شرایط با پشتیبانی قالب تماس بگیرید یا از یک توسعه‌دهنده وردپرس کمک بگیرید.

تصاویر بدون فایل اصلی رو جداگانه بررسی کنید

اگه فایل اصلی از پوشه آپلودها حذف شده باشه، افزونه چیزی برای ساخت بندانگشتی تازه نداره. آدرس فایل رو در کتابخانه رسانه باز کنید. اگه خطای ۴۰۴ می‌بینید، فایل رو از نسخه پشتیبان برگردونید یا تصویر رو دوباره بارگذاری و به نوشته متصل کنید.

بازسازی تصاویر شاخص سایت‌های بزرگ با WP-CLI

WP-CLI چیه و برای چه کسانی مناسبه؟

WP-CLI ابزار خط فرمان وردپرسه. یعنی به‌جای کلیک‌کردن در پیشخوان، دستورها رو در محیط ترمینال سرور اجرا می‌کنید. این روش برای سایت‌های بزرگ و افرادی مناسبه که به SSH دسترسی دارن و با خط فرمان آشنا هستن.

قبل از اجرای دستور، از فایل‌ها و پایگاه داده نسخه پشتیبان بگیرید و اگه نسخه آزمایشی سایت دارید، کار رو اول همون‌جا امتحان کنید. بعد با SSH وارد سرور بشید و به پوشه‌ای برید که فایل wp-config.php و پوشه‌های اصلی وردپرس داخل اون هستن. اگه به SSH دسترسی ندارید یا مسیر نصب وردپرس رو نمی‌دونید، این بخش رو به پشتیبانی هاست بسپارید.

چطور تصاویر رو با دستور wp media regenerate بازسازی کنید؟

بعد از ورود به مسیر نصب وردپرس، این دستور بازسازی همه تصاویر رو شروع می‌کنه:

wp media regenerate

WP-CLI قبل از شروع از شما تأیید می‌خواد. اگه می‌خواید بدون پرسش ادامه بده، گزینه --yes رو اضافه کنید:

wp media regenerate --yes

اگه فقط اندازه‌هایی رو می‌خواید که هنوز ساخته نشدن، این دستور فشار کمتری به سرور وارد می‌کنه:

wp media regenerate --only-missing --yes

چطور فشار روی سرور رو کمتر کنید؟

دستور رو در ساعت کم‌ترافیک اجرا کنید، اول از --only-missing کمک بگیرید و منابع سرور رو زیر نظر داشته باشید. اگه هاست اشتراکی دارید یا معنی دستورها رو دقیق نمی‌دونید، بهتره اجرای WP-CLI رو به پشتیبانی هاست یا مدیر فنی سایت بسپارید.

چطور از تکرار مشکل بعد از تغییر قالب جلوگیری کنید؟

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

جمع‌بندی

برای حل مشکل بهم ریختگی تصاویر شاخص بعد از تغییر قالب وردپرس، اول مطمئن بشید قالب تازه به چه اندازه و نسبتی نیاز داره. بعد نسخه پشتیبان بگیرید و تصاویر قدیمی رو با Force Regenerate Thumbnails یا در سایت‌های بزرگ با WP-CLI بازسازی کنید.

اگه اندازه‌ها درست شدن ولی سوژه تصویر هنوز از کادر بیرون افتاده، مشکل از نسبت و نوع برشه. در این حالت باید کادر تصویرهای مهم رو تنظیم کنید یا فایل مناسب‌تری بذارید. در پایان هم کش سایت رو پاک کنید و چند صفحه اصلی رو در موبایل و دسکتاپ ببینید.

سؤال‌های پرتکرار

تیم تولید محتوا

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