Intégrer une appli JS dans WordPress par S2LF - page 1

Bonjour,

J’ai fait mon site web avec WordPress et Elementor (version free). http://sylvainallain.fr

En stage, j’ai crée une application météo en temps réel en JS que je souhaiterais intégrer dans mon site web et je suis passé par plusieurs étapes:

1. L’Iframe

Le solution la plus simple était pour moi de crée un sous domaine et d’utiliser une IFrame afin d’intégrer mon code JS dans mon site WordPress. Cependant j’ai cru comprendre que cette pratique n’était pas recommandé, d’autant qu’elle est un peu ralenti lors de son utilisation.

http://apiweather.sylvainallain.fr

2. L’enqueue

Après avoir lu pas mal de choses, j’ai testé de passer par wp_enqueue_script mais ces deux méthodes n’ont mené à rien.

<?php

/* Chargement de la feuille du style du theme parent */
add_action( 'wp_enqueue_scripts', 'wpchild_enqueue_styles' );
function wpchild_enqueue_styles(){
  wp_enqueue_style( 'wpm-neve-style', get_template_directory_uri() . '/style.css' );
}

function api_weather() { //Créer une fonction pour appeler les fichiers javascript et css
     
 //Charges les fichiers SAUF sur l'administration du site
   //wp_enqueue_script('jquery'); En general jquery a déjà été chargé plus haut dans le code
//donc pas la peine de le charger 2 fois.
   wp_enqueue_script('scriptWeather', get_template_directory_uri() . '/wp-content/themes/neve-1561366417-via-wpmarmite/apiweather/index.js'); //Load js files
   
   wp_enqueue_style('styleWeather', get_template_directory_uri() . '/wp-content/themes/neve-1561366417-via-wpmarmite/apiweather/css/index.css'); //Load css files
   wp_enqueue_style('weatherIcons', get_template_directory_uri() . '/wp-content/themes/neve-1561366417-via-wpmarmite/apiweather/css/weathericons.css');
}
add_action('init', 'api_weather'); // Charge notre fonction qui appelle nos fichiers
//grâce à wp_enqueue_script et wp_enqueue_style
?>

3. Le Widget

Je me suis dis que ce que je voulais intégrer (appli météo) ressemblais beaucoup à un Widget, mais lorsque je me suis lancé là dedans, je ne pouvais pas juste intégrer mon code, je devais l’adapter à une multitude classe WP que je ne comprends pas.

4. Ajouter directement le code

Dernière tentative, je crée un bloc “code” dans lequel je met directement mon code HTML, qui crée le liens avec le CSS et le JS. Résultat mon CSS s’affiche sans problème mais il ne fait pas le liens avec le JS

<head>
   <meta charset="utf-8" />
   <title>Weather App</title>
       
   <link rel="stylesheet" href="/wp-content/themes/neve-1561366417-via-wpmarmite/apiweather/css/weathericons.css" />
   <link rel="stylesheet" href="/wp-content/themes/neve-1561366417-via-wpmarmite/apiweather/css/index.css" />
   <script src="/wp-content/themes/neve-1561366417-via-wpmarmite/apiweather/index.js"></script>
   
 </head>

Je pratique du html, css, php depuis quelques mois maintenant et je suis initié au JS (même si sa syntaxe me pique encore les yeux).

C’est mon premier site WordPress et je dois admettre que quand je me jète dans le code WP j’ai un peu du mal à tout saisir.

Selon vous, quelle est la meilleure solution à ce que je veux faire, l’idée étant d’ajouter mon code dans WP sans devoir tout recoder et l’adapter à un code que je comprends pas.

Merci pour vos réponses 🙂

S2LF

5 juillet 2019 à 16:08:56