Share
Știm deja că WordPress este considerat cel mai popular CMS din lume și, atunci când se combină cu jQuery, poate crea minuni. În acest tutorial vom discuta despre un exemplu de utilitate a jQuery în WordPress, prin crearea unui schimbător de dimensiune a textului de text. Acest tutorial vizează începătorii care învață să introducă magia jQuery în WordPress.
În acest tutorial vom crea un changer de dimensiune a textului frontal care modifică mărimea fontului posturilor conform comodității cititorului. Să presupunem că vă aflați pe un blog care citește o postare și vă este greu să traversați liniile postului din cauza dimensiunii textului. Aici vine necesitatea schimbătorului de dimensiune a textului pentru a crește / micșora dimensiunea textului postului în consecință. Creșterea / scăderea dimensiunii fontului este în general considerată ca urmare a unui număr de factori precum:
În acest tutorial vom crea două link-uri, A+ și A-, în partea frontală, care va mări sau micșora dimensiunea textului postului în mod corespunzător cu ușurință.
Acesta este cel mai important pas în care trebuie să decideți ce element doriți să asociați schimbătorului de dimensiune al textului. Deși puteți pune schimbătorul de dimensiune a textului în pagina de pornire (index) în sine, se consideră înțelept să îl puneți în single.php pagina care va fi utilizată în timpul vizionării unei singure postări.
Pentru a face un element redimensionabil, trebuie să înfășurăm acea parte utilizând o clasă div divizată. Deoarece folosim tema Twenty Twelve, aici este ceea ce "single.php'arata dupa adaugarea codului evidentiat mai jos pentru a incheia postul in sectiunea'redimensiona"clasa.
Aici am plasat clasa div redimensiona astfel încât să considere numai corpul unui singur post.
Pentru orice element din WordPress pentru care vreți textul redimensionabil, trebuie doar să îl înfășurați în cadrul clasei div corespunzătoare pentru a fi utilizat cu jQuery.
Următorul pas este să adăugați cele două linkuri din pagină care vor acționa ca două butoane pentru redimensionarea textului. Puteți să le plasați oriunde în interiorul paginii, dar să nu le așezați în bucla. Aici le-am plasat în noi single.php fișier și le-ați asociat cu două ID-uri unice.
[A +] / [A-]
Acum este momentul să adăugăm magia jQuery la tema noastră pentru a face ca cele două linii de creștere / micșorare să funcționeze. Sub tema ta js folder crea un fișier JavaScript numit resize.js. Deschideți acum fișierul și adăugați următoarea bucată de cod. Codul este clar explicat folosind comentariile.
Accentsconagua
// Aceasta împiedică executarea codului înainte ca documentul să se termine încărcarea. jQuery (document) .ready (function () // Elementul 'A +' din pagină este asociat cu evenimentul jQuery (). Acest lucru împiedică declanșarea acțiunii implicite a evenimentului click () event.preventDefault (); // Evenimentul jQuery each () interacționează asupra fiecărui element care aparține clasei "redimensionare" jQuery ("redimensionare"). ()); // Elementul "A-" din pagină este asociat cu evenimentul jQuery () (). jQuery ('# decrease-font') faceți clic pe (funcția (event) // Aceasta împiedică declanșarea acțiunii implicite a evenimentului click () event.preventDefault (); fiecare element al clasei "redimensionare" jQuery ("redimensionare") fiecare (functie () // Apelarea unei functii personalizate pentru a reduce dimensiunea textului changeTextSize (this, -change);); ); // Au fost utilizate trei variabile pentru a defini intervalul dimensiunii textului și, respectiv, valoarea incrementului / decrementului. var min = 8, max = 100, schimbare = 2; // definește o funcție personalizată cu doi parametri care determină elementul care trebuie redimensionat și funcția de dimensiune changeTextSize (element, valoare) var currentSize = parseFloat (jQuery (element) .css ('font-size'); var newSize = valoarea curentă + valoare; dacă (newSize <= max && newSize >= min) jQuery (element) .css ('font-size', newSize + 'px'); Dacă doriți să aflați mai multe despre jQuery, vă rugăm să consultați seria de instrucțiuni "Learn jQuery in 30 Days" de Jeffrey Way.
Acesta este ultimul pas în care trebuie să adăugăm o referință la resize.js script în WordPress, astfel încât acesta să execute codul. Implicit, instalarea WordPress conține deja biblioteca jQuery. Trebuie doar să menționăm scenariul în cadrul temei. Deschide-ți functions.php fișier și adăugați următorul fragment de cod.
function wptuts_resize_text () // Matricea ('jquery') este folosita pentru a crea dependenta de biblioteca jQuery pentru ao folosi corect. wp_enqueue_script ('redimensionare', get_template_directory_uri (). '/js/resize.js', array ('jquery')); add_action ('wp_enqueue_scripts', 'wptuts_resize_text'); Asta e. Acum, dacă vizionați o postare, puteți crește sau micșora dimensiunea fontului postării folosind A+ și A- link-uri din pagină. Puteți utiliza propriul CSS pentru a modela corect și plasați cele două linkuri în site-ul dvs., după cum considerați necesar.
