دیجی اسکریپت

همه ما با جی تی متریکس آشنایی داریم. یک سیستم آنالیز سرعت وب‌سایت که سایت شما را از جنبه‌های مختلف بررسی و مشکلات سایتتان را حل می‌کند. اما اولین خطایی که بعد از آنالیز سایت شما در جی‌تی‌متریکس به چشم می‌خورد، خطای Serve Scaled Images هست. خطایی که تا بحال نشده سایتی رو توی GTMetrix تست کنم و این خطا رو نبینم!

در هر صورت باید برای هر خطایی یک راه حل پیدا کرد و امروز راه حل ما برای حل خطای Serve Scaled Images در این مقاله معرفی خواهد شد. راه حلی بسیار آسان و البته کاربردی!

خطای Serve Scaled Images چیست؟

خطای Serve Scaled Images یا سرو تصاویر مرتب شده! زمانی رخ می‌دهد که تصاویر سایت شما در اندازه و سایزی که باید نمایش داده شوند، روی سایت شما قرار نگرفته‌اند. این که گفتم یعنی چه؟! به عنوان مثال شما تصویر یک گل روی سایتتان نمایش می‌دهید و این تصویر روی سایت شما با استفاده از CSS یا img width height در اندازه ۲۰۰ در ۲۰۰ پیکسل نمایش داده می‌شود. تا اینجا هیچ مشکلی نیست. اما سورس تصویر (یعنی تصویری که از سرور دریافت می‌شود.) سایزی حدود ۲۰۰۰ پیکسل در ۲۰۰۰ پیکسل دارد!!! فاجعه هست نه؟!

چرا فاجعه؟

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

حالا چطور خطای Serve Scaled Images را حل کنیم؟

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

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

افزونه Regenerate Thumbnails را همیشه بعد از تغییر قالب سایتتان نصب کنید و یکبار فرایند ساخت مجدد تصاویر شاخص را انجام دهید تا مشکل Serve Scaled Images در GTMetrix را حل کنید. آموزش نصب و استفاده از Regenerate Thumbnails را اینجا ببینید.

جمع بندی

خطای Serve Scaled Images در GTMetrix زمانی رخ می‌دهد که تصاویر سایت شما در اندازه و سایزی که باید نمایش داده شوند، لود نمی‌شوند. یعنی تصویر منبع از سایز نمایش داده شده در سایت شما بسیار بزرگ‌تر هست. برای حل این خطا باید تصاویر شاخص سایتتان را دوباره بسازید و ساخت دوباره تصاویر شاخص سایت با استفاده از افزونه Regenerate Thumbnails انجام می‌شود.

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.

معرفی

معرفی

معرفی

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

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

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

اگر منظور من از ریسپانسیو رو متوجه نشدید. مقاله ریسپانسیو چیست رو حتما مطالعه کنید.

ریسپانسیو کردن جدول در وردپرس

برای ریسپانسیو کردن جدول در وردپرس ابتدا باید تا حد کمی به CSS مسلط باشید. البته اگر مسلط نیستید هم زیاد نگران نباشید چون توی این آموزش ماهی رو برای شما میگیریم. 🙂

ابتدا وارد بخش نمایش > ویرایشگر در پنل وردپرس خودتان شده و فایل style.css را برای ویرایش انتخاب کنید.

حالا این کد را به سی اس اس سایتتان اضافه کنید تا عرض جداول سایت شما از محتوا بیشتر نشود:

table{
    width:100%;
    max-width:100%;
}

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

برای ریسپانسیو کردن در حالت موبایلی هم این کد را در ادامه به سی اس اس سایتتان اضافه کنید.

@media screen and (max-width:980px){
table{overflow-x:auto;}
}

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

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.

معرفی

تا بحال اسم پارک دامین یا پارک دامنه را شنیده‌اید؟ بعضی از هاست‌ها یا متخصصان سئو مخصوصا موقع تغییر دامنه سایت اعلام می‌کنند که لطفا دامین خود را پارک کنید! مگه دامین ماشین هست که پارک کنیم؟ 😀 بله دامین رو هم میشه به راحتی پارک کرد. البته زمانی که از اون استفاده نمی‌کنید. اما واقعا منظور از پارک کردن دامین چیست؟

پارک دامین چیست؟

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

چقدر تعریف ما مشابه کتاب علوم تجربی دوم راهنمایی شد. 😀 اما واقعا منظور از پارک دامین همین هست. کارهایی که انجام میدیم تا اطلاعات یک سایت با تایپ کردن آدرس دامین دیگری در مرورگر، نمایش داده شود. مثلا: آدرس سایت ما mihanwp.com هست و می‌خواهیم اگر فردی mihanwp.ir را در مرورگرش وارد کرد وارد سایت میهن وردپرس شود.

معمولا زمانی از پارک دامین استفاده می‌کنیم که می‌خواهیم یک محتوا را روی چند دامین نمایش دهیم. به عنوان مثال قصد فروش چند دامنه را دارید و می‌خواهید متنی با عنوان “این دامنه به فروش می‌رسد.” در همه دامنه‌ها استفاده کنید. پس از روش پارک دامین استفاده می‌کنیم تا بتوانیم همه دامین‌ها را با این محتوای ساده نمایش دهیم. اطلاعات بیشتر را در ویکی پدیا بخوانید.

تفاوت پارک دامین و ریدایرکت دامنه

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

اما چطور پارک دامین کنیم؟

پارک دامنه در سی پنل

برای پارک کردن دامنه در سی پنل، کافیست ابتدا وارد سی پنل شوید. yoursite.com/cpanel را در مرورگر تایپ کنید.

حالا به بخش Aliases در بخش Domains مراجعه کنید.

منظور از بخش Aliases یا نام مستعار، همان Park Domain هست که سی پنل عزیز کمی خلاقیت برای نام‌گذاری این بخش به خرج داده. 🙂

حالا که وارد بخش پارک دامین در سی پنل شدید، از بخش Create a New Alias یک نام مستعار جدید ایجاد کنید. فقط کافیست دامنه را وارد کنید و روی Add کلیک کنید.

حالا دامنه شما روی دامنه اصلی هاست پارک شد. چند دقیقه دیگر (معمولا ۱۵ دقیقه) می‌توانید پارک شدن دامنه را چک کنید.

نکته مهم: برای پارک دامین کردن، حتما باید دی ان اس‌های دامنه شما روی هاست تنظیم شده باشد. چند ساعت پس از تنظیم کردن دی ان اس‌ها می‌توانید دامین را پارک کنید.

پارک دامین در دایرکت ادمین

برای Park Domain در دایرکت ادمین وارد پنل دایرکت ادمین هاستتان شوید. سپس روی گزینه Domain Pointers کلیک کنید.

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

موفق باشید. 🙂

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.

همه ما با جی تی متریکس آشنا هستیم. با استفاده از این وب‌سایت می‌توانید سایت خود را از نظر سرعت و بهینه بودن برنامه‌نویسی تست کنید و نتیجه تست را بصورت حروف لاتین از A تا F دریافت کنید. البته A بهترین رتبه و F بدترین رتبه‌ای هست که می‌توانید دریافت کنید. آموزش کامل رفع خطاهای GTMetrix در آموزش افزایش سرعت سایت توضیح داده شد.

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

Combine Images Using CSS Sprites

GTMetrix

و اما چطور باید خطای Combine Images Using CSS Sprites را حل کنیم؟! اصلا دلیل به‌وجود آمدن این خطا چیست؟

دلیل ارور Combine Images Using CSS Sprites

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

حالا فرض کنید در یک قالب از ۳۰ آیکون استفاده کرده‌اید و باید ۳۰ درخواست برای دریافت این ۳۰ آیکون کوچک به سمت سرور ارسال شود. یک فاجعه‌ی بزرگ‌تر که باید حتما حلش کنیم.

در نتیجه این خطا می‌گوید تصاویری که در قالب سایتتان از طریق CSS لود می‌شود را با یک تصویر لود کنید. مگر می‌شود؟ بله. بریم که حلش کنیم!

حل خطای Combine Images Using CSS Sprites

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

که البته این دو آیکون دو تا فایل مجزا هستند، این دو را بصورت یک فایل لود کنیم. به این شکل:

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

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

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

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

برای اینکار کافیست کمی دست به CSS شویم. یعنی با استفاده از سی اس اس مشخص کنیم که این قسمت از تصویر را برای این بخش از سایت استفاده کن و مابقی تصویر نمایش داده نشود. شروع می‌کنیم به سی اس اس. اگر با سی اس اس آشنایی دارید این کار بسیار ساده هست. اما اگر با سی اس اس آشنایی ندارید پیشنهاد می‌کنم از یک طراح سایت کمک بگیرید یا آموزش طراحی سایت با وردپرس را ببینید. (یکم تبلیغ هم بد نیست.) 🙂

جدا کردن بخشی از تصویر در CSS

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

width:32px;
height:32px;

حالا شروع می‌کنیم Background دادن به آن بخش. بعد از طول و عرض پس زمینه را مشخص می‌کنیم به این شکل:

background: url(social.gif) 0 2px;

دو مقدار ۰ و ۲ مشخص می‌کنند که در طول و ارتفاع تصویر Combine شده. (یعنی تصویری که تمام آیکون‌ها را در آن قرار دادیم.) چه مقدار به سمت x و y حرکت کنیم.

مثلا اگر آیکون شما از ۵۰ پیکسل سمت چپ تصویر Combine شده شروع به نمایش داده شدن می‌کند، پس باید مقدار ۰ را به ۵۰ تغییر دهید و همین کار را برای y هم انجام دهید.

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

نتیجه باید به این شکل باشد:

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

موفق باشید.

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.

معرفی

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

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

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

ویرایش تصاویر در وردپرس

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

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

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

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

1. بریدن: این گزینه به شما اجازه می‌دهد تا بریدن تصاویر رو با یک کلیل به آسانی انجام دهید و قسمت مورد نظر خودتون رو از یک تصویر برش دهید.
2. چرخش: دو دکمه برای چرخش تصاویر وجود داره که شما می‌تونید در جهت عقربه‌های ساعت و یا پادساعت‌گرد تصاویر را تنظیم کنید.
3. Flip: این گزینه به شما امکان عمودی یا افقی کردن تصویر را می‌دهد.
4. Undo /Redo: اگه توی تصاویر تغییری انجام دادید که از اون منصرف شدید با این دکمه‌ها خیلی راحت می‌تونید تغییرات رو لغو کنید.

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

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

یادداشت: شما در وردپرس فقط می‌تونید اندازه مقیاس تصاویر را کوچک کنید امکان افزایش مقیاس تصاویر با افزایش ابعاد آن وجود ندارد.

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

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

زمانی‌که از تغییراتی که انجام داده این راضی هستید فراموش نکنید که روی گزینه‌ی ذخیره ، مقیاس یا به‌روزرسانی کلیک کنید تا تغییراتی که انجام داده‌اید ثبت شوند.

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

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

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

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

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

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.