Introduction aux langages du Web

WordPress fait tout son possible pour masquez le code. Nous allons voir qu’il n’est jamais très loin et que nous pouvons y avoir recours pour résoudre certains problèmes.

Et puis, c’est tellement amusant et gratifiant pour les neurones !

Wp et la programmation

Symbole du bloc	Libellé ou menu	Fonction
	Touche F12	Permet d’examiner le HTML de la page en cours d’exécution par le navigateur : utile pour savoir où l’on va mettre les pieds avant d’écrire un script en JavaScript
	Editeur de code	Insérer son propre code HTML dans celui de la page : barre d’icones droite /icone Options /Editeur de code (ou Ctrl Shift Alt M)
	Modifier en HTML	Au lieu d’aller vous perdre dans l’Editeur de code, utilisez l’icone Option de la barre d’icones gauche /Modifier en HTML
< >	Code	A des fins pédagogiques, afficher du code HTML sans qu’il soit interprété
HTML	HTML personnalisé	Insérer dans une page, son propre code HTML (inclus style CSS et <script> JavaScript)
[/]	Code court (short code)	Un code court fait appel à une fonction définie en PHP, appelée par WordPress au moment de la génération de la page. Un code court est donc un libellé qui déclenchera une fonction côté serveur. Mais il sera bien plus simple d’utiliser directement un bloc : on ne va donc pas les utiliser.
	Apparence /Personnaliser /CSS additionnel	Possibilité d’ajouter au kilomètre, des instructions CSS pour ajuster la présentation.
	sélectionner le bloc /Réglages /Avancé	ANCRE HTML : identifiant de la balise associée au bloc CLASSE(S) CSS ADDITIONNELLE(S) : classes CSS de la balise associée au bloc ÉLÉMENT HTML : précise la balise associée à un bloc Groupe (<div> par défaut) NOM DU BLOC : le nom (name) de la balise peut être utilisé pour créer une dépendance entre des blocs (par exemple des boutons radio)
	Serveur /wp-includes /functions.php	Possibilité d’inclure des fonctions à la fin de ce fichier et de les déclencher (côté serveur) au moyen d’instructions WP. Par exemple : add_filter(‘pre_get_posts’,’ma_recherche_filter’); déclenchera ma fonction ma_recherche_filter($query) lorsque je lancerai une recherche depuis WP (bloc Recherche)

Exemple de code court, inséré dans un élément de modèle

Mais Yoast SEO met aussi à dispo un bloc utilisable qui fait a même chose !

Le HTML des hypertextes

HTML est le sigle de Hypertext Markup Language : langage de balisage d’hypertexte.

Un hypertexte est un document (page du web) ou un ensemble de documents électroniques qui permet de passer d’une information à une autre grâce à un système de renvois appelés hyperliens, ou liens hypertextes. La plupart du temps, ceux-ci prennent la forme d’un texte souligné cliquable. Un hyperlien peut également être placé sur une image, un bouton, etc. L’hyperlien permet de faire un lien entre deux endroits du même document (lien intra page) ou entre deux endroits appartenant à des documents différents (liens inter pages).

L’HTML est le langage de balisage conçu pour structurer les hypertextes (les pages web).

Les balises sont des mots encadrés de chevrons qui permettent de déterminer le début et la fin d’un élément de l’hypertexte.

Par exemple, <p> et </p> sont les deux balises qui marquent le début et la fin d’un paragraphe : en HTML, Bonjour s’écrit <p>Bonjour</p>

• Le plus souvent, il y a une balise de début et une balise de fin.

On peut mettre deux balises entre deux autres balises (comme une boîte à l’intérieur d’une autre boîte), 2 boîtes dans une boîte, une boîte dans une boîte dans une boîte, etc. à l’infinie :

La balise neutre pour définir une boîte est <div> </div> (pour diviser le contenu de la page).

Ainsi, on peut avoir <div> <p>Bonjour</p> </div> : une boîte (<p></p>) dans une boite neutre (<div> </div>)

• <div> <p>Bonjour</p> </div> affiche la même chose que <p>Bonjour</p>
• les balises <div></div> sont l’équivalent du bloc Groupe dans WP.

Les navigateurs qui récupèrent une page en HTML savent interpréter l’HTML pour afficher les informations de la page correctement, sur l’écran de l’internaute.

Pour vous donner une idée d’à quoi ressemble une page en HTML :

• Rendez-vous sur WP-admin/Pages/sélectionner une page/Modifier
• Entrez Bonjour dans un bloc paragraphe
• Dans la barre d’icones droite cliquez sur l’icone Options (3 points verticaux en haut à droite de l’écran) /cliquez sur Editeur de code pour le cocher
• Cherchez (Ctrl F) le mot Bonjour, voilà ce que vous voyez :

<!-- wp:paragraph -->
<p>Bonjour</p>
<!-- /wp:paragraph -->

<!-- et --> permettent d'afficher dans le code, pour le clarifier, un commentaire qui ne sera pas interprété par le navigateur : <!-- Mon commentaire -->

• Pour pouvoir vous afficher ce code sans qu’il soit interprété, j’ai dû utiliser le bloc Code (ci-dessus)
• Revenez à l’affichage habituel : dans la barre d’icones droite recliquez sur l’icone Options/cliquez sur Editeur visuel pour le cocher.

Nous verrons dans Blocs HTML et classes CSS comment l’on peut exploiter le HTML dans WP.

Le CSS des cascadeurs de la présentations

L’HTML permet d’insérer un paragraphe mais il ne permet pas de préciser la couleur du texte ou de présenter celui-ci sur 2 colonnes. le CSS permet de faire cela.

CSS (Cascading Style Sheets ou Feuilles de style en cascade) est un langage qui décrit la présentation des documents HTML.

Le HTML <p>Bonjour<> ou <div><p>Bonjour</p></div> va juste afficher :

Bonjour

Alors que

<div style="border: solid; border-radius:10px; background-color: grey;">
   <div style="margin: 3%;">
      <p style="text-align: center;">
         <b>Bonjour Louis</b>
      </p>
   </div>
   <div style="margin: 3%; background-color: white;">
      <p style="text-align: center;">
         Bonjour Manon
      </p>
   </div>
</div>

va afficher cela (le CSS est écrit en gras dans l’attribut style que l’on incère à l’intérieur de la balise HTML de début) :

On peut remarquer l’effet cascade sur les caractéristiques qui interfèrent entre elles, comme les arrière-plans des <div> :

• La div globale a un arrière-plan gris (background-color: grey😉
• L’arrière-plan de la div de Louis n’est pas précisé donc il hérite de celui de la dive globale (gris)
• L’arrière-plan de la div de Manon a été précisé (background-color: white; c’est à dire blanc) donc cette particularité a la priorité sur le gris général
• Remarquez que la bordure visible (solid) et arrondie (radius) de la <div> extérieure n’est pas propagée aux <div> qui sont à l’intérieur, car ces propriétés n’interfèrent pas d’une <div> à l’autre (contrairement à l’arrière-plan)
  • On verra plus tard comment cibler toutes les div ou certaines div, pour leur appliquer du CSS
• Remarquez aussi la balise html <b> (bold = franc => en gras) qui peut être considérée comme de la mise en forme bien que n’étant pas du CSS : le HTML possède en effet quelques balises de mise en forme rudimentaires préhistoriques.

Nous verrons dans Blocs HTML et classes CSS comment nous pouvons exploiter le CSS dans WP.

Du JavaScript pour interagir avec l’internaute

Un script est un programme court (qui parfois atteint une taille respectable). Quasiment toutes les applications clientes du web sont écrites en JavaScript (JS pour les pros).

Les scripts JS accompagnent la page HTML et comme le HTML et le CSS, JS est interprété par le navigateur sur votre poste client (c’est toujours ça d’économisé pour le serveur).

Pourquoi Java ? peut-être parce que c’est la fête du script !

A quoi sert JS ? Le HTML et le CSS ne sont-ils pas suffisants ?

HTML et CSS sont statiques : ils décrivent la page mais ne donnent pas la possibilité à l’internaute d’interagir dynamiquement avec elle (à part quand je clique sur un lien HTML), comme par exemple :

• Démasquer une partie de la page quand je clique sur un bouton
• Envoyer des données au serveur après les avoir saisies
• Compter le nombre de cases cochées dans la page en cliquant sur un bouton et afficher le résultat à un endroit précis de la page
• Les possibilités sont illimitées : pour le coup, JS est un vrai langage informatique (avec des boucles, des si et des fonctions), là où HTML et CSS ressemblent davantage à du paramétrage.

JS va donc pouvoir :

• Attendre un événement et déclencher une action
• Atteindre et agir sur tous les composants de la page
• Ajouter du HTML et du CSS dynamiquement dans la page pour modifier son aspect
• Etc.

Un script CSS décrit généralement un événement déclencheur et une fonction qui sera appelée par cet événement déclencheur pour être exécutée.

On peut insérer un script entre les balises HTML <script> et </script> : élémentaire !

Exemple : ce script

<div style="text-align: center;">
    <button onclick="pageTop();">
        Retour en haut de la page
    </button>
</div>

<script>
    function pageTop()
    {
        scrollTo(0,0); 
    }
</script>

Voici le résultat :

Explications :

• Le HTML contient une balise <bouton> dans une balise <div>
  • J’ai mis le bouton dans la div pour pouvoir le centrer (style= »text-align: center; » qui soit dit en passant est du CSS, comme tout ce qui est introduit avec l’attribut style)
  • L’événement est décrit dans la balise de début du bouton : <button onclick= »pageTop(); »> soit « au click sur le bouton, je déclenche la fonction pageTop()
  • Le script JS se limite à la fonction pageTop() que j’ai créé et qui se contente d’appeler la fonction standard fournie de base par JS : scrollTo(0,0)
  • La fonction pageTop() n’est déclenchée que si on l’appelle (sinon, son code n’est pas exécuté, c’est un code dormant)
  • La fonction standard scrollTo(0,0) positionne l’affichage à la position (0,0) qui représente le coin supérieur gauche de la page : merci JS et merci Google qui m’a permis de trouver cette fonction.

Question, pourquoi ne pas avoir simplement créé un bouton WP avec un lien vers un bloc qui se trouve en haut de la page ?

• C’est en effet possible mais d’une page à l’autre, les blocs ne sont pas tout à fait les mêmes : il faudrait trouver le bon bloc sur lequel mettre l’ancre dans chacun des modèles (au moins Accueil, Recherche, Archive, Page et Publication unique)
• Alors qu’avec la fonction JS, les coordonnées (0,0) étant les mêmes pour toutes les pages, j’ai juste eu à poser mon script dans le bandeau escamotable qui est en haut de la page de tous les modèles sans me soucier du lien : en place sur la page que vous consultez (j’ai mis un caractère en forme de triangle à la place de « Retour en haut de la page » ).

Nous en verrons davantage dans Scripts en JavaScript.

Du PHP pour taquiner les données

Comme JS, PHP est un vrai langage de programmation informatique mais il est utilisé côté serveur.

C’est avec le PHP qu’on accède à la base de données où sont, entre autre, stockés les commentaires des internautes, pour les récupérer et les intégrer à l’article demandé.

Le PHP permet de fabriquer la page HTML. Dans un programme PHP, on trouvera donc un mélange de HTML et de PHP, le PHP étant là pour récupérer et insérer du contenu (des données) dans la structure HTML, entre les balises :

<div>
    <?php
        echo $message
    ?>
</div>

C’est comme un fichier HTML mais on signale qu’on passe en code PHP au moyen des deux balises <?php et ?> : ci-dessus, au moyen de la fonction de base « echo », le PHP injecte dans la div le contenu de la variable $message (qui contient peut-être des informations en provenance de la base de données).

Dans un fichier PHP (extention « .php » ) on peut donc trouver de l’HTML, du SCS dans l’attribut style d’une bailse de tête HTML, des scripts JS entre des balises <script></script>, et du PHP, hors des balise ou entre deux balises de tête et de queue.

Les fichiers PHP sont stockés et exécutés/interprétés sur le serveur qui possède un interpréteur PHP. Les fichiers HTML qui en résulte sont ensuite envoyés au client au moyen du protocole https, via le réseau internet.

On peut y accéder et les modifier mais c’est très dangereux (on peut tout casser) : nous nous contenterons d’ajouter un peu de code PHP à la fin d’un fichier appelé functions.php

WP fournit des fonctions toutes prêtes (comme le font JS et PHP) pour faire des opérations très précises. Nous en utiliserons deux ou trois pour modifier le comportement de WP dans certains cas.

Pour accéder aux fichiers du serveur (attention de ne rien casser), il faudra aller sur votre compte d’hébergement :

• Sur OVH :
  • Il faut utiliser la fonctionnalité FTP Explorer (file transfert protocole) : il y a un mot de passe qui a été fourni
  • Le fichier functions.php se trouve dans le répertoire www/wp-includes
• Sur HOSTINGER :
  • Il faut utiliser le Gestionnaire de fichiers (il n’y a pas de mot de passe)
  • Le fichier functions.php se trouve dans le répertoire public_html/wp-includes

Nous en verrons davantage dans Recherche et filtres en PHP.

Nous verrons notamment comment JS et PHP coopèrent pour que le client et le serveur puissent échanger des données.