워드 프레스에서 헤더 및 탐색 메뉴 만들기
모든 워드 프레스 사이트는 다르다. 이것은 모두가 그들의 위치를 위해 다른 주제 또는”품질”을 선택하기 때문이다. 워드 프레스에서 헤더와 상단 탐색 메뉴를 만드는 것은 각 사이트에 대해 약간 다른 과정이 될 것입니다.
나는 절대적으로 그것을 사랑하기 때문에 여기 워드 프레스에 대한 창세기 테마 프레임 워크를 사용하고 있습니다. 그러나,워드 프레스 웹 사이트와 사람을 도와 줘야이 문서에서 중요한 포인트가있을 것입니다.
이것은 내가 처음부터 웹 사이트를 만드는 기사 및 비디오의 시리즈의 일부입니다. 내가 먼저 창세기 프레임 워크에 대한 자식 테마를 만드는 방법을 설명하고 나는 배경과 로고를 추가하여 테마 스타일을 시작하는 방법에 대해 썼다.
페이스 북 링크,트위터 링크 및 기타 정보를 헤더에 추가
이미 우리 사이트의 헤더의 왼쪽 상단에 로고를 추가 한 now,우리는 지금 우리의 헤더의 오른쪽에 몇 가지 추가 정보를 추가합니다. 이 경우 트위터와 페이스 북 링크 등을 추가 할 것입니다..,위젯의 방법으로.
나는 최근에 약간의 위젯이 미쳤다는 것을 인정해야한다. 위젯은 무엇입니까? 글쎄,그들은 당신이 사용하기 쉬운 위젯 영역을 통해 주위에 드래그 및 제어 할 수있는 웹 사이트의 자체 포함 된 비트입니다.
창세기의 많은 아름다움 중 하나는 웹 사이트의 모든 영역을 위젯화할 수 있다는 것입니다. 그래서:
- 당신이 사이드 바에서 상자의 다른 순서를 원하는 경우에 당신은 초에 그것을 할 수 있습니다.
- 당신이 여기에 추천 게시물을 원하는 경우,홈 페이지에이 썸네일 5 최신 카테고리 제목,당신은 초에 그것을 할 수 있습니다.
- 검색 창,소셜 공유,트위터 피드,캘린더,태그 클라우드 등을 원하는 경우,여기,거기 또는 어디서나 몇 초 안에 할 수 있습니다.
이 직관적이고 사용하기 쉬운 백엔드 기능은 웹 사이트의 모든 영역을 제어 할 수있는 능력을 원하지만 그렇게 할 수있는 기술이 부족한 고객을 위해 웹 사이트를 만들 때 특히 유용합니다.
어쨌든,이 경우에 우리는 우리 자신의 사용자 정의 위젯을 만들 필요가 우리는 워드 프레스의 모양>위젯 인터페이스의 헤더 오른쪽 영역에 텍스트 위젯을 통해 드래그하여 그렇게.
이 텍스트 위젯에 텍스트를 넣을 수 있습니다. 이 특정 사이트에 대해 내가 넣은 것은 다음과 같습니다. 난 그냥 페이스 북 페이지 링크,트위터 링크 및 전화 번호가 있습니다..
<div>
<ul>
<li><a href=""><img src="http://site.com/images/facebook.jpg" style="border:0;" /></a></li>
<li><a href=""><img src="http://site.com/images/twitter.jpg" style="border:0;" /></a></li>
</ul>
<p><strong>Tel:</strong> +44 20 xxxx xxxx</p>
</div>
그리고 여기에 위의 스타일을 지정할 수 있습니다:
#connect {float: right;}
#connect ul {float: right;}
#connect ul li {list-style: none; display: inline;}
#connect p#tel {margin-top: 33px; font-size: 18px; color: #66504e;}
여기에 결과로 머리의 오른쪽에 나타나는 것입니다:
제목 정보 및 탐색 메뉴 추가 비디오
이 비디오에서는 헤더에 위젯을 추가하는 방법과 창세기의 메뉴 스타일을 지정하는 방법을 보여줍니다.
상단 탐색 메뉴 만들기
상단 탐색 메뉴(또는”탐색 모음”)는 내 존재의 파멸로 사용했지만 지금은 창세기와 워드 프레스 메뉴와 함께,나는 시간과 반대로 초 소요 그들을 만드는 정말 쉬운 시스템을 개발했다.
제네시스는 이미 기본 및 보조 탐색 메뉴를 가질 수 있는 기능을 갖추고 있습니다. 이 특정 예를 들어,나는 클라이언트가 하나를 원으로 창세기 테마 설정을 사용하여 보조 탐색 메뉴를 제거있어.
위의 비디오에서 나는 내가 한 비주얼의 메뉴와 같이 보이도록 메뉴를 수정하는 방법을 보여줍니다.
#nav {-khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
background: #745d5c url(images/nav.gif) repeat-x ;
border: 1px solid #745d5c;
width: 958px; }
위의 비디오에서 볼 수 있듯이,나는 둥근 모서리의 반경을 증가 그라데이션 배경을 추가하고 메뉴의 테두리 색상을 변경했습니다. 그래서 지금 메뉴는 바닐라 창세기 설치와 함께 얻을 지루한 회색 하나처럼 보이지 않습니다.
또한 메뉴의 텍스트 색상을 흰색으로 변경하기 위해 다음을 추가했습니다.
#nav li a {color: #fff; }
현재 페이지 링크,호버 링크,하위 페이지 링크 및 하위 하위 페이지 링크의 스타일을 변경하는 기능도 있습니다.
창세기를 사용하면 하위 페이지(또는 하위 페이지)에 대한 드롭 다운 메뉴를 쉽게 가질 수 있으며 하위 하위 페이지(또는 손자 페이지)에 대한 플라이 아웃 링크를 사용할 수 있습니다. 기본 및 보조 탐색 메뉴 모두에 사용할 수 있습니다.
페이지,하위 페이지 및 손자 페이지 만들기
내 비디오는 워드 프레스 메뉴에 새 페이지를 추가하여 탐색 메뉴에 페이지,하위 페이지(드롭 다운)및 손자 페이지(플라이 아웃)로 나타납니다.
페이지 편집기의 부모 아래에서 자식 또는 손자 페이지가 될 페이지를 선택할 수 있습니다. 그리고 페이지를 볼 때(페이지>모든 페이지 아래)자녀와 손자 페이지는 부모 아래에 들여 쓰기됩니다. 예를 들어,”찰리 파커”페이지가”음악”의 자식 인”재즈”의 자식 인www.site.com/music/jazz/charlie-parker).
드롭다운과 플라이아웃이 포함된 탐색 메뉴 만들기
이러한 페이지가 탐색 메뉴에 올바르게 표시되도록 하려면 모양>메뉴에서 해당 위치로 끌어다 놓기만 하면 됩니다. 다시 말하지만,자식 페이지는 부모 아래에 들여 쓰기됩니다. 메뉴에 이름(예:”탐색 모음”)을 지정하고 기본 탐색 메뉴로 설정하는 것을 잊지 마십시오.
그래서,워드 프레스 모양>메뉴 영역에서 페이지를 배열이 같은…
… 다음과 같은 플라이 아웃이있는 드롭 다운 메뉴를 만듭니다:
이 데모는 위의 비디오를 참조하십시오.9947>880 어떻게 생각하세요?
웹 사이트의 헤더 및 탐색 메뉴를 편집하는 이 방법에 대해 어떻게 생각하십니까? 당신은 다른 방법으로 그것을 할 수 있습니까?