Thêm Icon Vào Menu Wordpress

      102

Quý Khách hy vọng thêm Ibé vào thực đơn điều phối của WordPress? Cũng có nhiều hỏi bản thân là có tác dụng phương pháp nào nhằm thêm inhỏ vào Menu bên trên WordPress.Trong bài viết này, tôi vẫn giải đáp các bạn có tác dụng thay làm sao nhằm để thêm những Inhỏ vào Menu điều phối vào WordPress.

Bạn đang xem: Thêm icon vào menu wordpress

*

Tại sao bạn nên thêm icon vào thực đơn điều hướng?

Đôi khi, Các thực đơn điều hướng của WordPress là các text links thuần túy. Các links này chuyển động cùng với hầu như những trang web, tuy nhiên chúng ta cũng có thể tạo cho menu điều hướng của bản thân trông shop hơn bằng phương pháp sản xuất nhiều inhỏ.

Những inhỏ này khôn cùng trực quan, tạo cho menu trlàm việc cần dễ dàng nhìn hơn không ít. Lấy ví dụ: Một Ibé đẹp sát bên trang liên hệ, sẽ có tác dụng nó khá nổi bật hơn cùng dễ nhận ra hơn.

Rất dễ dàng và đơn giản, để thêm Inhỏ hình hình họa với menu điều hướng vào WordPress chỉ việc cần sử dụng 2 phương thức sau đây:

Phương thơm pháp 1: Thêm inhỏ vào menu bởi plugin.

Phương thơm pháp này rất dễ cùng được khulặng dùng cho tất cả những người mới dùng WordPress, vày nó ko yên cầu bạn biết về code

Đầu tiên bạn cần làm cho là thiết lập và kích hoạt plugin Menu Image, bạn hãy xem thêm chỉ dẫn làm thế nào nhằm cài đặt một plugin của WordPress

Khi kích hoạt, bạn phải vào Appearance (Giao diện) và lựa chọn Menu (Danh sách).

Từ phía trên, chúng ta tất cả quyền cliông chồng vào bất kỳ mục làm sao sống cột bên phải để mở rộng thực đơn. Bạn cũng trở nên thấy các mục ‘Menu image’ và ‘Image on hover’ (Hình ảnh Khi di chuyển) trong thiết lập.

*

khi áp dụng những mục này, bạn phải mua lên hình hình họa nhưng bạn có nhu cầu áp dụng. chúng ta cũng có thể chỉ thiết lập lên một hình ảnh đến mục ‘menu image’ và bỏ lỡ mục ‘image on hover’. Với mục ‘Image size’ cho phép bạn chọn form size của Inhỏ. Kích thước này sẽ được áp dụng cho cả nhị mục vẫn nhắc tới ở bên trên.

Plugin này kèm theo nhiều sự chọn lọc về kích cỡ. Tuy nhiên Shop chúng tôi kiến nghị chúng ta nên để inhỏ ngơi nghỉ kích thước 24×24 hoặc 36×36.

*

Nếu muốn tuỳ chỉnh size của riêng bản thân đến Menu Image, hãy thêm đoạn code này vào tệp tin functions.php của theme.

add_filter( ‘menu_image_default_sizes’, function($sizes)

// remove the default 36x36 sizeunset($sizes<"menu-36x36">);// add a new size$sizes<"menu-50x50"> = array(50,50);// return $sizes (required)return $sizes;);Bạn hoàn toàn có thể đặt vị trí tiêu đề sinh sống bên trên, dưới, trước hoặc sau Icon. Nó được cho phép bạn ẩn title còn chỉ hiển thị Icon mang đến từng list điều phối.

Xem thêm:

*

Khi các bạn vẫn khẳng định được thông số kỹ thuật thiết đặt, chỉ việc thêm Icon hình ảnh vào toàn bộ các mục list điều phối một giải pháp riêng biệt. Tiếp theo, hãy nhấp vào nút ít ‘Save Menu’ giúp thấy những ibé đấy hoạt động.

Pmùi hương pháp 2: Thêm icon vào menu bằng CSS.

Pmùi hương pháp đó dành cho người dùng kinh nghiệm hơn, biết phương pháp áp dụng CSS.

Đầu tiên, hãy chọn Media » Add New để cài lên toàn bộ các iđứa bạn thực hiện vào WordPress. Sau Khi cài đặt lên hoàn chỉnh, xào nấu URL và dán nó vào trình biên soạn thảo vnạp năng lượng bản nhỏng Notepad.

Tiếp theo, truy vấn vào Appearance » Menus và cliông xã vào nút ít ‘Screen Options‘ ở góc bên trên thuộc mặt đề nghị screen. Trong các tùy lựa chọn chỉ ra, bạn cần tích vào tùy lựa chọn ‘CSS Classes’.

*

Sau kia, kéo xuống và nhấp vào ngẫu nhiên mục nào nhằm không ngừng mở rộng thiết đặt. quý khách hàng đã thấy một mục thương hiệu là ‘CSS Classes’, đó là mục bắt buộc điền tên CSS class mang lại thực đơn này.

*

Bây giờ hãy thêm đoạn code CSS này vào theme của bạn.

.homeibé background-image: url("http://www.example.com/wp-content/uploads/2018/09/home page.png");background-repeat: no-repeat;background-position: left;padding-left: 5px;Trong đoạn CSS này, .homeibé là tên class mà lại các bạn vẫn tiếp tế tên class CSS làm việc bên trên.

Tùy ở trong vào theme đã thực hiện, bạn sẽ rất cần được điều khiển và tinh chỉnh CSS một chút ít để sở hữu được địa điểm tuyệt đối đến số đông thực đơn ibé. Khi vẫn Cảm Xúc vừa lòng, hãy tái diễn các bước mang đến toàn bộ các mục.

Hãy đăng ký Email với Cửa Hàng chúng tôi nhằm dìm được nhiều thông tin hơn, ví như thấy lên tiếng này hữu dụng hãy share cùng với những người dân không giống nhé.