Risoluzione dei conflitti di tema con Awesome e Bootstrap nel plugin Tooltip di WordPress, come utilizzare i tooltip font-awesome – Versione 35.8.8 ora disponibile

WordPress Tooltips: Ciao, cari utenti del Plugin Tooltip di WordPress, spero che questo messaggio vi trovi bene e che stiate trascorrendo giorni meravigliosi con la vostra famiglia. Abbiamo ricevuto un ticket da un fantastico utente di WordPress Tooltip che ha segnalato un conflitto CSS con il proprio tema nel Plugin Tooltip di WordPress. Il nostro sviluppatore WordPress ha controllato il tema e ha scoperto che c’è un conflitto con Bootstrap e Font Awesome, che sono utilizzati dai tooltip, tra le altre cose. Per risolvere il problema per il nostro prezioso utente di tooltip, il nostro sviluppatore di Tooltip di WordPress ha rilasciato una nuova versione: WordPress Tooltips Pro Plus 35.8.8.

1: Risolto il conflitto tra il tema e il framework Bootstrap incluso nel tooltip di WordPress:

Ciao Team di Supporto,
Prima di tutto: un enorme grazie ancora per il turnaround incredibilmente veloce e il lavoro notturno.
Con la versione 35.8.8 quasi tutto è a posto da parte mia:

Pagina Ordini WooCommerce → gli avvisi PHP sono scomparsi ✅

Salient → Pannello di amministrazione Tipografia → non è più rotto ✅

Icone social nell'intestazione/piè di pagina → sembrano buone ✅

C'è solo una regressione che è apparsa subito dopo l'aggiornamento a 35.8.8:

Nella pagina principale il layout dell'intestazione/ero mobile è rotto (il blocco menu/intestazione si sposta e lo spazio va fuori).

Questo era già stato risolto nella versione precedente, ma con 35.8.8 è tornato.

Ancora, grazie mille per il vostro instancabile lavoro e le risposte super-veloci — apprezzo davvero quanto siate flessibili e disponibili!

Cordialmente,

Abbiamo risolto il problema per l’utente del tooltip e abbiamo risposto:

Ciao

Spero che questo messaggio ti trovi bene e che tu stia trascorrendo giorni felici con la tua famiglia 

Ci scusiamo per il problema, abbiamo controllato i codici del tema e del nostro plugin, abbiamo anche testato questo problema su varie risoluzioni e alla fine abbiamo scoperto che era causato da un conflitto tra Bootstrap e il tema. La soluzione è semplice, per favore apri il pannello delle impostazioni globali dei tooltip e disabilita l'opzione: “Abilita / Disabilita Bootstrap CSS per evitare conflitti con il tema?” Dalla nostra parte, abbiamo trovato che tutto funziona bene 

Potresti fare un test e darci un feedback? Se ci sono problemi, non esitare a dircelo, lo risolveremo per te il prima possibile 

Grazie, ti auguro una giornata benedetta con i tuoi cari 

Cordiali saluti,

Supporto Tooltip di WordPress

2: Pagina Ordini WooCommerce: diversi avvisi PHP continuano a comparire nella sezione dettagli dell’ordine (relativi a post_type che è nullo):

Fatto, abbiamo riscritto i nostri codici in questo modo per risolvere il problema:

if (isset($post->post_type)) {

if ($post->post_type == ‘tooltips’) { add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Mostra estratto nel tooltip pop-up?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null); } }

Ora funziona bene

3: Pannello Tipografia Salient: l’interfaccia di amministrazione sotto Salient → Tipografia diventa rotta e disallineata quando WordPress Tooltips Pro è attivo.

Fatto, abbiamo esaminato il codice del tema principale e abbiamo scoperto che include una classe .tooltip, che confligge con la classe .tooltips nel nostro file admin.css. Abbiamo riscritto il nostro plugin tooltip di WordPress in questo modo:

Carica il file admin.css per il plugin Tooltip di WordPress nell'area wp-admin solo quando lo schermo attuale appartiene al plugin.

Codici:

if (isset($_GET[‘post_type’]))
{
$tooltips_admin_post_type_check = sanitize_text_field($_GET[‘post_type’]);
if ($tooltips_admin_post_type_check === ‘tooltips’)
{
wp_enqueue_style(‘tooltips_pro_admin_css’, plugin_dir_url(__FILE__) . ‘asset/css/admin/admin.css’);
}
}

Ora funziona bene 

4: Icone social: le icone Font Awesome nel menu e nel piè di pagina (link social) continuano a visualizzarsi in modo errato o come caselle vuote.

Fatto, nel tema Salient, abbiamo scoperto che caricano i loro script in ritardo in questo modo:

add_action( ‘wp_enqueue_scripts’, ‘nectar_enqueue_dynamic_css’, 20 );

Abbiamo riscritto il nostro plugin per caricare Font Awesome in ritardo per evitare conflitti con altri temi o plugin:

add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);

Quindi tutti i codici nel tema Salient verranno eseguiti per primi, i nostri codici caricheranno Font Awesome in ultima chiamata.

Pertanto, tutto il codice nel tema Salient verrà eseguito con priorità, e il nostro plugin infine chiamerà Font Awesome per caricarlo.

Ora funziona bene 

Il tema dell’utente stava utilizzando Font Awesome 6.5, e i nostri Tooltip Font Awesome stavano anche utilizzando Font Awesome 6.4 nella versione WordPress Tooltips Pro Plus 35.8.8. Abbiamo aggiornato i tooltip Font Awesome per utilizzare l’ultima versione: Font Awesome 7.1. Cos’è Font Awesome?

Font Awesome è un popolare toolkit di icone e font web che fornisce una vasta collezione di icone vettoriali scalabili e loghi sociali. Permette agli sviluppatori di incorporare facilmente icone di alta qualità nei loro siti web e applicazioni senza la necessità di file immagine. Caratteristiche principali di Font Awesome:

Icone scalabili: Essendo basate su vettori, le icone Font Awesome possono essere scalate a qualsiasi dimensione senza perdere qualità, rendendole perfette per design reattivi.
Compatibilità cross-browser: Font Awesome funziona senza problemi su tutti i moderni browser web.
Integrazione facile: Gli sviluppatori possono integrare facilmente Font Awesome nei loro progetti utilizzando un semplice tag <link> o installandolo tramite gestori di pacchetti come npm o Yarn.
Personalizzabile: Le icone possono essere stilizzate con CSS, consentendo modifiche nel colore, dimensione, rotazione e molto altro per adattarsi ai requisiti di design di un sito web.
Accessibilità: Le icone Font Awesome possono essere rese accessibili attraverso attributi HTML appropriati, garantendo che siano utilizzabili da lettori di schermo.
Aggiornamenti regolari: Il toolkit viene frequentemente aggiornato con nuove icone, arricchendo la sua libreria nel tempo.

Perché agli utenti piace Font Awesome:

Ampia varietà: Font Awesome offre migliaia di icone che coprono numerose categorie, fornendo agli utenti ampie scelte per trovare l'icona perfetta per qualsiasi applicazione.
Semplicità: La sintassi per utilizzare Font Awesome è semplice, rendendo facile per gli sviluppatori di tutti i livelli implementarla.
Prestazioni: Essendo un set di icone basato su font, Font Awesome di solito si carica più velocemente rispetto alle tradizionali icone immagine, contribuendo a migliorare le prestazioni del sito web.
Supporto della comunità: Con una grande comunità di utenti e una documentazione completa, gli sviluppatori possono facilmente trovare supporto, tutorial ed esempi.
Stile coerente: Tutte le icone hanno uno stile uniforme, il che aiuta a mantenere la coerenza visiva nelle applicazioni web.
Opzioni gratuite e a pagamento: Font Awesome offre sia versioni gratuite che premium, consentendo agli utenti di scegliere in base alle loro esigenze e budget.

Conclusione

Font Awesome è diventato una soluzione di riferimento per molti sviluppatori grazie alla sua versatilità, facilità d’uso e vasta libreria di icone. Che tu stia costruendo un semplice sito web o un’applicazione web complessa, Font Awesome fornisce gli strumenti necessari per migliorare il design dell’interfaccia utente e migliorare l’esperienza dell’utente. Cos’è Font Awesome Tooltips?

I Tooltip Font Awesome sono una funzionalità che consente agli sviluppatori di creare caselle informative o suggerimenti hoverabili utilizzando icone Font Awesome, inclusi nella versione wordpress tooltips pro plus 19.9.8. Questi tooltip forniscono ulteriore contesto o informazioni su un elemento di una pagina web quando un utente ci passa sopra con il cursore. Caratteristiche principali dei Tooltip Font Awesome:

Icone: Puoi facilmente incorporare icone dalla libreria Font Awesome nei tuoi tooltip, migliorando l'appeal visivo e l'esperienza utente.
Personalizzazione: I tooltip possono essere stilizzati e personalizzati per adattarsi al design del tuo sito web, consentendo modifiche nel colore, dimensione e posizionamento.
Responsività: Si adattano bene a diverse dimensioni dello schermo, rendendoli adatti sia per interfacce desktop che mobili.
Accessibilità: I tooltip implementati correttamente possono migliorare l'accessibilità fornendo informazioni aggiuntive senza ingombrare l'interfaccia utente.
Supporto JavaScript: Molte implementazioni di tooltip sfruttano JavaScript o framework CSS (come Bootstrap) per migliorare la funzionalità, come effetti di visualizzazione e nascondimento.

Come aggiungere Tooltip Font Awesome nel tuo post WordPress

Creare contenuti coinvolgenti nei tuoi post WordPress è diventato più facile con i tooltip Font Awesome! Segui questi semplici passaggi per migliorare i tuoi post con bellissime icone che forniscono informazioni aggiuntive ai tuoi lettori. Passo 1: Crea un nuovo post WordPress

Inizia creando un nuovo post in WordPress. Nell’editor, inserisci semplicemente il shortcode del tooltip Font Awesome in questo modo:

[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]

Questo shortcode del tooltip Font Awesome ti permetterà di visualizzare un tooltip nel tuo post.

Ulteriori shortcode per i tooltip di WordPress possono essere trovati nel nostro documento dettagliato sugli shortcode dei tooltip; tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/ Passo 2: Anteprima del tuo Tooltip

Una volta aggiunto lo shortcode, vai alla parte frontale del tuo post WordPress. Vedrai una bella icona a forma di cerchio con un punto interrogativo, che appare così:

Icona Tooltip Font Awesome

Quando gli utenti passano il mouse sopra il cerchio con il punto interrogativo, apparirà un popup tooltip, fornendo ulteriori dettagli:

Popup Tooltip Font Awesome Passo 3: Personalizza il tuo Tooltip

Hai la flessibilità di personalizzare la dimensione e il colore delle tue icone Font Awesome. Ad esempio, se vuoi rendere l’icona del cerchio con il punto interrogativo più grande, basta cambiare il parametro della dimensione da 2x a 3x, 4x o anche più grande! Ecco un esempio: finestra popup tooltip font awesome nel front-end

Per cambiare il colore, modifica il parametro del colore in qualsiasi valore esadecimale preferisci, come #cccccc o #eeeeee. Passo 4: Scegli il tuo stile di icona

Puoi anche regolare lo stile del tuo tooltip Font Awesome cambiando il parametro set:

fas — Icone solide
far — Icone regolari
fab — Icone di marca