Многостепенното вертикална йерархична вложени меню за Wordpress

Добавяне на многостепенно, вложени, SEO приятелски навигационното меню на WordPress - част 2

от gesman на 10 юли 2009 г.

Търсенето за перфектната вертикално меню ...

Част 1 на това ръководство е описано стъпка по стъпка процеса на изграждане на хоризонтални многостепенно вложени меню за WordPress тема за дипломна работа . Част 2 ще продължи да се подобри тази функционалност. Тук ние ще добавим "тъмна" версия на хоризонталното навигационно меню и аз ще ви научи как да преминете между "ярка" и "тъмна" версия. Част 2 е надмножество от част 1. Тя включва всички от част 1 + добавя по-готини неща.

Основната идея, че аз исках да представи добавя вертикално меню за (и WordPress като цяло). Търсех наистина гъвкав, SEO приятелски и мулти-браузър съвместими вертикално меню, което ще позволи да се създават неограничен брой гнездящи нива.

WEB има тонове страници по темата, но когато започнах да се опитат всички тези проби - те или събори, разпадна, поддържа само ограничен брой нива или misbehaved в Гейтс + junksplorer Балмър 6. Накрая се върнах изпитани и надеждни Динамични менюта за задвижване и техните вертикални проби се оказа да е хубаво, случай, който отговаря на моите строги изисквания. Аз трябваше значително да ги променяте, сякаш за да се уверете, че тя се вписва Теза модел.
Стремежът към съвършенство продължава ...

Прекарах около 16 часа търсене, монтаж, тестване, фиксиране, полиране и настройка CSS вертикално меню и JS код и 3/4 от време са били изразходвани, което да работи в MSIE 6.
Както и да е, аз бях доволен от крайния резултат. Доведе вертикално меню за навигация има същите ползи, че хоризонтално меню.

, Възможност за добавяне на вертикално меню е много важно да се около 70-80% от портали в интернет. Хоризонталните менюта са ограничени "пространство", за да поеме много възможности за избор на меню, но вертикално меню не е това ограничение и ще помогне неимоверно. Така че тук ние тръгваме.

Много стъпки, за да се случи вече са описани в част 1 на урок, така че това ще го направи за малко по-къс срок, но с много по-богат на функции резултати.

Така че тук върви:

Сграда SEO приятелски, вертикални, многостепенно, йерархично вложени меню за WordPress и тема на дипломна работа. Стъпка по стъпка
(... Това, което никога, че е възможно ...)

  1. Инсталирайте EXEC PHP плъгин и го активирате. Ние ще го наложи, защото аз ще използвам PHP вътре в текста джаджа, за да излъчват HTML код вертикално меню ".
  2. Изпълнете стъпки 1 - 6 от част 1 на урок . По принцип трябва да инсталирате и активирате използвайте NAVT плъгин + визуално изграждане на менюто си. Уверете се, че вашето име на меню група е "menu1". Това име е кодиран в custom_functions.php
  3. Кликнете върху икона "съоръжения" за "menu1" група, за да редактирате свойствата:
    navt_customize_menu
  4. Следва стъпка 7.1 -7.3 на част 1 урок, за да настроите "Опции", "Дисплей" и "CSS" Tabs настройки.
  5. Сега кликнете върху "Тема" в раздела на този диалогов прозорец. Ние ще презапише Брой на настройките там (ако сте били след стъпка 1). Това е наред - няма да загубите нищо, но тези промени са необходими, защото съм променил част от кода на стъпка 1.
    Ето как този диалогов прозорец трябва да се попълни:
    1. Във вътрешността на "Тема на XPath:" въведете този код (той заповядва да замени всеки етикет с тези класове):
      .jquerycssmenu, .jqueryslidemenu
    2. Задайте "Действие" за "Замяна с"
    3. Вътре на "Добавяне на етикети, преди навигация група" въведете този код:
      <div class='jquerycssmenu' style='margin-top:5px;'>
    4. Вътре "Добавяне на етикети след навигация група", въведете този код:
      <br style='clear: left' /></div>
    5. Кликнете върху [/ затваряне] бутона.
  6. Сега отидете на WordPress табло Admin -> Външен вид -> Джаджи.
  7. Плъзнете джаджа "Текст" (от големия площ "Налични джаджи") в "Sidebar 1" област на правото. Ние ще бъде добавянето на код в джаджа Текст, който ще ни помогне да материализират вертикално меню.
    ЗАБЕЛЕЖКА: Предполагам, че имате "Sidebar 1" в съществуването. Дисертация опция ви позволява да го изключите, но в името на този урок, нека да бъде.
  8. След като влачени и пускани тази джаджа - това ще се отваря като цвете (Аз се чувствам романтично, че MSIE борба е).
  9. В район "Заглавие" въведете "Най-добрият вертикално меню" ... Е, не се колебайте да използвате вашата креативност - този текст ще отидат над новороденото си вертикално меню.
  10. В голяма площ за текст въведете този код на 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;
    ?>
  11. Натиснете [Save] бутона, кликнете върху "Close" връзка.
  12. Изтеглете актуализиран набор от файлове тук .
    Този архив включва:


    • Актуализирана версия на "светло" хоризонтален код на меню
    • "Dark" версия на хоризонтално меню
    • Вертикални кодове меню
    • Актуализирана версия на custom_functions.php
  13. Сега трябва да разархивирате този архив и да го качите в "Custom" директорията на вашата теза тема.
    Забележка: ако сте направили някакви персонализации вътре custom_functions.php - бихте трябва да ги обедините. Ако не - не се колебайте да го замените с моята версия.
  14. Voila! Сега може да презареди своя сайт и да видите същото "светло" хоризонтално меню + neato вертикално меню в лявата странична лента.
  15. БОНУС задача: Да се ​​промени на "светло" хоризонтално меню на "тъмната" цветова схема.
    1. Вътре 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
      По принцип ние се коментира една линия и uncommenting другата.
    2. Сега отидете на WordPress Admin-> Tools-> Списъци NAVT и кликнете върху гореупоменатата "предавка" иконата, за да редактирате свойствата на "menu1" група.
    3. Щракнете върху раздела "Тема".
    4. Вътре на "Добавяне на етикети, преди навигация група" въведете този код:
      <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Сега - презареждане на страницата ви и вашата основна хоризонтално меню за навигация "магически" стана тъмно, нещо такова:
      Thesis theme - multilevel nested CSS menu - dark palette

      Дипломна работа на тема - многостепенно вложени меню CSS - тъмна палитра

      Dark цветова палитра може да бъде по-подходящи за определени обекти от светлината, един цвят. Така че сега имате свободата на избор в живота си!

    6. За да се върнем към "ярка цветова схема - просто връщане над" бонус "стъпки.
  16. Заключение:
    Обичам дипломна работа Тема, аз обичам WordPress и аз обичам факта, че ние имаме начини за добавяне на достойни навигационни менюта за нашите портали.

$ 20


Наслаждавайте се!

Глеб Есман

{Коментари за този пост са затворени}

Дипломна работа на тема - многостепенно, вложени, SEO Friendly меню - Инструкция

Дипломна работа Тема инстркцията - добавяне на многостепенно, вложени, SEO приятелски навигация меню да WordPress

от gesman на 8 юли, 2009

В търсене на идеалното меню ...

Това е част 1 на урока
Част 2 на този урок се учи как да се изгради вертикално меню + тъмната цветова палитра за хоризонталната

Реших да се тема на дипломна работа , защото един от моите клиенти ме информира за проблеми със съвместимостта между теза и моя WordPress плъгин MemberWing членство сайт . Аз го поправя и след това реши да погледнем по-отблизо в дипломна работа и всъщност труда да гледате видеоклипове на първа страница на основната теза сайт - Diythemes.com .
Това, което ме впечатли най-много внимание на детайли, лесен за употреба и най-вече - SEO функции, които са толкова добре обмислени.
Плъгин MemberWing членство е разработен от земята за членството в сайтове, които би трябвало да дръпнат толкова SEO сок е възможно. Така че плаща много внимание на множество SEO подобрения и съвършенства в MemberWing. Много от моите клиенти се иска за различни теми, които да се използват и като тема, която е толкова добре SEO оптимизиран от дълбоко вътре, ще бъде отличен годни за предприемачи за членство портал.

Комбинирането на SEO правомощията на MemberWing, с правомощия оптимизация на ще дам най-доброто на класиране възможности на моите клиенти. Така че аз имам теза и играе с него за един ден.

Това е една отлична тема по всички начини. Навигационната част от него обаче е малко ограничена функция. Започвайки от тезата на 1.5 + това е само едно ниво на менюто. Обичайните ми желание е да бъде в състояние да персонализирате навигация, колкото е необходимо. Някои сайтове имат само няколко страници, много други са тона на статични страници + безброй статии / публикации + много категории.
Така че в идеален свят като възможност да създадете добре изглеждащ йерархично организирана лесен за навигация в менюто е задължително. Дипломна работа правото на разстояние бухалката има добре изглеждащ навигация, но аз забелязах, че всички Теза-базирани уеб сайтове са като близнаци. Персонализиране на дипломна работа навигационно меню не е много лесно, така че повечето хора просто да го оставите както е. Няма начин да промените реда на категориите в менюто или да ги позиционират между страниците. И отново, възможност за създаване на вложени структури меню липсва. Затова реших да видя какво може да се направи за него.
След като се опитва на около половин дузина меню / навигация свързани плъгини задам моя избор относно WordPress NAVT на Навигация Списък Plugin .
NAVT плъгин е по същество неподреден списък генератор със супер фантазия и малко трудно да разбера нетрадиционно Admin интерфейс. Това заблуждение за това е, че той не създаде наистина представя менюта от само себе си. Той прави най-трудната част от работата макар че ви дава възможност визуално да се съюзим и да генерира неподреден списък - скелет на вашето меню-към-бъда. И вие може да създадете много менюта. Може да дръпнете всички видове неща WordPress в менюто за навигация: страници, публикации, статии, категории, потребители, код блокове, външни връзки, разделители, сепаратори и микс и мач и гнездо и да организира и да ги персонализирате, в някое дърво като структура искате.
NAVT генерира за Вас резултат, HTML неподреден списък. Втора Красотата на NAVT - е, че тя ви помага да въведете новия си меню във вашата тема, чрез известния JQuery базирана логика, но без да е необходимо да се промени всеки код! NAVT ви позволява да се конкретизират: "замени" този елемент с новия ми NAVT меню ". # Елемент може да бъде лична карта или класа на пътя на съществуващата меню или тагове DIV елемент, който се генерира от вашата тема. Така че NAVT тази замяна за вас, без да се налага да отиде в темата код и да е по-разхвърлян, отколкото тя вече е. Ако това всички звуци като безсмислици - не се притеснявай - аз ще ви напътства стъпка по стъпка скоро. Предизвикателните част на NAVT, за всички е, че ще трябва да излезе с действителната CSS + изображения + JavaScript код за вашата себе си меню. И това е до вас да разбера къде и как да се интегрират тези файлове и да направи тези неща правилно се свързани помежду си.
С уважение, без да знае на JQuery + някои PHP + CSS + с приличен опит с WordPress - това нещо е трудно да тегли.
С удоволствие Знам, че тези неща малко, затова реших да захапе куршум и човечеството ръководство за свобода в изграждането на най-доброто от най-добрите навигационни менюта за WordPress. Просто трябваше да намерят източници за някои добре изглеждащ хоризонтални менюта на CSS. Вдигнах Dynamic Drive сайт за най-добрите селекции, показни и източници.

Посветих ден, за да учат теза и да се играе с плъгин NAVT. В края гордо създаден обичай, гъвкави, SEO оптимизиран, многостепенно, вложени структура nagivation за моя WordPress + дипломна работа сайт.

Списък на характеристики на многостепенно, вложени меню за дипломна работа Тема
(Трябва да обичаме тези неща):

  • Professional, чист вид и усещане.
  • Подкрепа за всички модерни браузъри, включително MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome и в двете JavaScript и без JavaScript режими.
  • Грациозно downgradable JavaScript браузъри. Можете меню ще бъде използваем, визуално сходни и дори за инвалиди браузъри JavaScript (макар и само най-високо ниво за навигация, ще бъдат видими и никакви flyouts ще се случи, разбира се, тъй като те са направени от Javascript).
  • SEO приятелски функции - неподреден списък меню код се генерира в HTML. Google и други търсачки паяци ще бъде в състояние да индексират навигация структура и да намерят линкове към вътрешни страници.
  • Подкрепа за неограничен брой гнездящи нива и поднива.
  • Подкрепа за всяка поръчка или страници, мнения (чрез потребител, определен URI адреси), категории, потребители, потребителски блокове код и външни връзки в менюто.
  • Подкрепа на текст, както и изображения меню елементи. (Аз все още трябва да се опитаме те обаче).
  • Структура на менюто и съдържанието е визуално се настройва чрез администратор NAVT площ.
  • Компактен: на JQuery базирани flyouts за вложена нива.
  • Бързо: JQuery на менюто се зарежда от сървърите на Google (Бих искал Теза себе си, за да направят същото, вместо да го издърпате на местно ниво). Това ще ускори нещата малко.
  • Скалируемост - Този вид меню може да се редактира и, конфигурируеми по всяко време чрез плъгин настройки NAVT без да е необходимо на кодиране навсякъде.

Аз използвах този отличен меню от Dynamic Drive портал като база. Имах да персонализирате JavaScript код и да е малко, както и включва парчетата PHP в custom_functions.php, за да я накара да работи с тезата. Също така броят на вече съществуващи страници, категории и мнения от моя сайт, са били използвани, за да се съберат структурата на менюто. Спецификата на вашия сайт ще бъде различен, но концепции ще бъдат същите.
Така че нека се процедира, а?

Стъпка по стъпка инструкции, за да настроите NAVT -вложен, персонализация, многостепенно, SEO приятелски
и просто изглеждат страхотно и тема на дипломна работа

  1. Отидете към админ панела на WordPress. Plugins-> Добавяне на нова търсене за "navt". В плъгин ще бъде показана. Щракнете [Install] [Инсталирай сега], "Активиране на приставката".
  2. Инструменти-> NAVT списъци, вътре "Навигация Груп" намерите "група на име" и въведете: "menu1" в областта, натиснете [Създай] бутона. "Menu1" правоъгълник площ се е създал.
    Тази "menu1", ще бъде основната площадка за изграждане на меню. Вие ще бъдете плъзгане и пускане тук менюто си елементи.
  3. В район "активи" да намери "други" падащ списък и кликнете върху "Начало" избор. Thingie "Home" ще се появи в рамките на "Неопределен" зона. Странно, нали? Не се тревожете, докато работи - и ще ни.
  4. Плъзнете това "Home" thingie от площ "активи" в район правоъгълник "menu1",. Той ще стане точка "Начало" в менюто.
    • Повторете стъпки 3-4 за някои страници от "страници" зона, както и за категории в район "категории". Плъзнете всички други елементи, които искат да са в менюто си вътре правоъгълник "menu1". Можете да кликнете върху страници, категории, потребителите и някои потребителски елементи, като например "списък разделител" и "групово код". Кодовия блок е готин начин да добавите потребителски откъси вътре в менюто.
    • Можете да плъзнете елементи от менюто отвътре "menu1", за да пренаредите техния ред.
    • Можете да регулирате положението в йерархията на всеки елемент от менюто с "<" и ">" стрели.
    • Кликвайки върху текста името на всеки елемент от менюто - отваря ума стряскам допълнително диалоговия персонализиране за тази позиция. Аз най-вече използва по подразбиране, но технически можете да отидете луд и започнете да печелите на изображения, избор на меню и добавете парчета на HTML код в нея. Продължете с повишено внимание.
    • За linkless unclikable подменюта, които ще служат като "родители" за други "деца" Използвах "Кодекс блок" тип. Например, когато персонализирането на точка код блок влязоха за "псевдоним менюто" = "MemberWing е" и за "Въведете код блок:" = "<a MemberWing href='#'> за </ A>". Href = "#" ще направи не кликване, но действа като валиден избор на меню "майка".
  5. Ето как ми NAVT "menu1 строителство структура изглеждаше почти завършена:
    navt_building_icon
  6. Завършете първоначалната сграда и след това кликнете върху "предавка" иконата, за да персонализирате своя структурата на менюто:
    navt_customize_menu
  7. Тя ще отворите диалоговия с 4 раздела: Опции на дисплея, CSS, Тема.
    1. Отидете в раздела "Опции" и се уверете, че всичко, което не е маркирано и "група на име" казва: "menu1"
    2. "Дисплей" в раздела и се уверете, че всичко в "Шоуто на група навигация на ..." област се проверяват [X]. Оставете останалата част по подразбиране.
    3. Отидете в раздела "CSS" и изберете радио бутона (х) "Не се прилага на 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 - тъмна палитра

Мисля, че е доста хубаво. Има много по-навигационни проби, които са на разположение на Dynamic Drive - всички те са възможни, за да персонализирате за дипломна работа и по други теми на WordPress с известно усилие:

Dynamic Drive Horizontal Menus

Dynamic Drive Хоризонталните менюта

Надявам се, че ще намерите този урок изгодно и полезно. Както вече казах, че е възможно да персонализирате всеки от тези менюта за дипломна работа - това се дава време и желание, за да се случи.

Бих могъл да направя тази работа за вас, въз основа на договор. Просто изберете менюто, което желаете, свържете се с мен и аз ще работят по кода и инструкции за вашия уеб сайт.

$ 20

И разбира се, ако сте за изграждането на супер SEO оптимизиран премия WordPress членство портал - най-доброто решение за това:
Дипломна работа Тема + MemberWing на плъгин членство + самостоятелно хоствана WordPress , разбира се.

comments } { 15 Коментари }

Premium Post 3

5 юли, 2009

Това е свободен закачка за премия след 3. Тази статия съдържа комбиниран съдържание: Първата част е видима членовете на златото, цялата статия е видим само за членовете на Платинум. Опитайте се да влезете като член първи на злато (потребителско име / парола = злато / злато) - ще видите повече съдържание. ... И след това излизане и повторно влизане като платина [...]

Прочетете цялата статия →

Premium Post 2

5 юли, 2009

Това е свободен закачка премия за пост 2. Останалото е видима за злато и само за членове. Съвет - злато на държава-име / парола = злато / злато ......

{{{Злато платина}}}
Останалата част на тази статия е достъпна само за премии.
Влез или да се абонирате

Прочетете цялата статия →

На Premium Мнение 1

5 юли, 2009

Това е Демо статия за MemberWing-X. С MemberWing-X, тази статия е за закупуване на една цена от $ 2,95, или като се абонирате за "Златен членство". Така че, това е закачка за пост премия 1. Останалата част от тази статия е видима само за членове, които са го закупили за $ 2,95 или се абонирали за "Златен [...]

Прочетете цялата статия →

Тема на дипломна работа и MemberWing Членство сайта плъгин за най-добрите оптимизация членството в сайтове

5 юли, 2009

MemberWing е плъгин WordPress членство, сайт, проектиран специално за портали на SEO оптимизирани за членство. С него е на гъвкави сменяеми тийзъри, подкрепа Google Първо кликнете свободен стандарт, цифрово съдържание и защита изтегляне, упълномощено с PromoFusion - гарантира членството си сайт бързо индексиране и по-високи класацията. Докато другите членство сайт софтуери обича да забраните напълно достъп [...]

Прочетете цялата статия →