web-dev-qa-db-fra.com

Ajouter par programme des icônes Font-Awesome au widget de catégorie

J'utilise le widget Catégories sur mes barres latérales et j'aimerais afficher l'icône Police Awesome à côté de chaque catégorie répertoriée dans le widget. L'icône serait la même pour toutes les catégories, pour le moment, mais j'aimerais donner à chaque catégorie son propre icône unique à l'avenir.

Je souhaite modifier le widget Catégories à l'aide du code de mon fichier functions.php afin d'ajouter l'icône en insérant un balisage semblable à <i class="fa fa-chevron-right"></i> dans l'élément link/anchor de la catégorie after le titre de la catégorie. Je pouvais accomplir cela via CSS, mais ce faisant, je perdais la possibilité de déterminer par programme l'icône à afficher, ainsi que la flexibilité nécessaire pour d'autres améliorations/changements que je souhaiterais éventuellement apporter à l'avenir.


En gros, je souhaite obtenir cet effet:

Cat 1> 
 
 Cat 2> 
 
 Cat 3>

(Le symbole supérieur à '>' représente l'emplacement de l'icône par rapport au titre de la catégorie)


Font Awesome est mis en file d'attente dans le fichier functions.php à l'aide du crochet wp_enqueue_scripts comme suit, et il charge et affiche parfaitement les icônes. Notez que je n'utilise aucun plugin Font Awesome construit pour WordPress.

/* Enqueue Scripts
-----------------------------------------------------------------*/
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 );
    /* Google Fonts */
    wp_register_style('GoogleFonts','http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Bad+Script');
    wp_enqueue_style( 'GoogleFonts');
    /* Font Awesome Fonts */
    wp_register_style('Font Awesome','//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
    wp_enqueue_style( 'Font Awesome'); 
}

Malgré mes meilleurs efforts de recherche, je n’ai pas trouvé de solution pour modifier le widget de catégories.

functionswidgetsfiltersicon
1
MrJustin

Hypothèses:

Vous n'expliquez pas comment vous voulez installer le paquet Font Awesome, je suppose donc pour le moment que vous utilisez le plugin Font Awesome Icons .

Tu as écrit:

Avant que quiconque dise d'utiliser une image d'arrière-plan, je ne veux pas le faire. Je voudrais que ce soit physique.

donc je suppose que vous voulez utiliser la balise <i> directement, par exemple:

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

après chaque lien de catégorie dans la liste de catégories de widgets.

Idée:

Vous pouvez utiliser le filtre wp_list_categories pour modifier la sortie de la liste de catégories de widgets.

Exemple:

Voici un exemple simple pour l'injecter dans la liste des catégories via le filtre wp_list_categories:

/**
 * Inject Font Awesome <i> tag after each widget category link
 *
 * @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' );
 });

Cela vous donnera un résultat similaire à celui-ci:

catlist

5
birgire

Cette réponse contient une solution CSS assez simple.

Essentiellement, vous ajouteriez ce qui suit à votre feuille de style:

.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

Oui, ce n'est pas une solution très dynamique, mais vos catégories ne risquent pas de changer, je suppose.

5
JMB

En supposant que vous souhaitiez utiliser l'icône fa-chevron-right , vous devez simplement cibler l'élément de la liste via CSS. Utilisez la pseudo-classe :after:

.list-item:after {
    font-family: FontAwesome; // or whatever the font awesome family is registered as
    content: '\f054';
}

Modifier

Donc, pour donner une idée de la manière dont vous pourriez passer du CSS dynamique (qui peut être facilement adapté à une option de plugin personnalisée) via un rappel, voici un exemple:

(Remarque: "plugin" et "thème" sont interchangeables ci-dessous.)

Tout d'abord, nous allons modifier le CSS pour cibler spécifiquement les éléments de la liste à l'intérieur d'un widget. WordPress ajoute une classe, .widget, au conteneur Widget. Donc, vous pouvez cibler cela:

.widget .list-item:after {}

Ou, si tout cela est encapsulé dans un plugin qui enregistre un widget personnalisé, vous pouvez alors cibler la classe CSS que vous définissez dans votre widget personnalisé, via le tableau $widget_ops:

$widget_ops = array( 
    'classname' => 'custom-widget-classname', 
    'description' => __( 'Custom Widget Description', 'namespace' ) 
);

Donc, vous pouvez cibler ce nom de classe personnalisé:

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

Ou, si vous souhaitez cibler le widget "Catégories" de base, vous pouvez utiliser la classe .widget_categories. Nous allons suivre cette approche pour l'exemple.

Nous allons le mettre dans un callback, relié à wp_head, bien que vous puissiez tout aussi bien utiliser wp_print_styles:

function pluginslug_fontawesome_styles() {
    // Code will go here
}
add_action( 'wp_head', 'pluginslug_fontawesome_styles' );

A l'intérieur, nous allons simplement sortir une feuille de style, avec notre règle d'en haut:

function pluginslug_fontawesome_styles() {
    ?>
<script type="text/css">
.widget_categories .list-item:after {
    font-family: FontAwesome; // or whatever the font awesome family is registered as
    content: '\f054';
}
</script>
    <?php
}
add_action( 'wp_head', 'pluginslug_fontawesome_styles' );

À ce stade, vous avez terminé. Peasy facile. Mais, puisque vous êtes déjà dans une fonction PHP, vous pouvez facilement rendre cette feuille de style dynamic , en utilisant une variable:

function pluginslug_fontawesome_styles() {

    // Define list-style icon variable
    $list_item_icon = '\f054';

    // ...snip:
    content: <?php echo $list_item_icon; ?>;

Alors maintenant, il est simple d'utiliser une valeur d'option de plug-in personnalisée, simplement en la passant à la variable:

function pluginslug_fontawesome_styles() {

    // Get Plugin options, assumed to be an array
    $plugin_options = get_option( 'pluginslug_plugin_options' );

    // Define list-style icon variable
    $list_item_icon = $plugin_options['list_item_icon'];

    // Output stylesheet
    ?>
<script type="text/css">
.widget_categories .list-item:after {
    font-family: FontAwesome; // or whatever the font awesome family is registered as
    content: <?php echo $list_item_icon; ?>;
}
</script>
    <?php
}
add_action( 'wp_head', 'pluginslug_fontawesome_styles' );

Alors c'est tout! CSS dynamique, produisant une icône réelle (pas une image d’arrière-plan), extraite d’une option de plug-in.

Et comme il s’agit uniquement de CSS, il est facilement extensible à n’importe quel sélecteur que vous pouvez imaginer - pas seulement limité à un élément de la liste dans un widget.

4
Chip Bennett

Je le ferais comme ça:

// If you're using the widget only on specific pages,
// you might want to use some appropriate conditions here
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 your desired icon here
    $icon = ' <i class="fa fa-smile-o"></i>';

    return $cat_name.$icon;
} // function wpse_128247_font_awesome_categories

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

    // Since we're hijacking this filter, we just pass through its data
    return $cat_args;
} // function 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');

    // Since we're hijacking this filter, we just pass through its data
    return $output;
} // function wpse_128247_remove_filter
add_filter('wp_list_categories', 'wpse_128247_remove_filter');

Premièrement, nous mettons en file d'attente les styles de police géniaux. Ensuite, nous détournons certains filtres pour ajouter/supprimer notre propre filtre pour la liste de catégories. C'est tout.

// MODIFIER:
Sans les commentaires, adaptés au fait que vous avez déjà mis Font Awesome en file d'attente, en utilisant des fermetures et en laissant le filtre se supprimer, le code se lit comme suit:

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

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

Je n'appellerais pas ça overkill . Mais oui, mon code comprend plus de lignes que la solution actuelle de birgire.

2
tfrommen