論文主題 - 多層次,嵌套,搜索引擎友好的菜單 - 教程

論文主題教程 - 多層次,嵌套,搜索引擎友好的導航菜單添加到WordPress

2009年7月8日,gesman

追求完美的菜單 ...

這是本教程的第1部分
本教程的第 2部分講授如何建立垂直菜單+暗調色板水平

我決定論文主題 ,因為我的一個客戶告訴我有關論文和我之間的兼容性問題的WordPress的會員網站插件MemberWing。 我固定,然後決定採取仔細一看在論文,其實困擾的主要論點網站的頭版上觀看影片- Diythemes.com 。
什麼給我印象最深是注重細節,用戶友好和最重要的 - 搜索引擎優化,是經過深思熟慮的功能。
MemberWing成員插件的目的是從地上爬起來,成員網站,將需要盡可能多的搜索引擎優化汁拉。 因此,我付出了大量的關注,眾多的搜索引擎優化的增強和完美MemberWing。 許多我自己的客戶要求使用不同的主題,主題是這樣的SEO優化,從內心深處將是一個非常適合會員門戶企業家。

SEO MemberWing SEO的權力與權力結合將給予排名的機會給我的客戶最好的。 所以,我的論文和與它起到了一天。

這是一個在各方面的優秀主題。 它的導航部分,雖然是在功能上的限制位。 從論文 1.5 +它是唯一的一個一級菜單。 我通常的願望是能夠盡可能需要自定義導航。 有些網站只有幾頁,許多人都靜態頁面 +文章/職位不計其數 +類地段噸。
因此,在理想的世界有機會創造好看分層組織的用戶友好的導航菜單是必須的。 論文了蝙蝠的權利,具有良好的前瞻性導航,但我注意到,所有的論文為基礎的網站就像雙胞胎。 定制論文導航菜單,是不是真的很容易,所以大多數人剛剛離開它。 有沒有辦法改變菜單類別的順序或位置在頁面之間。 再次,缺少能夠創建嵌套菜單結構。 所以我決定看看有什麼可以做。
相關的插件試圖半打菜單/導航後,我踏上我的選擇WordPress的導航列表插件 NAVT 。
NAVT插件基本上是無序列表生成具有超強的花式,有點難以圖非傳統的管理界面。 它誤導的是,它實際上並沒有創造看中尋找自己的菜單。 它的工作雖然最困難的部分 - 給你一個能夠直觀地拉在一起,並產生無序列表 - 骨架的菜單。 您可以創建許多菜單。 您可能會拉WordPress的東西:所有進入導航菜單頁,文章,文章,分類,用戶,代碼塊,外部鏈接,除法,分離和混合和匹配和巢,並安排和任何樹狀結構進行自定義您要。
NAVT產生對你造成HTML無序列表。 NAVT二的優點在於它可以幫助您將其插入到你的主題,通過著名的jQuery基礎的邏輯,但新的菜單,而不需要更改任何代碼! NAVT允許您指定:“我的新NAVT菜單取代#元素”。 #元素可以是現有的菜單或div元素的標籤,是由您的當前主題的路徑 ID或類。 所以NAVT不會更換這對你,迫使你進入主題的代碼,使比現在更凌亂。 如果這聽起來像亂碼 - 不用擔心 - 我會引導你一步一步很快。 NAVT為大家有挑戰性的部分是,你必須拿出實際的CSS +圖像 + JavaScript代碼為您的菜單自己。 它給你要弄清楚在何處以及如何整合這些文件,使這正確地得到連接在一起的東西。
真誠而不知道的jQuery +一些PHP + CSS +體面與 WordPress的經驗 - 這東西是很難拉。
樂意我知道這東西有​​點,所以我決定咬建設為 WordPress最好的導航菜單的最佳子彈和引導人類自由。 我只是需要一些好看的水平CSS菜單,找出來源。 我拿起他們最好的選擇,演示和源的動態驅動網站。

我每天致力於研究論文和發揮 NAVT插件。 在最後,我自豪地創建定制的,靈活的,多​​層次的嵌套nagivati​​on結構,為我的WordPress的論文為基礎的網站,SEO優化。

為多層次,嵌套WordPress的導航菜單的功能列表
喜歡這個東西):

  • 專業,廉潔的外觀和感覺。
  • MSIE 6,7,歌劇,Safari瀏覽器,火狐3.x中,谷歌在這兩個 JavaScript的瀏覽器和非JavaScript的模式,包括所有現代瀏覽器的支持。
  • 優雅非JavaScript的瀏覽器downgradable。 您的菜單將被使用,在視覺上相似,甚至停用JavaScript的瀏覽器(雖然只有頂級導航將是可見的,並沒有彈出按鈕,當然會發生,因為它們是由JavaScript)。
  • 搜索引擎友好的功能 - 無序列表菜單內生成的HTML代碼。 谷歌和其他搜索引擎蜘蛛將能夠的索引您的導航結構,並發現內頁的鏈接。
  • 支持無限嵌套層次和亞層。
  • 支持任何命令或網頁,職位(通過用戶定義的URI),分類,用戶,自定義代碼塊,並在菜單的外部鏈接。
  • 支持文本以及基於圖像的菜單元素。 (我還沒有嘗試這些雖然)。
  • 通過 NAVT管理區的菜單結構和內容是視覺調節。
  • 緊湊型:嵌套級別的jQuery的彈出按鈕。
  • 快速:菜單 jQuery是從 Google服務器上(我愛論文本身相同的,而不是本地拉)加載。 這將加快東西位。
  • 可擴展性 - 這種類型的菜單,編輯和編碼任何地方的需要在任何時間通過 NAVT插件設置配置沒有任何。

從動態驅動使用這個優秀的菜單為基地的門戶。 我不得不自定義 JavaScript代碼位以及納入 custom_functions.php,使其工作與論文的PHP塊。 既存的頁面,類別,並從我的網站崗位也被用來組裝菜單結構。 您的網站細節會有所不同 - 但概念將是相同的。
因此,讓我們繼續,我們應?

一步一步的指示設置NAVT基於嵌套的,可定制,多層次,搜索引擎友好的
和平原涼爽尋找Wordpress和導航菜單論文主題

  1. 轉到 WordPress管理面板。 插件 - >添加新的搜索,“navt”。 該插件將顯示。 單擊 [安裝],[立即安裝],“激活插件”。
  2. 工具 - > NAVT列表,裡面的“導航集團”區域找到“組名稱”,然後輸入:“MENU1”在外地,按[創建]按鈕。 了創建“MENU1”長方形的面積。
    這種“MENU1”區域將菜單建設的主要遊樂場。 您將拖放在這裡你的菜單元素。
  3. 在“資產”區域找到“其他”列表框,點擊“主頁”選擇。 “家”thingie會出現“未分配”區域內。 怪異,不是嗎? 不用擔心,只要它的工作原理 - 它會為我們。
  4. 這個“家”thingie,從“資產”區域拖動到“MENU1”長方形的面積。 它將成為“家”的菜單項。
    • 重複步驟 3-4從“頁”區域中的一些頁面,以及在“類別”區域類別。 拖動你想在你的菜單“MENU1”矩形內的任何其他項目。 您可以點擊頁面,類別,用戶和一些自定義的元素,如“清單分壓器”和“代碼塊”。 代碼塊是冷靜的方式來增加自定義菜單內片段。
    • 你可以拖動“MENU1”區域內的菜單項重新排列它們的順序。
    • “<”和“>”箭頭,您可以調整每個菜單項的分層位置。
    • 點擊每個菜單項的文本名稱 - 打開心中的這個項目令人難以置信的額外的定制對話框。 我大多使用默認值,但在技術上,你可以去瘋了,開始做基於圖像的菜單選擇,並添加到HTML代碼塊。 雖然謹慎行事。
    • linkless unclikable子菜單,將作為“父母”其他“子兒”我用“代碼塊”型。 例如,當定制這樣的代碼塊項目時,我進入“菜單項的別名”=“MemberWing”和“輸入代碼塊:”=“<a href='#'> MemberWing </ A>”。 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和JavaScript屬於菜單和更新論文“custom_functions.php
  9. 這裡下載一套完整的檔案
  10. 解壓存檔。 如果您更新您的自定義你的custom_functions.php - 你需要合併他們與我的東西。 我將離開你了。
    如果你還沒有觸及它 - 感覺自由來覆蓋它與我的。 請注意:我的首選位置下的網站標題(默認以上)菜單 - 讓我的調整以及這種偏好。
  11. 上傳存檔,包括主題“定制”目錄下,這樣,所有的子目錄和文件:
    .../themes/THESIS-DIR/custom/custom_functions.php
    .../themes/THESIS-DIR/custom/jquerycssmenu/...

    我沒有觸及 custom.css - 我寧願保持自己的位置下菜單特定的CSS,以免造成內部 custom.css一塌糊塗
  12. 在這一點上,你可能刷新您的網站,看到新的美麗的新的多層次,嵌套,SEO優化菜單。
  13. 您可以隨時回去NAVT設置了更多的選擇和定制你的菜單,或重新定位任何東西。 它會自動反映在直播現場。

前進的道路... ...

本教程包括一個菜單式的創意例子。 我打了一個又一個 - 只是為了看看如何深色菜單會是什麼樣子:

Thesis theme - multilevel nested CSS menu - dark palette

-多級嵌套的CSS菜單-黑暗的調色板

我認為這是相當不錯的。 有很多更航行的樣品提供動態驅動器-所有的人都可以定制,論文和其他一些努力的WordPress主題:

Dynamic Drive Horizontal Menus

動態驅動器的水平菜單

我希望你會發現本教程是有益的和有用的。 正如我所說,它是可以定制這些菜單論文 - 這是給定的時間和慾望,做到這一點。

根據合同,我能為你做這項工作。 只要挑你喜歡的菜單, 請與我聯繫,我會為您的網站上的代碼和說明工作。

$ 20

當然,如果你建立超級 SEO優化溢價 WordPress的成員​​門戶 - 此最好的解決辦法:
論文主題 + MemberWing成員插件 +當然自我主辦WordPress的

你的留言

上一篇:

下一篇: