web-dev-qa-db-fra.com

Puis-je personnaliser les éléments dans la liste des widgets d'arrière-plan?

UPDATE Reformulé la question

Sur la page de widget dorsale widgets.php, il y a une liste de widgets disponibles. Les éléments de cette liste ont les mêmes classes et un ID généré dynamiquement , qui change si un nouveau widget est inséré (par ordre alphabétique) dans la liste. Il n’existe donc aucun moyen fiable de diriger les CSS vers des éléments individuels de la liste.

Existe-t-il un autre moyen de styliser des éléments individuels dans la liste des widgets?

Ancienne question plus étroite

J'ai un thème qui inclut une icône de police dans son nom complet. C'est défini globalement comme ceci:

$theme_data      = wp_get_theme(); // Retrieves the theme data from style.css
$theme_name      = $theme_data['Name'];
$theme_icon      = '<i class="fa fa-wrench" style="font-family:FontAwesome;"></i>';
$theme_full_name = $theme_icon . ' ' . $theme_name;

Je peux utiliser $theme_full_name dans les menus, les titres de page, etc. Il y a cependant une exception. Le thème comprend deux widgets, qui ont également $theme_full_name dans leur nom (le deuxième paramètre dans le constructeur ). Sur la page widgets.php de l'administrateur, seul le nom du thème apparaît. Apparemment, l’icône est supprimée (telle quelle, vraisemblablement, tout le code HTML pouvant figurer dans le nom du widget).

Existe-t-il un moyen de conserver l'icône de police dans le nom du widget?

plugin-developmenttheme-developmentwidgetswp-admin
1
cjbj

Tout comme @MarkKaplun a mentionné dans un commentaire, c'est possible avec CSS. Aussi avec Javascript.

Approche CSS

Regardons le widget Calendar , à titre d'exemple.

L'ID du widget, dans la liste des widgets disponibles , est de la forme:

widget-{integer}_calendar-__i__

et dans la barre latérale c'est:

widget-{integer}_calendar-{integer}

Si nous voulons afficher le dashicon du calendrier avant le titre du widget, nous pouvons par exemple mettre en file d'attente une feuille de style personnalisée pour le fichier widgets.php, avec quelque chose comme:

div[id*="_calendar-"].widget .widget-title h3:before{ 
    content: "\f145"; font-family: dashicons; margin-right: 0.5rem; 
}

Ici, nous utilisons *= pour trouver une correspondance de sous-chaîne dans le sélecteur id.

Il affichera comme ceci:

calendar

Si nécessaire, nous pourrions limiter cela davantage aux parties droites ou gauches :

#widgets-right
#widgets-left

ou les widgets disponibles:

#available-widgets

La page widgets.php aura également body.widgets-php si nécessaire pour les feuilles de style générales.

4
birgire