come aggiungere icone alle categorie di wordpress

Come aggiungere icone alle categorie WordPress

  1. blog Come aggiungere icone alle categorie WordPress
event_available
schedule

Come aggiungere icone alle categorie WordPress? In questa guida voglio spiegarti come aggiungere icone personalizzate nel backend di WordPress usando una funzione scritta in codice e senza un plugin.

Con questa funzione puoi aggiungere anche altri campi personalizzati alle categorie degli articoli e potrai modificarli dal backend.

In sintesi:

  • Apri il file functions.php del tuo tema child
  • Inserisci queste due funzioni
  • Vai nel backend e vedrai i campi modificabili delle icone personalizzate

Iniziamo subito.

Per prima cosa dovrai aprire il file functions.php del tuo tema child, se non sai come crearlo ho scritto per te una breve guida.

code

Come aggiungere icone alle categorie WordPress

Per aggiungere icone o campi personalizzati alle categorie di WordPress dovrai utilizzare questo codice.

Il risultato finale è una casella dove potrai inserire il nome dell’icona da allegare a questa categoria. WordPress assegna in automatico la grafica e lo stile classico delle altre caselle già presenti nella pagina e applicherà le modifiche al colore e allo stile quando lo cambierai dalle impostazioni.

esempio come creare caselle personalizzate categorie wordpress

Questo codice serve per aggiungere la casella nella pagina “modifica categoria” del backend di WordPress utilizzando l’hook “category_edit_form_fields”:

function ekw_edit_category_icon($term) {
	/* creo la casella per aggiungere l’icona */
    ?>
    <tr class="form-field term-icon-wrap">
  			<th scope="row"><label for="tag-icona"><?php _e( 'Icona' ); ?></label></th>
  			<td>
          <input name="tag-icona" id="tag-icona" type="text" value="<?php

	/* se esiste già un icona la recupero dal database */
          echo get_term_meta($term->term_id, 'Icona', true); ?>" size="40" aria-required="true">

			<!-- Aggiungo una descrizione alla casella -->
    			<p class="description">Icona personalizzata per questa cagoria da <a href="https://material.io/resources/icons/?style=baseline" target="_blank">Icon Material Desgn</p>
        </td>
  		</tr>

    <?php
    /* aggiungo l’icona al database al click su “aggiungi nuova categoria */
    if ( isset( $_POST['tag-icona'] ) ) {
      $term_icona = $_POST['tag-icona'];
      $term = get_term_meta($term_id, 'Icona', true);
      if ($term_icona != $term) {
       update_term_meta( $term_id, 'icona', $term_icona ) or die("errore");
     }
    }
  }
	/* aggiungo la funzione al backend nelle categorie */
  add_action('category_edit_form_fields', 'ekw_edit_category_icon', 10, 2);

Con questo codice ti basterà cercare il nome dell’icona dalla libreria icone di Google e inserirlo nella casella che hai appena creato. Ricorda di installare la libreria Icons Material Design, trovi tutto in questa guida.

Ora vediamo il codice da aggiungere nella pagina “aggiungi nuova categoria” di WordPress, questo utilizzerà l’hook “category_add_form_fields”:

function ekw_add_category_icon($term) {
    ?>
	<!-- creo la casella nel backend -->
    <div class="form-field term-icon-wrap">
      <label for="icona"><?php _e( 'Icona' ); ?></label>
      <input type="text" name="tag-icona" id="tag-icona" value="">

	<!-- aggiungo una descrizione alla casella -->
      <p>Icona personalizzata per questa cagoria da <a href="https://fonts.google.com/icons?selected=Material+Icons" target="_blank">Icon Material Desgn</a></p>
    </div>
    <?php
    if ( isset( $_POST['tag-icona'] ) ) {
  		$term_icona = $_POST['tag-icona'];

			/* aggiungo l’icona nel database di WordPress */
  			 update_term_meta( $term_id, 'Icona', $term_icona );
  	}
  }
  add_action('category_add_form_fields', 'ekw_add_category_icon', 10, 2);
code

Come mostrare le icone nel frontend

Ora che hai la possibilità di aggiungere icone personalizzate alle categorie di WordPress, vediamo come mostrarle nel frontend del tuo sito.

Per farlo dovrai aver creato un tema child e al suo interno dovrà contenere il file category.php, cioè il file che mostra la pagina delle categorie.

Per recuperare l’icona dal database dovrai usare la funzione get_term_meta() di WordPress in questo modo:

/* seleziono la categoria corrente */
$obj = get_queried_object();

/* seleziono l’ID della categoria corrente */
$id_cat = $obj->{'term_id'};

/* seleziono l’icona in base all’ID della categoria corrente */
$icon = get_term_meta($id_cat, 'Icona', true);

Per mostrarla a video dovrai semplicemente creare un oggetto <span> contenente la categoria.

<span class="material-icons ekw_icon_large"><?php echo $icon; ?></span>
check_circle

Leggi anche

Come creare sottomenu backend WordPress con add_submenu_page()
Scopri di più
Come creare pagina di amministrazione backend WordPress
Scopri di più
Cos'è il marketing mix
Scopri di più
Perché analizzare i competitor
Scopri di più
Come creare controlli personalizzati per Wp customizer
Scopri di più
Come inviare dati dei form con Ajax serialize() a php
Scopri di più
Elenco icone Google in un array in codice php
Scopri di più
Come usare le chiavi API Google
Scopri di più

Contattaci!

Preventivo sempre gratuito

perm_identity
alternate_email
phonelink_ring
message

Il tuo messaggio è stato inviato con successo!
Ti risponderemo a breve

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato.

message
perm_identity
alternate_email

keyboard_arrow_up