آموزش اضافه کردن آیکن منو در وردپرس

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

چرا باید آیکون تصویر را با منوها اضافه کنید؟

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

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

با این گفتگو، بیایید نگاهی به چگونگی اضافه کردن آیکون های تصویری با منوی های ناوبری در WordPress اضافه کنیم.

روش 1: اضافه کردن آیکون های منو با استفاده از یک پلاگین

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

اولین کاری که باید انجام دهید اینست که Plugin Menu Image را نصب و فعال کنید .

پس از فعال سازی، شما باید از صفحه نمایش»منوها بازدید کنید .

از اینجا میتوانید بر روی هر مورد منو در ستون سمت راست کلیک کنید تا آن را گسترش دهید. دکمه های منو و دکمه Image on hover را در تنظیمات برای هر مورد مشاهده خواهید کرد.

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

در منوی «اندازه تصویر»، می توانید یک اندازه برای نماد تصویر انتخاب کنید. این اندازه برای هر دو آیکون تصویر و تصویر در حالت شنا اعمال می شود.

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

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

add_filter( 'menu_image_default_sizes', function($sizes){
  
  // remove the default 36x36 size
  unset($sizes['menu-36x36']);
  
  // add a new size
  $sizes['menu-50x50'] = array(50,50);
  
  // return $sizes (required)
  return $sizes;
  
});

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

هنگامی که تنظیمات را پیکربندی کرده اید، به سادگی آیکون های تصویری را به همه موارد منو ناوبری خود اضافه کنید. بعد، شما باید بر روی دکمه "ذخیره منو" کلیک کنید تا آیکون های منو را در عمل ببینید.

روش 2: اضافه کردن آیکون های منو با استفاده از قطعه کد

این روش برای کاربران با تجربه تر است که راه خود را در سراسر CSS می دانند.

ابتدا باید به Media مراجعه کنید »افزودن جدید برای بارگذاری تمام آیکون های تصویر خود در وردپرس.پس از آپلود، شما باید URL های خود را کپی کنید و آنها را در یک ویرایشگر متن مثل Notepad کپی کنید.

بعد، شما باید به نمایشبروید »فهرست ها و روی دکمه« گزینه های صفحه »در گوشه سمت راست بالای صفحه خود کلیک کنید. در گزینه های صفحه، شما باید گزینه 'CSS Classes' را بررسی کنید.

پس از آن، به پایین و بر روی هر مورد منو کلیک کنید تا تنظیمات آن گسترش یابد. شما یک فیلد 'CSS Classes (optional)' که در آن شما نیاز به اضافه کردن یک نام کلاس CSS برای مورد منو خواهید داشت.

حالا شما باید این CSS سفارشی را به موضوع خود اضافه کنید.

.homeicon {
background-image: url('http://www.example.com/wp-content/uploads/2018/09/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

در این قطعه CSS، .homeicon نام کلاس است که شما در کادر کلاس CSS در بالا اضافه کردید.

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

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