Adăugare programatică a iconițelor Font-Awesome în Widgetul de Categorii

Question

Adăugare programatică a iconițelor Font-Awesome în Widgetul de Categorii

1 ian. 2014, 22:22:10

Vizualizări: 14.2K

Voturi: 1

Folosesc widgetul de Categorii în bara laterală și aș dori să afișez o iconiță Font Awesome lângă fiecare categorie listată în widget. Pentru moment, iconița ar fi aceeași pentru toate categoriile, dar în viitor aș dori să atribui fiecărei categorii o iconiță unică.

Doresc să modific widgetul de Categorii folosind cod în fișierul meu functions.php pentru a adăuga iconița prin inserarea de markup precum  în elementul de link/anchor al categoriei, după titlul categoriei. Aș putea realiza acest lucru prin CSS, dar aș pierde posibilitatea de a determina programmatic ce iconiță să afișez, precum și flexibilitatea pentru alte îmbunătățiri/modificări pe care le-aș putea dori în viitor.

Practic, vreau să obțin acest efect:

Cat 1          >

Cat 2          >

Cat 3          >

_{(Simbolul '>' reprezintă plasarea iconiței în raport cu titlul categoriei)}

Am încărcat Font Awesome în fișierul functions.php folosind hook-ul wp_enqueue_scripts după cum urmează, iar iconițele se încarcă și se afișează perfect. Rețineți că nu folosesc niciun plugin Font Awesome construit pentru WordPress.

/* Încărcare Scripturi
-----------------------------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'essentials_enqueue_scripts' );
function essentials_enqueue_scripts() {
    /* jQuery */
    wp_enqueue_script('jquery');
    wp_enqueue_script( 'jquery_ui', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jqueryui/2.0.3/jquery-ui.min.js", false, null);
    wp_enqueue_script( 'waypoints', get_template_directory_uri() . '/js/waypoints.min.js');
    wp_enqueue_script( 'essentials_main', get_template_directory_uri() . '/js/essentials_main.js', array(), '1.0.0', true );
    wp_enqueue_script( 'essentials_show_stuff', get_template_directory_uri() . '/js/essentials_show_stuff.js', array(), '1.0.0', true );
    /* Fonturi Google */
    wp_register_style('GoogleFonts','http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Bad+Script');
    wp_enqueue_style( 'GoogleFonts');
    /* Fonturi Font Awesome */
    wp_register_style('Font Awesome','//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
    wp_enqueue_style( 'Font Awesome'); 
}

În ciuda eforturilor mele de cercetare, nu am reușit să găsesc o soluție pentru modificarea widgetului de categorii.

MrJustin

804

funcții widgeturi filtre pictogramă

Comentarii

Te rog să clarifici întrebarea ta pentru a explica cum este specifică WordPress, mai degrabă decât doar CSS. De asemenea, te rog să editezi întrebarea pentru a include ce ai făcut/încercat până acum. Cum incluzi/încarcă fontul FontAwesome?

Chip Bennett

4 ian. 2014 16:05:42

Am adăugat o editare pentru a răspunde la întrebările tale.

MrJustin

6 ian. 2014 22:52:00

"Aceasta este specifică WordPress datorită faptului că vreau să personalizez categoriile WordPress prin fișierul FUNCTIONS.PHP" - având în vedere că soluția finală este în continuare în întregime CSS, întrebarea încă nu este specifică WordPress. Doar se întâmplă în contextul WordPress. Limitația ta de a dori o funcție care să fie introdusă în functions.php, care exclude cele mai plauzibile răspunsuri, face și această întrebare prea localizată. Poate dacă ai edita întrebarea pentru a te concentra pe cum să încarci CSS personalizat, ar fi pe subiect pentru WPSE?

Chip Bennett

6 ian. 2014 23:04:04

Din nou, nu doresc o soluție CSS. Limitația mea se extinde și în viitor pentru această nevoie. Îmi plac pictogramele, iar alții pot dori pictograme. În viitor, este posibil să creez o pagină de opțiuni pentru mine însumi pentru a adăuga pictograme SPECIFICE, nu doar o singură pictogramă. Nu am absolut nicio intenție de a folosi CSS pentru asta, nu am dorit un background-image și am complimentat pe cineva pentru folosirea :after {content}, dar din nou, nu este ceea ce doresc. Aceasta este SPECIFICĂ WordPress, știu cum să o fac în CSS și cum să o fac în HTML. Nu știam cum să o fac în WordPress prin editarea Widget-ului prin intermediul unei funcții personalizate.

MrJustin

6 ian. 2014 23:15:03

Atributul CSS content nu este o imagine de fundal, este conținut. Și o soluție CSS este cea mai bună metodă de implementare - chiar dacă doriți să expuneți opțiuni pentru utilizatorii finali. Ceea ce încerc să vă arăt este că constrângerile voastre inutile și arbitrare fac problema inutil de dificilă.

Chip Bennett

7 ian. 2014 02:53:27

Arată celelalte 11 comentarii

Toate răspunsurile la întrebare

Comentarii

Excelent fragment de cod, o să îl verific când mă întorc peste puțin timp. Voi posta rezultatele.

MrJustin

5 ian. 2014 01:36:13

doar ține minte să ajustezi numele clasei în funcție de nevoile tale ;-) Am folosit icon-caret-right pentru că aceasta este regula de denumire a claselor conform pluginului. În alte cazuri ar putea fi fa-caret-right.

birgire

5 ian. 2014 01:42:33

return str_ireplace( '</li>', '</li>', $output); a funcționat, dar return str_ireplace( '</a></li>', '</a></li>', $output); nu a funcționat.

MrJustin

5 ian. 2014 11:31:42

bine, vrei să-l adaugi în interiorul tag-ului <a></a>, atunci încearcă asta: return preg_replace( '/<\/a>\s*<\/li>/i', ' </a></li>', $output );

birgire

5 ian. 2014 14:22:45

Ok, acum m-am pierdut la partea nouă.. cum funcționează exact asta? Înțeleg ultima parte, dar nu pe prima.

MrJustin

6 ian. 2014 22:33:44

Arată celelalte 7 comentarii

Acest răspuns conține o soluție CSS destul de simplă.

În esență, ai adăuga următoarele în fișierul tău de stiluri:

.cat-item cat-item-7 {
     list-style-image: url('my-epic-news-icon');
}


cat-item cat-item-11 {
     list-style-image: url('my-epic-jquery-icon');
}

etc

Da, nu este o soluție foarte dinamică, dar presupun că categoriile tale nu se vor schimba prea des.

JMB

628

4 ian. 2014 14:49:26

Comentarii

Faptul că răspunsul este pur CSS indică faptul că întrebarea de bază este în afara temei pentru WPSE. Cu toate acestea: cred că selectorii tăi CSS nu au sintaxa corectă. Ar trebui să folosești .cat-item.cat-item-7 - sau, deoarece aceeași imagine de font icon este destinată să fie folosită pentru toate elementele listei, poți folosi pur și simplu .cat-item. De asemenea: o pictogramă de font ar folosi atributul content și ar ținti pseudo-clasa :after, cum ar fi: .cat-item:after { content: '\f18d'; }.

Chip Bennett

4 ian. 2014 16:25:33

Observații corecte. Da, am făcut o greșeală în sintaxă. Suntem siguri că OP vrea aceeași imagine, sau una diferită pe categorie? (Așa am înțeles eu). Voiam doar să propun cea mai ușoară soluție, deși asta duce întrebarea/răspunsul în afara temei.

JMB

4 ian. 2014 16:32:51

Nu este soluția pe care o căutam, deoarece am menționat că nu doream să folosesc un fundal și că aș fi vrut pictograma după text. Deși poate nu este un fundal, este totuși o imagine, și nu Font Awesome. Soluție bună, dar nu soluția potrivită pentru mine.

MrJustin

5 ian. 2014 01:35:53

Presupunând că doriți să utilizați iconița fa-chevron-right, trebuie doar să țintiți elementul de listă prin CSS. Folosiți pseudo-clasa :after:

.list-item:after {
    font-family: FontAwesome; // sau orice alt nume este înregistrat pentru familia FontAwesome
    content: '\f054';
}

Editare

Pentru a vă oferi o idee despre cum puteți transmite CSS dinamic (care poate fi ușor adaptat la o opțiune personalizată de Plugin) prin intermediul unui callback, iată un exemplu:

(Notă: "plugin" și "theme" sunt interschimbabile mai jos.)

În primul rând, vom modifica CSS-ul pentru a ținti elementele de listă din interiorul unui Widget specific. WordPress adaugă o clasă, .widget, la containerul Widget-ului. Deci puteți ținti asta:

.widget .list-item:after {}

Sau, dacă acest lucru va fi inclus într-un Plugin care înregistrează un Widget personalizat, atunci puteți ținti clasa CSS pe care o definiți în Widget-ul dvs. personalizat, prin intermediul matricei $widget_ops:

$widget_ops = array( 
    'classname' => 'custom-widget-classname', 
    'description' => __( 'Descrierea Widget-ului Personalizat', 'namespace' ) 
);

Deci, puteți ținti această clasă personalizată:

.custom-widget-classname .list-item:after {}

Sau, dacă doriți să țintiți Widget-ul "Categorii" din nucleu, puteți folosi clasa .widget_categories. Vom folosi această abordare pentru exemplu.

Vom include acest lucru într-un callback, conectat la wp_head, deși puteți la fel de ușor folosi wp_print_styles:

function pluginslug_fontawesome_styles() {
    // Codul va fi aici
}
add_action( 'wp_head', 'pluginslug_fontawesome_styles' );

În interior, vom afișa doar un fișier de stil, cu regula noastră de mai sus:

function pluginslug_fontawesome_styles() {
    ?>
<script type="text/css">
.widget_categories .list-item:after {
    font-family: FontAwesome; // sau orice alt nume este înregistrat pentru familia FontAwesome
    content: '\f054';
}
</script>
    <?php
}
add_action( 'wp_head', 'pluginslug_fontawesome_styles' );

În acest moment, ați terminat. Simplu ca bună ziua. Dar, deoarece sunteți deja în interiorul unei funcții PHP, puteți face acest fișier de stil dinamic, folosind o variabilă:

function pluginslug_fontawesome_styles() {

    // Definirea variabilei pentru iconița de listă
    $list_item_icon = '\f054';

    // ...tăiat:
    content: <?php echo $list_item_icon; ?>;

Deci acum, este simplu să folosiți o valoare de opțiune personalizată a Plugin-ului, doar prin transmiterea acesteia la variabilă:

function pluginslug_fontawesome_styles() {

    // Obțineți opțiunile Plugin-ului, presupuse a fi o matrice
    $plugin_options = get_option( 'pluginslug_plugin_options' );

    // Definirea variabilei pentru iconița de listă
    $list_item_icon = $plugin_options['list_item_icon'];

    // Afișarea fișierului de stil
    ?>
<script type="text/css">
.widget_categories .list-item:after {
    font-family: FontAwesome; // sau orice alt nume este înregistrat pentru familia FontAwesome
    content: <?php echo $list_item_icon; ?>;
}
</script>
    <?php
}
add_action( 'wp_head', 'pluginslug_fontawesome_styles' );

Deci asta este! CSS dinamic, care afișează o iconiță reală (nu o imagine de fundal), preluând dintr-o opțiune de Plugin.

Și deoarece este doar CSS, este ușor de extins la aproape orice selector vă puteți imagina - nu doar limitat la un element de listă din interiorul unui Widget.

Chip Bennett

55.1K

4 ian. 2014 16:32:31

Comentarii

Opțiune foarte bună, dar eu doream o funcție. :)

MrJustin

6 ian. 2014 22:42:37

Știi că poți încapsula regulile CSS într-un callback și să le încarci în wp_head sau wp_print_styles, nu? Dar acea parte a implementării este o întrebare separată și în afara domeniului de aplicare al întrebării așa cum a fost formulată.

Chip Bennett

6 ian. 2014 23:01:21

Da, știu cum să încarc. Totuși, nu vreau să folosesc CSS. Știu că este o metodă rapidă și eficientă de a face acest lucru și te complimentez pentru asta... dar poate ar trebui să folosesc cuvintele "am nevoie de" în loc de "doresc o" atunci când vine vorba de funcție.

MrJustin

6 ian. 2014 23:19:39

Vă rugăm să vedeți întrebarea editată. Am adăugat un exemplu pentru a arăta cum întregul lucru poate fi gestionat prin CSS, dinamic, extensibil și capabil să țină cont de opțiunile personalizate ale Plugin-ului.

Chip Bennett

7 ian. 2014 03:16:16

Corect, dar acum, dacă aș dori să 'iconița' să plutească în dreapta? În CSS-ul meu normal am atașat-o la li a:after {content} și am încercat: text-align: right și nu a făcut nimic pentru mine. Ce vreau să spun prin asta, pentru a clarifica, este dacă aș dori ca toate iconițele să fie în dreapta LI-ului cu textul în stânga. Să presupunem că ul/li este setat la 250px, textul este întotdeauna un link, dar l-am setat pe block. Apoi am adăugat 'iconița' și am vrut ca iconița să se afle în dreapta li-ului. Cu <i...> pot să o fac să plutească ușor.

MrJustin

7 ian. 2014 03:30:12

Arată celelalte 1 comentarii

Aș face asta în felul următor:

// Dacă folosești widget-ul doar pe anumite pagini,
// poți dori să adaugi niște condiții adecvate aici
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('font-awesome',
        '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
});

function wpse_128247_font_awesome_categories($cat_name) {
    // Definește iconița dorită aici
    $icon = ' <i class="fa fa-smile-o"></i>';

    return $cat_name.$icon;
} // funcția wpse_128247_font_awesome_categories

function wpse_128247_add_filter($cat_args) {
    add_filter('list_cats', 'wpse_128247_font_awesome_categories');

    // Deoarece interceptăm acest filtru, pur și simplu transmitem datele
    return $cat_args;
} // funcția wpse_128247_add_filter
add_filter('widget_categories_args', 'wpse_128247_add_filter');

function wpse_128247_remove_filter($output) {
    remove_filter('list_cats', 'wpse_128247_font_awesome_categories');

    // Deoarece interceptăm acest filtru, pur și simplu transmitem datele
    return $output;
} // funcția wpse_128247_remove_filter
add_filter('wp_list_categories', 'wpse_128247_remove_filter');

În primul rând, încărcăm stilurile Font Awesome. Apoi, interceptăm niște filtre pentru a adăuga/elimina propriul nostru filtru pentru lista de categorii. Asta e tot.

// EDIT:
Fără comentarii, adaptat la faptul că ai deja încărcat Font Awesome, folosind funcții anonime și lăsând filtrul să se înlăture singur, codul arată astfel:

function wpse_128247_font_awesome_categories($cat_name) {
    remove_filter(current_filter(), __FUNCTION__);
    return $cat_name.' <i class="fa fa-smile-o"></i>';
} // funcția wpse_128247_font_awesome_categories

function wpse_128247_add_filter($cat_args) {
    add_filter('list_cats', 'wpse_128247_font_awesome_categories');
    return $cat_args;
} // funcția wpse_128247_add_filter
add_filter('widget_categories_args', 'wpse_128247_add_filter');

Nu aș numi asta exagerat. Dar da, codul meu conține mai multe linii decât soluția actuală a lui birgire.

tfrommen

9.23K

4 ian. 2014 16:13:38

Comentarii

Soluția ta nu a fost rea, dar a fost exagerată în comparație cu cea a lui birgire. Deja am Font-Awesome încărcat, îmi pare rău că nu am specificat.

MrJustin

6 ian. 2014 22:41:00

Da, codul acela nu este exagerat, sunt de acord cu asta. Probabil doar părea mai mult cu cele 4 funcții în loc de 2 și cantitatea de comentarii. Apreciez comentariile, nu le critic. Doar părea mult mai mult :).

MrJustin

7 ian. 2014 03:26:38

Deoarece folosești remove_filter pe funcția care adaugă iconița, aceasta va rula o singură dată. Asta înseamnă că o iconiță va fi adăugată doar la primul element din lista widget_categories.

WPExplorer

12 mai 2020 09:49:37

birgire 67.8K · Accepted Answer · 2014-01-04T16:03:57Z

Presupuneri:

Nu explici cum dorești să instalezi pachetul Font Awesome, așa că voi presupune momentan că folosești pluginul Font Awesome Icons.

Ai scris:

Înainte ca cineva să spună să folosesc o imagine de fundal, nu vreau să fac asta. Aș dori să fie fizic.

deci presupun că vrei să folosești direct tagul , de exemplu:

<i class="fa icon-caret-right"></i>

după fiecare link de categorie din lista de categorii a widget-ului.

Idee:

Poți folosi filtrul wp_list_categories pentru a modifica afișarea listei de categorii din widget.

Exemplu:

Iată un exemplu simplu cum să injectezi tagul în lista de categorii prin filtrul wp_list_categories:

/**
 * Injectează tagul Font Awesome <i> după fiecare link de categorie din widget
 *
 * @param string $output
 * @return string $output
 */

 function custom_wp_list_categories( $output )
 {  
     remove_filter( current_filter(), __FUNCTION__ ); 
     return str_ireplace( '</li>', '<i class="fa icon-caret-right"></i></li>', $output);
 }

 add_action( 'widgets_init', function(){
     add_filter( 'wp_list_categories', 'custom_wp_list_categories' );
 });

Aceasta va genera un rezultat similar cu acesta:

Lista de categorii cu iconițe