Тема дисертації - багаторівневі, вкладені, SEO дружніх меню - навчальний посібник

Тема дисертації Підручник - додав багаторівневі, вкладені, SEO дружніх меню навігації для Wordpress

по Джесман по 8 липня 2009

У пошуках ідеального меню ...

Це частина 1 підручника
Частина 2 цієї довідки вчить, як будувати вертикальні меню + темної кольорової палітри для горизонтальної 1

Я вирішив отримати , тема дисертації , тому що один з моїх клієнтів, повідомив мені про проблеми сумісності між Дисертація і моє членство на сайті WordPress плагін MemberWing. Я встановив її, а потім вирішили ближче поглянути на дисертації і дійсно набридло дивитися відео на титульній сторінці основного сайту Дисертація - Diythemes.com .
Що мене вразило найбільше увагу до деталей, зручність для користувача і, перш за все - SEO функції, які так думали.
MemberWing членства плагін був розроблений "з нуля" на членство сайти, які необхідно тягнути стільки соку SEO наскільки це можливо. Так я заплатив багато уваги безліч поліпшень і SEO досконалості в MemberWing. Багато хто з моїх власних клієнтів просять про різної тематики для використання та за теми, яка була так добре, SEO оптимізований з глибини буде відмінно підходить для членства портал підприємців.

Об'єднуючи SEO повноваження MemberWing з SEO повноваження дасть краще ранжування можливостей своїх клієнтів. Так що я отримав дисертацію, грав з ним протягом дня.

Це відмінна тема в усіх відношеннях. Навігація її частину, хоча трохи обмежені у функцію. Починаючи з Дисертація 1,5 + це один рівень меню тільки. Моя звичайна бажання, щоб мати можливість налаштувати навігацію стільки, скільки необхідно. Деякі сайти мають лише кілька сторінок, багато інших тонн статичних сторінок + мільярд статей / повідомлень + безліч категорій.
Таким чином, в ідеальному світі, мають можливість створити приємні для ока ієрархічно організованою зручної навігації по меню є обов'язковим. Дисертація з місця в кар'єр має гарний навігації, але я помітив, що всі Дисертація-сайти шукають, як близнюки. Налаштування Дисертація навігації меню не дуже легко, тому багато людей просто залишити все як є. Існує жодним чином не змінити порядок категорій в меню або розмістити їх між сторінок. І знову ж таки, можливість створювати вкладені структури меню відсутнє. Тому я вирішив подивитися, що можна зробити про нього.
Після спроби приблизно півтора десятка меню / навігації пов'язаних плагіни можу встановити свій вибір на Wordpress Навігація Список плагіном .
NAVT плагін в основному невпорядкований список генератор з супер фантазії і трохи важкодоступних цифра нетрадиційних інтерфейс адміністратора. Що вводити в оману щодо його є те, що насправді не створювати модні перспективних меню самостійно. Це найважча частина роботи, хоча - дає вам можливість візуально зблизити і створення маркованого списку - скелет меню-к-бути. І ви можете створювати безліч меню теж. Ви можете витягти все ж роді Wordpress в навігації меню сторінки, повідомлення, статті, категорії користувачів, код блоків, зовнішніх посилань, роздільники, сепаратори і комбінувати і гнізда й організувати та налаштувати їх у будь-деревоподібної структури ви хочу.
NAVT генерує для вас привело HTML невпорядкований список. Другий красу NAVT тому, що вона допоможе вам вставити нове меню, у вашій темі за допомогою відомих JQuery засновані логіки, але без потреби змінювати код! NAVT дозволяє вказати: "замінити # елемент з моїм новим меню NAVT". # Елемент може бути ідентифікатор або клас шляху існуючих меню або елемент Div тег, який в даний час за рахунок вашої поточній темі. Так NAVT це заміна для вас, не змушуючи вас йти в тему код і зробити його більш брудний, ніж вона вже є. Якщо це все звучить як марення - не хвилюйтеся - я вас крок за кроком найближчим часом. Трудомісткою частиною NAVT для всіх є те, що вам доведеться вийти з фактичної + CSS зображення + JavaScript код для вашого меню самостійно. І це до вас, щоб з'ясувати, де і як інтегрувати ці файли і робити ці речі належним чином отримати з'єднані разом.
З повагою, не знаючи, JQuery + деякі PHP + CSS +, що гідний досвід роботи з Wordpress - це річ важко тягнути.
Із задоволенням я знаю, що це речі трохи і тому я вирішив зібраним зуби і керівництво людства на свободу у створенні кращих з кращих навігаційних меню для Wordpress. Я просто необхідно з'ясувати джерела для деяких приємні для ока горизонтального меню CSS. Я взяв диск динамічний сайт за кращий вибір, демонстрації та джерел.

Я присвятив день дослідження Дисертація і грати з Плагіни. Зрештою, я з гордістю створені користувальницькі, гнучкий, SEO оптимізований, багаторівневі, вкладені навігаційної структури для моєї Wordpress + Дисертація заснована сайту.

Список особливостей багаторівневі, вкладені навігації меню для Wordpress
тебе дуже люблю цей матеріал):

  • Фахівців, чистий вид.
  • Підтримка всіх сучасних браузерах, включаючи 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 без необхідності кодування скрізь.

Я використав це чудове меню з динамічних дисків портал в якості бази. Я повинен був налаштувати JavaScript код біт, а також включити шматок PHP в custom_functions.php, щоб він працював з дисертація. Крім того, кількість вже існуючих сторінок, категорій і посад з мого сайту були використані для побудови структуру меню. Ваш сайт специфіки будуть відрізнятися - але концепцій буде те ж саме.
Так давайте діяти, ми повинні?

Крок за кроком інструкції для установки NAVT основі вкладених, що настроюються, багаторівневі, SEO дружніх
і просто здорово перспективних меню навігації для Wordpress і Дисертація тема

  1. Перейти до панелі адміністратора Wordpress. Модулі-> Додати новий, пошук "NAVT". Плагін буде показано на малюнку. Натисніть кнопку [Install], [Встановити], "Активувати плагін".
  2. Сервіс-> Списки NAVT, Inside "Навігація групи" область пошуку "назва групи" і введіть: "menu1" в полі, натисніть клавішу [Створити] кнопку. "Menu1" прямокутник області отримали створений.
    Це "menu1" будуть основним меню майданчик для будівництва. Ви будете перетягнути сюди Вашу елементів меню.
  3. У "активи", площа знайти "інші" випадаючого списку та натисніть на "Домашній" вибір. "Домашній" штучка з'явиться всередині "непризначений" області. Weird, а? Не турбуйтеся, якщо він працює - і це буде для нас.
  4. Перетягніть цей "Дім" штучка від "активи" в області "menu1" прямокутник області. Він стане "Дом" в меню пункт.
    • Повторіть кроки 3-4 для деяких сторінок з "сторінки" області, а також для категорій "категорії" області. Перетягніть всі інші питання, ви хочете бути на вашому меню всередині "menu1" прямокутника. Ви можете натиснути на сторінки, категорії користувачів, а деякі користувальницькі елементи, такі як "список роздільник" і "блок коду". Кодекс блок хороший спосіб, щоб додати користувальницькі фрагменти всередині меню.
    • Ви можете перетягнути мене всередині "menu1" області, щоб змінити порядок їхнього замовлення.
    • Ви можете налаштувати ієрархічне положення кожного пункту меню за допомогою "<" і ">" стрілками.
    • При натисканні на назву тексту кожного пункту меню - відкриває неймовірна додаткових діалогових налаштування для цього елемента. Я в основному використовується за умовчанням, але технічно можна зійти з розуму і почати заробляти на основі образу вибір меню і додати шматки коду HTML в неї. Приступити з обережністю, однако.
    • Для linkless unclikable підменю, який буде служити "батьки" для інших "на південь від дітей" Я "Код блоку" типу. Наприклад, при налаштуванні такий пункт блок коду, який я вступив до "Пункт меню псевдонім" = "MemberWing" і "Код блоку:" = "<a href='#'> MemberWing </>". Після HREF = "#" зробить його не активується, але які виступають в якості дійсного "батько" в меню вибору.
  5. Ось як menu1 "мій NAVT 'побудувати структуру дивився, як майже завершена:
    navt_building_icon
  6. Готово початкового будівлі, а потім натисніть на кнопку "передача" значок, щоб налаштувати структуру меню:
    navt_customize_menu
  7. Це буде відкритий діалог з 4 вкладки: Параметри дисплея, CSS, тема.
    1. Перейти до вкладці "Опції" і переконайтеся, що всі, знятий, а "назва групи" каже: "menu1"
    2. Перейти на вкладку "Відображення" і переконайтеся, що всі на "групу навігації Показати на ..." області перевірила [х]. Залишайте решта за замовчуванням.
    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 оптимізовано склад Premium WordPress портал - найкраще рішення для цього:
Тема дисертації + MemberWing складу плагіна + самостійно приймала Wordpress звичайно.

Залишити коментар

Попередня посада:

Наступне повідомлення: