WordPress Categories Lists custom output Style

Δημοσιεύθηκε 30/05/2021

Αν θέλουμε να δημιουργήσουμε ένα ιδιαίτερο style για το output των Categories Lists του WordPress, σε περίπτωση που δεν μας ικανοποιεί το default output των σχετικών WordPress συναρτήσεων, τότε η παρακάτω custom-ιά θα μας βοηθήσει.

Για παράδειγμα αν θέλουμε να εμφανίσουμε ένα SVG icon μετά από κάθε list item, με το οποίο θα πειράζουμε μέσω CSS το path του SVG, αυτό που θα θέλαμε να κάνουμε είναι να βάλουμε το svg πχ εντός του <a></a> που βρίσκεται εντός κάθε list item.
Επιθυμητό αποτέλεσμα:

<li><a …>TermName SVG</a></li>

Categories Lists default
Categories Lists default
Categories Lists with svg
Categories Lists with SVG

Categories Lists custom Style

Θα χρησιμοποιήσουμε την wp_list_categories η οποία μας δίνει έτοιμη όλη την βασική δομή των κατηγοριών.

Categories Lists default
Default output wp_list_categories

Με την βοήθεια της PHP function preg_replace, θα ενσωματώσουμε το SVG, πριν το τέλος του </a>.

Είναι σημαντικό, να περάσουμε ως παράμετρο στην wp_list_categories το ‘echo’ => 0 για να μπορέσουμε να αποθηκεύσουμε όλο το output σε ένα variable ώστε να το επεξεργαστούμε. Η default τιμή του echo είναι 1, και εμφανίζει απευθείας το output της παραπάνω εικόνας.

$args = array('show_count' => 0, 'show_option_all' => 'All', 'echo' => 0);
$out = wp_list_categories($args);
$svg = '<svg>SVG CODE</svg>';
echo preg_replace('/<\/a>/', $svg . '</a>', $out);
Categories Lists with svg
custom output wp_list_categories

“Full” Custom Output for Categories Lists

Αν για κάποιον λόγο δεν μας ικανοποιεί το output του wp_list_categories και θέλουμε να δημιουργήσουμε κάτι τελείως διαφορετικό, παρακάτω υπάρχει ο κώδικας για να μπορέσουμε να προσπελάσουμε όλες τις Κατηγορίες και τις αντίστοιχες Υποκατηγορίες τους.

Ο κώδικας παράγει το ίδιο αποτέλεσμα με το wp_list_categories, αλλά ο σκοπός είναι να υπάρχει ο κώδικας ο οποίος μας δίνει την δυνατότητα να έχουμε πρόσβαση σε όλες τις κατηγορίες ώστε να τον χρησιμοποιήσουμε σύμφωνα με τις ανάγκες μας.

CUSTOM CATEGORIES ALL SUBCATEGORIES inspector
Το output του παρακάτω κώδικα
function nb_get_custom_category_listing()
{
    $args = array(
        'taxonomy' => 'category',
        'hide_empty' => true,
    );
    if ($terms = get_terms($args)) {
        echo '<ul class="all_terms">';
        foreach ($terms as $term) {
            if ($term->parent == 0) {
                echo "<li><a href=" . get_category_link($term->term_id) . ">{$term->name}</a></li>";
                anadromi_subCategory($term->term_id, 1);
            }
        }
        echo '<ul>';
    }
}

function anadromi_subCategory($id, $lvl)
{
    $args = array(
        'taxonomy' => 'category',
        'hide_empty' => true,
        'parent' => $id
    );
    if ($terms = get_terms($args)) {
        echo "<ul class='terms_lvl_{$lvl}'>";
        foreach ($terms as $term) {
            echo "<li><a href=" . get_category_link($term->term_id) . ">{$term->name}</a></li>";
            $lvl++;
            anadromi_subCategory($term->term_id, $lvl);
        }
        echo '</ul>';
    }
}