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

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

2009年7月8日 gesman

追求完美的菜單...

這是本教程的第1部分
第2部分本教程教你如何打造垂直菜單+深色的調色板水平

我決定讓論文的主題 ,因為我的一個客戶告訴我有關的論文和我的WordPress的的會員網站插件 MemberWing之間的兼容性問題。 我固定它,然後決定採取仔細看看論文,居然不屑於觀看視頻主要論文網站的頭版上- Diythemes.com
給我印象最重要的是注意細節,用戶友好性和最重要的 - 搜索引擎優化功能是如此深思熟慮。
MemberWing會員插件設計從地上爬起來,將需要盡可能拉盡可能多的搜索引擎優化汁的會員網站。 所以我付出了大量的關注眾多的搜索引擎優化增強和完善在MemberWing。 我自己的很多客戶要求使用不同的主題和主題,以及SEO優化,從內心深處將是一個很好的適合會員門戶企業家。

結合搜索引擎優化的MemberWing權力與SEO權力將給予最佳排名的機會,給我的客戶。 所以我得到了碩士和它玩了一天。

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

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

論文主題的多層次,嵌套WordPress的導航菜單功能列表
有愛情這東西):

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

我用這個優秀的菜單為基礎的動態驅動門戶。 我有自定義的javascript代碼,以及包括大塊PHP custom_functions.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的過程。

此項目的評論被關閉。

上一篇:

下一篇: