نحوه اضافه کردن آیکون های تصویری به منو وردپرس
اضافه کردن آیکون تصویری به منو وردپرس
اغلب منوهای ناوبری وردپرس، از پیوند های متن ساده می باشند. لینک ها برای بیشتر وب سایت ها پاسخگو است. اما اگر می خواهید وب سایت و زیبا و منحصر به فردی داشته باشید کافیست نحوه اضافه کردن آیکون های تصویری به منوی ورد پرس را یاد بگیرید و با اینجام این کار می توانید منوی ناوبری وب سایت خود را تعاملی تر کنید.
آیکن های تصویر جذابیت خاصی را به سایت شما می بخشد و کاربران را در هنگام بازدید از سایت بیشتر جذب می نماید و از آن یکنواختی و سادگی بیش از اندازه سایت با انجام این کار کاسته می شود.
به عنوان مثال زمانی که شما یک آیکون تصویری تلفن در کنار تماس با ما قرار می دهید وب سایت شما زیباتر و جذاب تر می شود.
اکنون می خواهیم نحوه اضافه نمودن آیکون های تصویری به منو وردپرس را برای شما عزیزان بیان نماییم.
روش اول : اضافه کردن آیکون های منو با استفاده از یک افزونه وردپرس
استفاده از افزونه برای افزودن آیکون های تصویری به منو وردپرس یکی از ساده ترین روش ها است که این روش برای افرادی که کدنویسی یاد ندارند، بسیار مناسب است.
در این روش نخست باید افزونه Menu Image رانصب کنید و سپس آن را فعال نمایید.
گام بعدی پس از فعال سازی این است که لز پیشخوان وردپرس به بخش نمایش>>فهرست رفته و بر روی هر آیکونی که نیاز دارید کلیک کنید.
اکنون گزینه هایی با نام های menu image و image on hover به این قسمت افزوده شده است.
با استفاده از این گزینه ها می توانید آیکون تصویری را که می خواهید انتخاب کنید و یا حتی می توانید آیکون تصویر مورد نظر را آپلود نمایید.
زمانی که تصویری را آپلود نمودید می توانید تصویر شناور را در نظر نگیرید، و همچنین می توانید تصاویری برای تصویر شناور نیز در انتخاب و تنظیم نمایید.
انتخاب اندازه تصویر انتخابی برای آیکون
در بخش «Image size»، باید برای آیکون تصویر انتخابی اندازه ای انتخاب کنید.
باید توجه نمایید که اندازه ای که انتخاب می کنید برای تصویر اصلی و تصویر شناور اعمال خواهد شد.
اندازه استاندارد تصاویر ۲۴ × ۲۴ یا ۳۶ × ۳۶ است اما می توانید اندازه های دلخواه خود را نیز انتخای کنید.
اگر می خواهید اندازه ای که خودتان مد نظرتان است را برای تصاویر منو بیافزایید، می توانید کد زیر را در فایل functions.php وارد نمایید.
همچنین این امکان را به شما می دهد تا موقعیت عنوان را درهر قسمت از آیکن تصویر قرار دهید.
حتی می توانید عنوان را مخفی کنید و فقط نماد تصویر برای هر یک از منوی های ناوبری نشان داده شود.
زمانی که تنظیمات طبق آنچه که در بالا بیان شد، انجام داده شد ، کافیست به راحتی آیکون های تصویری را به همه موارد منو ناوبری خود بیافزایید.
سپس، باید گزینه “ذخیره فهرست” فشار دهید تا بتوانید آیکون های اضافه شده را مشاهده نمایید.
روش دوم: اضافه کردن آیکون های منو با استفاده از قطعه کد
اضافه کردن آیکون منو با استفاده از کد برای کاربرانی مناسب است که با تجربه تر هستند.
برای استفاده از این روش ابتدا باید تمامی آیکون هایی را که می خواهید را آپلود کنید.
سپس باید URL آیکن ها را کپی نمایید و آن ها را در Notepad و یا ویرایشگر متن دیگر بگذارید.
اکنون زمان آن رسیده است که به بخش نمایش>> فهرست بروید و گزینه تنظیمات صفحه که در بالا ی صفحه سمت چپ قرار دارد، را فشار دهید تا گزینه های زیر مجموعه آن برای شما به نمایش گذاشته شود.
با انجام عملیات گفته شده اکنون باید از بخش نمایش خصوصیات پیشرفته فهرست گزینه کلاس CSS را انتخاب نمایید.
سپس بعد از آن در قسمت های پایین تر بر روی هر گزینه کلیک نمایید، زیر منو هایی برای شما به نمایش گذاشته خواهد شد تا تنظیمات پیشرفته تری را انجام دهید.
همچنین یک فیلد کلاس های CSS به صورت اختیاری وجود دارد که می توانید در آن قسمت نام کلاس CSS برای آیتم منو را اضافه نمایید.
اکنون زمان ان رسیده است که باید CSS سفارشی را به قالب وردپرس خود اضافه نمایید.
توجه نمایید که در این قطعه کد ، .homeicon اسم کلاس CSS است و آن را همان طور که در بالا بیان شد می توانید در کادر کلاس CSS اضافه نمایید.
نتیجه گیری
با انجام تمامی مراحل گفته شده در بالا می توانید آیکون های تصویری به منو وردپرس را اضافه نمایید تا سبب شود وب سایت شما زیبا و منحصر به فرد شود و کاربران در هنگام بازدید از سایت خسته نشوند و جذابیت داشته باشد.
