В търсене на перфектната меню ...
Това е част 1 на урока
Част 2 на този урок се учи как да се изгради вертикално меню + тъмна цветова палитра за хоризонталната
Реших да се Дипломна работа тема , защото един от моите клиенти ме информира за проблеми със съвместимостта между дипломна работа и ми плъгин MemberWing сайт на WordPress членство . Фиксирани и след това реши да погледнем по-отблизо в Thesis и всъщност труда да гледате видеоклипове, на първа страница на основната теза сайт - Diythemes.com .
Това, което ме впечатли най-много внимание към детайла, лесен за употреба и най-вече - SEO характеристики, които са така добре обмислени.
MemberWing членство плъгин е проектиран от самото начало на членството в сайтове, които ще трябва да изтегли колкото се може повече, SEO сок е възможно. Така че плащат много внимание на множество SEO подобрения и съвършенства в MemberWing. Много от моите собствени клиенти питат за различни теми, които да се използват и като тема, която беше толкова добре SEO оптимизиран от дълбоко вътре ще бъде отличен годни за членство портал предприемачи.
Комбинирането на правомощията на SEO на MemberWing с правомощията на тезата на тема SEO ще даде най-доброто класиране възможности за моите клиенти . Така че аз имам теза и играе с него за един ден.
Това е една отлична тема по всички начини. Навигационната част от него, въпреки че е малко ограничена функция. Започвайки от Thesis 1.5 +, е само едно ниво в меню. Обичайната ми желание е да бъде в състояние да персонализирате навигация, колкото е необходимо. Някои сайтове имат само няколко страници, много други тонове на статични страници + безброй статии / публикации + много категории.
Така че в идеален свят, има шанс да създадете добре изглеждащ йерархично организирана лесен навигационното меню е задължително. Thesis правото на разстояние бухалката е добре изглеждащ навигация, но аз забелязах, че всички Thesis-базирани уеб сайтове изглеждат като близнаци. Персонализиране Thesis навигация меню не е много лесно, така че повечето хора просто да я оставите както е. Няма начин да промените реда на категориите в менюто или да ги позиционират между страниците. И отново, способността за създаване на вложени структури меню липсва. Затова реших да се види какво може да се направи за него.
След като се опитва около половин дузина меню / навигация, свързани с плъгини, аз моя избор на Wordpress NAVT Навигация Списък Plugin.
NAVT плъгин е по същество неподреден списък генератор със супер фантазия и малко трудно да разбера нетрадиционни администратор интерфейс. Какво подвеждаща за това е, че тя всъщност не създаването на хубави изглеждащи менюта от само себе си. Това прави най-трудната част от работа, макар че ви дава възможност визуално да обединят усилията си и да генерират неподреден списък - скелет на менюто си. И може да се създаде твърде много менюта. Можете да дръпнете всички видове на Wordpress неща в менюто за навигация: страници, постове, статии, категории, потребители, код блокове, външни връзки, разделители, сепаратори и микс и мач и гнездо и подредите и да ги персонализирате, в някое дърво като структура, който искате.
NAVT генерира за вас резултат HTML неподреден списък. Втора красотата на NAVT е, че тя ви помага да поставите ново меню в вашата тема, чрез известен JQuery логика, но без да е необходимо да променяте кода! NAVT ви позволява да определите: "да замени този елемент # с новия ми NAVT меню". # Елемент може да бъде лична карта или класа на пътя на съществуващите меню или тагове DIV елемент, който се генерира от текущата ви тема. Така NAVT тази замяна за вас, без да се принуждават да отиде в темата код, и да направи по-мръсен, отколкото тя вече е. Ако това всички звучи като безсмислици - не се притеснявайте - ще ви напътства стъпка по стъпка скоро. Предизвикателната част от NAVT за всички е, че ще трябва да излезе с действителните CSS + снимки + JavaScript код за вашата себе си меню. И това е до вас, за да разбера къде и как да се интегрират тези файлове и да правят тези неща правилно получи свързани заедно.
С уважение, без да знае JQuery + някои PHP + CSS +, с приличен опит с Wordpress - това нещо е трудно да тегли.
С удоволствие Знам, че тези неща малко, затова реших да захапе куршум и ръководство на човечеството за свобода в изграждането на най-добрите от най-добрите навигационни менюта за Wordpress. Просто трябваше да намерят източници за някои добре изглеждащ хоризонтални менюта CSS. Взех диск на динамичен уеб сайт за най-добрите селекции, демонстрации и източници .
Посветен на ден, за да учат Thesis и да играе с NAVT плъгин. В края на краищата аз гордо, създаден по поръчка, гъвкави, SEO оптимизиран, нива, вложени nagivation структура за моята Wordpress + Thesis сайт.
Списък на характеристики на много нива, вложени меню Wordpress навигация за дипломна работа Тема
(You Got да обичаме тези неща):
- Професионални чист вид и усещане.
- Подкрепа за всички модерни браузъри, в това число 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome и в двете JavaScript и JavaScript режими.
- Грациозно downgradable за JavaScript браузъри. Можете меню ще бъдат използваеми, визуално сходни и дори за инвалиди браузъри JavaScript (макар и само нивото на горната част на екрана ще се вижда и не flyouts ще се случи, разбира се, тъй като те са направени от JavaScript).
- SEO приятелски функции - неподреден списък меню код, генерирани в рамките на HTML. Google и други търсачки паяци ще бъде в състояние да индексира навигационната структура и да намерите линкове към вътрешни страници.
- Подкрепа за неограничен гнездене нива и поднива.
- Подкрепа за всяка поръчка или страници, мнения (чрез дефинирани от потребителя, IRI), категории, потребители, потребителски блокове код и външни връзки в менюто.
- Подкрепа на текст, както и изображения, базирани на елементи от менюто. (Имам още да опитате тези обаче).
- Меню структурата и съдържанието е визуално се настройва чрез администратор NAVT площ.
- Компактен: JQuery flyouts за вложени нива.
- Бързо: JQuery за менюто се зарежда от сървърите на Google (Бих се радвал Thesis себе си да направят същото, вместо да го издърпате локално). Това ще ускори нещата малко.
- Скалируемост - Този вид меню се редактира и конфигуриране по всяко време чрез NAVT настройките на плъгин, без да е необходимо на кодиране навсякъде.
Аз използвах този отличен меню от Dynamic Drive портал, като база . Аз трябваше да персонализирате JavaScript код малко, както и парче на PHP в custom_functions.php да я накара да работи с дипломна работа. Също така броят на вече съществуващи страници, категории и мнения от моя сайт, са били използвани за сглобяване на структурата на менюто. Спецификата на Вашият сайт ще бъде различна - но концепции ще бъдат същите.
Така че нека се процедира?
Стъпка по стъпка инструкции за инсталацията на NAVT базирани вложени, персонализация, нива, SEO приятелски
и просто добре изглеждащи навигационно меню за Wordpress и дипломна работа Тема
- Отидете до админ панела на Wordpress. Plugins-> Add нови, търсене за "navt". В добавка, ще бъдат показани. Щракнете [Install], [Install], "Активиране Plugin".
- Tools-> NAVT списъци, Inside "Navigation Груп" площ "група на име" и въведете: "menu1" в полето, натиснете [Създай] бутона. "Menu1" площ на правоъгълник се създали.
Тази "menu1" ще бъде основната площадка за изграждане на меню. Ще бъде плъзгане и пускане тук елементите на менюто си. - В район "активи" намери "други" падащ списък и кликнете върху "Начало" избор. Thingie "Home" ще се появи във вътрешността на "unassigned" зона. Странно, нали? Не се тревожете, докато тя работи - и воля за нас.
- Плъзнете това thingie "Home" от район "активи" в "menu1" площ на правоъгълник. Той ще стане "Home" елемент в менюто.
- Повторете стъпки 3-4 за някои страници от площ "Страници", както и за категории в район "категории". Плъзнете всички други елементи, които искат да бъдат в менюто си вътре "menu1" правоъгълник. Можете да щракнете върху страници, категории, потребителите и някои потребителски елементи, като например "списък разделител" и "код на блок". Код блок е готин начин да добавите персонализирани откъси вътре в менюто.
- Може да плъзнете елементите от менюто вътре "menu1", за да пренаредите техния ред.
- Можете да коригирате положението в йерархията на всеки елемент от менюто с "<" и ">" стрели.
- Кликвайки върху текста името на всеки елемент от менюто - отваря ум стряскам допълнително диалоговия персонализиране за тази позиция. Най-вече използва по подразбиране, но технически, можете да отидете луд и да започнете да печелите на изображения, избор на меню и добавете парчета на HTML код в нея. Продължете с повишено внимание.
- За linkless unclikable подменюта, който ще служи като "родители", за други "под-деца", аз използвах тип "Код блок". Например, когато персонализиране точка блок код влязох за "псевдоним елемент от менюто" = "MemberWing" и за "Enter блок код:" = "<a MemberWing href='#'> </ A>". Като HREF = "#" ще направи не кликване, но действа като валиден меню избор "родител" .
- Ето как ми NAVT "menu1" изгради структура изглеждаше като почти завършен:
- Завършете първоначалната сграда и след това кликнете върху "съоръжения" иконата, за да персонализирате своя структурата на менюто:
- Тя ще се отвори диалогов прозорец с 4 раздела: Опции, меню, CSS, Тема.
- Отидете в раздела "Опции" и се уверете, че всичко е маркирано и "група на име" казва: "menu1"
- Върни се към раздела "Display" и се уверете, че всичко върху "Покажи навигация група на ..." област се проверяват [X]. Оставете останалата част по подразбиране.
- Отидете в раздела "CSS" и изберете радио бутона (х) "Да не се прилагат CSS класове".
- Отидете в раздела "Тема" и да го попълните така:
Поставете в "Добавяне на етикети, преди да ..." тази код:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Поставете в "Добавяне на етикети след ..." тази код:
<br style='clear: left' /></div> - Натиснете [Save / затваряне] бутона
- В тази сграда точка меню от опции в рамките на NAVT плъгин е пълен.
Сега е време да направя малко мелодия за тема на тезата, да я изработя. За това ние трябва да добавите няколко потребителски файлове - CSS и Javascript, че принадлежи към менюто и актуализация Thesis "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 - тъмна палитра
Мисля, че е доста хубаво. Има много по-навигационни проби, които са на разположение на Dynamic Drive - всички от тях са възможни, за да персонализирате за дипломна работа и други теми от Wordpress с известни усилия:
Dynamic Drive хоризонтала Менюта
Надявам се, че този урок ще намерите полезни и полезни. Както вече казах, е възможно да персонализирате всеки от тези менюта за дипломна работа - това е дадено време и желание, за да се случи.
Бих могъл да направя тази работа за вас, въз основа на договор. Просто изберете менюто, което желаете, свържете се с мен и аз ще работят по кода и инструкции за вашия уеб сайт.
$ 20
И разбира се, ако сте за изграждането на супер SEO оптимизиран премия WordPress членство портал - най-доброто решение за това:
Дипломна работа Тема + MemberWing плъгин членство + самостоятелно хоства Wordpress разбира се.
