Share
We weten al dat WordPress wordt beschouwd als het meest populaire CMS ter wereld en wanneer het wordt gecombineerd met jQuery, kan het wonderen creëren. In deze tutorial zullen we een voorbeeld bespreken van het nut van jQuery in WordPress, door een front-end tekstveranderingswisselaar te maken. Deze tutorial is bedoeld voor beginners die de magie van jQuery leren introduceren in WordPress.
In deze zelfstudie gaan we een front-end tekstgrootte-wisselaar maken die de lettergrootte van de berichten wijzigt volgens het gemak van de lezer. Stel dat u op een blog een bericht leest en u vindt het moeilijk om door de regels van het bericht te bladeren vanwege de tekstgrootte. Hier komt de behoefte aan de tekstformaatwisselaar om dienovereenkomstig de tekstgrootte van het bericht te vergroten / verkleinen. Het verhogen / verlagen van de tekengrootte wordt over het algemeen overwogen vanwege een aantal factoren, zoals:
In deze zelfstudie maken we twee koppelingen, EEN+ en EEN-, in de front-end die de tekstgrootte van de post dienovereenkomstig met gemak zal vergroten of verkleinen.
Dit is de belangrijkste stap waarin u moet beslissen welk element u wilt associëren met de tekstformaatwisselaar. Hoewel u de tekstformaat-wisselaar zelf op de startpagina (index) kunt plaatsen, is het verstandig om deze in de single.php pagina die moet worden gebruikt tijdens het bekijken van één bericht.
Om het formaat van een element te vergroten, moeten we dat onderdeel omwikkelen met een unieke div-klasse. Aangezien we het Twenty Twelve-thema gebruiken, is hier wat onze 'single.php'bestand lijkt na het toevoegen van de hieronder gemarkeerde code om de post binnen de'verkleinen'klasse.
Hier hebben we de div-les geplaatst verkleinen op zo'n manier dat het alleen het lichaam van een enkele functie beschouwt.
Voor elk element in WordPress waarvoor je de grote tekst wilt, kun je het gewoon in de juiste div-klassen plaatsen om te gebruiken met jQuery.
De volgende stap is om de twee links op de pagina toe te voegen die zullen fungeren als twee knoppen om de grootte van de tekst te wijzigen. U kunt ze overal op uw pagina plaatsen, maar vermijd ze binnen de lus te plaatsen. Hier hebben we ze in onze single.php bestand en hebben ze gekoppeld aan twee unieke ID's.
[A +] / [A-]
Nu is het tijd om de jQuery-magie toe te voegen aan ons thema om de twee links-naar-links-functie te vergroten / verkleinen. Onder jouw thema's js map maak een JavaScript-bestand met de naam resize.js. Open nu het bestand en voeg het volgende stuk code toe. De code wordt duidelijk uitgelegd aan de hand van de opmerkingen.
Accentsconagua
// Hiermee voorkomt u dat de code wordt uitgevoerd voordat het document is geladen. jQuery (document) .ready (function () // Het element 'A +' op de pagina is gekoppeld aan de gebeurtenis jQuery click () jQuery ('# increase-font'). click (functie (evenement) // Hiermee wordt voorkomen dat de standaardactie van de gebeurtenis click () wordt geactiveerd. Event.preventDefault (); // De gebeurtenis jQuery each () komt voor op alle elementen behorend bij de klasse 'resize' jQuery ('. Resize'). Each ( function () // Oproep voor een aangepaste functie om de tekstgrootte changeTextSize (this, change) te vergroten;);); // Het 'A-' element in de pagina is gekoppeld aan de gebeurtenis jQuery click (). jQuery ('# verlagen-lettertype'). klik (functie (gebeurtenis) // Dit voorkomt dat de standaardactie van de gebeurtenis click () wordt geactiveerd. event.preventDefault (); // De gebeurtenis jQuery each () komt overeen met alle elementen die behoren tot de klasse 'resize' jQuery ('. resize'). each (function () // Roep een aangepaste functie aan om de tekstgrootte changeTextSize (this, -change););); te verkleinen ); // Drie variabelen zijn gebruikt om respectievelijk het bereik van de tekstgrootte en de increment / verlagingswaarde te definiëren. var min = 8, max = 100, veranderen = 2; // Definieert een aangepaste functie met twee parameters die het te verkleinen element bepalen en de functie size wijzigenTextSize (element, waarde) var currentSize = parseFloat (jQuery (element) .css ('font-size')); var newSize = currentSize + waarde; if (newSize <= max && newSize >= min) jQuery (element) .css ('font-size', newSize + 'px'); Als je meer wilt weten over jQuery, bekijk dan de jQuery Learn in 30 Days-lessenreeks van Jeffrey Way.
Dit is de laatste stap waarin we een verwijzing naar de. Moeten toevoegen resize.js script in WordPress zodat het de code uitvoert. Standaard bevat de WordPress-installatie al de jQuery-bibliotheek. We hoeven alleen maar naar het script te verwijzen binnen het thema. Open je functions.php bestand en voeg het volgende codefragment toe.
function wptuts_resize_text () // De array ('jQuery') wordt gebruikt om afhankelijkheid van de jQuery-bibliotheek te creëren om deze goed te kunnen gebruiken. wp_enqueue_script ('resize', get_template_directory_uri (). '/js/resize.js', array ('jQuery')); add_action ('wp_enqueue_scripts', 'wptuts_resize_text'); Dat is het. Als u nu een bericht bekijkt, kunt u de lettergrootte van het bericht verhogen of verlagen met de EEN+ en EEN- links op de pagina. U kunt uw eigen CSS gebruiken om de twee links in uw website naar eigen inzicht in te delen en op de juiste manier te plaatsen.
