آموزش تغییر اندازه لوگو در وردپرس | چگونه سایز لوگو را در وردپرس تنظیم نماییم؟

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

آموزش تغییرات ابعاد لوگو در وردپرس

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

بیشتر بخوانید: گواهی SSL رایگان چیست؟ آیا از گواهینامه https یا اس‌اس‌ال رایگان استفاده کنیم؟ 

1- تغییر لوگو سایت سربرگ در وردپرس با استفاده از سفارشی ساز قالب

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

در ابتدا وارد پیشخوان وردپرس خود شوید و سپس از بخش “دیوی” روی گزینه “تنظیمات پوسته” کلیک نمائید. سپس وارد تب ” هدر و ناوبری” شوید.

سپس روی منوی کشویی “نوار منوی اصلی” کلیک کنید. در اینجا می توانید اندازه لوگوی خود را تغییر دهید.

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

حال شما می ‌توانید نوار اسلایدر “حداکثر ارتفاع لوگو ” رابالا و پایین تنظیم کنید تا زمانی که اندازه لوگوی مناسب برای وبلاگ وردپرس خود را پیدا نمائید. در نهایت روی دکمه ذخیره کلیک کنید.

بیشتر بخوانید: بهترین سایت های طراحی رایگان لوگو

2- تغییر اندازه لوگو در وردپرس با ویرایش CSS

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

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

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

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

اکنون می توانید به پیشخوان وردپرس خود بازگردید و سپس از بخش “نمایش” روی گزینه “سفارشی سازی” کلیک نمائید. پس از آن وارد تب “CSS اضافی” شوید. با این کار یک منوی کشویی برای شما باز می شود که در آن می توانید کد CSS سفارشی خود را اضافه کنید.

به سادگی کد CSS را که قبلا پیدا کرده بودید را در آن اضافه کنید و ابعاد تصویر جدید را مشخص نمائید. می توانید از کد CSS زیر به عنوان مثال استفاده کنید:

نکات مهم هنگام تغییر اندازه لوگو در وردپرس

1) از تغییر اندازه بیش از حد در CSS خودداری کنید

اگر لوگوی شما مثلاً 1000px عرض دارد و با CSS آن را به 150px کاهش می‌دهید، همچنان همان فایل سنگین بارگذاری می‌شود. بهتر است تصویر را قبل از آپلود، با ابعاد مناسب طراحی و ذخیره کنید.

2) از فرمت مناسب استفاده کنید

SVG → بهترین گزینه برای کیفیت بالا و مقیاس‌پذیری

PNG → مناسب برای لوگوهای شفاف

JPG → فقط در صورت نبود شفافیت

برای بهینه‌سازی حجم تصویر می‌توانید از ابزارهایی مانند TinyPNG استفاده کنید.

3) تناسب عرض و ارتفاع را حفظ کنید

همیشه یکی از این دو مقدار را روی auto قرار دهید تا لوگو کشیده یا فشرده نشود:

.custom-logo {
width: 180px;
height: auto;
}
4) نسخه موبایل را جداگانه بررسی کنید

لوگوی مناسب دسکتاپ ممکن است در موبایل بیش از حد بزرگ باشد. با Media Query اندازه آن را برای صفحه‌های کوچک‌تر تنظیم کنید.

5) کش سایت را پاک کنید

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

6) وضوح در نمایشگرهای Retina

برای جلوگیری از تار شدن لوگو در مانیتورهای با رزولوشن بالا:

از SVG استفاده کنید
یا

لوگو را با رزولوشن دو برابر طراحی کرده و در اندازه نصف نمایش دهید.

7) بررسی فاصله‌ها در هدر

بعد از تغییر اندازه لوگو، فاصله بالا و پایین (Padding / Margin) هدر را بررسی کنید تا تراز عناصر به‌هم نریزد.

8) تست سرعت پس از تغییر

لوگو یکی از اولین عناصر بارگذاری‌شونده در صفحه است و روی LCP تاثیر دارد. پس از تغییر اندازه، عملکرد سایت را با ابزارهایی مانند Google PageSpeed Insights بررسی کنید.

9) استفاده از تنظیمات قالب قبل از CSS

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

بیشتر بخوانید: اندازه استاندارد تصاویر در وردپرس | از کجا سایز مناسب عکس در وردپرس