Ajouter par programme des icônes impressionnantes de polices au widget de catégorie

Question

Ajouter par programme des icônes impressionnantes de polices au widget de catégorie

- 1
- 12915 2014-01-01
J'utilise le widget Catégories surmesbarres latéraleset je souhaite afficher une icône Font Awesome à côté de chaque catégorie répertoriée dans le widget. L'icône serait lamêmepourtoutes les catégories,pour l'instant,maisj'aimerais donner à chaque catégorie sapropreicône unique à l'avenir.

Je voudraismodifier le widget Catégoriesen utilisant le code demonfichier functions.php pour ajouter l'icôneen insérant unbalisage comme  dans l'élément lien/ancre de la catégorie après letitre de la catégorie. Jepourrais accomplir cela via CSS,mais cefaisant,je perds lapossibilité de déterminerparprogramme quelleicône afficher,ainsi que laflexibilitépour d'autres améliorations/modifications queje souhaiteraispeut-être apporter à l'avenir.

Engros,je souhaite obtenir ceteffet:

Cat 1> Chat 2> Cat 3>

_{(Le symbole supérieur à '>' représente l'emplacement de l'icônepar rapport autitre de la catégorie)}

J'ai Font Awesomemisen file d'attente dans lefichier functions.php en utilisant le hook wp_enqueue_scripts comme suit,et il chargeet afficheparfaitement lesicônes. Notez queje n'utilise aucunplugin Font Awesome conçupour 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émesmeilleursefforts de recherche,je n'aipasputrouver de solutionpourmodifier le widget des catégories.
I use the Categories widget on my sidebar(s) and I would like to display a Font Awesome icon next to each category listed in the widget. The icon would be the same for all categories, for now, but I would like to give each category it's own unique icon in the future.

I would like to modify the Categories widget using code in my functions.php file to add the icon by inserting markup like  into category's link/anchor element after the category's title. I could accomplish this via CSS, but in doing so I lose the ability to programmatically determine which icon to display, along with the flexibility for other improvements/changes that I may wish to make in the future.

Basically, I wish to achieve this effect:

Cat 1 > Cat 2 > Cat 3 >

_{(The greater-than symbol '>' represents the icon placement relative to the category title)}

I have Font Awesome enqueued in the functions.php file using the wp_enqueue_scripts hook as follows, and it loads and displays the icons perfectly. Note that I do not use any Font Awesome plugin built for 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'); }

Despite my best research efforts, I was unable to find a solution to modify the categories widget.
functions widgets filters icon

- Veuillez clarifier votre questionpourexpliqueren quoielleest * spécifique à WordPress *,plutôt que simplement ** CSS **.Veuillez égalementmodifier votre questionpourinclure ** ce que vous avezfait/essayéjusqu'àprésent **.Commentincluez-vous/mettez-vousen file d'attente lapolice FontAwesome?
  
  Please clarify your question to explain how it is *WordPress-specific*, rather than merely **CSS**. Also, please edit your question to include **what you have done/tried so far**. How are you including/enqueueing the FontAwesome font?
  - 1
  - 2014-01-04
  - Chip Bennett
- Modification ajoutéepour répondre à vos questions.
  
  Edit added to answer your questions.
  - 0
  - 2014-01-06
  - MrJustin
- "* Ceciest spécifique à WordPress carje souhaitepersonnaliser les catégories WordPress via lefichier FUNCTIONS.PHP *" - étant donné que la solution ultimeesttoujours **entièrement CSS **,la questionn'esttoujourspas spécifique à WordPress.Cela seproduit simplement * dans le contexte * de WordPress.Votre limitation de vouloir qu'unefonction apparaisse dans `functions.php`,quiexclut les réponses lesplusplausibles,rend également cette questiontrop localisée.Peut-être que si vous éditiez la questionpour vous concentrer sur ** commentmettreen file d'attente un CSSpersonnalisé **,ce serait sur le sujetpour WPSE?
  
  "*This is WordPress specific due to me wanting to customize WordPress categories via the FUNCTIONS.PHP file*" - given that the ultimate solution is still **entirely CSS**, the question still isn't WordPress specific. It merely happens *in the context* of WordPress. Your limitation of wanting a function to pop into `functions.php`, which excludes the most plausible answers, also makes this question too localized. Perhaps if you edited the question to focus on **how to enqueue custom CSS**, it would be on-topic for WPSE?
  - 1
  - 2014-01-06
  - Chip Bennett
- Encore unefois,je ne veuxpas de solution CSS.Ma limitation élargit égalementmon avenirpour cebesoin.J'aime lesicôneset d'autrespeuvent vouloir desicônes.À l'avenir,je pourrais créer unepage d'optionspourmoi-mêmepour ajouter desicônes SPÉCIFIQUES,pas seulement une seuleicône.Jen'ai absolument aucuneintention d'utiliser CSS là-dessus,je ne voulaispas d'image d'arrière-plan,et j'ai complimenté quelqu'unpour avoirfait le: after {content}maisencore unefois,cen'estpas ce queje veux.C'est SPÉCIFIQUE à WordPress,je sais comment lefaireen CSSet comment lefaireen HTML.Jene savaispas comment lefaire dans WordPressen éditant le Widget via unefonctionpersonnalisée.
  
  Again, I don't want a CSS solution. My limitation also expands my future for this need. I like icons, and others may want icons. In the future, I may build an options page for myself to add SPECIFIC icons, not just a single icon. I have absolutely no intention of using CSS on this, I didn't want a background-image, and I did compliment someone on doing the :after {content} but again, it's not what I'm wanting. This is SPECIFIC to WordPress, I know how to do it in CSS and how to do it in HTML. I didn't know how to do it in WordPress by editing the Widget via a custom function.
  - 0
  - 2014-01-06
  - MrJustin
- L'attribut CSS `content` *n'estpas uneimage d'arrière-plan *,c'est * content *.Et une solution CSSest la *meilleure *façon demettreen œuvre -même si vous souhaitezexposer les options de l'utilisateurfinal.Ce quej'essaie de vous aider à voir,c'est que vos contraintesinutileset arbitraires rendent leproblèmeinutilement difficile.
  
  The CSS `content` attribute *isn't a background image*, it's *content*. And a CSS solution is the *best* way to implement - even if you want to expose end-user options. What I'm trying to help you see is that your unnecessary and arbitrary constraints are making the problem unnecessarily difficult.
  - 1
  - 2014-01-07
  - Chip Bennett
- Comme le dit @Chip,votre question dans saforme actuelle concerne strictement uneimplémentation CSS - vous demandeztrès clairement comment afficher un seul caractère àpartir d'unepolice àbase d'icônes.Lafaçon dont celaest accompliest deplacer ce caractère dans le HTMLet d'appliquer lapoliceface au caractère (ou à un élément de conteneur) à l'aide de CSS.Aucunepartie de ceprocessusn'a rien à voir avec WordPress.Nullepart dans votre question vousn'indiquez que vous souhaitez ajouter cepersonnageen modifiant la sortie de WordPress.Celaestexcessifet trèsprobablementinutile si votre questionestexacte.
  
  As @Chip is stating, your question as it stands is strictly regarding a CSS implementation - you are very clearly asking how to display a single character out of an icon-based font-face. The way in which this is accomplished is by placing that character in the HTML and applying the font face to the character (or a container element) using CSS. No part of this process has anything to do with WordPress. Nowhere in your question do you state that you wish to add this character by modifying WordPress's output. Doing so is excessive and very likely unnecessary if your question is accurate.
  - 0
  - 2014-01-07
  - bosco
- Enprolongeantmon commentaireprécédent,la réponse debirgire que vous avez acceptée ci-dessous ***est uneimplémentation CSS *** - la seule chose différenteest qu'il ajoute l'élément de style CSSen utilisant PHPet desexpressions régulièresplutôt que de simplement l'insérer directement dans votrebalisage demodèle.Celaentraîne une surcharge de ressourcespour le chargementet l'exécution du PHP dontiln'est absolumentpasnécessaire.Veuillez re-factoriser votre questionpourimpliquer que vous souhaitez ajouter ce caractèreparprogrammeet côté serveur si c'est vraiment le cas.Il seraittrès utile de dire ***pourquoi *** vous avez également cesexigences.
  
  Expanding on my previous comment, birgire's answer that you have accepted below ***is a CSS implementation*** - the only thing different is he is adding the CSS-styled element using PHP and regular expressions rather than simply directly inserting it in your template markup. This incurs a resource overhead for loading and executing the PHP that there is absolutely no need for. Please re-factor your question to imply that you wish to add this character programmatically and server-side if this is truly the case. It would aide greatly if you would state ***why*** you have these requirements, too.
  - 0
  - 2014-01-07
  - bosco
- Nepas chercher à vous aliénerici ou quoi que ce soit -justeessayer demieux définir votre questionet de lamettre au diapason desnormes denotre communauté -mais vous devriez supprimer lemot sur * "Jene veux vraimentpas réinventer la roueici,donc sije pouvais simplementinsérer quelque chose dansmonfichier dethèmesfunction.php,ce seraitgénial "*et ajouter desinformations sur ce que vous aveztentéjusqu'àprésent.En l'état,votre questionest *très clairement * de demander ànotre communauté de vous remettre du code sansmontrer d'efforts de votrepart,ce quiest contraire ànosnormes.Veuillez consulter [demander]pouren savoirplus surnosnormes.
  
  Not seeking to alienate you here or anything - just trying to see your question better defined and bring it up to snuff with our community's standards - but you should remove the bit about *"I really don't want to re-invent the wheel here, so if I could just pop something into my themes function.php file that would be great"* and add information regarding what you have attempted so far. As it stands, your question is *very clearly* asking our community to hand you code without showing effort on your part, which is against our standards. Please see [ask] for more on our standards.
  - 0
  - 2014-01-07
  - bosco
- Ok,si cette **modification ** queje viens defairene suffitpas ... alors vouspouvez supprimer cette question.Jepréférerais quepersonnene perde sa réputation acquisegrâce à cela.Si vouspouviez lefermer,celapourrait être lameilleure alternative.
  
  Ok, well if this **edit** I just did doesn't suffice.. then you may delete this question. I would prefer no one to lose their reputation gained through this. If you could close it, that may be the better alternative.
  - 0
  - 2014-01-07
  - MrJustin
- "* Jene souhaitepas vraiment avoir àmettre 25 lignes de code dansmon CSSpour afficher les différentesicônes. *" - le vraiproblème avec ceciest que cela rend votre question *trop localisée *,car vous restreignez lemeilleuret leplussolution évidente: CSS.Jene peuxtout simplementpas comprendrepourquoi 25 lignes de CSS sontmoins souhaitables queplusieursfiltreset 50 lignes de remplacement de chaîne PHP.
  
  "*I do not really wish to have to put 25 lines of code into my CSS to display the different icons.*" - the real problem with this is that it makes your question *too localized*, because you restrict the best and most obvious solution: CSS. I simply can't fathom why 25 lines of CSS is less-desirable than multiple filters, and 50 lines of PHP string-replacement.
  - 1
  - 2014-01-07
  - Chip Bennett
- Ehbien,peut-être que la solution CSSest laplus évidentepour vous.Cen'estpas une évidencepourmoi,je regarde les choses à une échelle différente,doncmoninterprétation des étapespour y arriver va varier.Donc,si celan'étaitpas localisé,celane tomberaitpas sous * WordPress Specific *.J'ai unproblème quime concerne,ilne vous concernepeut-êtrepas,maistous lesproblèmesne le sontpas.Je suis venuicipour une solution ** WordPress ** à quelque chose,et je l'aieue.Jene saispaspourquoinousnousbattonstoujourspour quelque chose qui a été répondu.Je suis satisfait de la réponse ...en rester là.
  
  Oh well, maybe the CSS solution is the obvious for you. It is not the obvious for me, I'm looking at it on a different scale, so my interpretation of the steps to get there are going to vary. So, if this was not localized, it would not fall under *WordPress Specific*. I have a problem that relates to me, it might not relate to you, but not every problem does. I came here for a **WordPress** solution to something, and I got it. I don't know why we are still battling over something that has been answered. I'm satisfied with the answer.. leave it at that.
  - 0
  - 2014-01-07
  - MrJustin
- "Jene saispaspourquoinousnousbattonstoujourspour quelque chose qui a été répondu."-parce que les sites Stack Exchangene sontpas desforums de support,mais des sites de questionset réponses destinés à créer unebase de connaissancespour une applicationgénérale/universelle.Votre limitation arbitraire rend la questionpas universellement utile,c'estpourquoielle la rendtrop localisée.Etbien que vous soyez libre d'accepter la réponse qui correspond lemieux à vosbesoins,la réponse acceptéeest,trèsfranchement,terriblepour lagrandemajorité despersonnes qui doiventincorporer despolices d'icônes.
  
  "I don't know why we are still battling over something that has been answered." - because Stack Exchange sites are not support forums, but Question and Answer sites intended to build a knowledge base for general/universal application. Your arbitrary limitation makes the question not universally useful, which is why it renders the question as too localized. And while you're free to accept whatever answer best suits your needs personally, the accepted answer is, quite frankly, terrible for the vast majority of people who need to incorporate icon fonts.
  - 1
  - 2014-01-07
  - Chip Bennett
- Alors signalez-leet nous verrons ce qui sepasse.Jene vaispasme battrepour quelque chose.J'aiessayé de supprimerma questionet celane me laisserapas,alors laissez lesmodérateurs décider de l'action appropriée àpartir d'ici.
  
  Well flag it then, and we will see what happens. I'm not going to battle over something. I tried to delete my question and it will not let me, so let the moderators decide the appropriate action from here.
  - 0
  - 2014-01-07
  - MrJustin
- @MrJustin,je crois que vosmodifications ontnon seulement apporté votre question sur le sujet,mais ont égalementfourni les contraintesnécessaires qui ontfait de la sélection d'uneimplémentationnon CSS un choix logique.J'ai changémon vote défavorableen votefavorable.J'appréciegrandement votrepatience àtraverstout celaet votre volonté de réviser votre questionpour lebien denotre communauté!
  
  @MrJustin, I believe that your edits have not only brought your question on-topic, but also provided the necessary constraints that made selecting a non-CSS implementation a logical choice. I have changed my down-vote to an up-vote. I greatly appreciate your patience through all of this, and willingness to revise your question for the betterment of our community!
  - 0
  - 2014-01-08
  - bosco
- J'aifourni une dernière révision afin de ramener la question à saforme laplusbasiqueet laplus directe,et d'unemanière qui,espérons-le,empêchera lesfuturs lecteurs cherchant simplement à ajouter uneicône d'implémenter la réponse acceptéeplus complexe ci-dessous.
  
  I have provided one final revision in order to distill the question down to it's most basic and direct form, and in a manner that will hopefully prevent future readers seeking to simply add an icon from implementing the more complex accepted answer below.
  - 0
  - 2014-01-09
  - bosco
- @bosco J'apprécie votre révision,et bien queje ne l'aipas acceptée,je latrouveplus que satisfaisante.J'apprécie le votepositif.Jen'avais vraiment aucuneintentionet n'aimepasme disputer.Je suis heureux quenous ayonspuparvenir à une solution raisonnable.Jeferai unmeilleureffort lors de l'établissement demes questions originalespourfaire décrire **exactement ** ce queje tente defaire.Encore unefois,je vous remerciebeaucoup.
  
  @bosco I appreciate your revision, and while I did not accept it, I find it more than satisfactory. I appreciate the up vote. I really had no intention, and do not like to argue. I am glad we could come to a reasonable solution. I will put forth a better effort when establishing my original questions to make describe **exactly** what I am attempting to do. Once again, thank you very much.
  - 1
  - 2014-01-09
  - MrJustin

4 réponses

votes

0
2014-01-05
MrJustin

birgire · Accepted Answer · 2014-01-04

6

2014-01-04

Hypothèses:

Vousn'expliquezpas comment vous voulezinstaller lepackage Font Awesome,doncje supposejustepour lemoment que vous utilisez leplugin Icônes depolicesgéniales .

Vous avez écrit:

Avant que quiconque dise d'utiliser uneimage d'arrière-plan,je ne veuxpasfaire cela.je aimerait que ce soitphysique.

doncje suppose que vous voulez utiliser labalise  directement,parexemple:

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

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

Idée:

Vouspouvez utiliser lefiltre wp_list_categoriespourmodifier la sortie de la liste des catégories de widgets.

Exemple:

Voici unexemple simple comment l'injecter dans la liste des catégories via lefiltre 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

Assumptions:

You don't explain how you want to install the Font Awesome package, so I just assume for the moment that you use the plugin Font Awesome Icons.

You wrote:

Before anyone says use a background image, I do not want to do that. I would like it to be physical.

so I assume you want to use the  tag directly, for example:

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

after each category link in the widget category list.

Idea:

You can use the wp_list_categories filter to modify the output of the widget category list.

Example:

Here is a simple example how to inject it into the category list via the wp_list_categories filter:

/**
 * 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' );
 });

This will give you an output similar to this one:

catlist

Bonmorceau de code,je le vérifierai quandje reviendrai dans uninstant.Jepublierai les résultats.

Great bit of code, I will check it out when I return in a bit. I will post the results.
- 0
- 2014-01-04
- MrJustin
n'oubliezpas d'ajuster lenom de la classe à vosbesoins ;-) J'ai utilisé le `icon-caret-right`parce que c'est la règle denommage de classe selon leplugin.Dans d'autres cas,ilpeut s'agir de «fa-caret-right».

just remember to adjust the class name to your needs ;-) I used the `icon-caret-right` because that's the class naming rule according to the plugin. In other cases it might be `fa-caret-right`.
- 0
- 2014-01-04
- birgire
`return str_ireplace ('

Ajouter par programme des icônes impressionnantes de polices au widget de catégorie

4 réponses

Hypothèses:

Idée:

Exemple:

Assumptions:

Idea:

Example:

Modifier

Edit