논문 주제 - 다단계, 중첩된, 검색 엔진 최적화 친화적인 메뉴 - 자습서

논문 주제 튜토리얼 - Wordpress에 다단계, 중첩된, 검색 엔진 최적화 친화적인 탐색 메뉴를 추가

2009 년까지, gesman에 7월 8일

퀘스트 완벽한 메뉴에 대한 ...

이것은 제 1 부입니다 튜토리얼
파트 2 튜토리얼의이 한 가르치고 색상 어두운 세로 메뉴 +를 빌드하는 방법 수평 팔레트를위한

내가 갖기로 결정 논문 주제를 제하고 있기 때문에 하나의 논문 사이의 문제에 대한 호환성이 내 고객의 정보 WordPress에 회원 사이트 플러그인 MemberWing. 나는 그것을 고정 후 시계 학위 논문에 대해 자세히 살펴보고하기로 결정하고 참을수가 실제로 Diythemes.com - 메인 페이지의 동영상을 전면에있는 논문 사이트 .
왜 내게 가장가의 세부 사항, 사용자 편의와 너무 잘 생각은 모든 대부분의 -의 SEO 기능이 주목을 받았다.
MemberWing 회원 플러그인 바닥까지 최대한의 SEO 주스를 당길 필요가 회원 사이트에서 설계되었습니다. 그래서 난의 SEO 향상과 MemberWing에 perfections의 다수에 대한 관심을 많이 냈어요. 내 자신의 고객 중 대부분은 다른 주제에 대해 너무 잘 올리실 깊은 안쪽에서 회원 가입을위한 훌륭한 맞게 될 포털 기업이었던 때가 최적화된 테마를 사용하도록 요청하고 있습니다.

의 SEO 권력과 MemberWing의의 SEO 힘을 조합 클라이언트 최선을 기회의 순위 것입주세요. 그래서 논문있어 그것으로 하루 동안 잘 해줬습니다.

그것은 모든 면에서 뛰어난 주제입니다. 그것의 네비게이션 부분은 그래도 좀 함수에서 제한됩니다. 논문 1.5 +부터 시작 한 수준 메뉴가 있습니다. 내 평소 욕망은 많이 필요에 따라 탐색을 사용자 정의할 수 있습니다. 일부 사이트는, 많은 다른 기사 + zillions은 / 게시물 분류를 많이 + 정적 페이지 톤을 가지고 겨우 몇 페이지가 있습니다.
그래서 이상적인 세상은 좋은 기회를 계층적으로 조직 찾는 사용자에게 친숙하고 탐색 메뉴를 만들 필요가있는가 필수입니다. 박쥐에서 논문 좋아 좋아 보이는 탐색하지만 모든 논문 기반 웹사이트 쌍둥이처럼 찾고있는 것으로 나타났습니다. 사용자 정의 논문 네비게이션 메뉴가 정말 쉽습니다 그리 대부분의 사람들이 그냥두고있다. 어림 반 푼 어치 메뉴에서 카테고리의 순서를 변경하거나 페이지 사이에서 그들을 게재 순위입니다. 그리고 다시, 능력은 중첩된 메뉴 구조를 만들 수 없습니다. 그래서 난 그것에 대해 무엇을 할 수 있을지 결정했습니다.
에 대한 선택을하려고하면 설정 내 30 개 메뉴 / 제가 관련 플러그인을 탐색 네비게이션 Wordpress 플러그인 목록 NAVT .
NAVT 플러그인은 본질적으로 공상과 슈퍼 비트와 untraditional 관리자 인터페이스 하드 - 투 - 그림 목록 생성기를 순서대로 정렬됩니다. 뭐 그것에 대해 오해의 소지가 그것이 실제로는 그 자체로 멋진 찾는 메뉴를 생성하지 않습니다. 하지만 그것은 직업의 가장 어려운 부분은 무엇입니까 - 당신에게 능력을 시각적으로 서로 끌어주는, 그리고 순서없는 목록을 생성 - 메뉴가 될 귀하의 골격을. 그리고 당신은 너무 많은 메뉴를 만들 수 있습니다. 당신은 탐색 메뉴에 Wordpress 물건의 모든 종류를 끌어들 : 페이지, 게시물, 기사, 범주, 사용자, 코드 블록, 외부 링크, 디바이더, 분리기 및 혼합과 일치하는 은신처 및 주선 및 나무와 같은 구조에서 그들을 사용자 정의할 당신 싶어요.
NAVT 당신을위한 HTML을 생성하는 순서없는 목록을 수있었습니다. NAVT의 두 번째 아름다움은 그것이 삽입 테마로 유명한 JQuery 기반의 로직을 통해 새로운 메뉴를 당신에게 도움이 필요하지만, 어떤 코드를 변경하지 않고 있습니다! NAVT가 지정할 수 있습니다 : "나의 새로운 NAVT 메뉴"이 # 요소를 바꿉니다. # 요소는 ID 또는 기존 메뉴 또는 현재 테마에 의해 생성되고있는 DIV 요소 태그의 클래스 경로의 수 있습니다. NAVT 그래서 당신이 테마 코드로 가서 그것보다 이미 있습니다 난장판하게 강요하지 않고 당신이 교체 않습니다. 전 단계 단계 곧 당신을 안내하겠습니다 횡설수설하는 것처럼 모든 소리 - 걱정하지 않는 경우 -. 모두 NAVT의 도전적인 부분은 귀하의 메뉴를 직접 실제 CSS를 + 이미지 + 자바 스크립트 코드와 가셔야 할 것입니다. 그것이 당신이 어디에 있었는지 알아보는 이러한 파일을 통합하는이 물건을 제대로 함께 연결된 할 수 있습니다.
감사 및 PHP + CSS를 + Wordpress로 괜찮은 경험을 갖는 JQuery +을 모르면 - 이번 일을 해낼 수 어렵다.
나는 Wordpress위한 최상의 네비게이션 메뉴 최고의 건물에 자유 총알과 가이드 인류를 물린하기로 그래서 기꺼이이 물건 좀 알아요. 그냥 멋진 찾는 수평 CSS는 메뉴에 대한 소스를 찾을 필요했습니다. 내가 선택한 동적 드라이브 웹사이트를 소스에 대한 그들의 최상의 선택, 데모 및.

난 하루에 논문과 NAVT 플러그인으로 재생을 공부에 전념. 마지막으로 나는 자랑스럽게 정의, 검색 엔진 최적화 서비스 최적화, 멀티 레벨, 중첩된 nagivation 구조 내 논문 Wordpress + 기반의 사이트에 대해 유연하게 만들었습니다.

에 대한 메뉴를 탐색 Wordpress의 특징 중 다단계, 중첩된리스트
(이) 물건이에게 사랑 있어요 :

  • 프로 페셔널, 깨끗한 모양과 느낌.
  • MSIE 6,7, 오페라, 사파리, 파이어 폭스 3.x를, 구글 크롬 모두 자바 스크립트가 아닌 자바 스크립트 모드를 포함한 모든 최신 브라우저에 대한 지원.
  • 정상적으로 JavaScript가 아닌 브라우저 downgradable. 당신이 메뉴를 사용할 수있을 것이며, 비슷한 시각, 심지어는 단지 최고 레벨 이동 장애에도 불구하고 자바 스크립트 브라우저 (위해 일하는 볼 수없고 flyouts 물론 일은 그들이 자바 스크립트에 의해 만들어으로).
  • 의 SEO 친화적인 기능 - 순서없는 목록 메뉴에서 코드를 HTML 내에서 생성됩니다. Google 및 기타 검색 엔진 스파이더가있게 색인에 귀하의 탐색 구조를되며 내부 페이지에 대한 링크를 찾으십시오.
  • 무제한 둥지 레벨과 sublevels에 대한 지원.
  • 어떤 명령이나 페이지, 게시물 (사용자 URI를 정의를 통해 지원), 범주, 사용자, 사용자 지정 코드 블록 및 메뉴 내에 외부 링크.
  • 텍스트뿐만 아니라 이미지 기반의 메뉴 요소로의 지원. (저는 아직 시도 해이 있지만).
  • 메뉴 구조와 내용을 시각적으로 NAVT 관리 영역을 통해 조정할 수 있습니다.
  • 콤팩트 : 중첩 수준 JQuery 기반 flyouts.
  • 빨리가 : JQuery 메뉴에 대한 Google 서버 (내가 사랑하는 논문에게 대신 동일한 기능을 수행할 로컬로 그것을 뽑아서) 자체를 줄에서로드됩니다. 이것은 살짝 속도 것이다.
  • 확장성 - 메뉴의이 유형과 구성 가능한 NAVT 플러그인 설정을 통해 언제든지 어디서나 코딩의 필요없이됩니다.

내가 사용하는 드라이브에서 동적 메뉴를이 우수한 기반 포털입니다. 나뿐만 아니라 조금은 자바 스크립트 코드를 사용자 정의로 custom_functions.php으로 그것은 논문 작업할 수 있도록 PHP의 덩어리를 포함했다. 또한 기존 페이지의 번호, 분류 및 게시물 내 사이트에서 메뉴 구조를 조립하는 데 사용되었다. 귀하의 사이트가 구체적인 다를 수 있습니다 -하지만 개념은 동일합니다.
그래서하게 진행할까요?

지침으로 단계 단계 설치 NAVT 기반의 중첩, 사용자 정의, 다단계, 검색 엔진 최적화 서비스 친절
그리고 그저 평범하고 Wordpress 메뉴를위한 탐색 멋진 찾고 학위 논문 주제

  1. 워드 프레스 관리 패널로 이동합니다. 플러그인 ->는 "navt"에 대한 새로운 검색 기능을 추가합니다. 플러그인이 표시됩니다. 클릭하여 [소리]를 설치, [지금] 설치 ","플러그인 활성화.
  2. 도구 -> NAVT 목록이 탐색 그룹 "영역"안에 키를 누릅니다 [만들기] 버튼을 클릭 "그룹 이름"을 입력합니다 : "menu1"현장에서 찾으십시오. "menu1"사각형 영역이 만들어 있어요.
    이 "menu1"영역 메뉴 건축의 주된 놀이터됩니다. 당신은 끌어있을거야 그리고 여기 메뉴 요소를 놓기.
  3. "자산"영역에서 "기타"목록 상자를 클릭하고 "홈"선택에서 찾을 수 있음. "홈"거시기는 내부가 나타납니다 ""영역을 할당되지 않음. 이상하지, 응? 걱정 마, 한 작동으로 - 그리고 그것은 우리의 목적을 위해.
  4. "자산"영역에서 "menu1"사각형 영역으로이 "홈"거시기를 드래그하십시오. 그것은 메뉴에있는 "홈"항목이 될 것입니다.
    • "페이지"영역에서뿐만 아니라 "카테고리"영역에서 카테고리에서 일부 페이지에 대해 3-4 단계를 반복합니다. 당신의 메뉴에 내부에 있고 싶지 기타 항목을 드래그하여 "menu1"사각형. 페이지에 당신이 있습니다 다음, 범주, 사용자와 "목록 분배기"와 "코드 블록"와 같은 일부 사용자 정의 요소. 코드 블록은 좋은 방법은 메뉴 안에 사용자 정의 미리보기를 추가하는 것입니다.
    • 당신은 안으로 메뉴 항목을 드래그 수있다 "menu1"영역에서 자신의 순서를 다시 정렬할 수 있습니다.
    • 당신은 각 메뉴 항목의 계층 위치를 조정할 수있다 "<"및 ">"는 화살표.
    • 각 메뉴 항목의 텍스트 이름을 클릭하면 - 마음을이 항목에 대한 추가 사용자 정의 대화 상자가 열립니다 boggling. 나는 주로하지만 기본값을 사용하는 기술적으로 당신이 미쳐 버릴 수있는 이미지 기반의 메뉴 선택을 만들기 시작하고 그것에 HTML 코드의 상당 부분을 추가합니다. 주의 생각으로 진행합니다.
    • 내가 ""유형 코드 블록을 사용하는 다른 "서브 어린이"에 대한 "부모"가 될 것입니다 linkless unclikable 하위 메뉴하십시오. 예를 들어 나는 메뉴 항목 별칭 "에 대한" "="MemberWing를 입력하고 "코드 블록을 입력 방법 :"와 같은 코드 블록 항목을 사용자 정의할 = "은 <a href='#'> MemberWing </>". = href가 갖는 "#"선택 메뉴 것인가 유효하지 클릭할 수 있지만 행동으로 "부모".
  5. 여기 내 NAVT 'menu1'구축 구조가 거의 완성 보이 :
    navt_building_icon
  6. "장치"아이콘을 마침 초기 건물을 누른 다음 귀하의 메뉴 구조를 사용자 정의할 수 :
    navt_customize_menu
  7. 그것은 4 탭 : 함께 대화 상자가 열립니다 옵션, 디스플레이, CSS는, 테마.
    1. 로 이동 "옵션"탭을 선택하고 확실 다되지 않은 및 "그룹 이름"입니다 말합니다 : "menu1"
    2. 로 이동 "디스플레이"탭을 표시 탐색 그룹 "에 있는지 다 확인에 ..."영역 [점검는 x]. 기본값에서 나머지를 남겨주세요.
    3. "CSS는"탭을 선택 라디오 버튼을 선택 (이동 x)를 ""CSS 클래스를 적용하지 마십시오.
    4. 로 이동하여 "테마"탭과 같은에서 그것을 채울 :
      navt_configuration_theme_tab_icon
      삽입 "태그를 추가로 전에 ..."지역 코드 :
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      삽입 "태그를 추가로 후 ..."지역 코드 :
      <br style='clear: left' /></div>
    5. 보도 자료 [이 / 단추]를 닫으하기
  8. 플러그인 옵션 NAVT 내에서이 포인트 메뉴 빌딩이 완료되었습니다.
    지금은 위해 노래를 좀 할 시간의 가 준비에 도착. 우리는 몇 가지 정의 파일을 추가 - CSS를하고 메뉴에 속해 및 논문 'custom_functions.php 자바 스크립트를 업데이 트해야합니다에 대한
  9. 세트의 파일 다운로드 완료 여기에 .
  10. 압축 해제 아카이브. 당신이 정의와 custom_functions.php을 업데이트한 경우 - 당신이 내 물건 그들을 병합해야합니다. 내가 당신에게 그것을 떠날 겁니다.
    당신이 그것을 만진하지 않은 경우 - 내 그것을 덮어 주시기 바랍니다. 참고 : 나는 위치 메뉴에 웹사이트 헤더 (기본값 이하 선호 위)입니다 - 그래서 내 조정뿐만 아니라이 환경 설정을 포함.
  11. 아래의 파일을 업로드 아카이브를 포함한 모든 하위 디렉토리 및 '사용자 정의'디렉토리에, 이렇게 :
    .../themes/THESIS-DIR/custom/custom_functions.php
    .../themes/THESIS-DIR/custom/jquerycssmenu/...

    내가 custom.css 손도 안 - 나 자신의 위치를 아래의 custom.css 내부 혼란을 피하기 위해 생성 메뉴 특정 CSS를 유지하는 것을 선호
  12. 이 시점에서 당신의 웹사이트를 다시로드 수 있고 새로운 아름다운 새 다단계, 중첩, 검색 엔진 최적화는 최적화 메뉴를 참조하십시오.
  13. 당신은 항상 다시 NAVT 설정으로 가실 수 있습니다 더 많은 선택의 여지가거나 위치를 사용하여 메뉴를 사용자 정의하십시오. 그것은 실제 사이트에 자동으로 반영됩니다.

도로 앞에 ...

이 튜토리얼은 메뉴의 한 종류의 창조적인 예제를 포함되어 있습니다. 난 다른 사람들과 연주 - 얼마나 어두운 색의 메뉴의 모습을 볼 수 :

Thesis theme - multilevel nested CSS menu - dark palette

- 다단계 중첩된 CSS는 메뉴 - 어두운 팔레트

난 아주 좋은 생각합니다. 거기에 있습니다 더 많은 탐색 가능한 샘플은 다이나믹 드라이브 - 그들 모두의 노력과 몇 가지 가능한 테마 및 기타 Wordpress의 논문에 대한 사용자 정의 :

Dynamic Drive Horizontal Menus

동적 수평 메뉴를 드라이브

난 당신이이 튜토리얼 유익하고 유용 바랍니다. 내가 말했듯이, 그것은 가능한 어떤 논문에 대해 이러한 메뉴 사용자 지정하는 것입니다 - 그 시간과 욕망을 일어날 수 있도록 제공됩니다.

당신을 위해 계약을 기준으로이 작업을 할 수있다. 그냥, 당신이 좋아하는 메뉴를 골라 나에게 연락 내가 웹사이트에 코드거야 작업에 대한 지침과.

$ 20

당신이있다면 물론 슈퍼 검색 엔진 최적화 서비스를 포털 프리미엄 WordPress에 회원 자격을 최적화 - 이것에 대한 최상의 솔루션 건물 :
논문 주제 + MemberWing 회원 플러그인 + 자체는 Wordpress 호스팅 물론이지.

코멘트를 남겨주세요

이전 게시물 :

다음 게시물 :