Vue Application on a WordPress

Aplikacja Vue na stronie WordPress jako zewnętrzna wtyczka

Bardzo możliwe, że zdarzyła się wam sytuacja, kiedy chcieliście umieścić w waszym serwisie WordPress jakąś niewielką aplikację napisaną w JavaScripcie. Mógł to być jakiś rodzaj kalkulatora, minigra czy interaktywna animacja. Wielu średnio zaawansowanych użytkowników WordPressa z pewnością podejmie próbę doklejenia takiego kodu JavaScript do któregoś z elementów HTML strony za pomocą wp_enqueue_script() w pliku functions.php motywu. Takie rozwiązanie wydaje się szybkie i dosyć proste — w końcu każdy (…no, w obecnych czasach prawie każdy :)) motyw ma plik functions.php. Można jednak zrobić to w nieco inny sposób, który zapewni nam większą elastyczność w zarządzaniu taką osadzoną aplikacją JavaScript w przyszłości.

W tytule wpisu użyłem wyrażenia „Aplikacja Vue”, i na potrzeby naszego przykładu pokażę, jak dołączyć aplikację stworzoną w Vue 3, ale równie dobrze mogłaby to być aplikacja stworzona w React, Angularze czy innym frameworku lub bibliotece JavaScript.

Na początek załóżmy, że mamy dostęp do gotowego projektu źródłowego Vue. Otwierając katalog projektu, zobaczymy mniej więcej taką strukturę katalogów i plików.

>dist
>node_modules
>public
>src
index.html
package-lock.json
package.json
README.md
vite.config.js

Na początek załóżmy, że mamy dostęp do gotowego projektu źródłowego Vue. Otwierając katalog projektu, zobaczymy mniej więcej taką strukturę katalogów i plików. Nie będę dzisiaj opisywał procesu tworzenia aplikacji w Vue; na potrzeby wpisu zakładam, że kod źródłowy już istnieje. Interesuje nas katalog /dist. Po jego otwarciu powinniśmy zobaczyć pliki tworzące produkcyjną wersję naszej aplikacji. Jeżeli katalog jest pusty, za pomocą odpowiedniej komendy:

npm run build

tworzymy pliki wersji produkcyjnej. Zakładam, że macie zainstalowane środowisko wykonawcze JavaScript Node.js i używacie menedżera paczek npm. Jeśli tak nie jest — odsyłam do dokumentacji na stronie Node.js w celu zainstalowania tych elementów. Jeżeli wszystko poszło dobrze, w katalogu /dist projektu Vue powinniśmy zobaczyć strukturę katalogów i plików:

/assets
index.html

Katalog /assets zawiera zminifikowane pliki JavaScript i CSS oraz ewentualnie inne obiekty binarne, takie jak pliki graficzne, dźwiękowe itd. Teraz pozostało nam utworzenie wtyczki WordPress, która „doda” ten kod do strony. W katalogu wp-content/plugins naszej instancji WordPressa tworzymy katalog, którego nazwa będzie odzwierciedlała nazwę naszej wtyczki. Na potrzeby tego przykładu tworzymy katalog vue-app-1.

Aby utworzyć wtyczkę WordPress, w tym katalogu tworzymy plik vue-app-1.php. Ważne, aby katalog i plik nazywały się identycznie. W pliku vue-app-1.php dodajemy

<?php

/**
 * Plugin Name: Vue app 1 plugin
 * Plugin URI: https://web-workshop.eu/
 * Description: WordPress plugin.
 * Version: 1.0
 * Author: name of author
 * Author URI: https://web-workshop.eu/
 **/

To informacje podstawowe, niezbędne aby wordpress wykrył naszą wtyczkę. W panelu administracyjnym WordPressa powinniśmy już zobaczyć naszą wtyczkę. Na razie nie robi ona absolutnie niczego.

Dodajmy zatem polecenia, które pozwolą nam dołączyć naszą aplikację Vue. Na początku przenosimy zawartość katalogu /dist naszej aplikacji Vue do katalogu naszej wtyczki WordPress.

Jedną z funkcjonalności, którą udostępnia WordPress, jest możliwość dodawania tzw. shortcode’ów do naszej strony. Za pomocą edytora Gutenberg czy popularnego page buildera Elementora bez trudu dodamy blok z krótkim kodem mającym postać:

[nazwa-naszego-shortcodu]

My również posłużymy się tą funkcjonalnością w naszej wtyczce. Stworzymy shortcode dodający aplikację Vue do naszej instancji WordPress. Funkcjami, które dodają odpowiednio javascript i css są wp_enqueue_script() i wp_enqueue_style(), zatem do kodu naszej wtyczki dodajemy:

<?php

/**
 * Plugin Name: Vue app 1 plugin
 * Plugin URI: https://web-workshop.eu/
 * Description: WordPress plugin.
 * Version: 1.0
 * Author: name of author
 * Author URI: https://web-workshop.eu/
 **/

function wp_my_plugin2()
{
    wp_enqueue_script('plik-js', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array(), '1.0', true);
    wp_enqueue_style('vue-style', plugin_dir_url(__FILE__) . '/assets/index-BqFQXHG0.css', array(), '1.0');
    wp_register_script('vue_wp_compiled', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array('plik-js'), '1.0', true);
}

add_action('wp_enqueue_scripts', 'wp_my_plugin2');

Za pomocą add_action() dodaliśmy pliki javascript i css naszej aplikacji, dodatkowo zarejestrowaliśmy nasz plik javascript w instancji WordPressa aby potem posłużyć się nim przy tworzeniu shortcodu. Tworzymy funkcję która doda nam nasz zarejestrowany skrypt i zwróci kawałek html do którego nasza aplikacja zostanie dopięta.

<?php

/**
 * Plugin Name: Vue app 1 plugin
 * Plugin URI: https://web-workshop.eu/
 * Description: WordPress plugin.
 * Version: 1.0
 * Author: name of author
 * Author URI: https://web-workshop.eu/
 **/

function wp_my_plugin2()
{
    wp_enqueue_script('plik-js', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array(), '1.0', true);
    wp_enqueue_style('vue-style', plugin_dir_url(__FILE__) . '/assets/index-BqFQXHG0.css', array(), '1.0');
    wp_register_script('vue_wp_compiled', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array('plik-js'), '1.0', true);
}

add_action('wp_enqueue_scripts', 'wp_my_plugin2');

function attach_vue()
{
    wp_enqueue_script('vue_wp_compiled');
    return "<div id='app'></div>";
}

Następnie używając funkcji WordPressa add_shortcode() dodajemy tą funckję jako shortcode. Całość naszej wtyczki powinna wyglądać następująco:

<?php

/**
 * Plugin Name: Vue app 1 plugin
 * Plugin URI: https://web-workshop.eu/
 * Description: WordPress plugin.
 * Version: 1.0
 * Author: name of author
 * Author URI: https://web-workshop.eu/
 **/

function wp_my_plugin2()
{
    wp_enqueue_script('plik-js', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array(), '1.0', true);
    wp_enqueue_style('vue-style', plugin_dir_url(__FILE__) . '/assets/index-BqFQXHG0.css', array(), '1.0');
    wp_register_script('vue_wp_compiled', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array('plik-js'), '1.0', true);
}

add_action('wp_enqueue_scripts', 'wp_my_plugin2');

function attach_vue()
{
    wp_enqueue_script('vue_wp_compiled');
    return "<div id='app'></div>";
}

add_shortcode('vue_app', 'attach_vue');

W tym wypadku ‘vue_app’ to wartość naszego shortcodu. W edtytorze Gutteberga czy w Elementorze przybierze on postać [vue_app].