WordPress ilman jQueryä: moderni frontend-kehitys käytännössä

WordPressin frontend on historiallisesti nojannut vahvasti jQueryyn, mutta moderni web-kehitys on siirtynyt pitkälti pois siitä. Nykyään painopiste on kevyemmässä JavaScriptissä, natiivissa DOM-API:ssa ja moderneissa frameworkeissa kuten React, Vue ja Alpine.js. WordPress tukee tätä kehitystä hyvin, mutta siirtymä vaatii tietoista arkkitehtuurin muutosta.

Miksi jQuerystä halutaan eroon

jQuery ei ole “huono”, mutta se on usein tarpeeton modernissa WordPress-kehityksessä.

Tyypillisiä syitä siirtyä pois jQuerystä:

• ylimääräinen bundle-koko
• hitaampi suorituskyky mobiilissa
• modernit selaimet tukevat DOM API:a suoraan
• vaikeampi ylläpidettävyys isoissa projekteissa
• ristiriidat muiden JS-frameworkien kanssa

Nykyinen tavoite on: vähemmän riippuvuuksia, enemmän natiivia JavaScriptiä.

WordPress ilman jQueryä: perusperiaate

WordPress ei pakota käyttämään jQueryä. Sen sijaan voit rakentaa kaiken modernilla ES6+ JavaScriptillä.

Perusajatus:

• käytä natiivia DOM API:a
• käytä moduleja (ESM)
• vältä globaalit muuttujat
• minimoi riippuvuudet
• rakenna komponenttipohjaisesti

jQuery pois enqueue-vaiheessa

Jos haluat poistaa jQueryn frontendistä:

function remove_jquery() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'remove_jquery');

Tämä vähentää automaattisesti latausta, mutta vaatii varmistuksen että mikään plugin ei ole riippuvainen jQuerystä.

Moderni JavaScript WordPress-teemassa

Sen sijaan että käytetään jQueryä:

document.querySelectorAll('.button').forEach(button => {
    button.addEventListener('click', () => {
        console.log('clicked');
    });
});

Tämä korvaa yleisen jQuery-rakenteen:

$('.button').click(function() {
    console.log('clicked');
});

ES modules WordPressissä

Moderni tapa on käyttää module-pohjaista JavaScriptiä.

Teemassa:

wp_enqueue_script(
    'theme-script',
    get_template_directory_uri() . '/assets/js/app.js',
    [],
    null,
    true
);

Ja JS:

export function init() {
    console.log('Theme initialized');
}

AJAX ilman jQueryä

Vanha tapa:

$.ajax({
    url: ajaxurl,
    method: 'POST'
});

Moderni tapa:

fetch('/wp-admin/admin-ajax.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({
        action: 'my_action'
    })
});

DOM-manipulaatio ilman jQueryä

jQuery:

$('.menu').addClass('open');

Moderni JS:

document.querySelector('.menu').classList.add('open');

Event handling modernilla tavalla

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.toggle').forEach(el => {
        el.addEventListener('click', () => {
            el.classList.toggle('active');
        });
    });
});

WordPress + React (Gutenberg-arkkitehtuuri)

WordPressin block-editori perustuu Reactiin, joten moderni kehitys suuntautuu luonnollisesti React-ekosysteemiin.

Mahdollisuuksia:

• custom Gutenberg-blockit
• headless WordPress + React frontend
• komponenttipohjainen UI
• API-first arkkitehtuuri

Alpine.js kevytvaihtoehtona

Jos React on liian raskas, Alpine.js on kevyt vaihtoehto WordPressissä.

<div x-data="{ open: false }">
    <button @click="open = !open">Toggle</button>
    <div x-show="open">Content</div>
</div>

Se toimii hyvin Gutenbergin kanssa ilman build-prosessia.

Build-työkalut (Vite, Webpack)

Moderni WordPress-kehitys käyttää usein build-työkaluja:

• Vite (nopea ja kevyt)
• Webpack (perinteinen)
• esbuild (supernopea)

Esimerkki Vite-käytöstä:

• komponentit ES moduuleina
• automaattinen hot reload
• optimoitu production bundle

Suorituskykyhyödyt

Kun jQuery poistetaan oikein:

• pienempi JS bundle
• nopeampi DOM-interaction
• vähemmän render-blockingia
• paremmat Core Web Vitals -arvot

Erityisesti mobiilissa ero on merkittävä.

Yhteensopivuusongelmat

Suurin riski jQueryn poistossa:

• vanhat lisäosat
• legacy-teemat
• WooCommerce-lisäosat
• admin-UI riippuvuudet

Siksi usein paras ratkaisu on:

• jQuery pois frontendistä
• jQuery säilytetään adminissa

Hybridimalli (suositeltava monissa projekteissa)

Käytännössä paras ratkaisu on usein hybridi:

• WordPress core + Gutenberg (React)
• frontend: vanilla JS tai framework
• admin: jQuery sallittu
• AJAX: fetch API

Tämä yhdistää yhteensopivuuden ja modernin suorituskyvyn.

Yhteenveto

WordPress ilman jQueryä ei tarkoita pelkkää kirjaston poistamista, vaan siirtymistä moderniin frontend-arkkitehtuuriin. Kun käytetään natiivia JavaScriptiä, moduleja ja kevyitä frameworkeja, sivustoista tulee nopeampia, helpommin ylläpidettäviä ja paremmin skaalautuvia.

Tärkeintä on tehdä siirtymä hallitusti: poistaa jQuery frontendistä, säilyttää tarvittaessa admin-yhteensopivuus ja rakentaa frontend modernien web-standardien varaan.

Aiheeseen liittyvät artikkelit

WP-Config.php optimointi: tärkeimmät asetukset kehittäjille

WordPressin Heartbeat API: miten se vaikuttaa suorituskykyyn

Block patternit WordPressissä: tehokkaampi tapa rakentaa sisältöä

WordPressin turvallinen käyttäjäsyötteen käsittely kehittäjille

Miten nopeuttaa WooCommerce-kauppaa teknisesti oikein

WordPressin sähköpostiongelmat ja SMTP-ratkaisut

Kuinka rakentaa custom login-sivu WordPressiin

Miten tehdä saavutettava WordPress-sivusto WCAG-standardien mukaan

Tekoäly WordPressissä: AI-työkalut sisällöntuotantoon ja automaatioon

WordPressin plugin-konfliktien debuggaus käytännössä