it-swarm.com.de

Programmgesteuert Hinzufügen von Symbolen für beeindruckende Schriftarten zum Kategorie-Widget

Ich verwende das Kategorien-Widget in meiner Seitenleiste (n) und möchte neben jeder Kategorie, die im Widget aufgeführt ist, das Symbol Font Awesome anzeigen. Das Symbol ist vorerst für alle Kategorien gleich, aber ich möchte jeder Kategorie in Zukunft ein eigenes Symbol zuweisen.

Ich möchte das Kategorien-Widget mithilfe des Codes in meiner functions.php -Datei ändern, um das Symbol hinzuzufügen, indem ich Markup wie <i class="fa fa-chevron-right"></i> in das Link-/Ankerelement der Kategorie nach den Titel der Kategorie einfüge. Ich könnte dies über CSS erreichen, aber dadurch verliere ich die Fähigkeit, programmgesteuert zu bestimmen, welches Symbol angezeigt werden soll, und die Flexibilität für andere Verbesserungen/Änderungen, die ich möglicherweise in Zukunft vornehmen möchte.


Grundsätzlich möchte ich diesen Effekt erzielen:

Kat 1> 
 
 Kat 2> 
 
 Kat 3>

(Das Größer-als-Symbol '>' steht für die Symbolplatzierung relativ zum Kategorietitel)


Ich habe Font Awesome in die functions.php -Datei eingereiht, indem ich den wp_enqueue_scripts -Hook wie folgt verwende, und es lädt die Symbole perfekt und zeigt sie an. Beachten Sie, dass ich kein Font Awesome-Plugin verwende, das für WordPress erstellt wurde.

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

Trotz meiner Bemühungen bei der Recherche konnte ich keine Lösung finden, um das Kategoriewidget zu ändern.

1
MrJustin

Annahmen:

Sie erklären nicht, wie Sie das Font Awesome-Paket installieren möchten, daher gehe ich für den Moment davon aus, dass Sie das Plugin Font Awesome Icons verwenden.

Sie schrieben:

Bevor jemand sagt, ein Hintergrundbild zu verwenden, möchte ich das nicht tun. Ich möchte, dass es körperlich ist.

daher gehe ich davon aus, dass Sie das <i> -Tag direkt verwenden möchten, zum Beispiel:

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

nach jedem Kategorielink in der Widget-Kategorieliste .

Idee:

Mit dem Filter wp_list_categories können Sie die Ausgabe der Widget-Kategorieliste ändern.

Beispiel:

Hier ist ein einfaches Beispiel, wie man es über den wp_list_categories-Filter in die Kategorieliste einfügt:

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

Dadurch erhalten Sie eine Ausgabe ähnlich der folgenden:

catlist

5
birgire

Diese Antwort enthält eine ziemlich einfache CSS-Lösung.

Im Wesentlichen würden Sie Ihrem Stylesheet Folgendes hinzufügen:

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

usw

Ja, es ist keine sehr dynamische Lösung, aber Ihre Kategorien werden sich wahrscheinlich nicht ändern.

5
JMB

Angenommen, Sie möchten das Symbol fa-chevron-right verwenden, müssen Sie das Listenelement lediglich über CSS als Ziel festlegen. Verwenden Sie die Pseudoklasse :after:

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

Bearbeiten

Um eine Vorstellung davon zu bekommen, wie Sie dynamisches CSS (das leicht an eine benutzerdefinierte Plugin-Option angepasst werden kann) über einen Rückruf übergeben können, sehen Sie sich das folgende Beispiel an:

(Hinweis: "Plugin" und "Theme" sind im Folgenden austauschbar.)

Zuerst werden wir das CSS so ändern, dass es auf Listenelemente innerhalb eines Widgets abzielt. WordPress fügt dem Widget-Container die Klasse .widget hinzu. So können Sie das anvisieren:

.widget .list-item:after {}

Oder, wenn dies alles in einem Plugin zusammengefasst ist, das ein benutzerdefiniertes Widget registriert, können Sie die CSS-Klasse, die Sie in Ihrem benutzerdefinierten Widget definiert haben, über das Array $widget_ops als Ziel angeben:

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

So können Sie diesen benutzerdefinierten Klassennamen als Ziel festlegen:

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

Wenn Sie das Kern-Widget "Kategorien" als Ziel festlegen möchten, können Sie die Klasse .widget_categories verwenden. Wir werden mit diesem Ansatz für das Beispiel gehen.

Wir werden es in einen Callback einfügen, der in wp_head eingebunden ist, obwohl Sie wp_print_styles genauso einfach verwenden können:

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

Im Inneren werden wir nur ein Stylesheet ausgeben, mit unserer Regel von oben:

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' );

An diesem Punkt sind Sie fertig. Kinderleicht. Da Sie sich jedoch bereits in einer PHP -Funktion befinden, können Sie dieses Stylesheet dynamic ganz einfach mithilfe einer Variablen erstellen:

function pluginslug_fontawesome_styles() {

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

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

Jetzt ist es ganz einfach, einen benutzerdefinierten Wert für die Plugin-Option zu verwenden, indem Sie ihn einfach an die Variable übergeben:

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' );

So, das war es! Dynamisches CSS, Ausgabe eines aktuellen Symbols (kein Hintergrundbild), Aufruf einer Plugin-Option.

Und da es sich nur um CSS handelt, kann es problemlos auf so ziemlich jeden Selektor erweitert werden, den Sie sich vorstellen können - nicht nur auf ein Listenelement in einem Widget.

4
Chip Bennett

Ich würde es so machen:

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

Zunächst werden die fantastischen Schriftstile in die Warteschlange gestellt. Dann hijacken wir einige Filter, um unseren eigenen Filter für die Kategorieauflistung hinzuzufügen/zu entfernen. Das ist es.


// EDIT:
Ohne die Kommentare, die an die Tatsache angepasst sind, dass Sie Font Awesome bereits in die Warteschlange gestellt haben, Closures verwenden und den Filter selbst entfernen lassen, lautet der Code wie folgt:

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');

Ich würde das nicht Overkill nennen. Aber ja, mein Code besteht aus mehr Zeilen als die aktuelle Lösung von Birgire.

2
tfrommen