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

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

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

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

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

wp_list_pages()

В WordPress до версия 2.9 основно се е използвала функцията wp_list_pages() за създаване на навигации. За backwards compatibility WordPress са решили да запазят старите класовете.

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

  • current_page_item
  • current_page_parent
  • current_page_ancestor

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

wp_nav_menu()

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 на post type-а. При публикации от друг тип, класовете са базирани на неговия 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 */ }

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

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

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните ви за коментари.