Installation d’un second site WordPress pour mon livre Java avec le Raspberry Pi 3B

Date de la dernière modification: 11 novembre 2018

Hébergé par OVH avec une seule base de données mySQL, j’ai donc ajouté un second site WordPress, en plus d’un premier, qui était déjà en parallèle avec mon plus ancien site perso sous Joomla. Je décris ici l’installation, dont je suis assez content du résultat:

===>   Java et le Raspberry Pi 3B

Ce site est petit et compact, typique d’un site de présentation pour un sujet particulier. Il est mis en place en quelques jours et m’a permis de me remettre avec WordPress, après 7 mois de disette sur mon livre, et de découvrir d’autres options et customisations.

L’auteur, qui s’est bien amusé, acceptera volontiers des commentaires!

Pour être franc, cela a été un peu la galère. J’ai pensé bien faire en commençant sur le PC sous Wampserver64, terminer le site, l’installer chez mon hébergeur et finalement écrire cet article. J’ai bricolé un export des tables mySQL, copié le répertoire du site, et bingo cela a fonctionné … sauf: impossible de l’administrer pour des raisons de CHARSET. J’ai donc tout repris, en recommençant du début chez mon hébergeur et en copiant / collant un à un le contenu des articles et autres menus depuis le PC. Heureusement que j’ai refait ce travail: à chaque adaptation du site WordPress, j’ai complété cet article-ci. Ecrire cet article après installation, il faut oublier: il y a trop de détails et combines dans tous les sens. 


Après avoir téléchargé la dernière version de WordPress (ici wordpress-4.9.8-fr_FR.zip), la version zip est préférable, nous l’installerons chez notre hébergeur, voir sur notre PC pour jouer avec. Nous choisirons sans doute un autre répertoire que wordpress et évidemment un autre s’il existe déjà. Pour une installation sur un PC, nous utiliserons http://127.0.0.1/wpjrsp avec un sous-répertoire wpjrsp de Wampserver64, et l’URL d’installation http://127.0.0.1/wpjrsp/wp-admin/setup-config.php sera automatiquement activé. Dans la fenêtre de notre explorateur, nous aurons après avoir cliquer sur le bouton « C’est parti »:

Je ne décrirai pas comment installer mySQL avec phpMyAdmin, voir une seconde base de données, comme worpress ici, avec un interclassement utf8_unicode_ci plus adapté pour plusieurs langues. Je considère mon cas: j’ai déjà une hébergeur chez OVH, avec une seule base de données (plusieurs coûtent plus cher) et déjà une site WordPress installé: il faudra donc changer le préfixe, par exemple wp2_. L’installateur Webpress nous créera donc un second set de table, sans écraser ni le premier site Joomla, ni le premier WordPress.


Si nous avons déjà un premier site WordPress, voir un site de test sur notre PC (c’est un conseil), et après avoir vérifier l’installation avec par exemple http://127.0.0.1/wpjrsp, 

Nous commencerons par installer les extensions que nous avons besoin et que nous avons déjà utilisés. Nous ne décrirons pas ici comment éditer notre site, et ne donnerons que quelques pistes et les difficultés rencontrés.

Il est tout à fait raisonnable de commencer sur le PC et ensuite de refaire le travail sur notre hébergeur. Ce sera un excellent exercice WordPress. Sauvegarder le site et la base de données (voir une partie des tables avec l’extension wp2_) est beaucoup plus compliqué, voir presque impossible, surtout si la version du site WordPress de notre hébergeur est plus ancienne avec des DB_CHARSET différents.


Les extensions intéressantes à mon avis pour bien débuter simple:

  • Gutenberg (éditeur en développement)
  • Post Views Counter (voir identifier le nombre de lectures)

nous les avons installées et activées. Pour installer Post Views Counter nous mettrons ce terme dans le champ de recherche de la page du menu Extension / Ajouter.


Nous avons choisi et gardé le thème Twenty Sixteen actif et nous commencerons avec Apparence / Personnaliser par corriger les deux éléments du titre et les Couleurs qui nous plaisent. Nous avons choisi, sous Média de l’en-tête, de masquer l’image. A chaque opération il ne faudra pas oublier de cliquer sur le bouton Publier.

La première opération a été de purger au mieux le site tel qu’il se trouve après l’installation. Nous avons voulu quelque chose de beaucoup plus simple. Après chaque adaptation, il faudra « publier » les corrections. Avec le menu Apparence / Widgets nous avons retiré tous les articles en les supprimant des trois Colonne latéral du Blog / Pied de page 1 et Pied de page 2. Ensuite, sous Apparence / Menus nous avons retiré les pages du Menu supérieur (mais évidemment pas l’Accueil) et tous les liens du Menu des liens de réseaux …. décochant aussi la case Menu des liens de réseaux sociaux. Sous Personnalisation / Média de l’en-tête nous avons masqué l’image d’en-tête. 

Le plus délicat sans doute est d’effacer les pages successives qui sont présentées au démarrage sur la page d’accueil. Il n’est pas possible de les retirer facilement. Il faut utiliser Personnalisation / Options du thème et remplacer toutes les pages spécifier par le choix de recherche nommer –Selectionner — (j’ai mis un moment pour trouver).

Dans le menu Pages , nous sectionnerons Actions Groupées et Déplacer dans la corbeille pour toutes les pages, sauf la page d’accueil.

Il faudra ensuite, si nous le désirons, désactiver tous les commentaires: sous Réglages / Discussion.

La seconde opération est d’éditer la page d’accueil avec un nouveau titre et contenu. Juste sous le titre nous cliquerons sous classique, pour faire passer l’éditeur en mode HTML. Nous y mettrons des liens URL sans oublier l’option de lien « Ouvrir le lien dans un nouvel onglet » plus confortable pour le lecteur de nos pages (je l’ai utilisé dans toutes mes pages).

Finalement l’idée est de créer un certain nombres d’articles pour les déposer dans le menu principal en haut de la page. L’article installé Bonjour tout le monde pourra être remplacé par un nouveau titre et contenu. Dans les articles, par simplicité, surtout si nous avons une article dédié au contact, nous décocherons Autoriser les commentaires et Autoriser les notifications par ping (en utilisant modification rapide de l’éditeur des articles).


Ensuite nous ajouterons ces articles dans le menu principal en haut. Pour ce faire nous utiliserons Apparence / Menus et y déposerons nos articles que nous pourrons organiser à notre guise.

Sur un PC où le menu vient sur toute la largeur, il peut être intéressant d’y changer la couleur de fond et la police en gras. Ceci doit se faire dans le fichier style.css du thème. Ici c’est  à la ligne 3020. L’édition peut se faire avec Apparence / Editeur et il faudra se méfier. Il est aussi possible avec un outil comme CORE FTP LE de l’éditer directement après avec créer une copie de sauvegarde. L’essayer sur le PC avec un éditeur comme Notepad++ dans le répertoire du thème (par exemple D:\wamp64\www\wpjrsp\wp-content\themes\twentysixteen) sera préférable. 

.main-navigation .primary-menu,
.main-navigation .primary-menu > li {
border: 0;
/* jbb */
background-color: #ffecb3;
font-weight: bold
}

Un site sera plus joli et attractif si nous y ajoutons des images. Nous commencerons par sélectionner les 3 images installées et les effacer.
Sous Médias / Sélection de masse nous cocherons toutes les images pour les effacer.

Sous Médias / Ajouter nous choisirons des images sur notre PC pour les importer dans notre bibliothèque.

Sous Apparence / Personnaliser / Widgets / Barre latéral nous indiquerons Ajouter un Widget et Galerie. Dans Galerie nous ajouterons toutes les images de notre bibliothèque et finalement Insérer la Galerie, sans oublier un Publier tout à la fin.

En retournant dans la Galerie nous pourrons réorganiser les images et y ajouter une Légende et une Description. La légende apparaîtra sur la page d’accueil alors que la description viendra sur une page entière avec l’image en haut suivi d’un texte où il est même possible d’y ajouter des références URL, mais à la main. Ici un exemple avec un URL dont la page sera présentée dans un nouvel onglet:

<a href="https://fr.wikipedia.org/wiki/Raspberry_Pi" rel="noopener" target="_blank">Le site Wikipedia du Pi en français</a>

Améliorations

L’éditeur de texte ne nous conviendra certainement pas.
L’extension TinyMCE Advanced pourra être installée, activée et un certain nombre de boutons seront installé, comme la couleur de fond de paragraphes utilisée pour le titre ici.

Nous avons aussi introduit le Shortcode Date de la dernière modification: 11 novembre 2018 pour afficher la date de modification dans nos pages (montrant que nous sommes actifs à Google … un de ses critères).
Le code qui suit a été introduit dans la partie Fonctions du thème, functions.php, en fin de fichier, et avec Apparence / Éditeur. L’essayer sur le PC avec un éditeur comme Notepad++ dans le répertoire du thème (par exemple D:\wamp64\www\wpjrsp\wp-content\themes\twentysixteen) sera préférable. 

//JBB
// Ajout d'un shortcode pour insérer une date de dernière modification
function datedermaj_handler($atts, $content=null){
return the_modified_date( 'j F Y', 'Dernière modification: ' , $after, 0 );
}
add_shortcode( 'datemodif', 'datedermaj_handler' );

Sauvegarde et restauration sur PC

Un article plus récent et différent a été publié: Restauration complète d’un site Web sur PC

Date de la dernière modification: 11 novembre 2018

C’est essentiel de maîtriser les sauvegardes et de les récupérer. Comme pour des documents traditionnels, on n’a pas envie de devoir les rédiger à nouveau. Pour WordPress on n’aura en principe aucune copie papier.

J’aurai peut-être le courage un jour, d’écrire quelque chose de plus complet, comme je l’ai fait pour Joomla.

Voir aussi évidemment mon WordPress – Commencer sur un PC.

Sauvegarde

Pour la sauvegarde j’ai utilisé BackWPup ( https://wordpress.org/plugins/backwpup/ ) .
Cette extension est facile à utiliser. Après installation, nous irons dans le tableau de bord et choisirons BackWPup/Nouvelle opération. Nous définirons le format zip et l’option Sauvegarder dans le répertoire. Le fichier généré sera situé dans quelque chose comme /www/wordpress/wp-content/uploads/backwpup-5e3b04-backups/ et devra être téléchargé sur le PC avec FTP.

Restauration

C’est nettement plus « compliqué ». C’est assez bien décrit dans How To Restore Your WordPress Website Backup On Your Local Server Using WAMP

Je préfère ma « méthode Joomla » où je sauve toute la base de données. 
Mais, tout à la fin, il faudra bien vérifier que:

  • Le fichier wp-config.php dans le répertoire wordpress de Wamp (ou autre), contient la bonne base de données et l’utilisateur/mot de passe:

    /** Utilisateur de la base de données MySQL. */
    define(‘DB_USER’, ‘…’);/** Mot de passe de la base de données MySQL. */
    define(‘DB_PASSWORD’, ‘….’);/** Adresse de l’hébergement MySQL. */
    define(‘DB_HOST’, ‘localhost’);
  • Les entrées siteurl et home dans la table wp_options (utiliser PhpMyAdmin sur le PC) doivent contenir la référence locale 127.0.0.1 et non l’adresse du site importé (par exemple http://127.0.0.1/wordpress).

WordPress – Débuter sur un PC

Pour débuter, c’est plus qu’une bonne idée d’installer d’abord WordPress sur un PC à la maison. Nous pourrons ensuite décider de l’installer définitivement chez son hébergeur (voir d’en trouver un).
Cela nous permettra de faire de nombreuses investigations, d’essayer des variantes de plug-ins et de préparer quelques articles. Il est aussi possible d’installer WordPress sur un Synology: c’est de cette manière que j’avais débuté avec Joomla.

Il faut vraiment de bonnes bases en informatique en général, même si le Web est une source d’information incroyable. Au début il faudra s’y retrouver en installant et activant les bons éléments et les bonnes extensions. Il faudra bien noter toutes les adaptations sur le thème et les extensions, avant de les installer définitivement.
Il ne faudra pas oublier de maîtriser les sauvegardes et d’essayer de les réinstaller. Comme pour mon article Sauvegarde de Joomla et restauration sur PC, j’en ai fait ici un premier jet pour WordPress.

Nous commencerons par exemple avec
http://wp-infinity.com/installer-wordpress/local-usb-xampp-wamp-instantwp/.

Pour cet article-ci, je viens de refaire l’exercice avec Xampp sur un Laptop:
https://www.apachefriends.org/fr/index.html.
J’utilise aussi un ancien Wamp64 avec Joomla et WordPress sur mon PC: aucun soucis. Cela m’a permis de n’utiliser qu’une seule base de données mySQL (moins cher chez un hébergeur).

Après téléchargement, un fichier comme xampp-win32-7.2.0-0-VC15-installer.exe pourra être exécuté pour une installation, par exemple sur D:\xampp (ici sur un second disque) en laissant les options suggérées et en ignorant les annonces publicitaires apparaissant dans le navigateur Web.
Le programme Windows de Xampp devra être lancé à chaque utilisation de notre WordPress local, pour activer le serveur Web sur son PC ou Laptop. Uniquement les services Apache et MySql sont nécessaires et lancé dans le « Control Panel » de XAMPP (bonne idée de le mettre en raccourci sur le bureau, voir la barre des tâches).
L’adresse du serveur Web local, inaccessible de l’extérieur sera http://127.0.0.1.

Nous trouverons WordPress sur https://fr.wordpress.org/
J’ai pris la version wordpress-4.9.1-fr_FR.zip que j’ai unzippé dans D:\xampp\htdocs\wordpress

Avant de démarrer l’installation, il faudra créer une base de donnée avec http://localhost/phpmyadmin/. Tout est bien expliqué dans http://wp-infinity.com/installer-wordpress/local-usb-xampp-wamp-instantwp/. Il ne faudra pas oublier le fichier wp-config.php et ses paramètres.

Nous lancerons l’installation avec  http://127.0.0.1/wordpress

L’identifiant et le mot de passe doivent être bien conservés.

Pour voir ensuite son site local installé, c’est aussi:  http://127.0.0.1/wordpress .
Pour administrer son site local et ajouter des articles:  http://127.0.0.1/wordpress/wp-admin

Ma configuration WordPress

Après l’installation rapide et standard de WordPress, 3 thèmes « twenty » sont installés. Tout de suite, je n’ai pas été satisfait, car il me fallait un accès sur toute la largeur de la page, afin d’ajouter dans mes pages des exemples de code pour la programmation.

J’ai tout de suite découvert le thème Codilight ( https://fr.wordpress.org/themes/codilight-lite/ ) qui me plaisait et j’ai dû rajouter Taxonomy Thumbnail ( https://fr.wordpress.org/plugins/sf-taxonomy-thumbnail/#installation ) afin d’activer l’utilisation de vignette. J’ai donc installé et activé ce thème et cet extension.

Pour les sauvegardes, j’ai installé BackWPup ( https://wordpress.org/plugins/backwpup/ ) et déjà un peu joué, et vraisemblablement, à combiner pour la partie base de données avec Joomla (voir mon article: Sauvegarde de Joomla et restauration sur PC ).