通過對2009年7月10日,gesman
追求完美的垂直菜單...
本教程的第1部分介紹建設水平的多級嵌套菜單的過程中一步一步WordPress的論文主題 。 第2部分將繼續加強此功能。 在這裡,我們將添加水平導航菜單中的“暗”版本,我會教你如何“光明”和“黑暗”版本之間切換。 第2部分第1部分超。 它包括了從第1部分+增加了更多的很酷的東西。
主要的想法,我想提出論文的主題是增加垂直菜單(和一般的WordPress的)。 我一直在尋找真正靈活,搜索引擎友好的多瀏覽器兼容的垂直菜單,將可以創造無限的嵌套級別。
網上有主題網頁萬噸,但是當我開始嘗試所有這些樣本 - 他們要么打破了,四分五裂,只支持數量有限的水平或行為不端蓋茨+鮑爾默junksplorer“6。 最後,我回來嘗試和信任的動態驅動器菜單,垂直樣品被證明是一個不錯的情況下,適合我的嚴格要求。 我不得不大幅改變他們雖然以確保它符合論文模型。
繼續追求完美...
我花了大約16個小時的搜索,裝配,檢測,修復,拋光和調整垂直菜單的CSS和JS代碼和3/4的時間是花在使它工作在MSIE 6。
不管怎麼說,我是最終的結果感到高興。 導致垂直導航菜單有所有橫向菜單有同樣的好處 。
有能力增加垂直菜單,約70-80%的門戶網站在網絡上是非常重要的。 橫向菜單,限制了“空間”容納很多菜單的選擇,但垂直菜單沒有此限制,將極大的幫助。 所以在這裡我們去。
許多步驟來做到這一點已經在教程的第一部分描述,所以這會讓位較短,但功能更豐富的結果。
這裡有雲:
建設搜索引擎友好的,垂直的,多層次,分層嵌套菜單WordPress和論文主題。 一步一步
(......你從來沒有想過可能...)
- 執行PHP插件安裝並激活它。 我們需要它,因為我將使用PHP文本構件內發出的垂直菜單的HTML代碼。
- 做步驟1 - 6 教程的第一部分 。 基本上,你需要安裝並激活使用NAVT插件+視覺上建立你的菜單。 確保您的菜單組的名稱是“MENU1。 這個名字是硬編碼在custom_functions.php
- 您MENU1'組上的“齒輪”圖標,點擊編輯它的屬性:
- 如下步驟第1部分教程7.1 -7.3設置“選項”,“顯示”和“CSS”選項卡設置。
- 現在,單擊該對話框上的“主題”選項卡。 我們將覆蓋設置有數量(如果你已經按照步驟1)。 這是確定的 - 你不會失去任何東西 - 但這些變化是必要的,因為我已經改變了一些代碼從第1步。
這裡需要填寫此對話框: - 裡面的“主題的XPath:”區域輸入此代碼(命令來取代任何與這些類的標籤):
.jquerycssmenu, .jqueryslidemenu - 設置“動作”,“替換”
- 裡面的“添加標籤之前導航組”區域輸入此代碼:
<div class='jquerycssmenu' style='margin-top:5px;'> - 內進入“添加標籤後,導航組”區域代碼:
<br style='clear: left' /></div> - 點擊[保存/關閉]按鈕。
- 現在去WordPress管理面板 - >外觀 - >小工具。
- 拖曳到“側欄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在左側邊欄的垂直菜單。
- 獎金的任務:讓改變“亮”的水平菜單上的“黑暗”的配色方案。
- 裡面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
基本上我們註釋掉一行註釋另一個。 - 現在到WordPress管理 - >工具 - > NAVT名單和上述的“齒輪”圖標上單擊“編輯”MENU1“組屬性”。
- 單擊“主題”標籤。
- 裡面的“添加標籤之前導航組”區域輸入此代碼:
<div class='jqueryslidemenu' style='margin-top:5px;'> - - 重新加載頁面 - 你的主要的水平導航菜單“神奇”變得黑暗,這樣的事情:
論文的主題 - 多層嵌套的CSS菜單 - 黑暗的調色板
黑暗的調色板可能更適合某些網站比光線的顏色之一。 所以,現在你有你的生活自由的選擇!
- 要回到“光明”的配色方案 - 撤消上述“紅利”的步驟。
- 結論:
我愛論文的主題,我愛WordPress和我愛的事實,我們有一個體面的導航菜單添加到我們的門戶網站的方式。
$ 20
享受!
格列布·艾斯門
2009年7月8日,由gesman
為追求完美的菜單...
這是本教程的第1部分
本教程的第2部分,教導如何建立橫向垂直菜單+深色的調色板
我決定讓論文的主題 ,因為我的一個客戶告訴我論文和我之間的兼容性問題WordPress的會員網站插件 MemberWing。 我固定它,然後決定採取在論文仔細看看,其實困擾主要論文網站的頭版上觀看影片- Diythemes.com 。
給我印象最注意的細節,用戶友好和最重要的 - 搜索引擎優化功能是經過深思熟慮的。
MemberWing會員插件的目的是從地上爬起來,為會員的網站,將需要拉盡可能多的SEO汁。 所以,我支付了大量的關注,眾多SEO的增強和完善在MemberWing。 許多我自己的客戶要求使用不同的主題和有主題的SEO優化,從內心深處將是一個非常適合成員門戶企業家的。
的SEO MemberWing權力與SEO的權力相結合的論文的主題將給予排名的機會向我的客戶最好的。 所以,我的論文和與它起到了一天。
這是一個在各方面的優秀主題。 雖然它的導航部分是位在功能上的限制。 論文1.5開始它僅是一個級別的菜單。 我平時的願望是能夠定制需要多導航。 有些網站只有幾頁,很多人有靜態頁面+文章/職位+大量的類別不計其數噸。
因此,在理想的世界有機會創造好看分層組織的用戶友好的導航菜單是必須的。 論文了蝙蝠的權利,有好看的導航,但我注意到,所有的論文為基礎的網站就像雙胞胎。 定制論文導航菜單,是不是很容易讓大多數人只是離開它是。 有沒有辦法改變菜單中的類別順序或放置在頁面之間。 再次,缺少能夠創建嵌套菜單結構。 所以我決定看看有什麼可以做。
菜單/導航相關的插件試圖大約半打後,我設置我的選擇WordPress的導航列表插件NAVT的 。
NAVT插件基本上是無序列表生成器,具有超強的花式,有點難以計算非傳統的管理界面。 它誤導的是,它並沒有真正創建看中本身看菜單。 它的工作雖然最困難的部分 - 讓您能夠直觀地扯在一起,並產生無序列表 - 骨架您的菜單是。 ,你可以創造出許多菜單。 進入導航菜單,你可以拉所有的WordPress的東西:網頁,文章,文章,分類,用戶,代碼塊,外部鏈接,隔板,隔板和混合和匹配和巢,並安排他們在任何樹狀結構和定制你想。
NAVT生成你產生HTML無序列表。 第二NAVT的優點在於它可以幫助您將其插入到你的主題,通過著名的基於JQuery的邏輯,但新的菜單,無需更改任何代碼! NAVT允許你指定:“我的的新NAVT菜單中取代此#元素”。 #元素可能是一個id或現有菜單或div元素標記當前的主題,正在產生的類路徑。 所以NAVT不會強迫你進入主題的代碼,使更凌亂,它已經是你更換。 如果像胡言亂語 - 不用擔心 - 所有的聲音,我會引導你一步一步。 為大家的NAVT的具有挑戰性的部分是,你必須要拿出實際的CSS +圖像+ javascript代碼為您的菜單自己。 它給你,要弄清楚在何處以及如何整合這些文件,並正確地得到連接在一起的東西。
真誠不知道JQuery的+一些PHP + CSS的體面與WordPress的經驗 - 這件事是很難拉。
很高興,我知道這東西一點,所以我決定在建立最佳WordPress的最好的導航菜單咬子彈和引導人類的自由。 我只需要找出一些好看的水平CSS菜單來源。 我拿起他們的最好選擇,演示和來源的動態驅動網站 。
我專門研究論文和玩NAVT插件一天。 在最後,我自豪地創建自定義,靈活,SEO優化,多層次的我的wordpress +畢業論文為基礎的網站,嵌套nagivation結構。
論文主題WordPress的導航菜單功能多層次,嵌套的名單
( 你喜歡這個東西):
- 專業,整潔的外觀和感覺。
- MSIE中6,7,歌劇,Safari瀏覽器,火狐3.x中,谷歌在這兩個JavaScript的瀏覽器和非JavaScript的模式,包括所有的現代瀏覽器的支持。
- 優雅downgradable非JavaScript的瀏覽器。 你菜單將是可用的,視覺上相似,甚至停用JavaScript的瀏覽器的工作(儘管只有頂級導航將是可見的,沒有彈出按鈕,當然會發生,因為他們是由JavaScript)。
- 搜索引擎友好的特點 - 無序列表菜單內生成的HTML代碼。 谷歌和其他搜索引擎蜘蛛索引你的導航結構,就能尋找到內頁的鏈接。
- 支持無限嵌套層次和能級。
- 支持任何命令或網頁,職位(通過用戶定義的URI),類別,用戶自定義的代碼塊,並在菜單的外部鏈接。
- 支持文本以及基於圖像的菜單元素。 (我還沒有嘗試這些雖然)。
- 菜單的結構和內容是視可調通過NAVT管理區。
- 緊湊:嵌套級別的jQuery的彈出按鈕。
- 快速:菜單jQuery是從Google服務器上(我愛論文本身做相同的,而不是本地拉)加載。 這將加快一點東西。
- 可擴展性 - 這種類型的菜單,編輯和配置,沒有任何需要編碼的任何地方在任何時間通過NAVT插件設置。
我用這個優秀的菜單,從動態驅動器作為基礎的門戶網站。 我有自定義JavaScript代碼位以及納入custom_functions.php PHP的塊,使其與論文。 也預現有的網頁,從我的網站的類別和職位數量,用於組裝的菜單結構。 您的網站的細節會有所不同 - 但概念是相同的。
因此,讓我們繼續,好嗎?
- 轉到WordPress管理面板。 插件 - >添加新的搜索為“navt”。 該插件將被顯示。 單擊[安裝],[立即安裝],“激活插件”。
- 工具 - > NAVT名單,發現裡面的“導航集團”區域“組名稱”,輸入:“MENU1”在外地,按[創建]按鈕。 創建“MENU1”長方形的面積得到。
這種“MENU1”區域將是主菜單建設操場。 你可以拖放在這裡,你的菜單元素。 - 在“資產”區域中,找到“其他”列表框,並點擊“主頁”的選擇。 “家”thingie將出現“未分配”區域內。 怪異,嗯? 無後顧之憂,只要它的工作原理 - 它會為我們。
- 從“資產”區域拖動到這個“家”thingie“MENU1”長方形的面積。 這將成為“家”中的菜單項。
- 從“頁”的面積,以及在“類別”區域類別的某些頁面,重複步驟3-4。 拖動你想成為你的菜單裡面“MENU1”的矩形的任何其他項目。 你可以點擊網頁上,分類,用戶和一些自定義的元素,如“列表分隔”和“代碼塊”。 代碼塊是冷靜的方式來添加自定義菜單裡面的片段。
- 你可以拖動“MENU1區”內的菜單項重新排列它們的順序。
- “<”和“>”箭頭,您可以調整每個菜單項的層次位置。
- 點擊每個菜單項的文本名稱 - 打開心為這個項目驚人的額外定制對話框。 我大多使用默認值,但在技術上,你可以去瘋狂和基於圖像的菜單選擇和添加到HTML代碼塊。 雖然謹慎行事。
- 對於linkless unclikable的子菜單,將作為“父母”,“子兒”,我用“代碼塊”型。 例如,定制這樣的代碼塊項目時,我進入“菜單項的別名”=“MemberWing的”和“輸入代碼塊:”=“的<a href='#'> MemberWing </ A>”。 HREF =“#”將使它無法點擊,但作為一個有效的“父”菜單選擇。
- 這裡是我NAVT'MENU1'構建結構如何看起來好像差不多完成:
- 完成初步建設,然後點擊“齒輪”圖標來定制你的菜單結構:
- 這將打開對話框有4個標籤選項,顯示,CSS主題。
- 轉到“選項”標籤,並確保一切都氾濫,“組名”說:“MENU1”
- 進入“顯示”標籤,並確保一切“顯示導航組”區域選中[X]。 其餘留在默認。
- 去“CSS”的標籤,並選擇單選按鈕(X)“不要使用CSS類”。
- 轉到“主題”選項卡,並填補它在這樣的:
插入“添加標籤之前......”面積這段代碼:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
插入“添加標籤後......”面積這段代碼:
<br style='clear: left' /></div> - 按[保存/關閉]按鈕
- 在這點菜單從內NAVT插件選項建築是完整的。
現在是時候做一點點調論文主題準備好了。 為此,我們需要添加一些自定義文件 - CSS和JavaScript屬於菜單和更新論文“custom_functions.php - 這裡下載一套完整的檔案 。
- 解壓存檔。 如果您已更新您的自定義您的custom_functions.php - 你需要合併他們與我的東西。 我將離開你了。
如果你還沒有觸及它 - 隨時與我覆蓋它。 請注意:我寧願定位下的網站標題(默認以上)菜單 - 讓我的調整以及這種偏好。 - 上傳存檔,包括這樣,你的論文主題是“自定義”目錄下的所有子目錄和文件:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
我還沒有觸及custom.css - 我寧願保持自己的位置下特定CSS菜單內custom.css避免造成混亂 - 在這一點上,你可以刷新你的網站,看到新的美麗的新的多層次,嵌套,SEO優化菜單。
- 你可能總是回去,以NAVT設置和定制你的菜單有更多的選擇或重新定位任何。 這將自動反映在直播現場。
前進的道路......
本教程包括一個菜單式的創意例子。 我打了一個又一個 - 只是為了看看如何深色菜單看起來像:
論文的主題 - 多層嵌套的CSS菜單 - 黑暗的調色板
我認為這是相當不錯的。 有很多更航行的樣品,可在動態驅動器 -所有這些都是可能的論文和其他WordPress主題定制一些努力:
動態驅動器的水平菜單
我希望你會發現本教程中的有益和有用的。 正如我說,這是可以自定義這些菜單論文 - 讓它發生的時間和慾望。
根據合同,我可以為你做這項工作。 隨便挑你喜歡的菜單, 與我聯繫 ,我會為您的網站上的代碼和說明工作。
$ 20
當然,如果你建設超級SEO優化溢價WordPress的會員門戶網站 - 當前最好的解決方案:
論文主題 + MemberWing會員插件 + 自託管的WordPress的 ,當然。