CSS pro kategorii v single-post.php

Úvodní stránka Fórum podpory WordPressu Šablony, CSS (zobrazení webu) CSS pro kategorii v single-post.php

Zvolené téma obsahuje celkem 12 odpovědí. Do diskuze (3 účastníci) se naposledy zapojil uživatel  kidnec a poslední změna je stará 9 let, 10 měsíců.

Aktuálně je na stránce zobrazeno 13 příspěvků - 1. až 13. (z celkem 13)
  • Autor
    Příspěvky
  • #20227

    kidnec
    Participant
    Web

    Zdravím a prosím o radu při tvorbě šablony.
    Mám generované menu pomocí funkce wp_list_categories.
    Pokud jsem na zobrazení kategorie, mohu list současné kategorie stylovat pomocí třídy current-cat. Jelikož se list vygeneruje takto:

    <li class="cat-item cat-item-135 current-cat"><a href="#" >Text</a></li>
    <li class="cat-item cat-item-6"><a href="#" >Text2</a></li>

    Ale pokud jsem na zobrazení příspěvku, ¨seznam se vygeneruje bez třídy, která by označovala, v jaké kategorii příspěvek je.
    Jediné co mě napadlo, vytáhnout id kategorií příspěvku, a poté v hlavičce s pomocí php vytvořit styl cat-item-<?php..>

    #20228

    sjiamnocna
    Participant
    Web

    Protože používáte wp_list_categories, nevidím možnost, jak toto provést, mimo to, co jste psal (vlastní styl podle ID)

    Můžete zkusit tento dotaz:
    http://wordpress.stackexchange.com/questions/104657/how-to-add-dynamic-inline-style, podle něj už potom asi dokážete přijít na způsob, jak do kódu zapojit ID

    pokud existuje jiná možnost, nevím o ní, a čeká to na někoho jiného ;)

    #20264

    kidnec
    Participant
    Web

    Začínáte slovem “Protože”, chcete tedy říct, že kdybych použil jinou funkci, měl bych problém vyřešen ?

    #20266

    sjiamnocna
    Participant
    Web

    Možná jsem slovo “protože” přehnal, ale dneska se používají funkce wp_list_[categories|pages…] pouze v dobře míněných případech, popř. starších šablonách, jinak je tady nový systém pro menu wp_nav_menu, kde si můžete přidat co chcete v menu zobrazit. Tato funkce by se možná dala i nějak více odfiltrovat, a tím zajistit zvýraznění. Nikdy jsem takové zvýrazňování neřešil, takže praktičnost asi moc neposoudím.

    Jinak by se teoreticky dala filtrovat i funkce wp_list_categories, ale u té nevám, jak ji máte zařízenou v šabloně. :)

    #20268

    kidnec
    Participant
    Web

    diky, kouknu na fc wp nav menu

    #20307

    kidnec
    Participant
    Web

    Tak jsem nakonec ponechal funkci, kterou jsem používal já, wp nav menu jsem pochopil jako funkční spíše pro menu, do kterých odkazy vložím v administraci, ale já využívám pouze menu z kategorií, což jak jsem googlil je ideální.

    ALE NOVÝ PROBLÉM:
    ve výsledku jsem si vytvořil extra field (options) s výběrem barev. Každá kategorie si přidá položku, kde klíč je ID kategorie a obsah položky je anglicky název barvy.

    Po uložení teoreticky potrebuju vložit do hlavičky css, které mi přidá vlastnost (border-color:+barva+) pro třídu “.current-cat” Kód mám takto, však nedokážu vytáhnout IDkategorie do hlavičky.

    Kód prozatím vypadá takto:

    add_action('wp_head','hook_css');
    function hook_css()
    {
    $ccl = get_option( 'category_color_label' );
    $color_to_use = $ccl[------ID KATEGORIE------];
    $output="<style>
     li.current_cat a{border-color:".$color_to_use.";}
     </style>";
    echo $output;
    }

    Prosím o radu jak zjistit ID kategorie. Děkuji

    #20313

    kidnec
    Participant
    Web

    Tak jsem problém v podstatě vyřešil až na t, že se mi CSS neaplikuje správě, Kód mám takto:

    add_action('wp_head','hook_css');
    function hook_css(){
    
    if ( is_category()) {
    $ccl = get_option( 'category_color_label' );
    
    $ccl_cat_obj = get_the_category();
    $color_to_use = $ccl[$ccl_cat_obj[0] -> term_id];
    
    $output="<style>
     li.current_cat a{color:".$color_to_use.";}
     </style>";
    echo $output;}
    }

    Do hlavičky i to vypíše toto,:

    <style>
     li.current_cat a{border-color:LightBlue;}
     </style>
    #20316

    sjiamnocna
    Participant
    Web

    Asi na toto nejsem specializován :D , ale možná by pomohlo vytáhnout z wp_query id příspěvku, a poté získat její kategorie a třeba první kategorii použít pro styl…

    bohužel, nejsem doma, a nerad bych vás mátl, takže kód nepřidám. Teoreticky jde o to, získat parametry wp_query a vytáhnout z ní id aktuálního příspěvku. Potom už snadno získáte kategorie. Nic z toho jsem ještě nezkoušel :)

    #20317

    kidnec
    Participant
    Web

    Cítím se jako spamer, vždy postnu téma o nečem co nevim a pak to teprve řeším déle jak 10 minut. Dopracoval jsem se k výsledku, kód funkce vypadá takto, a dělá efekt rozdílných barev při najetí na odkaz a v zobrazení kategorie to podtržení nechá (http://www.utfg.info/).

    add_action('wp_head','hook_css');
    function hook_css(){
    $ccl = get_option( 'category_color_label' );
    
    echo "<style>";
    
    foreach ($ccl as $key => $value){
    echo "nav.hlavni ul li.cat-item-$key a:hover{border-color:".$value.";}";
    }
    
    if ( is_category()) {
    $ccl_cat_obj = get_the_category();
    $ccl_cat_ID = $ccl_cat_obj[0] -> term_id;
    $color_to_use = $ccl[$ccl_cat_ID];
    echo "nav.hlavni ul li.current-cat a{border-color:".$color_to_use.";}";
    }
    
    echo "</style>";
    }
    #20322

    admin
    Keymaster
    Web

    Na tento dotaz jsem si musel vyšetřit trochu času, protože to nevím všechno z hlavy a je potřeba si to vyzkoušet :-) Ani “spamování” nevadí, naopak je zajímavé sledovat postupný vývoj… Ale zpět k problému…

    Pokud použijete funkci wp_list_categories(), tak se třída current-cat opravdu zobrazuje pouze pokud jste na jejím výpisu (aneb archiv konkrétní rubriky). Pokud už zobrazíte nějaký příspěvek z této rubriky, tak bude rubrika bez této třídy.

    V tomto případě může pomoci vlastní menu a zmiňovaná funkce wp_menu_nav(), protože to tam funguje trochu lépe. Další výhodou je, že si tam můžete rubriky vlastnoručně uspořádat (nebo přímo uživatel). Pokud jste na výpisu rubriky, tak je tam přiřazena třída current-menu-item. Ale pokud rozkliknete nějaký příspěvek z této rubriky (a ten příspěvek nemusí být přímo uložený v menu), tak se u této rubriky objeví hned další tři třídy: current-post-ancestor, current-menu-parent a current-post-parent. Můžete je tak snadno použít ke stylování, doporučuji projít detailně manuál

    Pokračování později…

    #20330

    admin
    Keymaster
    Web

    Jinak výše uvedený kód mi přijde zbytečně složitý… Nestačilo by pouze nastylovat několik používaných rubrik pomocí jejich ID? Např. rubrika “Mobily / Tablety” má ID 221, takže můžete použít automaticky generovanou třídu cat-item-221 a nastylovat ji barvou, kterou potřebujete? Nebo chcete mít možnost nastavení barev pro uživatele přímo v administraci?

    #20343

    kidnec
    Participant
    Web

    Je pozdě a nemůžu najít jak do wp_menu_nav() nahodit výpis kategorií, jdu spát ;)

    #20355

    kidnec
    Participant
    Web

    Takže konečný výsledek, nakonec jsem stejně ponechal mnou použitou funkci, jelikož se mi to nechtělo překopávat:¨

    add_action('wp_head','hook_css');
    function hook_css(){
    $ccl = get_option( 'category_color_label' );
    $ccl_cat_obj = get_the_category();
    
    $ccl_cat_ID = $ccl_cat_obj[0] -> term_id;
    $color_to_use = $ccl[$ccl_cat_ID];
    
    echo "<style>";
    foreach ($ccl as $key => $value){
    echo "li.cat-item-$key a:hover{border-color:$value;}";//nav.hlavni ul 
    }
    
    echo "li.current-cat a{border-color:$color_to_use;}";
    
    if(is_home()){
    echo "body{box-shadow:black 0px 0px 500px;}";
    }else {
    echo "li.cat-item.cat-item-$ccl_cat_ID a{
    border-color:$color_to_use;
    border-style:solid;
    }";
    
    echo "body{box-shadow:$color_to_use 0px 0px 500px;}";
    }
    echo "</style>";
    }

    jinak veškerý problém ve výsledku byl v CSS, kdy jsem neměl nastavený border style, proto se mi vzhledy neaplikovali (celkově je kód pouze o úpravě okrajů)…. ale stejně děkuji za odpovědi a reakce, pokud to lze, označil bych vlákno jako VYŘEŠENÉ

Aktuálně je na stránce zobrazeno 13 příspěvků - 1. až 13. (z celkem 13)

Pokud chcete odpovědět na toto téma, musíte se nejdříve přihlásit.