완벽한 수직 메뉴에 대한 탐구 ...
이 튜토리얼의 Part 1 에 대한 수평 다중 중첩 된 메뉴를 구축하는 단계 프로세스 단계를 설명하는 워드 프레스 논문 테마 . Part 2에서는이 기능을 향상에 계속됩니다. 여기에서 우리는 수평 탐색 메뉴의 "어둠"버전을 추가하고 내가 어떻게 "밝기"와 "다크"버전간에 전환하는 방법을 가르 칠 것입니다. 제 2 부 제 1의 상위 집합입니다. 그것은 + 1 부에서 모두 포함 더 차가운 재료를 추가합니다.
내가 제시하고 싶었 주요 아이디어에 대한 수직 메뉴를 추가하는 논문 테마 (그리고 일반적으로 워드 프레스에). 나는 친절하고 무제한 중첩 수준을 만들 수 있도록 할 멀티 브라우저 호환 수직 메뉴 SEO, 정말 유연한 찾고 있었다.
웹 주제에 대한 페이지의 톤을 가지고 있지만 난 모든 샘플을 시도하기 시작했을 때 - 그들 중, 고장 나빠진 만 수준의 제한된 수의 지원이나 게이츠 + 발머의 junksplorer 6 무례한. 마지막으로 시도하고 신뢰할로 돌아왔다 동적 드라이브 메뉴 들은 수직 샘플 내 엄격한 요구 사항에 맞는 좋은 사례로 입증으로. 나는 논문 모델에 맞는 있는지 확인하지만 크게 수정할했다.
완벽에 대한 탐구는 계속됩니다 ...
나는 검색, 조립, 테스트, 수정, 연마 및 수직 메뉴의 CSS합니다. JS 코드와 시간의 3 / 4이이 MSIE 6에서 작동하도록 만들어 보냈다 튜닝 16시간을 보냈다.
어쨌든, 나는 최종 결과에 만족했다. 결과 수직 탐색 메뉴가 모두 동일한 혜택을 수평 메뉴를 가지고 있습니다.
수직 메뉴를 추가 할 수있는 능력을 갖는 것은 웹 포털의 70 ~ 80 % 정도에게 매우 중요합니다. 수평 메뉴는 다양한 메뉴 선택하지만, 수직 메뉴는이 제한이없고 대단히 도움이 될을 수용 할 "공간"을 제한했다. 그래서 여기에 우리가 간다.
그것이 일어날 수 있도록하는 단계를 많이는 이미 설명 튜토리얼의 파트 1 이 조금 짧은 하나를 위해 그것을 만들 것입니다, 그래서하지만, 훨씬 더 기능이 풍부한 결과를.
그래서 여기 간다 :
건물의 SEO 친화적 인 워드 프레스와 논문 테마 수직, 다단계 계층 적 중첩 된 메뉴를 선택합니다. 단계별로
(... 당신이 가능한 생각하지 ...)
- 설치 간부 PHP는 플러그인을 하고 활성화합니다. 나는 수직 메뉴 'HTML 코드를 생성하는 텍스트 위짓 (widget) 안에 PHP를 사용하기 때문에 우리는 그것을해야합니다.
- 에서 6 - 단계를 수행 튜토리얼의 Part 1 . 기본적으로 설치 및 활성화 NAVT 플러그인을 사용 + 시각적으로 메뉴를 구축해야합니다. 귀하의 메뉴 그룹 이름이 'MENU1'인지 확인합니다. 이 이름은 custom_functions.php에 하드 코딩되어 있습니다
- 그것의 속성을 편집하려면 'MENU1'그룹의 '장치'아이콘을 클릭합니다 :
- "옵션", "디스플레이"와 "CSS"탭 설정을 설정하려면 1 부 튜토리얼의 단계 7.1 -7.3을 따릅니다.
- 이제이 대화 상자의 "테마"탭을 클릭합니다. (1 단계를 수행 한 경우) 우리는이 설정의 수를 덮어 씁니다. 이 좋다 - 당신은 아무것도 잃지 않을 것이다 - 그러나 1 단계에서 일부 코드를 변경했기 때문에 이러한 변경이 필요합니다.
이 대화 상자에 기입해야하는 방법은 다음이다 :- 내부의 "테마 XPath는"지역이 코드를 (이것은이 클래스를 사용하여 모든 태그를 대체하는 명령)을 입력합니다 :
.jquerycssmenu, .jqueryslidemenu - "로 대체"를 "작업"을 설정
- 안쪽이 코드를 입력하면 지역 "탐색 그룹 전에 태그 추가 ~를위한":
<div class='jquerycssmenu' style='margin-top:5px;'> - 내부 영역 "태그 태그 추가 ~를 탐색 그룹 후"이 코드를 입력합니다 :
<br style='clear: left' /></div> - 에서 [닫기 / 저장] 버튼을 클릭합니다.
- 내부의 "테마 XPath는"지역이 코드를 (이것은이 클래스를 사용하여 모든 태그를 대체하는 명령)을 입력합니다 :
- 이제 워드 프레스 관리자 패널로 이동 -> 외관 -> 위젯.
- 오른쪽에있는 "사이드 1"영역에 "텍스트"위젯 (큰 "사용 가능한 위젯"영역에서) 드래그합니다. 우리는 우리가 수직 메뉴를 실현하는 데 도움이됩니다 텍스트 위젯에 코드를 추가 할 것입니다.
참고 : 난 당신이 존재의 "사이드 1"을 가지고 가정. 논문 옵션을 당신이 그것을 끌 수 있습니다 -하지만이 튜토리얼의 이익을 위해 그것을 할 수 있도록하자. - 일단 당신이 끌어와이 위젯을 감소 - 그것은 꽃 (나는 MSIE 투쟁이 끝났으니 로맨틱 한 느낌입니다) 같이 열립니다됩니다.
- "제목"영역에서 "세계 최고의 수직 메뉴"를 입력 ... 음, 창의력을 사용하여 주시기 바랍니다 - 해당 텍스트는 새로 태어난 수직 메뉴 위에 이동합니다.
- 텍스트 큰 영역에서 -이 PHP 코드를 입력 :
<?php
if (function_exists('navt_getlist'))
$menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"');
else
$menu_html = "";
$menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html);
echo $menu_html;
?> - [저장] 버튼을 "닫기"링크를 클릭하십시오.
- 다운로드 여기에 파일 세트 갱신 .
이 아카이브는 다음을 포함한다 :- "밝은"수평 메뉴 코드의 업데이트 된 버전
- 수평 메뉴의 "어둠"버전
- 수직 메뉴 코드
- custom_functions.php의 업데이트 된 버전
- 이제 당신은이 아카이브를 압축 해제하고 논문 테마의 '정의'디렉토리에 업로드해야합니다.
참고 : custom_functions.php 내부의 사용자 정의를 수행 한 경우 - 당신이 그들을 병합 할 것입니다. 하지 않으면 - 내 버전으로 덮어 주시기 바랍니다. - 짜잔! 지금 당신은 당신의 웹 사이트를 다시로드하고 동일한 "밝은"수평 메뉴 + 왼쪽 사이드 바에서 NEATO 수직 메뉴를 볼 수 있습니다.
- BONUS 작업 : "짙은"색 구성표 위에 "밝은"수평 메뉴를 변경할 수 있습니다.
- custom_functions.php 파일 내부 :
이 코드를 바꿉니다 :
echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
이 코드 :
//echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
기본적으로 우리는 한 줄을 주석 처리하고 다른 하나는 주석을 제거합니다. - 이제 워드 프레스 관리자 -> 도구 -> NAVT 목록으로 이동하여 'MENU1'그룹의 속성을 편집 할 언급 된 "장치"아이콘을 클릭합니다.
- "테마"탭을 클릭합니다.
- 안쪽이 코드를 입력하면 지역 "탐색 그룹 전에 태그 추가 ~를위한":
<div class='jqueryslidemenu' style='margin-top:5px;'> - 지금 - 페이지를 다시로드 - 그리고 메인 수평 탐색 메뉴 "마술"그 같은 어두운되었다 :
논문 테마 - 다단계 중첩 된 CSS 메뉴 - 다크 팔레트
진한 색 팔레트는 연한 색보다 특정 사이트에 더 적합 할 수 있습니다. 그래서 지금 당신은 당신의 인생에서 선택의 자유를!
- "밝은"색 구성표로 돌아가려면 - 그냥 "보너스"위의 단계를 실행 취소.
- custom_functions.php 파일 내부 :
- 결론 :
내가 논문 주제를 사랑, 내가 워드 프레스를 사랑하고 우리가 포털에 괜찮은 탐색 메뉴를 추가하는 방법이 있다는 사실을 사랑 해요.
$ 20
즐기십시오!
글렙 Esman
{이 항목에 대한 의견은 휴일입니다}
