روش تغییر لوگو در وردپرس: با استفاده از Customizer، Template Editor و Custom CSS

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

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

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

روش تغییر لوگو در وردپرس

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

بنابراین، ما دستورالعمل های دقیقی برای تغییر یا اضافه کردن یک لوگوی سفارشی در وردپرس ارائه می دهیم:

اضافه کردن لوگوی سفارشی به قالب وردپرس

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

با این حال، شما فقط می توانید از ویژگی Customizer استفاده کنید روی تم های خاص وردپرس، مانند Twenty Fifteen، Twenty Sixteen و Twenty Seventeen. در همین حال، ویرایشگر الگو فقط برای مضامین بلوکی مانند Twenty Twenty-Two، Blockbase و Tove در دسترس است.

علاوه بر این، اطمینان حاصل کنید که سایت وردپرس خود را به گونه ای تنظیم کرده اید که ثابت باشد homepage. برای انجام آن:

1. وارد داشبورد وردپرس شوید و به آن بروید تنظیمات → خواندن.
2. بر شما homepage نمایش دادن، انتخاب ایستا page گزینه و انتخاب کنید صفحه نخست از لیست کشویی
3. کلیک ذخیره تغییرات برای تایید.

اضافه کردن لوگو با سفارشی ساز وردپرس

برای افزودن یک لوگوی جدید با استفاده از WordPress Customizer، دستورالعمل های زیر را دنبال کنید:

1. یک تم وردپرس را که از Customizer پشتیبانی می کند از طریق داشبورد وردپرس نصب و فعال کنید. در این آموزش از بیست و پانزده موضوع.

2. هدایت به ظاهر → شخصی سازی.

3. در Customizer page، به نوار کناری سمت چپ بروید و کلیک کنید هویت سایت.
4. بعد، کلیک کنید لوگو را انتخاب کنید برای باز کردن کتابخانه رسانه

5. در تب آپلود فایل ها، کلیک کنید Files را انتخاب کنید و فایل آرم سفارشی مورد نظر برای آپلود را انتخاب کنید.

6. پس از آپلود، لوگو را هایلایت کرده و کلیک کنید انتخاب کنید.

7. ممکن است لازم باشد لوگوی سایت وردپرس را اگر خیلی بزرگ است تنظیم کنید. پس از اتمام، کلیک کنید برش تصویر برای درج لوگو در ویرایشگر

8. بعد، کلیک کنید انتشار برای ذخیره تغییرات

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

اضافه کردن لوگو از طریق ویرایشگر قالب وردپرس

برای افزودن یک لوگوی سفارشی با استفاده از ویرایشگر الگو، مراحل زیر را دنبال کنید:

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

2. پس از فعال کردن تم، به صفحات → تمام صفحات. سپس، جلوی خود را انتخاب کنید page.

3. شما به ویرایشگر بلوک هدایت خواهید شد. حرکت به تنظیمات نوار کناری → خلاصه → قالب.

4. بعد، کلیک کنید روی را صفحه را فشار دهید و انتخاب کنید ویرایش قالب برای باز کردن ویرایشگر الگو.

5. انتخاب کنید قالب هدر.

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

7. بعد، روی به روز رسانی دکمه. ویرایشگر به شما اطلاع می دهد که تغییرات بر کل سایت تأثیر می گذارد. کلیک صرفه جویی برای تایید.

تغییر لوگو با سبک های CSS سفارشی

برای تغییر یا سفارشی سازی بیشتر سبک های لوگوی وردپرس، می توانید از CSS اضافی استفاده کنید. این ویژگی به شما امکان می‌دهد کلاس‌های Cascading Style Sheets (CSS) را به یک بلوک خاص اضافه کنید و آن را مطابق با نیازهای خود استایل دهید.

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

1. هدایت به ظاهر → شخصی سازی برای باز کردن صفحه Customizer.
2. در قسمت ویرایش، کلیک راست کنید روی تصویر لوگو و انتخاب کنید بازرسی کنید برای باز کردن ابزار Inspect Element.

3. ماوس را روی تگ HTML برجسته شده نگه دارید و کلاس CSS نشان داده شده در بالای لوگو را پیدا کنید. در این مورد، مقدار کلاس CSS است img.custom-logo.

4. ابزار Inspect Element را ببندید و به صفحه Customizer برگردید. سپس، کلیک کنید CSS اضافی روی نوار کناری سمت چپ

5. در قسمت ویرایش CSS اضافی، کلاس CSS را تایپ کنید – img.custom-logo در مورد ما. سپس، ویژگی های CSS خود را برای سفارشی کردن سبک های لوگوی وردپرس اضافه کنید. به عنوان مثال:

img.custom-logo {
border: 5px solid black;
border-radius: 10px 20px;
height: 130px;
width: auto;
}

6. خروجی باید به شکل زیر باشد:

7. کلیک انتشار برای ذخیره تغییرات

تغییر لوگو روی صفحه ورود به وردپرس

امکان تعویض لوگو نیز وجود دارد روی ورود به سیستم page با تصویر دلخواه شما شما فقط باید تم فعال را تغییر دهید functions.php فایل را با استفاده از کنترل پنل میزبانی وب یا ویرایشگر تم وردپرس.

ما به شما نشان خواهیم داد که چگونه تصاویر لوگوی وردپرس را تغییر دهید روی ورود به سیستم page از طریق هاستینگer کنترل پنل، hPanel:

1. از داشبورد hPanel، را باز کنید مدیر فایل.
2. بعد، به public_html → wp-content → تم ها. سپس، دایرکتوری تم فعال خود را باز کنید – ما از تم بیست و پانزده استفاده خواهیم کرد.
3. پیدا کن functions.php فایل، به پایین بروید و قطعه کد زیر را اضافه کنید:

function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url(insert_the_logo_url_here) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');

4. سپس آدرس فایل لوگو را از کتابخانه رسانه وردپرس کپی کنید. آن را در داخل پرانتز مقدار URL قرار دهید، مانند این: url(https://yourwebsite.com/wp-content/uploads/2022/12/logo-example.png).
5. پس از اتمام، کلیک کنید روی را صرفه جویی دکمه.

نتیجه

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

در این مقاله روش های متعددی را برای افزودن و تغییر یک لوگوی سفارشی در وردپرس – با استفاده از سفارشی ساز وردپرس، ویرایشگر قالب و کد CSS سفارشی یاد گرفته اید.

برای سازگاری بیشتر هویت سایت، دستورالعمل هایی را نیز ارائه کرده ایم روی تغییر لوگو روی ورود به وردپرس page.

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

روش تغییر لوگو در وردپرس سوالات متداول

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