논문 테마 자습서 - 워드 프레스에 대한 구축하는 방법에 중첩된, 다단계, SEO 친화적인 CSS 메뉴

완벽한 메뉴 퀘스트 ...

이 튜토리얼의 파트 1입니다
이 튜토리얼의 Part 2는 가로 하나 세로 메뉴 + 어두운 컬러 팔레트를 작성하는 방법을 배울 수

제가 이해하기로 논문 테마를 내 고객 중 한 논문과 내 사이의 호환성 문제에 대해 알려 때문에 워드 프레스 회원 사이트 플러그인 MemberWing. 나는 그것을 해결하고 논문에 대해 자세히 살펴보고로 결심했으며, 실제로 볼 참을수 주요 논문 사이트의 첫 페이지에 동영상을 - Diythemes.com .
무엇이 날 감동 가장 주목 세부 사항 사용자의 편의와 모든 대부분입니다 - 그래서 잘 생각하고 SEO 기능.
MemberWing 회원 플러그인 가능한 한 많은 SEO 주스를 당길 필요가 회원 사이트에 땅 속에서 설계되었습니다. 그래서 MemberWing에 perfections SEO 개선의 수많은 관심을 많이를 지불합니다. 내 고객 대부분 사용하는 다양한 주제에 대해 질문하고 그래서 잘 SEO 깊은 안쪽에서 최적이었다 회원 포털 기업가를위한 우수한 적합 될 주제를 가지고있다.

의 SEO의 권력과 MemberWing의 SEO 힘을 결합 논문 논제 내 고객에게 순위 기회를 최대한 제공하게됩니다. 그래서 논문도하고 하루 동안 함께 연주.

그것은 모든 면에서 최고의 테마입니다. 그것의 탐색 부분은 있지만 기능에 제한이 좀있다. 논문 1.5에서 시작 + 그것은 한 단계 메뉴뿐입니다. 내 평소 욕망은 조금 필요에 따라 내비게이션을 사용자 정의할 수있을 것입니다. 일부 사이트에만 몇 페이지를 가지고 많은 다른 정적 페이지 + 기사 / 글 + 카테고리 많이 zillions 많다고.
그래서 이상적인 세계에서 멋진 찾는 계층적으로 구성된 사용자 친화적인 탐색 메뉴를 만들 수있는 기회를 갖는 것은 필수입니다. 박쥐 오프 논문 오른쪽 좋지 탐색을 가지고 있지만 난 모든 논문 기반의 웹사이트가 쌍둥이처럼 찾고있는 것으로 나타났습니다. 대부분의 사람들이 그냥 그대로두고 있으므로 논문 탐색 메뉴를 사용자 정의하는 것은 정말 쉬운 일이 아닙니다. 메뉴에서 범주의 순서를 변경하거나 페이지 사이에 그들을 배치하는 방법은 없습니다. 또, 중첩된 메뉴 구조를 만드는 능력이 없습니다. 그래서 난 그것에 대해 할 수 있을지 결정했습니다.
다스 절반에 메뉴 / 네비게이션 관련 플러그인을 시도한 후 나는 내 선택을 설정하는 워드 프레스 탐색리스트 플러그인 NAVT .
NAVT 플러그인은 기본적으로 슈퍼 화려하고 조금 어려운 파악 untraditional 관리자 인터페이스 목록 생성기를 정렬되지 않은됩니다. 어떻게 그것에 대해 오해의 소지가하면 사실 자체만으로 화려한 찾는 메뉴를 만들지 않습니다 점이다. 그래도 작업의 어려운 부분을 수행 - 귀하의 뼈대 메뉴가 될 사람에게 - 당신에게 목록을 정렬되지 않은 시각적으로 정리 해보자하고, 생성하는 능력을 제공합니다. 그리고 당신은 너무 많은 메뉴를 만들 수 있습니다. 당신은 탐색 메뉴에 워드 프레스의 재료 모든 종류를 당길 수 있습니다 페이지, 게시물, 기사, 범주, 사용자, 코드 블록, 외부 링크, 디바이더, 구분 및 혼합 및 일치와 둥지와 정렬 그리고 당신은 어떤 나무와 같은 구조에서 그들을 사용자 정의할 싶습니다.
당신이 HTML이 목록을 정렬되지 않은 결과에 대해 NAVT가 생성됩니다. NAVT 둘째 아름다움은 당신이 유명한 JQuery 기반 논리를 통해 그러나 어떤 코드를 변경할 필요없이 테마에 새 메뉴를 삽입할 수있다는 것입니다! NAVT가 지정할 수 있습니다 : "나의 새로운 NAVT 메뉴로이 # 요소를 바꿉니다." # 요소는 현재의 테마에 의해 생성되고 기존의 메뉴 또는 사업부 요소 태그의 경로의 ID 또는 클래스가 될 수 있습니다. 그래서 NAVT은 테마 코드로 가서 이미보다 더 지저분한하도록 강요하지 않고 당신이 교체 않습니다. 그런 경우에는 횡설수설처럼 소리가 - 걱정하지 마세요 - 당신이 단계가 곧 단계를 안내하겠습니다. 모두 NAVT의 도전적인 부분은 당신의 자신을 위해 메뉴 실제 CSS + 이미지 + 자바 스크립트 코드로 나오셔야한다는 것입니다. 그리고 그것은 어디에 어떻게이 파일을 통합하고이 물건 제대로받을 함께 연결되어 만들할지 당신에게 달렸습.
감사 JQuery를 알기 전엔 + 일부 PHP + CSS + 워드 프레스와 품위있는 경험을 갖는 -이 일을하기에는 어려운입니다.
나는 워드 프레스를위한 최적의 탐색 메뉴 최선을 구축 자유 총알과 가이드 인류 물려 버리기 기꺼이 나는이 친구에게 조금 알아요. 그냥 좋은 찾고 수평 CSS를 메뉴에 대한 소스를 확인하는 데 필요한. 나는 포착 다이나믹 드라이브 홈페이지를 최선 선택, 데모 및 소스에 대한.

나는 논문을 연구하고 NAVT 플러그인으로 재생할 하루를 바쳤다. 마지막에 나는 자랑스럽게 내 워드 프레스 + 논문 기반의 사이트에 대한 정의, 유연한, SEO 최적화된, 다단계, 중첩된 nagivation 구조를 만들었습니다.

논문 주제를위한 멀티 레벨, 중첩된 워드 프레스 탐색 메뉴의 기능 일람
(이 물건을 좋아합니다) :

프로 페셔널하고 깨끗한 모양과 느낌.
MSIE 6,7, 오페라, 사파리, 파이어 폭스 3.x를, 자바 스크립트 모두에서 Google 크롬 및 비 자바 스크립트 모드를 포함한 모든 최신 브라우저에 대한 지원.
비 자바 스크립트 브라우저 정상적 downgradable. 당신 메뉴, 가능한 것입 시각적으로 유사하며 JavaScript가 비활성화된 브라우저를 위해 더욱 노력가 (단지 최고 레벨 이동이 떨어지기는 보이지 않으며 그들이 자바 스크립트에 의해 만들어진대로 아무 flyouts 물론 일어나지 않습니다).
SEO 친화적인 기능 -리스트 메뉴 코드를 HTML 내에 생성됩니다 정렬되지 않은. Google 및 기타 검색 엔진 스파이더는 색인을 탐색 구조를 찾을 수있을하며 내부 페이지에 대한 링크를 찾을 수 있습니다.
무제한 중첩 수준과 sublevels 지원.
어떤 명령이나 페이지, 게시물 (URI를 정의된 사용자 경유), 카테고리, 사용자 정의 코드 블록 및 메뉴 내에서 외부 링크를 지원합니다.
의 지원 텍스트뿐만 아니라 이미지 기반의 메뉴를 요소. (나는이 비록 시도도 못하고).
메뉴 구조와 내용 NAVT 관리 영역을 통해 시각적으로 조절합니다.
컴팩트 : 중첩된 레벨 JQuery 기반 flyouts.
빠른 : 메뉴에 대한 JQuery가 Google 서버 (난 로컬 그것을 당기는 대신 동일한 기능을 수행할 논문 자체를 사랑 해요)에서로드됩니다. 이것은 물건을 조금 속도를 높일 것이다.
확장성 - 메뉴 이러한 유형의 편집 가능한 어디서나 코딩의 필요없이 NAVT 플러그인 설정을 통해 언제든지 구성할 수 있습니다.

제가 사용하는 동적 드라이브에서이 훌륭한 메뉴를 거점으로 포털. 나는 JavaScript 코드 비트를 정의할뿐만 아니라 그것이 논문에서 작동하도록 custom_functions.php로 PHP의 청크를 포함했다. 또한 내 사이트의 기존 페이지, 카테고리 및 게시물의 번호는 메뉴 구조를 조립하는 데 사용되었다. 귀하의 사이트 구체적인 내용은 다른 것입니다 -하지만 개념은 동일합니다.
그래서 계속 보도록할까요?

설정하기 단계별 지침 NAVT 친화적인 기반, 중첩된 사용자 정의, 멀티 레벨, SEO를
그리고 워드 프레스와 용 단순히 시원한 찾는 탐색 메뉴 논문 테마

워드 프레스 관리자 패널로 이동합니다. 플러그인 -> 추가 새로, "navt"를 검색하십시오. 플러그인이 표시됩니다. 클릭하여 [설치],, "플러그인 활성화"[지금 설치].
도구 -> NAVT 목록, "탐색 그룹 '영역 속에"그룹 이름 "을 찾아 입력 필드에서'menu1 '를 누르세요 [만들기] 버튼을 클릭합니다. "menu1"사각형 영역을 만들었어요.
이 "menu1"영역 메뉴 건설의 주요 놀이터가 될 것입니다. 당신은 끌어 여기에 메뉴 요소를 놓기됩니다.
'자산'영역에서 '기타'목록 상자를 찾아서 "홈"선택을 클릭합니다. "홈"거시기 "는 할당되지 않은"영역 내에 나타납니다. 이상하지, 어? 아무 작동만큼 걱정 없다 - 그것은 우리됩니다.
"menu1"사각형 영역으로 "자산"영역에서이 '홈'거시기를 끕니다. 그것은 메뉴에서 '홈'아이템이 될 것입니다.
- "페이지"영역뿐만 아니라, "카테고리"지역의 범주를위한에서 일부 페이지가 되려면 3-4 단계를 반복합니다. 만일 "menu1"직사각형 내부 사용자 메뉴에 있고 싶어 다른 항목을 끕니다. 당신은 페이지, 범주, 사용자 등 "목록 분할기"와 "코드 블록"같은 일부 사용자 정의 요소를 클릭합니다. 코드 블록은 메뉴 안에서 사용자 정의 미리보기를 추가하는 멋진 방법입니다.
- 당신은 그들의 순서를 다시 정렬할 'menu1'영역 내부 메뉴 항목을 드래그할 수 있습니다.
- 너는 "<"및 ">"화살표를 사용하여 각 메뉴 항목의 계층적 위치를 조정할 수 있습니다.
- 각 메뉴 항목의 텍스트 이름을 클릭하면 -이 항목에 대한 마음을 boggling 추가 사용자 지정 대화 상자를 엽니다. 나는 대부분 기본값을 사용하지만 기술적으로 당신이 미쳐 및 이미지 기반의 메뉴 선택하기 시작하고 그 안으 HTML 코드의 덩어리를 추가할 수 있습니다. 하지만 신중하게 행동해.
- 나는 "코드 블록"형식을 사용하는 다른 "서브 어린이"에 "부모"가 될 것입니다 linkless unclikable 하위 메뉴하십시오. = "은 <a href='#'>의 MemberWing </>"예를 들어 같은 코드 블록 항목을 정의할 때 "메뉴 항목의 별칭"= "MemberWing"와 "코드 블록을 입력하십시오"에 입력했습니다. HREF = "#"그게 클릭할 수없는 것입 가졌지만 유효한 "부모"메뉴 선택의 역할.
여기는 내 NAVT 'menu1'빌드 구조가 거의 완료 닮은 방법은 다음과 같습니다
초기 건물을 마침 다음 메뉴 구조를 사용자 정의하려면 "기어"아이콘을 클릭하십시오 :
그것은 4 탭 대화 상자가 열립니다 : 옵션, 디스플레이, CSS, 테마.
1. '설정'탭으로 가서 모든 검사되지 않은 및 "그룹 이름"인지 확인 말합니다 : "menu1"
2. 탭 "을 표시"와 "에 표시 네비게이션 단체 ..."회의에 모든 것을 할 영역은 [X] 체크로 이동합니다. 기본값에서 나머지를 남겨주세요.
3. 'CSS'탭으로 이동하여 라디오 버튼 (X) "CSS 클래스를 적용하지 마십시오"를 선택합니다.
4. '테마'탭으로 이동하여 그런식으로 그것을 기입 :
  
  "이전에 태그를 추가 ..."지역 코드를 삽입할 :
  <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
  "이후에 태그를 추가 ..."지역 코드를 삽입할 :
  <br style='clear: left' /></div>
5. 보도 자료 [닫기 / 저장] 버튼을
NAVT 플러그인 옵션 내에서이 시점 메뉴 건물에 완료됩니다.
이제는 준비 논문 주제에 대한 약간의 조정을 할 시간이야. 그 점에서 우리는 몇 가지 사용자 지정 파일을 추가해야합니다 - CSS와 JavaScript가 메뉴에 속하는 업데 논문 'custom_functions.php 그
여기에 파일의 전체 집합을 다운로드합니다 .
압축 파일의 압축을 풉니다. 당신의 정의로 custom_functions.php을 업데이트한 경우 - 당신은 내 물건으로 그들을 병합해야합니다. 나는 당신에게 보상을 떠날 겁니다.
당신이 그것을 만지는하지 않은 경우 - 광산으로 덮어 주시기 바랍니다. 참고 : 나는 웹 사이트 헤더 (기본값은 위의입니다) 아래 메뉴를 배치하기 위해 선호 - 내 조정뿐만 아니라이 환경 설정을 포함하도록합니다.
이와 같은 귀하의 논문 주제를 '맞춤형'디렉토리 아래의 모든 하위 디렉토리 및 파일을 포함하여 아카이브를 업로드 :
.../themes/THESIS-DIR/custom/custom_functions.php .../themes/THESIS-DIR/custom/jquerycssmenu/...
나는 custom.css 본적도 없어 - 내가 custom.css 내부에 혼란을 생성 피하기 위해 자신의 위치를 아래의 메뉴에서 특정 CSS를 유지하는 것을 선호
이 시점에서 당신의 웹사이트를 다시로드하고 새로운 아름다운 새로운 멀티 레벨, 중첩된, SEO 최적화 메뉴를 볼 수 있습니다.
당신은 항상 설정을 NAVT 등을 선택하여 메뉴를 사용자 정의할거나 위치를 조정 되돌아 가실 수 있습니다. 그것은 자동으로 라이브 사이트에 반영됩니다.