Меню

Уроци

Влез Излез

Blog menu active state при четене на blogpost

Случвало ли ви се е когато четете blogpost на някой сайт, самият линк „Blog“ от навигацията да няма active state?

На мене ми се е случвало много пъти.

За да разберем по каква причина се случва това и как да го избегнем при теми, които самите ние пишем е добре да имаме малко повече познания на класовете, които WordPress назначава към линковете в менютата.

Менютата в WordPress не са нищо ново – има ги от повече от 5 години и за първи път бяха представени в WordPress 3.0. Аз лично имам късмета, че съм почнал да се занимавам с WordPress има-няма 2 седмици след излизането на версия 3.0 и не съм се сблъсквал с проблемите по създаване на навигация без да използваш wp_nav_menu(), но съм чувал за тях.

В WordPress до версия 2.9 (включително) основно се е използвала функцията wp_list_pages() за създаване на навигации. По тази причина и за да не се счупят тогавашните теми, от WordPress са решили да запазят доколкото могат класовете, които са били използвани преди.

Някои от тях включват:

  • current_page_item
  • current_page_parent
  • current_page_ancestor

Като цяло се познават по това, че използват „_“ за разделяне на думите от класа.

Тъй като wp_nav_menu() предлага нова функционалност е нормално да има и нови класове, както и тези същите старите освен да ги повтаря, да ги представи и по свой си начин.

Така че използвайки wp_nav_menu() ще видите гореописаните класове, както и алтернативите им:

  • current-menu-item
  • current-page-parent
  • current-menu-parent
  • current-page-ancestor
  • current-menu-ancestor

Както виждате тук първо минаваме на „-“ вместо „_“, освен това имаме и две версии – една с „page“ (ако реално сме на страница) и една с „menu“.

Това, което налага добавянето на „menu“ версиите на линковете е едно друго голямо обновление от WordPress 3.0 (освен менюта), а именно custom post types.

Тъй като е възможно линкът да не е точно страница, освен „page“ (което всъщност е просто slug-а на пост типа – може да е нещо друго) имаме и „menu“, което можем да използваме общо за всякакви custom post type-ове, вместо да стилваме само по „page“ и накрая, ако в навигацията се добави друго да останем в пръст в уста.

Една от основните разлики е, че макар и старите класове (current_page_item например) да са още налични, логиката с която се добавят те и новите класове се различава. Така е възможно един линк да има клас current_page_ancestor, но не и current-menu-ancestor и обратното.

Това идва от факта, че старите класове са базирани чисто на йерархията на страниците според техни родителски релации (които се задават при редактирането на самата страница).

Новите класове, обаче, са базирани чисто на йерархията на самото меню. Така че, ако имаме страница „Contact“, която няма родител, но в менюто сме я добавили под „About“, то втората няма да има клас current_page_parent в менюто, но ще има клас current-menu-parent.

Тъй като повечето теми разчитат само и единствено на класа current-menu-ancestor за да добавят active state на линковете, когато четем някой blogpost, дори и да има „Blog“ линк в навигацията – той няма клас current-menu-ancestor, тъй като blogpost link-а, не е добавен в менюто.

Въпреки това, ако си направите труда да разгледате какви класове всъщност има „Blog“ линка, ще видите, че current_page_parent е наличен.

Така че всичко, което трябва да направите, за да се уверите, че темата ви правилно ще показва active state за blog линка от навигацията, при четене на даден blogpost е просто да добавяте по два селектора, така че това:

.current-menu-ancestor { /* active state style */ }

да стане на:

.current-menu-ancestor,
.current_page_parent { /* active state style */ }

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

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

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