Share
Sappiamo già che WordPress è considerato il CMS più popolare al mondo e quando si combina con jQuery, può creare meraviglie. In questo tutorial parleremo di un esempio dell'utilità di jQuery in WordPress, creando un cambia caratteri di testo post-front-end. Questo tutorial è rivolto ai principianti che stanno imparando a introdurre la magia di jQuery in WordPress.
In questo tutorial creeremo un caricatore di dimensioni del testo front-end che altera la dimensione del carattere dei messaggi secondo la convenienza del lettore. Supponiamo che tu sia su un blog che legge un post e lo trovi difficile attraversare le righe del post a causa delle dimensioni del testo. Ecco la necessità di cambiare la dimensione del testo per aumentare / ridurre la dimensione del testo del post di conseguenza. La dimensione del carattere crescente / decrescente viene generalmente considerata a causa di una serie di fattori come:
In questo tutorial creeremo due link, UN+ e UN-, nel front-end che aumenterà o diminuirà le dimensioni del testo del post di conseguenza con facilità.
Questo è il passaggio più importante in cui devi decidere quale elemento vuoi associare al cambia caratteri di testo. Sebbene tu possa mettere il cambio di dimensione del testo nella home page (indice) stesso, è considerato saggio inserirlo nel single.php pagina da utilizzare durante la visualizzazione di un singolo post.
Per rendere ridimensionabile un elemento dobbiamo avvolgere quella parte usando una classe div unica. Dato che stiamo usando il tema Twenty Twelve, ecco cosa è il nostro 'single.php'il file appare come dopo aver aggiunto il codice evidenziato sotto per avvolgere il post all'interno del'ridimensionare' classe.
Qui abbiamo inserito la classe div ridimensionare in modo tale da considerare solo il corpo di un singolo post.
Per ogni elemento in WordPress per il quale desideri il testo ridimensionabile, basta inserirlo nelle classi div appropriate per essere utilizzato con jQuery.
Il passaggio successivo consiste nell'aggiungere i due collegamenti nella pagina che fungeranno da due pulsanti per ridimensionare il testo. Puoi posizionarli ovunque all'interno della pagina ma evitare di posizionarli all'interno del loop. Qui li abbiamo inseriti nel nostro single.php file e li hanno associati con due ID univoci.
[A +] / [A-]
Ora è il momento di aggiungere la magia jQuery al nostro tema per fare in modo che i due link aumentino / diminuisca la funzione. Sotto il tema del tuo tema js cartella crea un file JavaScript chiamato resize.js. Ora apri il file e aggiungi la seguente parte di codice. Il codice è chiaramente spiegato usando i commenti.
Accentsconagua
// Ciò impedisce l'esecuzione del codice prima che il documento abbia completato il caricamento. jQuery (document) .ready (function () // L'elemento 'A +' nella pagina è associato all'evento jQuery click (). jQuery ('# increase-font'). click (function (event) // Ciò impedisce l'attivazione dell'azione predefinita dell'evento click () event.preventDefault (); // L'evento jQuery each () interagisce su ogni elemento appartenente alla classe 'resize' jQuery ('. Ridimensiona'). function () // Chiama una funzione personalizzata per aumentare la dimensione del testo changeTextSize (this, change););); // L'elemento 'A-' nella pagina è associato all'evento jQuery click (). jQuery ('# diminuzione-font'). click (funzione (evento) // Questo impedisce l'azione predefinita dell'evento click () dall'attivazione. event.preventDefault (); // L'evento jQuery each () interviene su ogni elemento appartenente alla classe 'resize' jQuery ('. resize'). each (function () // Chiama una funzione personalizzata per diminuire la dimensione del testo changeTextSize (this, -change););); ); // Sono state utilizzate tre variabili per definire l'intervallo della dimensione del testo e il valore di incremento / decremento rispettivamente. var min = 8, max = 100, change = 2; // Definisce una funzione personalizzata con due parametri che determinano l'elemento da ridimensionare e la funzione di dimensione changeTextSize (elemento, valore) var currentSize = parseFloat (jQuery (elemento) .css ('font-size')); var newSize = valore currentSize +; if (newSize <= max && newSize >= min) jQuery (elemento) .css ('font-size', newSize + 'px'); Se vuoi saperne di più su jQuery consulta la sezione Learn jQuery in 30 giorni di Jeffrey Way.
Questo è il passo finale in cui dobbiamo aggiungere un riferimento al resize.js script in WordPress in modo che esegua il codice. Per impostazione predefinita, l'installazione di WordPress contiene già la libreria jQuery. Abbiamo solo bisogno di fare riferimento allo script all'interno del tema. Apri i tuoi functions.php file e aggiungi il seguente frammento di codice.
function wptuts_resize_text () // L'array ('jquery') è usato per creare dipendenza dalla libreria jQuery per poterlo usare correttamente. wp_enqueue_script ('resize', get_template_directory_uri (). '/js/resize.js', array ('jquery')); add_action ('wp_enqueue_scripts', 'wptuts_resize_text'); Questo è tutto. Ora se stai guardando un post, puoi incrementare o decrementare la dimensione del font del post usando il UN+ e UN- collegamenti nella pagina. Puoi usare il tuo CSS per modellare e posizionare correttamente i due link nel tuo sito web come ritieni opportuno.
