افزودن نمادهای تصویر در فهرست وردپرس ، معمولاً منوهای پیمایش وردپرس پیوندهای متنی ساده هستند. این پیوندها برای اکثر وب سایتها کار می کنند ، با این وجود می توانید با افزودن نمادهای تصویری ، منوی پیمایش خود را تعاملی تر نشان دهید.
از آیکون های تصویر نیز می توان برای جلب توجه بیشتر منو استفاده کرد. به عنوان مثال ، یک نماد تصویر زیبا در کنار صفحه تماس شما می تواند آن را در میان پیوندهای دیگر در فهرست شما برجسته کند . بیایید نگاهی به چگونگی افزودن نمادهای تصویر در فهرست وردپرس بیاندازیم.
با استفاده از این دکمه ها می توانید نماد تصویر منو را که می خواهید استفاده کنید انتخاب یا بارگذاری کنید. اگر می خواهید ، فقط می توانید یک تصویر منو بارگذاری کنید و تصویر شناور را نادیده بگیرید.
در لیست کشویی "Image size" می توانید اندازه ای را برای نماد تصویر انتخاب کنید. این اندازه هم برای تصویر نماد منو و هم برای تصویر روی شناور اعمال خواهد شد.
این پلاگین دارای گزینه های مختلفی برای انتخاب است. اما توصیه می کنیم با استفاده از اندازه های 24 × 24 یا 36 36 36 نمادهای منو را کوچک نگه دارید.
اگر می خواهید اندازه سفارشی خود را برای تصاویر منو اضافه کنید ، می توانید این کار را با افزودن این کد در پرونده functions.php یا پلاگین مخصوص سایت خود انجام دهید .
همچنین می توانید موقعیت عنوان را در بالا ، پایین ، قبل یا بعد از نماد تصویر تنظیم کنید. همچنین به شما امکان می دهد عنوان را مخفی کرده و فقط نماد تصویر را برای هر منوی پیمایش نمایش دهید.
پس از پیکربندی تنظیمات ، به سادگی به همه موارد منوی پیمایش خود به طور جداگانه نمادهای تصویر اضافه کنید. در مرحله بعدی ، باید بر روی دکمه "ذخیره منو" کلیک کنید تا نمادهای منو را مشاهده کنید.
پس از آن ، به پایین پیمایش کنید و روی هر مورد از منو کلیک کنید تا تنظیمات آن گسترش یابد. شما یک قسمت "کلاسهای CSS (اختیاری)" را مشاهده خواهید کرد که در آن باید نام کلاس CSS را برای مورد منو اضافه کنید.
اکنون باید این CSS سفارشی را به موضوع خود اضافه کنید.
در این قطعه CSS ، .homeicon نام کلاس است که شما در قسمت کلاسهای CSS در بالا اضافه کرده اید.
بسته به موضوع مورد نظر خود ، ممکن است نیاز به کمی تغییر CSS داشته باشید تا بتوانید مکان مناسبی برای نمادهای منو بدست آورید. هنگامی که از نتیجه راضی شدید ، مراحل را برای همه موارد منو تکرار کنید.
امیدواریم این مقاله به شما کمک کند افزودن نمادهای تصویر در فهرست وردپرس را یاد بگیرید.
روش 1: افزودن نمادهای منو با استفاده از یک پلاگین
افزودن نمادهای تصویر در این روش آسان تر است و به کاربران مبتدی توصیه می شود زیرا شامل کدی نیست. اولین کاری که باید برای افزودن نمادهای تصویر انجام دهید نصب و فعال سازی افزونه Menu Image است. برای اطلاعات بیشتر ، به راهنمای گام به گام نحوه نصب افزونه وردپرس مراجعه کنید . پس از فعال سازی ، باید به صفحه نمایش »فهرست ها مراجعه کنید. از اینجا ، می توانید روی هر مورد از فهرست در ستون سمت راست کلیک کنید تا آن را گسترش دهید. دکمه های "تصویر منو" و "تصویر روی شناور" را در تنظیمات هر مورد مشاهده خواهید کرد.
با استفاده از این دکمه ها می توانید نماد تصویر منو را که می خواهید استفاده کنید انتخاب یا بارگذاری کنید. اگر می خواهید ، فقط می توانید یک تصویر منو بارگذاری کنید و تصویر شناور را نادیده بگیرید.
در لیست کشویی "Image size" می توانید اندازه ای را برای نماد تصویر انتخاب کنید. این اندازه هم برای تصویر نماد منو و هم برای تصویر روی شناور اعمال خواهد شد.
این پلاگین دارای گزینه های مختلفی برای انتخاب است. اما توصیه می کنیم با استفاده از اندازه های 24 × 24 یا 36 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 می دانند. ابتدا باید از رسانه »افزودن موارد جدید برای بارگذاری همه نمادهای تصویر خود در وردپرس بازدید کنید. پس از بارگذاری ، باید URL های آنها را کپی کرده و در یک ویرایشگر متن مانند Notepad جایگذاری کنید. در مرحله بعدی ، باید به قسمت نمایش به فهرست ها بروید و بر روی دکمه" Screen Options "در گوشه سمت راست بالای صفحه خود کلیک کنید. در گزینه های صفحه ، باید گزینه "CSS Classes" را علامت بزنید.
پس از آن ، به پایین پیمایش کنید و روی هر مورد از منو کلیک کنید تا تنظیمات آن گسترش یابد. شما یک قسمت "کلاسهای CSS (اختیاری)" را مشاهده خواهید کرد که در آن باید نام کلاس 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;
}
