어떻게 WordPress의 메뉴에서 이미지를 사용할 수 있습니까?

Question

내 전체 웹 사이트는 wordpress에서 제작되었습니다. 모든 메뉴가 TEXT 링크에 있습니다. TEXT 링크 대신 이미지 링크를 사용하여 강조 표시하고 싶습니다. Wordpress에서 어떻게 할 수 있습니까?

Answer 1

CSS 속성을 사용하여 해당 특정 메뉴 항목을 강조 표시 할 수 있습니다. 특정 메뉴 항목의 스타일을 지정하는 방법은 거의 가이드가 아닙니다.

Wordpress 메뉴에서 메뉴 항목 "HOME"을 생성한다고 가정 해 봅시다.

<li id="menu-item-1704" class="menu-item menu-item-type-post_type menu-item-1704"><a href="http://www.wordpress.org">Home</a></li> 

워드 프레스는 항상 각 "메뉴 항목"고유 ID 번호 위의 예에서 할당 여기에서 주목해야 할 점 : 당신은 워드 프레스에서 그것을 만들 때, 특정 ID와 클래스처럼 해당 메뉴 항목에 할당 이다 1704 - 스타일의 메뉴, 보통있는 style.css 또는 테마의 다른 개방 header.php 파일과 머리 사이에 다음 코드를 추가하여 테마의 menu-item-1704

그래서 열린 스타일 :

#menu-item-1704 
{ 
    background:red; 
    display: block; 
    background-image:url('http://url.to/yourbackgroundimage.jpg'); 
    background-repeat: no-repeat; 
    width: 100px; 
    height: 50px; 
} 

이것은 또한 이미지 배경과 스타일의 메뉴 항목뿐만 아니라뿐만 아니라 background-image CSS 속성을 사용 할 수 1704

ID가의 메뉴에서 특정 메뉴 항목의 스타일을 것입니다.

Answer 2

각 메뉴 항목은 다음 예에서와 같이, 고유 CSS의 ID가 있습니다

<li id="menu-item-765"><a href="http://menu.item/url/">Some Menu Item</a></li> 

은 메뉴를 만들고 메뉴 ID의의를 찾을 수있는 페이지 소스를 봐주세요. 메뉴 항목에 배경 이미지를 설정하고 CSS를 사용하여 텍스트를 숨길 수 있습니다. 위의 예를 사용하여 :

li#menu-item-765 a { 
    display: block; 
    background-image:url('http://url.to/yourbackgroundimage.jpg'); 
    background-repeat: no-repeat; 
    width: 100px; 
    height: 50px; 
    text-indent: -9000px; 
} 

너비와 높이 속성을 이미지 크기로 설정하십시오. text-indent 속성은 메뉴 링크 텍스트를 화면에서 숨기고 background-image 속성은 대신 이미지를 표시합니다.

각 메뉴 항목에 대해 반복하십시오.

Answer 3

다른 옵션은 WP 설정 메뉴에 <img src=".."/>을 추가 한 다음 으로 변경하면 코드를 변경하지 않고 메뉴에 이미지를 표시 할 수 있습니다. 또는 당신은 또한 CSS를 사용할 수 있습니다