Меню

Видео уроци

Влез Излез

Първи стъпки в WordPress – Навигационни Менюта

Навигационните менюта в WordPress ни позволяват да добавяме връзки на сайта си, с които да улесним посетителите и ги насочим към основното съдържание, което предлагаме. В този урок ще разгледаме няколко основни действия като например:

  • създаване на ново меню

  • добавяне на връзки към страници, категории, потребителски връзки и др

  • редактиране на настройките на отделните връзки

  • вместване на менюто в регистрирана от темата локация

  • добавяне на менюто като джаджа в някоя от страничните ленти на сайта

За да можем да създадем ново меню първо трябва от администраторския панел на WordPress да отворим

Външен вид -> Менюта. Ако до момента сте следвали всички уроци и имате локална инстанция със същото име, можете да последвате директно този линк: http://localhost/test/wp-admin/nav-menus.php?action=edit.

Външен Вид -> Менюта

От там добавете заглавие на менюто и кликнете на бутона „Създаване на меню“, за да го запишете. След това вече сте готови да добавяме линкове към менюто.

В ляво ще видите кутии с готови предложения за връзки, които да добавите. Първата кутия би трябвало да е „Страници“, която ви показва последно добавените такива на сайта ви. От таба „Всички“ можете да видите и останалите, а ако са прекалено много, можете да използвате „Търсене“ за по-лесно намиране на елемент от списъка.

Освен „Страници“ в ляво ще видите и кутия „Потребителски връзки“. Думата „потребителски“ е приета за стандартна при превеждането на думата „custom“ за WordPress на български.

Забележка: възможно е освен „потребителски“ да срещнете превод на „custom“ и като „собствен“.

Тези „потребителски връзки“ всъщност ви позволяват да добавяте линкове към външни сайтове. Ако искате в менюто да добавите връзка към страница от вашия сайт можете да използвате „потребителски връзки“ и да добавите какъвто URL и текст на връзката искате. По-лесно е, обаче, и препоръчително да използвате съответния елемент от кутията „страници“. Препоръчва се в случай, че след време се наложи да смените адреса на сайта си.

Ако искате, обаче, да добавите връзка към страница за дарения през PayPal, която имате (примерно), ще трябва да добавите тази връзка като custom такава, тъй като тя не е налична вътре във вашия сайт.

След като сме добавили желаните линкове в менюто си, кликнете „запис на менюто“.

Освен кутиите за връзки към страници или потребителски връзки, WordPress предоставя и още няколко предефинирани опции. За да ги видите кликнете на „Настройки на изгледа“ от горния десен ъгъл на администраторския панел, докато сте на страницата с менютата.

Настройки на изгледа

От същото място можете да редактирате и „Показване на допълнителните настройки за менюто„. Тези опции показват допълнителни полета при редактиране на определена връзка от менюто. Основно се използват за някои от атрибутите на линковете.

Можете да си припомните и урока Първи стъпки в HTML – някои основни тагове за повече информация по някои от атрибутите, на които <a> таговете (които се използват за връзките) разчитат.

Първата опция е за цел на връзката. Това ви позволява да зададете дали към връзката да се добави target="_blank", така че да се отваря в нов таб/прозорец на браузъра.

Втората е за title атрибут, още наречена „подсказка“. Ако не сте запознати с title атрибутите ви съветвам да си припомните следния от по-старите уроци: Първи стъпки в HTML – атрибути.

След това продължаваме с CSS класове, които можете ръчно да добавите към всеки линк, rel атрибут (който до момента не сме разглеждали в никой урок от блога) и описание, което по принцип не се визуализира, но някои теми биха могли да го използват.

Когато сте готови и с тези настройки, запишете менюто отново. В този момент вече идва частта, в която трябва да добавим менюто някъде на сайта. WordPress дава възможност на темите да обозначат определени места в кода, където може да се вмъкне подобно меню. Под списъка с връзките, които сте добавили в менюто си ще видите заглавие „Настройки на менюто“, където можете да видите и „Разположения в темата“. Това е списък с въпросните места от кода, където може менюто да се визуализира. Макар на теория темите да не са длъжни да добавят подобни локации, всяка тема, която съм срещал на практика има поне едно място за навигация.

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

Над този списък с разположения за менюта, които темата предлага ще видите и опция автоматично да добавяте към менюто нови страници от ниво 1. Това е удобно, когато още работите по нов сайт и очаквате да добавяте нови страници по него. Така не ви се налага да редактирате менюто и да включвате в него всяка нова страница, която създавате. Също така това ви предпазва, ако просто забравите да вмъкнете новия линк към менюто си.

Най-горе в страницата с менютата ще забележите и един нов таб – „Управление на разположенията“. Докато редактирате конкретно меню имате възможност да го вмъкнете в едно или повече места за менюта. От тази страница можете да направите връзката в обратен ред. Там ще видите списък с всички места за меню и за всяко от тях можете да изберете кое от всички менюто да назначите.

Последното, което остава да кажем за менютата е, че ако случайно в темата ни няма регистрирано място за меню, ние пак бихме могли да ги вмъкнем, ако има поддръжка поне за джаджи. В предния урок за джаджите говорихме, че има такава наречена „Собствено Меню“. Сега след като вече сме създали едно примерно, можем да добавим джаджа от този тип и да изберем тази джаджа да показна нашето новосъздадено меню.

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax