Arts numériques

Afficher des posts verticalement avec un effet d'apparition

Stéphane Noel — 2021-05-01T15:54:21Z

Cette page permet de faire apparaitre des posts dans l'ordre (verticalement) mais alÃ©atoirement horizontalement, avec quelques tailles spÃ©cifiques en largeur.
Les images apparaissent en scroll avec un effet de mouvement et de fondu.

Lazyload + dÃ©tection de prÃ©sence dans le viewport
Le chargement de ces images utilise lazyload, un type de script qui vÃ©rifie lors du scroll de la page si les images vont entrer dans le viewport (la partie visible de la page) et dÃ©clenche leur chargement si c'est le cas.

Un deuxiÃ¨me script vÃ©rifie si l'image est chargÃ©e et effectivement dans le viewport, et si c'est le cas la fait apparaitre.

La librairie "vanilla lazyload" est utilisÃ©e par le script qui ne s'appuie pas sur jQuery.

Le document zippÃ© ci-joint fournit le code complet sous la forme d'un template part pour wordpress, accompagnÃ© du fichier lazyload prÃ©vu pour Ãªtre placÃ© dans le dossier "assets" du thÃ¨me theme_base.

Afficher les articles en "accordÃ©on"

Stéphane Noel — 2021-03-28T16:35:45Z

Cacher et dÃ©plier le contenu d'articles est facile avec bootstrap, car un module a Ã©tÃ© codÃ© pour Ã§a.

Qu'est ce qu'un accordÃ©on en dÃ©veloppement web

Un accordÃ©on, sur le web, est un mode d'affichage dans lequel on affiche pour chaque Ã©lÃ©ment une barre horizontale, et en clic on dÃ©plie l'information complÃ¨te.

Un code dÃ©jÃ prÃªt sur le site de Bootstrap

En fait, les systÃ¨mes d'accordÃ©on sont couant sur le web, et Bootstrap dispose de codes html/css/javascript intÃ©grÃ©s. Il nous suffit donc de copier le code sur le site de documentation de Bootstrap et de le placer dans un template part pour que Ã§a marche.

Il n'y a mÃªme pas Ã placer de code javascript, le tout fonctionne d'emblÃ©e.

Placer le code de la boucle Wordpress

Le seul travail Ã faire sera donc d'intÃ©grer la boucle wordpress Ã ce code, et choisir quelles informations afficher.

Voici un premier exemple simple avec le titre dans la partie visible et le reste de l'article dans la partie cachÃ©e.

 array( 'post' ), //'category_name' => 'identite-graphique,illustration', 'posts_per_page' => '10', 'order_by' => 'ASC', ); query_posts($args); $compteur=0; ?>      ">  
 " class="accordion-collapse collapse" aria-labelledby="flush-heading" data-bs-parent="#accordeon_theme_base">

Il est Ã noter qu'il n'est pas possible de placer des liens dans la partie "titre" de l'accordÃ©on : cliquer sur cette partie ouvre ou ferme le contenu, c'est tout.

Voici une exemple plus poussÃ©, avec un logo et les catÃ©gories en plus.

Son code :

 array( 'post' ), //'category_name' => 'identite-graphique,illustration', 'posts_per_page' => '10', 'order_by' => 'ASC', ); query_posts($args); $compteur=0; ?>      ">  
 " class="accordion-collapse collapse" aria-labelledby="flush-heading" data-bs-parent="#accordeon_theme_base">

Le rÃ©sultat :

Des posts "draggables" en homepage

Stéphane Noel — 2021-03-27T17:07:07Z

Plusieurs fois demandÃ©, voici un exemple de code permettant de placer des Ã©lÃ©ments alÃ©atoirement dans l'espace de la page, et pouvant Ãªtre dÃ©placÃ©s avec la souris.

Comment aborder ce genre de cas ?

Ce cas est surtout intÃ©ressant parce qu'Ã partir d'une demande, il faut rechercher les solutions techniques pour y rÃ©pondre.

Nous devons Ãªtre en mesure de :
– disposer alÃ©atoirement des Ã©lÃ©ments dans l'espace d'un bloc
– permettre leur dÃ©placement par drag & drop
– mettre Ã l'avant plan le bloc lorsqu'il est cliquÃ©

Ces trois choses passent par du javascript, et la premiÃ¨re chose Ã faire sera de trouver une librairie javascript pour gÃ©rer le "drag & drop". Une recherche rapide sur le net permet de trouver plusieurs librairies open source le permettant. AprÃ¨s avoir lu la documentation et regardÃ© les dÃ©mos, j'ai choisi la librairie displace, trÃ¨s lÃ©gÃ¨re et qui permet de faire le travail.

Test "hors Wordpress"

La premiÃ¨re chose Ã faire est de modÃ©liser notre demande en dehors du thÃ¨me wordpress. Ã‡a peut sembler idiot, mais parfois les librairies peuvent s'avÃ©rer difficile Ã mettre en place. Dominer techniquement la mise en place des Ã©lÃ©ments en htl/css/javascript est donc une bonne faÃ§on de vÃ©rifier qu'on est capable de mettre au travail la librairie. Si un problÃ¨me survient qui empÃªche le bon fonctionnement du code, il sera plus facile de dÃ©bugguer ou dÃ©cider que ce n'est pas la bonne librairie pour la tÃ¢che qui nous incombe.

Voici le code qui permet de tester la base, sans le placement alÃ©atoire, juste pour voir si le drag & drop fonctionne :

     Un test de drag & drop     Element un
Un lien
 Element deux
 Element trois
 Element quatre
 Element cinq

Pour que ce code fonctionne, il faut que la librairie displace.min.js soit placÃ©e dans le mÃªme rÃ©pertoire que notre page html, Ã©videmment. On obtient aprÃ¨s quelques mouvements, ceci :

Il manque deux choses pour ce code :
– le placement alÃ©atoire des blocs
– le changement de position en cas de changement de taille de la page

Je vous Ã©pargne ces codes que je place dans la dÃ©mo complÃ¨te ici :

Code en version pur html/css/javascript

Avec la librairie

CrÃ©er un tempate part pour le code

Une fois le test rÃ©ussi, on place le code dans un template part de Wordpress.
L'utilisation d'un template part n'est pas obligatoire, mais permet d'isoler facilement le code.

Voici la portion de code et la librairie displace.min.js, qui doit Ãªtre placÃ©e dans le dossier assets/ (sans quoi Ã§a ne marchera pas, Ã©videment.

Le template part et la librairie displace

N'oubliez pas de placer ces Ã©lÃ©ments au bon endroit : le template part dans le dossier morceaux/ et le fichier javascript dans assets/

Le code pour placer ce template part dans la page home.php du thÃ¨me "theme_base" :

Code pour un scroll horizontal

Stéphane Noel — 2021-03-21T22:56:19Z

Sur base du theme "theme_base", voici un code permettant de crÃ©er un scroll horizontal.

Le code se base au maximum sur Bootstrap. Il utilise cependant un peu de javascript pour calculer la taille du scroll horizontal.
Il affiche le contenu de la boucle, prÃ©cÃ©dÃ© par une page appelÃ©e "Baseline" si elle existe.

OÃ¹ placer ce code

Ce code peut Ãªtre dÃ©posÃ© dans un template part et appelÃ© avec le code d'inclusion de ceux-ci. Pour un template part du nom de home__scroll_horizontal.php, on aura donc :

get_template_part( 'morceaux/home_scroll_horizontal' );

Il peut aussi Ãªtre codÃ© directement dans la page home par exemple. Dans ce cas, on ajoutera les fonctions get_header() et get_footer() avant et aprÃ¨s le code.

Le code

   'page', 'title' => 'Baseline' ); query_posts($args); if(have_posts()) : ?>    
 
      ">   'mw-100 mh-100' )); ?>
  " title="">

La navigation et le footer

La navigation et le footer doivent Ãªtre adaptÃ©s.

La navigation :

   " class="titre-petit text-primary">   'menu-principal', 'container' => 'div', 'container_id' => 'navbarSupportedContent', 'container_class' => 'collapse navbar-collapse ', //'collapse navbar-collapse justify-content-end', 'menu_id' => false, 'menu_class' => 'navbar-nav ms-auto', 'depth' => 3, 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker() )); ?>

Le footer

  " rel="home"> est un site Wordpress accompagnÃ© du thÃ¨me gr3_minimal

CrÃ©er un template en html/css pur

Stéphane Noel — 2021-03-14T15:23:47Z

Lorsqu'on dÃ©bute, il est difficile de gÃ©rer la crÃ©ation d'un thÃ¨me directement dans un thÃ¨me wordpress : on coupe les fichiers en morceaux, ils sont exÃ©cutÃ©s via la machinerie de Worpress, etc.
On peut en fait dÃ©marrer avec du html pur, et intÃ©grer ensuite le html dans le thÃ¨me morceau par morceau, ce qui peut Ãªtre plus facile.

Analyser le template

Il s'agit de transformer un wireframe en une page html/css.

Prenons donc le wireframe de la page single, la plus simple Ã analyser. Il s'agit d'en identifier les diffÃ©rents morceaux pour aider la stucture du html. On contrÃ´le que la structure correspond aussi dans la version smartphone.

La particularitÃ© de ce site par rapport Ã un site bootstrap standard est que le titre du site est grand, et que la navigation est placÃ©e en dessous du titre du site et pas Ã sa droite comme c'est massivement le cas. Ã‡a va nous obliger Ã une petite adaptation du code.

Sur base de l'analyse du wireframe, on dÃ©duit une structure html, que l'on place dans une page avec tous les imports nÃ©cessaires de bootstrap (css et js pour le menu, plus les icÃ´nes Ã toutes fins utiles).

Une requÃªte ajax dans un template

Stéphane Noel — 2021-03-08T16:41:32Z

Charger un contenu en simple clic, sans changer de page, peut Ãªtre cool. Voici quelques bouts de code pour rÃ©ussir Ã§a.

Plusieurs morceaux de code

La difficultÃ© des requÃªtes en ajax est qu'elles sont constituÃ©es de plusieurs morceaux de code : du html, du javascript, du php et du html encore.
Pour ne pas se perdre il faut comprendre la fonction de ces diffÃ©rents Ã©lÃ©ments.

Un bouton
Le premier Ã©lÃ©ments est un bouton en html, associÃ© Ã une fonction javascript

Ce bouton appelle la fonction "charge_article" en lui envoyant l'argument "52", qui est l'id de l'article que nous voulons charger. Remplacez-le par l'id d'un article existant, ou dans une boucle wordpress, par le code php .
Le div avec l'id #conteneur est destinÃ© Ã recevoir le rÃ©sultat de la requÃªte.

Une fonction javascript
Nous allons maintenant Ã©crire la fonction javascript qui reÃ§oit l'appel de fonction, dans un fichier js chargÃ© dans le site ou directement dans la page :

Cette fonction rÃ©cupÃ¨re l'id, puis fait une requÃªte ajax. Javascript va charger une page prÃ©sente dans la machinerie de Wordpress, une page spÃ©cialement dÃ©diÃ©e Ã cet usage.

Une fonction php
La fonction javascript appelle une fonction php du nom de charger_article() et rÃ©cupÃ©rer l'id du post.
Cette fonction doit Ãªtre placÃ©e dans le fichier functions.php du thÃ¨me !

function get_article() { // construire la requÃªte $args = array( 'post_type' => 'post', 'p' => $_REQUEST["post_id"], ); // envoyer $resultat = new WP_Query( $args ); $reponse = ''; // traiter la requÃªte, un seul rÃ©sultat ici if ( $resultat->have_posts() ) { while ( $resultat->have_posts() ) { $resultat->the_post(); $reponse .= get_template_part('morceaux/ajax_article'); } } else { $reponse .= "rien reÃ§u"; // ou faire autre chose } echo $reponse; exit; // fin de la requÃªte } // rendre la requÃªte disponible pour les utilisateur loguÃ©s ou non loguÃ©s add_action('wp_ajax_get_article', 'get_article'); add_action('wp_ajax_nopriv_get_article', 'get_article');

Un template part
Ce n'est pas encore fini ! Ce code fait une requÃªte sur la base de donnÃ©e, et prÃ©pare une boucle wordpress prÃªte Ã l'emploi. Elle appelle alors un template part, un morceau de fichier permettant d'entourer les Ã©lÃ©ments tirÃ©s de la base de donnÃ©e d'un code html permettant son affichage en accord avec le reste du site.
En voici un exemple simple :

 'mb-3' )); ?>

Il affiche l'image mise en avant, le titre et le texte complet, avec un peu de html. On peut Ã©videmment y mettre tout ce qui est possible dans une loop wordpress.

C'est fait !

Chacun de ces fichiers est Ã©videmment amÃ©nageable selon les besoins, mais la logique est posÃ©e.

Fichiers de base

Stéphane Noel — 2021-03-08T00:25:16Z

Ce thÃ¨me est en cours de dÃ©veloppement, voici une version 0.2 basÃ©e sur Bootstrap 5.

Templates

Le thÃ¨me comporte les templates :
– home.php
– single.php
– page.php
– archive.php

Ã‰lÃ©ments embarquÃ©s

– Bootstrap version 5 beta2
– les icÃ´nes de Bootstrap 5
– la police Rubik en light, regular, medium et bold

Extras

– des exemples de "templates parts"
– un exemple de template alternatif pour les articles
– une fonction convertissant les menus de wordpress en menu compatible avec Bootstrap.
– une amÃ©lioration de bootstrap : les tailles de margin, padding, goutiÃ¨res sont codÃ©es en taille 6, 7, 8 et 9, permettant par exemple des paddings et margin en m-6 ou pe-7 par exemple

Attention

Bootstrap 5 modifie certains noms de classe : mr-5 devient me-5 par exemple. Se reporter Ã la documentation officielle pour ne pas avoir de mauvaise surprise.
De mÃªme, jQuery a Ã©tÃ© abndonnÃ© pour cette version, ce qui modifie certains comportements javascript.

PrÃ©parer une structure et un wireframe

Stéphane Noel — 2021-02-28T21:36:18Z

Un thÃ¨me wordpress se rÃ©flÃ©chit sur base de templates, on l'a vu. Construire un thÃ¨me demande donc d'avoir compris les diffÃ©rents templates accessibles et d'en jouer pour rÃ©pondre Ã la demande. A partir de lÃ , on rÃ©flÃ©chit Ã la structure de chacun de ces templates, gÃ©nÃ©ralement sur base de wireframes avec du papier et un stylo.

Identifier les besoins

Lors de rÃ©unions prÃ©paratoire, il faut Ã©videmment identifier le besoin auquel rÃ©pondra le site. Typiquement, notre site est un portfolio de graphiste.
On aura besoin de :
– dÃ©finir les compÃ©tences de celui-ci,
– de montrer l'activitÃ© rÃ©cente,
– de montrer des productions liÃ©es aux diffÃ©rents champs de compÃ©tence,
– permettre le contact via un formulaire,
– renvoyer vers les rÃ©seaux sociaux
Le design du site doit Ãªtre en accord avec les choix esthÃ©tiques que dÃ©fend notre graphiste. Ici un design simple, voire minimal, mais orientÃ© sur le contenu et Ã©lÃ©gant.

Identifier la structure

Un site possÃ¨de toujours une page d'entrÃ©e, qui est en gÃ©nÃ©ral la page la plus complexe Ã construire, puisqu'elle contiendra - en plus d'un header et d'un footer - diffÃ©rents contenus piochÃ©s dans la base de donnÃ©e.

Typiquement : la baseline du site, quelques productions rÃ©centes mises en avant, un certain nombre de contenus liÃ©s Ã des catÃ©gories prÃ©cises.

A partir de cette page, le menu et les diffÃ©rents Ã©lÃ©ments de cette page vont pointer vers des contenus spÃ©cifiques, typiquement des pages, des posts et des catÃ©gories.

Voici une mise en page assez simple.

On commence par une vue du template affichant un article :

(L'idÃ©e ici est de proposer un premier cas d'intÃ©gration et de dÃ©veloppement, il n'y a rien de compliquÃ© Ã rÃ©aliser en Wordpress donc)

Identifier les templates

Ce site Ã©tant simple, il va demander le dÃ©veloppement des templates de base de Wordpress que sont
– home.php : le template de la page d'entrÃ©e
– single.php : le template des articles (post)
– page.php : le template des page (typiquement une page "a propos"
– archive.php : le template par catÃ©gorie

On doit alors rÃ©pondre Ã quelques question spÃ©cifique au web :
sur les Ã©crans larges, comment se disposent les contenus ?
– occupent-ils tous l'espace de la page de gauche Ã droite ?
– limitent-ils leur taille en se centrant dans la page ?
– limitent-ils leur taille en restant sur la gauche ?

Quelques dÃ©tails graphiques ou spÃ©cificitÃ© de navigation peuvent alors Ãªtre pensÃ©s. Typiquement :
– un choix radical de typo ou de couleur,
– une disposition de la navigation particuliÃ¨re (dans l'espace, dans la maniÃ¨re dont elle apparait (survol, clic, etc)
– un accÃ¨s aux infos particulier (au hasard, muet, ou au contraire par saturation)
– un mÃ©thode d'affichage des images (trÃ¨s grandes, trÃ¨s petites, colorisÃ©es, avec un effet d'apparition/disparition, etc)

Trop de dÃ©tails nuisent Ã la lisibilitÃ© et rendent le site brouillon, voire compliquÃ© Ã maintenir dans le temps. Tout le monde n'a pas le temps de redÃ©velopper un site tous les 6 mois, faites des choix qui peuvent tenir un an ou deux au moins. Ã‰vitez les trucs Ã la mode, ils seront dÃ©modÃ©s rapidement.

RequÃªtes GET et POST

Stéphane Noel — 2021-02-01T11:51:54Z

Pour comprendre le fonctionnement des CMS, il est nÃ©cessaire de comprendre ce qu'est une requÃªte en GET, et ses dÃ©rivÃ©s contemporains.

Un CMS est un logiciel installÃ© sur un serveur, qui va recevoir des requÃªtes (la demande de voir certains contenus) et renvoyer les contenus correspondants, quand c'est possible et autorisÃ©. Par dÃ©faut, un CMS montre le contenu de la page d'entrÃ©e du site, ensuite, selon les requÃªtes, il va afficher telle ou telle page spÃ©cifique : un article, la biographie d'un auteur, une liste de pages correspondant Ã une catÃ©gorie ou une recherche, etc.

Comment le CMS peut il identifier la demande qui lui est faite ? Il s'appuie sur l'adresse qui lui est envoyÃ©e. Lorsqu'on demande l'accÃ¨s Ã la page principale d'un site, seule l'adresse web suffit, comme
https://arts-numeriques.codedrops.net/
Mais si on veut accÃ©der Ã un contenu particulier, l'adresse devient plus longue
https://arts-numeriques.codedrops.net/-CMS-Wordpress-
Comme on le voit ici, il y a un ensemble de lettre en plus dans l'adresse, et cet ensemble est analysÃ© par le logiciel pour savoir quel contenu est demandÃ©. Sa structure est donc prÃ©cise et un mauvais copier coller put envoyer sur une page d'erreur.

L'adresse n'est donc pas une simple adresse mais une requÃªte qui passe dans l'adresse. On dit qu'elle est alors en GET, explicitement prÃ©sente dans l'adresse, ce qui permet sauvegarder cette adresse ou la donner Ã quelqu'un d'autre : en copiant et collant cette adresse, on peut retrouver exactement la mÃªme page par la suite.

Ce type de requÃªte a Ã©videmment ses limites : il est dÃ©conseillÃ© de gÃ©rer un mot de passe dans une requÃªte en GET, puisque son piratage serait trop simple.

La requÃªte en GET

Les origines de la requÃªte en GET est l'usage des formulaire. Pour le comprendre, plaÃ§ons ce code html dans une page sur un serveur PHP :

     Un test de requÃªte GET   Recevoir une information en GET
 J'ai reÃ§u ceci:

Ã‡a donne Ã§a.

En fait, la fonction print_r($_GET) ; permet d'afficher ce que le serveur a reÃ§u comme requÃªte en get, c'est Ã dire ce qu'il a reÃ§u dans l'adresse en plus de l'adresse du serveur lui-mÃªme. Actuellement, en pointant sur l'adresse de la page, il n'y a rien dans $_GET, qui est une variable crÃ©Ã©e par le serveur contenant les informations rÃ©cupÃ©rÃ©es dans l'adresse de la page.

Ajouter une requÃªte
Si on ajoute dans l'adresse de la page ceci : ?truc=essai
On obtient cela :

le serveur envoie une variable tableau (une variable contenant une liste d'information et pas une seule) d'un type particulier, qu'on appelle tableau associatif : c'est une liste de clÃ©s (ici truc par exemple) contenant chacune une valeur (ici "truc" contient "essai").

On peut donc envoyer via l'adresse plusieurs informations, et c'est souvent le cas, via l'association cle-valeur, comme ceci :
?truc=essai&machin=info
Remaquez que le point d'interrogation sÃ©pare l'adresse des diffÃ©rents Ã©lÃ©ments de la requÃªte, et que chaque duo clÃ©/valeur est sÃ©parÃ© par un esperluette (&).

Installer Wordpress sur le serveur GR3

Stéphane Noel — 2020-03-18T10:50:25Z

DÃ©ployer Wordpress sur un serveur distant est une opÃ©ration lÃ©gÃ¨rement diffÃ©rente d'une installation sur MAMP. Plus simple, en fait, car vous n'avez pas a crÃ©er d'accÃ¨s, c'est le webmaster - moi - qui le fait pour vous.

Disposer des informations correctes

Wordpress necessite une base de donnÃ©e, en mySql, et les codes d'accÃ¨s Ã cette base de donnÃ©e, sans quoi il est impossible de le dÃ©ployer.
J'ai crÃ©Ã© ces accÃ¨s pour vous, et vous devez en disposer pour continuer ce tutorial. Si ce n'est pas le cas, mailez-moi.

Pour Ã©viter les problÃ¨mes dÃ »s Ã un mauvais upload, j'ai moi-mÃªme dÃ©posÃ© le dossier de wordpress sur vos espaces d'hÃ©bergement. Un dossier se trouve donc sur votre dossier de travail sur le site gr3, et il porte le nom de portfolio, au premier niveau de votre espace. VÃ©rifiez Ã©ventuellement par FTP si vous avez un doute.

Si vous accÃ©dez Ã ce dossier via votre navigateur prÃ©fÃ©rÃ©, vous serez accueilli par la page d'installation par dÃ©faut de Wordpress.

Le nom de la base de donnÃ©es et l'identifiant sont identique dans notre cas. Ils commencent par esaconnection_ suivi d'un chiffre.
Le mot de passe, ben c'est le mot de passe.
L'adresse de la base de donnÃ©e est un mot commenÃ§ant par sql suivi d'un chiffre.
Le prÃ©fixe ne doit pas Ãªtre changÃ©, laissez "wp_".

Une fois que vous avez envoyÃ© l'information, Wordpress vÃ©rifie l'information et signale un Ã©ventuel problÃ¨me. VÃ©rifiez dans ce cas les informations et les champs, et si le problÃ¨me persiste, envoyez moi un mail, il se peut que je me sois trompÃ© lors des multiples copier-coller que j'ai dÃ » rÃ©aliser pour crÃ©er vos accÃ¨s.

L'Ã©cran suivant vous permettra de crÃ©er vos accÃ¨s au back-office de Wordpress.
ATTENTION ! Cette fois les accÃ¨s sont en ligne, et pas sur MAMP. Il faut donc que vous utilisiez un mot de passe un peu costaud, car les tentatives d'intrusion sur les sites en Wordpress est une rÃ©alitÃ©. Des bots essaient rÃ©guliÃ¨rement d'accÃ©der au back-office en utilisant les mot de passe les plus courants. Trouvez donc un vrai mot de passe dont vous vous souviendrez ! La procÃ©dure de re-crÃ©ation de mot de passe pourra Ãªtre utilisÃ©e si vous perdez vos accÃ¨s, mais bon, autant faire Ã§a bien.

Je reste Ã votre disposition en cas de problÃ¨me technique.