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 custom Style
Θα χρησιμοποιήσουμε την 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);
“Full” Custom Output for Categories Lists
Αν για κάποιον λόγο δεν μας ικανοποιεί το output του wp_list_categories και θέλουμε να δημιουργήσουμε κάτι τελείως διαφορετικό, παρακάτω υπάρχει ο κώδικας για να μπορέσουμε να προσπελάσουμε όλες τις Κατηγορίες και τις αντίστοιχες Υποκατηγορίες τους.
Ο κώδικας παράγει το ίδιο αποτέλεσμα με το wp_list_categories, αλλά ο σκοπός είναι να υπάρχει ο κώδικας ο οποίος μας δίνει την δυνατότητα να έχουμε πρόσβαση σε όλες τις κατηγορίες ώστε να τον χρησιμοποιήσουμε σύμφωνα με τις ανάγκες μας.
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>';
}
}