لوگو وب سایت شما بخش مهمی از نام تجاری شما است. بسته به تم وردپرس که استفاده می کنید، گاهی اوقات نحوه تغییر اندازه لوگو برای بزرگ تر یا کوچک تر شدن آن مشخص نیست. در این مقاله، نحوه تغییر اندازه لوگو وردپرس را به صورت گام به گام به شما نشان خواهیم داد.
هنگامی که لوگوی خود را در وردپرس بارگذاری می کنید، ممکن است همیشه اندازه آن مناسب نباشد. لوگوی خیلی کوچک واضح و مشخص نخواهد بود. در حالی که لوگوی بسیار بزرگ می تواند بر طراحی وب سایت شما تأثیر منفی بگذارد.
اگر روی طراحی لوگو سفارشی سرمایه گذاری کرده اید، باید مطمئن شوید که لوگوی شما به عنوان اندازه مناسب در سرصفحه وب سایت شما ظاهر می شود.
با توجه به آنچه گفته شد، ما چند روش مختلف را به شما نشان می دهیم که می توانید از آن ها برای تغییر اندازه لوگو در وردپرس استفاده کنید.
روشی که انتخاب می کنید به تم وردپرس مورد استفاده شما و میزان راحتی شما با ویرایش کد CSS بستگی دارد:
ساده ترین راه برای تغییر اندازه لوگو در وردپرس استفاده از سفارشی ساز تم است. با این حال، این روش تنها در صورتی عمل می کند که قالب وردپرس شما از آن پشتیبانی کند. بسیاری از تم های محبوب مانند Divi ،Astra ،Ultra و موارد دیگر دارای یک ابزار تغییر اندازه لوگو هستند.
هنگامی که لوگوی خود را در وردپرس بارگذاری می کنید، این تم های تنظیم لوگو را با یک اسلایدر ساده که می توانید از آن برای تنظیم عرض و ارتفاع استفاده کنید، آسان می کند.
به منظور آموزش، نحوه تغییر لوگو را در تم Divi ،Astra و Ultra نشان خواهیم داد، اما این روش برای اکثر تم هایمحبوب وردپرس مشابه است. اگر تم شما این گزینه را ندارد، باید از روش 2 یا 3 این آموزش استفاده کنید.
تغییر اندازه لوگوی وردپرس در قالب وردپرس Divi
ابتدا به بخش Divi و بعد Theme Customizer بروید و روی گزینه منوی Header & Navigation کلیک کنید.
پس از آن، روی گزینه کشویی “Primary Menu Bar” (نوار منوی اصلی) کلیک کنید. در اینجا می توانید اندازه لوگوی خود را تغییر دهید.
ابتدا باید Menu Height (ارتفاع منو) را تنظیم کنید. با این کار ارتفاع کل منوی ناوبری شما کنترل می شود و مشخص می شود که چقدر می توانید لوگوی خود را بزرگ کنید.
پس از آن، می توانید تنظیمات “Logo Max Height” را که درصدی از کل ارتفاع منو است، تغییر دهید.
می توانید نوار لغزنده “Logo Max Height” را به بالا و پایین تنظیم کنید تا اندازه لوگو مناسب برای وبلاگ وردپرس خود را پیدا کنید. قبل از خروج از صفحه، روی دکمه “انتشار” کلیک کنید تا بتوانید تغییرات تان را ذخیره کنید.
تغییر اندازه لوگوی وردپرس در قالب Astra وردپرس
اولین کاری که باید انجام دهید این است که به بخش Appearance و Customize بروید و روی گزینه منوی Header کلیک کنید.
پس از آن روی گزینه منوی Site Identity (شناسه سایت) کلیک کنید. در اینجا به راحتی می توانید اندازه لوگوی خود را تنظیم کنید.
تنها کاری که باید انجام دهید این است که اسلایدر “Logo Width” را به چپ یا راست جا به جا کنید. با حرکت دادن نوار لغزنده، می توانید به طور خودکار تغییرات اندازه لوگو را در زمان واقعی مشاهده کنید.
پس از اینکه اندازه لوگو مورد تاییدتان بود، قبل از خروج از صفحه، روی “انتشار” کلیک کنید.
تغییر اندازه لوگوی وردپرس در قالب فوق العاده وردپرس
برای سفارشی سازی اندازه لوگو در تم Ultra، به قسمت Appearance و Customize (سفارشی سازی) بروید و روی آیتم ناوبری” Logo & Tagline Site “کلیک کنید.
پس از آن روی منوی کشویی “Logo Site” کلیک کنید. سپس، دکمه رادیویی “Logo Image” را که ظاهر می شود انتخاب کنید.
اکنون می توانید با وارد کردن ابعاد جدید در کادر های سمت راست تصویر لوگوی خود، اندازه لوگو را تغییر دهید. اگر می خواهید تصویر بر اساس اندازه اصلی مقیاس بندی شود، فقط ابعاد لوگوی جدید را در یک کادر وارد کنید.
می توانید عرض را با کادر سمت چپ و ارتفاع را با کادر سمت راست تغییر دهید.
با وارد کردن ابعاد جدید، اندازه لوگوی خود را در زمان واقعی تغییر می دهید. پس از اتمام سفارشی سازی اندازه لوگوی تان، مطمئن شوید که روی دکمه “انتشار” کلیک کنید.
اگر تم شما در بالا مشخص نشده است، هنوز فرصتی وجود دارد که بتوانید اندازه لوگوی خود را با استفاده از سفارشی ساز وردپرس سفارشی کنید.
به سادگی به “Appearance” و Customize بروید و هر تمی که استفاده می کنید را سفارشی کنید و ببینید چه گزینه های سفارشی سازی برای لوگو یا هدر شما در دسترس است.
اگر قالب وردپرس شما از تغییر اندازه لوگو با استفاده از سفارشی ساز قالب وردپرس پشتیبانی نمی کند، می توانید با افزودن CSS سفارشی اندازه آن را تغییر دهید. اولین کاری که باید انجام دهید این است که به صفحه اصلی وب سایت خود بروید.
سپس، در هر نقطه از صفحه راست کلیک کرده و گزینه “Inspect” را انتخاب کنید. با این کار یک منوی Inspect ظاهر می شود که تمام کد صفحه را نشان می دهد.
پس از آن، باید روی نماد “Select an element” که شبیه اشاره گر ماوس است کلیک کنید. این به شما امکان می دهد عنصر لوگوی وب سایت خود را انتخاب کرده و کد آن را مشاهده کنید.
بعد، به سادگی روی لوگوی وب سایت خود قرار بگیرید تا کلاس CSS ظاهر شود. شبیه تصویر زیر خواهد بود.
از این کلاس CSS برای سفارشی سازی اندازه لوگوی وردپرس خود استفاده خواهید کرد. بنابراین، این را در یک ویرایشگر متنی مانند دفترچه یادداشت بنویسید.
اکنون می توانید به داشبورد مدیریت وردپرس خود بازگردید و به قسمت Appearance و Customize بروید. شما باید روی گزینه منو “Additional CSS” کلیک کنید.
این گزینه یک منوی کشویی را نشان می دهد که در آن می توانید کد CSS سفارشی را اضافه کنید.
به سادگی کلاس CSS را که قبلاً پیدا کرده اید اضافه کنید و ابعاد تصویر جدید را مشخص کنید. به عنوان مثال می توانید از کد CSS زیر استفاده کنید:
img.custom-logo {
max-height: 100px ;
}شما باید img.custom-logo کلاس CSS بالا را به کلاس CSS که تم مورد نظر شما استفاده می کند تغییر دهید.
همچنین می توانید max-height اندازه را به هر اندازه که می خواهید تغییر دهید.
در اینجا نحوه ظاهر آن در سفارشی ساز وردپرس آمده است:
هنگامی که تغییرات خود را انجام دادید، کافی است بر روی دکمه “انتشار” کلیک کنید تا تغییرات شما به صورت زنده نمایش داده شود.
اگر با ویرایش فایل های تم یا افزودن CSS سفارشی راحت نیستید، این روش برای شما مناسب است.
با استفاده از افزونه styling plugin وردپرس، می توانید تغییرات بصری را در سایت خود شبیه به استفاده از صفحه ساز drag and drop ایجاد کنید.
توصیه می کنیم از CSS Hero استفاده کنید. این یک افزونه استایلر است که به شما امکان می دهد تقریباً هر سبک CSS را در سایت وردپرس خود بدون نوشتن یک خط کد CSS ویرایش کنید.
اولین کاری که باید انجام دهید نصب و فعالسازی افزونه است. برای اطلاعات بیشتر، مقاله نحوه نصب افزونه وردپرس را مطالعه نمایید.
پس از فعال سازی، باید دکمه “Proceed to Product Activation” را کلیک کنید تا افزونه فعال شود. درست در بالای لیست افزونه های نصب شده شما قرار دارد.
این گزینه شما را به صفحه ای می آورد که در آن می توانید نام کاربری و رمز عبور خود را وارد کنید. به سادگی دستورالعمل های روی صفحه را دنبال کنید، پس از تأیید حساب، به سایت خود هدایت می شوید.
پس از آن، روی دکمه “Customize with CSS Hero” در بالای نوار ابزار مدیریت وردپرس خود کلیک کنید.
با زدن این گزینه به وب سایت تان وارد می شوید و CSS Hero در بالای آن اجرا می شود. CSS Hero از ویرایشگر WYSIWYG استفاده می کند.
وقتی روی هر عنصر صفحه خود کلیک می کنید، یک نوار ابزار در سمت چپ ظاهر می شود تا سفارشی سازی شود.
در مرحله بعد، روی لوگو وردپرس خود در بالای صفحه کلیک کنید.
پس از آن، روی لینک “Show Advanced Props” (نمایش موارد پیشرفته) کلیک کنید.
این گزینه به شما امکان بیشتری برای سفارشی سازی CSS می دهد.
سپس کادر “Measures” را پیدا کنید. در اینجا گزینه هایی به نام “Max Width” و “Max Height” پیدا خواهید کرد.
شما می توانید این موارد را به اندازه تصویر دلخواه تغییر دهید. اگر می خواهید اندازه تصویر یکسان باشد، فقط ارتفاع یا عرض را تغییر دهید.
تغییراتی که ایجاد می کنید به طور خودکار در صفحه شما نشان داده می شود.
پس از اتمام تغییر اندازه لوگوی خود، باید روی “ذخیره و انتشار” کلیک کنید تا تغییرات خود را به صورت زنده مشاهده کنید.
امیدواریم این مقاله به شما در تغییر اندازه لوگو وردپرس کمک کرده باشد. موفق و پیروز باشید.
منبع: wpbeginner