Documentation du Dr FRAPPE

Ce wiki regroupe les résultats de mes expériences en informatique accumulés au cours de mes recherches sur le net.

Dans la mesure du possible, j'ai cité mes sources ; il en manque certainement…

Créateur de livres
Ajouter cette page à votre livre

Créateur de livres
Retirer cette page de votre livre

Voir ou modifier le livre(0 pages)

Aide

Logiciel

Pluxml : création d'un site internet

Introduction

PluXML est un CMS

Pré-requis

un serveur Web ¹⁾ ou un hébergeur. Tout serveur web devrait pouvoir faire tourner PluXml.
un accès FTP sur ce serveur
PHP 5 ou supérieur Activer PHP5 sur votre hébergement
Installez les extensions PHP suivantes : php-curl,php-gd,php7.3-xml,php-zip ou en ligne de commande :
```
$ sudo apt install php-curl php-gd php7.3-xml php-zip
```
Pour un Raspberry Pi, on utilisera php5-gd)
Avoir activé les directives .htaccess

Facultatif :

mod_rewrite pour activer la réécriture d’URL ; le serveur Web doit être configuré pour supporter des directives .htaccess.
Il est possible d'utiliser l'url rewriting en local.
fonction PHP d'envoi d'email autorisée
Avoir téléchargé l'archive sur le site officiel : http://www.pluxml.org/

Activer PHP5 ou + sur votre hébergement

Liste des directives pour activer PHP5 (à mettre dans votre fichier .htaccess)

Ces directives sont à mettre dans votre fichier .htaccess sauf pour OVH depuis fin 2014

OVH

.htaccess

SetEnv PHP_VER 5

OVH mutualisé

Pour un hébergement mutualisé chez OVH, il faut utiliser le fichier .ovhconfig présent à la racine de l’hébergement. ²⁾ :

.ovhconfig

app.engine=php
app.engine.version=5.5
http.firewall=none
environment=production

Pour changer de version PHP il suffira de jouer avec les versions en remplaçant le numéro de version :

app.engine.version=5.4

app.engine.version=5.5

app.engine.version=5.6

1and1

.htaccess

AddType x-mapp-php5 .php

Free

.htaccess

php 1

Online.net

.htaccess

AddType application/x-httpd-php5 .php

NB: nécessite également un chmod 755 sur le dossier d'installation de PluXml

Nuxit

.htaccess

options -indexes
AddHandler x-httpd-php5 .php
AddType application/x-httpd-php5 .php

Installation

Téléchargez la dernière version de Pluxml sur http://pluxml.org.

Le mieux est de tout préparer sur un PC en local et d'envoyer le résultat via FTP sur la racine du serveur.

Télécharger et décompresser sur l'ordinateur :

le thème Zen sur le site : http://ressources.pluxml.org/?theme130/theme-zen
l'archive du plugin MyPluginDownloader sur le site http://pluxopolis.net/myplugins

Renommer les répertoires pour qu'ils ne comportent plus de numéros : pluxml, theme-zen et MyPluginDownloader

Envoyer sur le serveur, via FTP :

le dossier pluxml (éventuellement renommé ³⁾

Dans ce tutoriel, nous supposons qu'il a été envoyé à la racine d'un serveur local [RACINE]/xxx (par exemple /var/www/xxx).

le dossier theme-zen dans le sous-répertoire xxx/themes sur le serveur
et le dossier MyPluginDownloader dans le sous-répertoire xxx/plugins

Taper l'URL du votre site. http://monsite.tld/xxx. Une page d'installation s'affiche :

Remplir les champs du formulaire et noter les informations.

Les infos en vert indiquent que tout va bien ; si ce n'est pas le cas, corriger ce qui est signalé. De l'aide est disponible sur les forums de Pluxml http://forum.pluxml.org/.
Cliquer sur Installer.
Via FTP, effacer le fichier [RACINE]/xxx/install.php à la racine du site

En cas d'oubli, un message le rappellera dès l'entrée dans l'administration.

Le site est installé et prêt à l'emploi : la page d'accueil du site s'affiche.

Comment déplacer un site PluXml

Depuis la version 5.2, l'emplacement du site est détecté automatiquement, il suffit donc de déplacer les fichiers d'un répertoire à un autre, en s'aidant de FTP.

Si la réécriture d'URL est activée sur le site, il faut également vérifier/éditer le fichier .htaccess, à la ligne 5 RewriteBase /xxx/ ou 'xxx' représente le nouveau nom de dossier de PluXml.

Configuration

Aller sur la page d'accueil du votre site http://monsite.tld/xxx.

Dans le bas de page, cliquer-droit sur le lien “Administration” (en tout petit)

Dans le menu contextuel, choisir de l'ouvrir dans un nouvel onglet → nous aurons ainsi deux onglets ouverts, l'un sur le site pour voir les résultats, l'autre sur l'administration.

La page de connexion s'ouvre :

Renseigner l'identifiant et le mot de passe choisis à l'installation et valider ; l'administration s'ouvre.

Configuration de l'envoi d'email par PHP

Voir : Configuration de l'envoi d'email par PHP

Profil

Dans le menu de gauche, cliquer sur Profil.

Renseignez votre nom et votre adresse émail.

Cliquer sur Modifier votre profil

Configuration de base

Dans le menu de gauche, cliquer sur Paramètres. La page de configuration de base s'ouvre.

Renseigner ⁴⁾ :

titre du site
et sous-titre/description du site

Laisser les autres éléments et cliquer sur le bouton Modifier la configuration de base, ce qui enregistre la nouvelle configuration.

Aller dans l'autre onglet et recharger la page pour voir le résultat : les informations renseignées dans la configuration de base apparaissent dans la bannière du site.

Options d'affichage : thème

Dans le menu de gauche, cliquer sur Paramètres puis sur Thèmes

Cocher le thème Theme-zen et cliquer sur Modifier les options d'affichage pour enregistrer.

Aller sur l'onglet du site, recharger la page pour voir la page d'accueil du site avec les changements :

Pour en savoir plus sur les thèmes et les templates, voir la page Pluxml, personnalisation : thèmes et templates

Configuration avancée

Dans le menu de gauche, cliquer sur Paramètres puis sur Configuration avancée. une page s'ouvre :

Renseigner le premier item, « Activer la réécriture d'urls »

si le serveur la supporte, dire Oui.
sinon (free par exemple), dire Non.

Cliquer sur Modifier la configuration avancée et fermer cette page.

La réécriture d'URL donne de jolies adresses dans le genre :

http://tuto-pluxml.reseauk.info/article20/phase-2-de-l-installation-et-utilisation-de-pluxml

plutôt que http://tuto-pluxml.reseauk.info/?320-254

Modules

Nous allons maintenant activer le module MyPluginDownloader.

Dans le menu de gauche, cliquer sur Paramètres et Plugins. Cliquer sur Plugins inactifs pour faire apparaître l'unique plugin que nous avons téléchargé :

Cocher la petite case à gauche,
sélectionner Activer dans la liste déroulante de l'item Pour la sélection
et cliquer sur OK.

Notre premier plugin apparaît maintenant dans la liste des Plugins actifs :

Le plugin MyPluginDownloader permet d'installer des plugins qu'il va chercher sur le dépôt des développeurs de Pluxml.

Il existe une multitude de plugins pour Pluxml ; ceux répertoriés comme “officiels” sont listés dans les pages du site de l'éditeur. Voir aussi cette page : http://tuto-pluxml.reseauk.info/article18/les-plugins.

Un nouvel item est apparu dans le menu de l'administration : MyPluginDowloader. Cliquer dessus :

Le plugin CKEditor installe sur le site un éditeur Wysiwig avec tous les outils d'édition habituels.

Choisir le plugin CKEditor et cliquer sur Télécharger en face de CKEditor : dans les Plugins inactifs de Paramètres/Plugins, un nouveau plugin a été installé.

Avant de l'activer, nous allons le paramétrer.

Cliquer sur le lien Configuration (à droite du plugin CKEditor).

Renseigner :

répertoire de stockage des fichiers de: CKEditor : data/

choisir les thèmes de ce plugin (vous pouvez laisser en l'état)
répondre oui au reste.

Cliquer sur le bouton Enregistrer

Activer le plugin CKEditor.

Certains plugins ont besoin d'être configurés at d'autres pas.

Pour mettre le français comme langue par défaut, éditez le fichier […]/plugins/ckeditor/ckeditor/ckeditor.js pour changer la langue par défaut :

/plugins/ckeditor/ckeditor/ckeditor.js

(...)
defaultLanguage:"fr",
(...)

Informations

Dans le menu, cliquer sur Informations pour avoir des informations sur la version de Pluxml, l'encodage (UTF-8), la Version de php, l'état des “magic quotes” etc. :

Cela sera utile pour demander de l'aide sur les forums.

Personnalisation : thèmes et templates

Le thème est le look général du site.

il comporte des templates qui définissent le look d'une ou plusieurs pages.

Il existe de nombreux thèmes et templates, en particulier ici : http://ressources.pluxml.org/.

Voir la page Pluxml, personnalisation : thèmes et templates

Comment est fait un site pluxml

Revenons à la page d'accueil du site (onglet) :

Comme tous les sites internet, cette page comporte trois parties :

Une en-tête avec la bannière (header)
Un Menu (sidebar) qui, pour l'instant ne comporte que 2 items : Accueil et Statique 1
Un pied de page (footer)

Pluxml est à la fois un blog ⁵⁾ et un site, avec 2 sortes de pages :

des articles de blog (qui apparaissent par défaut par ordre chronologique)
des pages statiques (dont le nom peut apparaître ou non dans le menu) qui peuvent contenir du PHP.

Par défaut, la page d'accueil de Pluxml affiche un article du blog intégré, nommé Accueil.

Le menu horizontal (en haut) affiche :

un lien Accueil (article du blog)
et un lien nommé Statique 1 (un exemple de page statique).

Si plusieurs articles étaient en ligne, ils apparaîtraient sur le menu (nombre paramétrable dans l'admin).

Rappel : Dans Pluxml, il existe 2 sortes de pages :

les pages “statiques” (dans lesquelles on peut intégrer du PHP) qui servent à construire votre site
et les “Articles” du blog, que vous l'utilisiez ou non.

Dans un blog, les articles publiés s'affichent par ordre chronologique, du dernier au premier (cela peut se modifier) et ils peuvent recevoir les commentaires des internautes.

Pour construire notre site, nous allons utiliser les deux.

Pour ce qui est de l'édition, c’est exactement pareil.

S'il y avait plusieurs articles en ligne, ils apparaîtraient tous sur l'accueil ; l’affichage de leur nombre est paramétrable dans l'administration.

Allons voir dans l'admin comment ça marche.

Articles de blog

Aller dans Menu/Administration/Articles. Tous les articles (publiés ou non) s'affichent.

On retrouve celui qui apparaît dans la page d'accueil : Premier article.

Cliquer sur son nom pour l'ouvrir en mode édition, changer le texte par ce que vous voulez et cliquer sur Enregistrer.

Aller voir le résultat en front-end.

Pages statiques

Aller dans Menu/pages statiques. Une fenêtre s'ouvre :

Pour tester, modifier le premier champ (colonne Titre), par exemple en : Editorial et effacer le contenu du champ de la colonne URL.

Cliquer sur le bouton Modifier la liste des pages statiques et voir en front-end le résultat : la page a changé de nom et le menu aussi.

Dans menu/pages statiques, à droite de la première page statique renommée « Editorial », il y a deux liens : Éditer et Voir.

Cliquer sur Éditer, ce qui ouvre cette page en mode édition : nous pouvons la modifier à notre gré.

On peut mettre du PHP dans une page statique.

Cliquer sur l'outil Source (le dernier à droite de la barre d'outils d'édition) ; le code s'affiche, par exemple :

<p>
    <!--?php echo 'Ma première page statique !'; ?-->
</p>

Si on clique à nouveau sur le bouton Source, on retrouve le mode édition ; le code disparaît.

En fait, on n'édite pas du PHP avec un éditeur html ; donc si l'on veut insérer du PHP à cet endroit, il faut désactiver l'éditeur de texte html (le plugin CKEditor)…

Nous aborderons le PHP dans un autre chapitre.

Retournons au front-end pour voir la page modifiée. le texte que nous avons inséré a remplace le texte par défaut.

Les « articles » se modifient de la même façon.

Voyons maintenant comment faire apparaître une page statique à l'accueil au lieu de la liste des articles du blog. ⁶⁾

Revenons au menu pages statiques et ouvrons la fenêtre Création et édition des pages statiques.

Sur la première ligne, la 2e colonne (= le 2e item) se nomme « Page d'accueil » :

Cocher la case et enregistrer en cliquant sur le bouton Modifierla liste des pages d'accueil.

Revenez au front-end : c'est maintenant cette page qui est la page d'accueil (ou home) du site.

On peut faire de même avec n'importe quelle page statique ou avec un article du blog.

La barre latérale

Le menu dans l'espace de droite se nomme la barre latérale ⁷⁾.

Elle est livrée d'origine avec des étiquettes ⁸⁾ qui affichent des informations que l'on trouve sur les sites modernes et qui apparaissent automatiquement.

Il y a 6 catégories bien distinctes :

fil RSS ressource du World Wide Web, dont le contenu est produit automatiquement en fonction des mises à jour d’un site Web. Les flux RSS sont des fichiers XML utilisés par les sites d'actualité et les blogs pour présenter les titres des dernières informations consultables en ligne. ; Catégories pour classer les articles ou pages statiques pour les retrouver plus rapidement et les afficher comme on veut. ; Mots clefs Dans chaque page ou article, on peut insérer des mots clefs ; ils peuvent s'afficher sous forme de nuage de mots ou être fournis à un moteur de recherche interne (un plugin Pluxml) Un clic sur un mot clef affiche les articles qui parlent de ce mot là. ; Archives liste de toutes les publications par mois et année ce qui permet de retrouver une publication dont on connaît à à peu prés la date de publication. ; Derniers articles les derniers articles publiés. ; Derniers commentaires derniers commentaires des utilisateurs. Toutes ces informations sont modulables (on peut en rajouter ou en enlever), par exemple : on peut supprimer l'affichage des derniers commentaires si le site ne les utilise pas, limiter (ou augmenter) le nombre de mots clefs, faire disparaître les archives, placer les derniers articles ailleurs. Ce système est prévu pour les sites dédiés blog.

Comme nous faisons surtout un site (éventuellement équipé d'un blog), nous pouvons adapter l'affichage (par exemple un menu perso), quitte à réserver la barre latérale originale à la partie blog.

Cette barre latérale est modulable : par exemple, on peut avoir un menu (et des couleurs) différent pour chaque page à n'importe quel niveau du site.

Pour voir le code de la sidebar, dans admin/Paramètres/Options d'affichage/Éditer les fichiers du thème « theme-zen », ouvrez le fichier sidebar.php :

sidebar.php

<?php if(!defined('PLX_ROOT')) exit; ?> <div id="sidebar"> <div class="section"> <h3><?php $plxShow->lang('RSS_FEEDS')?></h3> <ul> <li><a class="feed noactive" href="<?php $plxShow->urlRewrite('feed.php') ?>" title="<?php $plxShow->lang('ARTICLES_RSS_FEED_TITLE') ?>"><?php $plxShow->lang('ARTICLES_RSS_FEED') ?></a></li> <li><a class="feed noactive" href="<?php $plxShow->urlRewrite('feed.php?commentaires') ?>" title="<?php $plxShow->lang('COMMENTS_RSS_FEED_TITLE') ?>"><?php $plxShow->lang('COMMENTS_RSS_FEED') ?></a></li> </ul> </div> <div class="section"> <h3><?php $plxShow->lang('CATEGORIES')?></h3> <ul> <?php $plxShow->catList('','<li><a href="#cat_url" class="#cat_status">#cat_name (#art_nb)</a></li>'); ?> </ul> </div> <div class="section"> <h3><?php $plxShow->lang('TAGS')?></h3> <p> <?php $plxShow->tagList('<a href="#tag_url" class="tag #tag_status">#tag_name</a> ', 20); ?> </p> </div> <div class="section"> <h3><?php $plxShow->lang('ARCHIVES')?></h3> <ul> <?php $plxShow->archList('<li><a href="#archives_url" class="#archives_status">#archives_name (#archives_nbart)</a></li>'); ?> </ul> </div> <div class="section"> <h3><?php $plxShow->lang('LATEST_ARTICLES')?></h3> <ul> <?php $plxShow->lastArtList('<li><a href="#art_url" title="#art_title" class="#art_status">#art_title</a></li>'); ?> </ul> </div> <div class="section"> <h3><?php $plxShow->lang('LATEST_COMMENTS')?></h3> <ul> <?php $plxShow->lastComList('<li><a href="#com_url">#com_content(33)</a></li>'); ?> </ul> </div> </div>

C'est une succession de <div> qui contiennent chacun une instruction, par exemple :

<div class="section">
        <h3><?php $plxShow->lang('ARCHIVES')?></h3>
        <ul>
        <?php $plxShow->archList('<li><a href="#archives_url" class="#archives_status">#archives_name (#archives_nbart)</a></li>'); ?>
        </ul>
    </div>

qui signifie que ce qui est entre les balises <h3> </h3> est ce qui apparaît dans la barre latérale du site sous le nom d'Archive

et le tag

<?php $plxShow->archList('<li><a href="#archives_url" class="#archives_status">#archives_name (#archives_nbart)</a></li>'); ?>

affiche le mois concerné, la date et le nombre d'articles qu'il y a sur le site pour ce mois-là.

Pour ne plus afficher les archives dans la sidebar, il suffit de supprimer ou de commenter ce <div></div>, ce qui libère de l'espace.

Toujours garder une sauvegarde des fichiers avant de les modifier. En cas de malheur, cela permettra de revenir en arrière.

Il y a une méthode plus simple pour personnaliser la barre latérale : appeler dans cette barre latérale une page conçue avec les informations à faire apparaître.

La manip est décrite dans cet article.

Édition des pages

Dans Pluxml, il existe 2 sortes de pages qui s'éditent de la même façon :

Les pages « statiques » (dans lesquelles on peut intégrer du PHP)
et les « Articles » du blog.

Dans un blog,

les articles publiés apparaissent sur l'écran par ordre chronologique, le dernier en premier
et ils peuvent recevoir des commentaires des internautes.

Ouvrir l'administration du site :

C'est la page qui va construire les articles.

Créer une nouvelle page statique

Pour ajouter une page, renseigner le champ Titre de la ligne Nouvelle page. Valider en cliquant sur le bouton Modifier la liste des pages statiques.

Pour que la nouvelle page apparaisse sur le site, mettre Active à oui, enregistrer et aller voir le résiltat : son nom s'affiche maintenant dans le menu. en cliquant sur ce nom, la page apparaît avec un message « Cette page est actuellement en cours de rédaction » ⁹⁾.

Dans l'administration, colonne Action de la nouvelle page, cliquer sur Éditer pour entrer un contenu, même du PHP :

L'éditeur CKeditor a des outils d'édition.

Pour faire apparaître une image ou un média sur une page, deux méthodes :

Insérer le lien vers l'image où qu'elle se trouve sur le net. ¹⁰⁾
L'importer sur votre serveur (dans la bibliothèque justement) et aller la chercher au besoin. C'est le mieux.

Dans l'administration, cliquer sur le lien Média :

Dans cet exemple, il y a deux images dans la bibliothèque avec leurs miniatures.

L'item Dossier : indique l'emplacement où se trouve l'image. Si vous cliquez sur la petite flèche à l'endroit marqué Racine rien d'autre n'est proposé.

A droite, un autre item Nouveau dossier : avec un bouton Créer permet de créer un nouveau dossier pour classer vos images et documents.

Il existe deux dossiers principaux dans votre bibliothèque Média : Images et Documents. Selon que vous serez positionné dans l'un ou dans l'autre, les répertoires (de rangement) additionnels que vous créerez grâce au bouton “Créer” de l'item “Nouveau dossier seront dans l'un ou l'autre.

Pour supprimer, déplacer les images ou recréer les miniatures, utiliser le bouton Pour la sélection.

Avant toute choses, nous allons importer dans la bibliothèque (Média) une image que nous prévoyons d'utiliser plus tard.

Sur la page Gestion des médias, cliquez sur Images puis sur Ajouter fichiers. Parcourez votre ordinateur à la recherche de l'image que vous voulez. Privilégiez le .png qui est le plus léger.

Pour terminer cette importation, choisissez la taille à laquelle elle doit être enregistrée sur le serveur (« taille originale » est un bon choix) et la taille de la miniature désirée (100×100 est un bon choix).

Cliquez sur Envoyer.

Nous allons maintenant faire apparaître notre image sur notre page de test. Ouvrons-la en mode édition.

Positionnez le curseur de la souris à l'emplacement voulu pour l'image, cliquez (pour sélectionner l'endroit). Dans la première rangée des outils de l'éditeur, choisissez celui nommé Image. ¹¹⁾ et cliquez dessus.

Une fenêtre d'importation d'image dans votre document s'ouvre.

Vous pouvez renseigner le champ URL avec l'adresse de l'image en question.

Mais il vaut mieux cliquer sur le bouton Explorer le serveur pour fouiller votre bibliothèque.

Vos images apparaissent, choisissez la vôtre et double-cliquez dessus. Votre image est bientôt intégrée dans le document que vous éditez mais avant d'enregistrer, il y a deux ou trois formalités à accomplir.

champ Texte de remplacement

mieux vaut renseigner ce champ car les moteurs de recherche s'en servent pour référencer votre site. Écrivez une brève description de l'image et une référence pertinente au thème de votre site. Par exemple : « Le grand-père de Staline avant son mariage ». Si l'image ne s'affichait pas dans le navigateur du visiteur, ce texte apparaîtrait à sa place.

; Lightbox

Si cette case est cochée, un clic du visiteur sur cette image l'agrandira. Pratique pour des galeries photos ou des albums.

; Lien

Vous pouvez mettre un lien sur votre image pour diriger l'internaute vers une information qui lui sera utile.

; champ url

Pluxml le remplit automatiquement si vous avez été chercher l'image dans la bibliothèque. Il est du style
data/images/sauteur.gif

Cela veut dire que l'image “sauteur.gif” est située dans le répertoire “image” du dossier “data” sur le serveur, le reste étant le nom de domaine qui accueille le site.

Si vous construisez votre site sur un nom de domaine et que vous décidez d'en changer ou de le transférer vers un autre serveur dont le nom de domaine est nouveau-site.com, le chemin des images enregistré ne sera plus le même et, bien qu'étant physiquement dans la bibliothèque, elles n’apparaîtront plus.

Voici comment faire.

Dans cet item, virez donc le nom de domaine pour ne garder que

/data/images/sauteur.gif

Cela marche aussi et vous vous éviterez par la suite bien des tracas.

Voyez cet article : Pour déplacer un site PluXml

Avant d'enregistrer cette page statique, découvrons ensembles quelques nouveautés dont certaines capitales pour votre futur référencement.

Il y a quatre informations juste en dessous de l’éditeur avant enregistrement.

Template :
Trois champs nommés :

Contenu balise title (option) nom de votre page. ; Contenu de la balise meta “description” pour cette page statique (option) précisions que vous n'avez pas mis dans le titre par exemple “Tutoriel pour l'installation et l'utilisation du CMS Pluxml” ; Contenu de la balise meta “keywords” pour cette page statique (option) mots clefs à destination de Google et des autres moteurs de recherche. Vous pouvez enregistrer votre page de test et aller voir ce que ça donne. Exemple :

Edition des pages statiques

Ajouter un lien vers une autre page du site

Ajouter une image

Nous allons utiliser l'importation d'image, qui travaille avec une bibliothèque nommée “Médias” dans le menu de l'administration.

Pour faire apparaître une image ou un média sur votre page, vous avez deux méthodes.

Insérer le lien vers une image trouvée sur le net.
L'importer sur votre serveur (dans la bibliothèque) et aller la chercher.

Si vous importez une image dans votre page avec un lien direct vers le site où elle se trouve, si le site en question tombe en carafe ou disparaît, vous n'avez plus d'image.

D'où l'intérêt d'importer cette image sur votre serveur.

Dans l'administration, cliquons sur le lien “Média”.

La bibliothèque d'images est vide. Nous allons importer dans la bibliothèque (Média) une image pour l'utiliser plus tard.

Notez l'item “Dossier :” : si vous cliquez sur la petite flèche, le menu déroulant ne contient que “Racine” car il n'y a rien d'autre.

A droite, un autre item “Nouveau dossier :” et un bouton “Créer” servent à créer des répertoires dans votre bibliothèque pour classer vos images et documents.

La bibliothèque Média comporte tout de même deux dossiers principaux visibles sur la copie écran ci dessous : “Images” et “Documents”.

Selon que vous serez positionné dans l'un ou l'autre, les répertoires que vous créerez seront dans l'un ou dans l'autre.

Sélectionnez le répertoire “Images”. Cliquez sur “Ajouter fichiers”

Parcourez votre ordinateur à la recherche de l'image en .gif, .jpg ou .png à utiliser (Privilégiez le .png qui est le plus léger).

Cela peut être n'importe quoi. Une photo, une vidéo, un fichier .pdf (etc…) pour autant que le format soit reconnu.

Ici, nous importons l'image pingouin.png ; son nom apparaît sous le champs d'importation

Comme taille, un bon choix est “taille originale” et la taille de la miniature (vignette) 100×100

Il sera toujours possible de redéfinir les tailles de vos images ; éviter de leur donner plus de 650 pixels de largeur pour ne pas déformer votre template.

Cliquez sur le bouton Envoyer

Notre bibliothèque de medias contient maintenant notre image :

Ouvrez la page de test en mode édition ; un clic pour sélectionner l'endroit où placer l'image et cliquez sur l'outil “Image” (survolez à la souris les outils de l'éditeur pour faire apparaître l'info-bulle).

Une fenêtre d'importation d'image s'ouvre.

Vous pouvez toujours supprimer, déplacer ou recréer le miniatures pour les images que vous aurez importé, grâce au bouton “Pour la sélection”.

Vous pouvez :

renseigner le champ “URL” avec l'adresse de l'image en question
ou cliquer sur le bouton “Explorer le serveur” pour fouiller votre bibliothèque, ce que nous allons faire.

Cliquez sur le bouton Explorer le serveur pour explorer votre bibliothèque : vos images apparaissent. Choisissez la vôtre et double-cliquez dessus.

Avant d'enregistrer, remplissez :

le champ Texte de remplacement, à renseigner pour que les moteurs de recherche s'en servent pour référencer votre site.
Ecrivez une brève description de l'image et une référence au thème de votre site.
Par exemple : “Le grand-père de Staline avant son mariage”.
De plus, si pour une raison ou une autre l'image ne s'affichait pas dans le navigateur du visiteur, ce texte apparaîtrait à sa place.
Lightbox : si cette case est cochée, l'image s'agrandira quand le visiteur clique sur cette image
Lien : pour diriger l'internaute vers une information qui lui sera utile.

Si vous avez été chercher l'image dans la bibliothèque, le champ URL est automatiquement rempli par Pluxml, de la forme :

[NDD]/data/images/pingouin.png

Cela veut dire que l'image “pingouin.png” est située dans le répertoire “image” du dossier “data” sur le serveur, le reste étant le nom de domaine du site.

Retirez le nom de domaine pour ne garder que :

/data/images/pingouin.png

Ainsi, le site bâti sur ce NDD (nom de domaine) sera transférable vers un autre serveur dont le NDD est différent.

Pour renommer une page statique

Le reste de la page

Edition des articles de blog

Pour les articles, c’est la même chose, avec des fonctionnalités en plus.

Dans l'administration, allez dans le menu Articles :

Tous vos articles (publiés ou non) s'affichent. Vous retrouvez celui qui pour l'instant apparaît dans la page d'accueil (Premier article).

Cliquez sur son nom pour l'ouvrir en mode édition, changez le texte par ce que vous voulez et cliquez en bas sur Enregistrer.

Nous verrons plus loin l'utilisation des outils de publication.

La page d'accueil affiche votre premier article modifié.

Créer un nouvel article

Allez dans Admin/Nouvel article. Une page s'ouvre, comme celle-ci :

A droite, nous trouvons plusieurs informations :

Brouillon La page en cours est en mode “Brouillon” et le restera tant que vous n'aurez pas choisi de la publier (en bas de page). ; Auteur définit le nom du rédacteur s'il y en a plusieurs d'inscrits (Pluxml est multi-utilisateur). Pour le moment, il n'y en a qu'un, vous. ; Date de publication date à laquelle votre article sera publié. Pour faire “remonter un article”, il suffit de changer la date pour celle du jour (ils apparaissent en front-end par ordre chronologique). ; Emplacements Il y a trois catégories dans lesquelles vous pouvez classer vos articles mais vous pouvez en créer autant que vous le désirez. Cette fonctionnalité vous sera très utile par la suite. Donc, classez vos articles (vous pourrez plus tard les changer de catégories si vous le voulez). ; Mots clés Séparés par une virgule, ces mots clefs apparaîtront (si vous le décidez ainsi) dans la sidebar et constitueront “le nuage de mots” très utile aux visiteurs qui recherchent des articles précis. ; Autoriser les commentaires Vous pouvez autoriser les commentaires ou non sur les articles page par page. ; Url Se remplit automatiquement mais vous pouvez personnaliser l'URL de cet article qui apparaîtra dans la barre d'adresse du navigateur. ; Template et le reste c'est la même chose que pour les pages statiques à part que vous fabriquerez des templates dédiés aux articles (si vous le désirez). Pour rédaction de la page par elle même, une nouvelle fonction apparaît: le Chapô.

En cliquant sur “afficher”, un autre éditeur s'ouvre ; vous pouvez écrire ici les deux ou trois premières lignes de votre article. Si vous l'utilisez, le visiteur verra un lien “Lire la suite…” qui le mènera vers le corps du texte et l'intégralité de votre message.

Votre article « Publié », vous aurez la possibilité de l'éditer à nouveau, le modifier, le mettre hors ligne ou même le supprimer.

Changer la page d'accueil

Le grand principe pour modifier Pluxml en profondeur

Principe des divers templates pour un thème donné

Le grand principe : construire un modèle spécifique à l'affichage à obtenir.

Par exemple, un modèle pour la page d'accueil et un autre pour la page d'exemple “Deux menus”.

Dans Pluxml, l'affichage est donné par un modèle (static.php étant le modèle de base) qui appelle à son tour les instructions qui modifieront les informations à afficher selon le template utilisé.

static.php appelle header.php qui lui-même appelle la feuille de style style.css. C’est donc au minimum trois fichiers qui composeront votre template.

La feuille de style donne les couleurs, l'emplacement des images etc.

Pour des infos sur ce qu'est une feuille de style, voir : http://www.alsacreations.com/tutoriels/

Une feuille de style regroupe des informations servant à séparer autant que possible la présentation et le contenu d'une page.

Elles permettent d'adapter automatiquement la présentation d'une page en fonction du média servant à l'afficher.

Pour donner à une page un autre aspect que le reste du site, on fabrique pour elle une feuille de style (.css) spécifique pour elle et la page modèle appellera cette feuille de style plutôt que celle prévue par le thème que j'utilise.

Par exemple, au départ, le thème “Défaut” définit pour le modèle “static.php” une sidebar à droite.

Pour l'avoir à gauche sur des pages spécifiques, j'imagine une autre feuille de style qui “dira” au système de l'afficher à gauche.

Exemples :

Sidebar à droite

Sidebar à gauche

Même chose pour les couleurs ou toute autre modification par rapport au template original.

Voyons dans cet autre exemple le même thème “Défaut” dans les deux versions

Thème "Défaut" arrangé pour ce site

Thème "Défaut" original

En fait, c’est exactement le même thème mais avec une deuxième feuille de style pour obtenir deux affichages différents.

C’est sur ce principe qu'on peut fabriquer des modèles affichant les pages selon les besoins.

Voir d'autres méthodes sur les forums ou même un article qui traite du sujet sur un excellent site que je vous recommande.

La feuille de style est traditionnellement appelée par “header.php”, lui même inséré par “static.php”

C'est pourquoi il faut trois occurrences de ces fichiers pour chaque template que vous fabriquerez.

Exercice

Supposons que nous voulions une page (ou un groupe de page) avec un header différent de celui qui s'affiche sur la page d'accueil.

Par exemple, si sur un site consacré à l'apprentissage de Pluxml nous voulions vendre des bretelles américaines.

Voici une manip pour sur votre site.

Pour faire une page avec un autre look, dupliquez 4 fichiers :

	renommé en
Static.php	static-bretelles-us.php
Header.php	header-bretelles-us.php
Style.php	Style-bretelles-us.php
sidebar.php	sidebar-bretelles-us.php

Le préfixe (static-header-style-sidebar) est obligatoire, le reste est à personnaliser.

Dans static-bretelles-us.php modifiez les lignes :

	en
<?php include(dirname(__FILE__) . '/header.php'); ?> <?php include(dirname(__FILE__).'/sidebar.php'); ?>	<?php include(dirname(__FILE__) . '/header-bretelles-us.php'); ?> <?php include(dirname(__FILE__).'/sidebar-bretelles-us.php'); ?>

<?php include(dirname(__FILE__) . '/header.php'); ?>
<?php include(dirname(__FILE__).'/sidebar.php'); ?>

<?php include(dirname(__FILE__) . '/header-bretelles-us.php'); ?>
<?php include(dirname(__FILE__).'/sidebar-bretelles-us.php'); ?>

car static-bretelles-us.php appelle header-bretelles-us.php qui contient la référence à style-bretelles-us.php dans laquelle on trouve la ligne

background: url('/data/images/logo-bretelles.jpg') no-repeat top left;

qui affiche l'image du header.

Dans header.php, supprimez l'appel au menu horizontal dont on n'a plus besoin puisque cette page est dédiée aux bretelles américaines.

Créez aussi une sidebar-bretelles-us.php dédiée à cette page ; remplacez les infos d'origine par ce que vous voulez mettre dans cette sidebar. J'ai juste conservé :

<?php if(!defined('PLX_ROOT')) exit; ?>

<aside role="complementary">
 
</aside>

Collez entre les <aside> le code qui sert à afficher le menu spécial à la page des bretelles américaines :

<aside role="complementary">
<p>
    <span style="color: rgb(68, 68, 68); font-family: arial, helvetica, sans-serif; font-size: 16px;">Notre magasin<br />
    Les prix<br />
    La mode<br />
    Contact<br />
    Commandes</span></p>
<p>
    <span style="color: rgb(68, 68, 68); font-family: arial, helvetica, sans-serif; font-size: 16px;">(Liens inactifs)</span></p>
 
    </aside>

Les fichiers du nouveau template spécial Bretelles américaines sont prêts. Envoyez-les sur le serveur dans le répertoire contenant le thème.

Construisez une nouvelle page statique et choisissez le template “static-bretelle.php”. Enregistrez.

Plus simple : économiser les feuilles de style

Principe

Image

Fichiers à dupliquer

Pour ne pas toucher à notre feuille de style principale, nous la dupliquons.

Nous dupliquons aussi header.php et static.php (article.php pour le blog) :

Fichier de départ	Fichier dupliqué
themes/defaut/css/style.css	themes/defaut/css/style-modele.css
themes/defaut/header.php	themes/defaut/header-modele.php
themes/defaut/static.php	themes/defaut/static-modele.php
themes/defaut/article.php	themes/defaut/article-modele.php

Fichier header-modele.php

Fichier static-modele.php

Ouvrez le fichier themes/defaut/static-modele.php.

Repérez la rubrique

/* ---------- HEADER ---------- */

et les lignes

themes/defaut/static-modele.php

header .content {
  background: url('img/header.jpg') no-repeat top left;
  background-position: 25px 0;
  height:170px;
}

Recopiez ces lignes juste en dessous, mais avec le nom de la nouvelle image d'en-tête :

themes/defaut/static-modele.php

(...)
header .content {
  background: url('img/mon-image.jpg') no-repeat top left;
  background-position: 25px 0;
  height:170px;
}

Toujours dans static-modele.php, changez l'appel au header.php par celui créé pour la circonstance :

<?php include(dirname(__FILE__) . '/header-modele.php'); ?>

Utilisation

Retrouver le mot de passe admin perdu

voir http://wiki.pluxml.org/index.php?page=Recr%C3%A9er+un+compte+Admin+en+cas+de+mot+de+passe+perdu

Allez sur le blog de Websyys http://websyys.olympe.in/pluxml-salt.html et générez les informations nécessaires.
Ouvrez le fichier data/configuration/users.xml sur le site dont le mot de passe est perdu.
Remplacez les lignes
```
<password>...</password>
```
et
```
<salt>...</salt>
```
par les lignes récupérées ci-dessus.
Enregistrez : vous pouvez désormais vous connecter dans la zone d'administration avec le mot de passe copié.
Pour le modifier, allez dans l'administration, section Profil.

Le look : les templates

Sur un site internet, un template est son habillage, ce qui sert à mettre en avant une charte graphique ou un agencement.

Dans Pluxml, nous appelons cela un thème, mais le mot “template” sera utilisé aussi.

Ces templates sont modifiables à loisir (toutes les pages peuvent être différentes si on veut) et surtout sans avoir besoin de toucher au coeur du système Pluxml lors de vos modifications.

Les mises à jour du CMS ne posent donc aucun problème.

Il existe des templates tout faits, mis à disposition par les autres utilisateurs ; nous voulons les modifier pour les faire coller à notre besoin.

Par exemple, je veux mon menu (la sidebar) à droite, une de chaque coté de ma page d'accueil, une sidebar différente selon les pages ou rubriques que propose mon site, ou un Header différent selon le contexte.

Avant d'aller plus loin, visitez une page fort bien faite (par Ti-Pierre) qui explique comment est constitué un thème.

Il y en a une autre pas mal non plus mais plus technique là.

Une page est constituée de divers éléments (nous parlons de son code source) dont un qui nous intéresse particulièrement : l'appel du template.

Le thème est le look général du site.
le template et une page modèle que vous aurez fabriquée qui apportera des changements à une ou plusieurs de vos pages ; vous sélectionnerez ce “modèle” lors de la rédaction de cette page (ou article).

Pour voir où cela se passe, allez dans Admin/Paramètres/Options d'affichage et regardez “Choix du thème :” (vous voyez le nom de votre thème).

Ensuite, ouvrez en mode édition votre page de test et repérez une liste déroulante nommée “Template :” Là, normalement, il y a un truc nommé “satic.php”

Cette page utilise donc le template “static.php” et le thème “nom de votre thème”

Maintenant, imaginions que nous voulions mettre en ligne une autre page qui n'a pas besoin de sidebar (le menu “automatique”). Dans “Template :”, choisissez “static-full-width.php”, enregistrez et allez voir ce que cela donne. Une petite démonstration ici. :)

Vous avez vu ?

C'est donc très facile d'appliquer un autre template à une ou plusieurs pages ou article de votre thème. Voyons comment fabriquer ces templates. ;)

Nous allons maintenant passer aux exercices pratiques et vous allez fabriquer votre premier template. Merci de suivre ces conseils à la lettre afin de ne pas vous perdre et de m'obliger à me répéter. :)

Nous avons vu par ailleurs que les thèmes (donc aussi les templates) sont physiquement indépendant du core (code coeur du système) Pluxml, ce qui veut dire que quoi que vous fassiez, nous ne risquez pas l'Apocalypse et il sera très facile de revenir en arrière au cas où vous auriez fais une bêtise.

Toutefois, par sécurité, et parce que c’est un réflexe de codeur/programmeur, nous allons faire une copie du thème par défaut et travailler sur une copie. Direction votre FTP, regardez dans le répertoire “Thèmes” et repérez celui nommé “defaut”. Si vous n'avez pas été plus vite que moi, c’est le seul thème installé sur votre site. ;)

Hé bien, nous allons en mettre un second en copiant ce répertoire (defaut), en le renommant gentiment, et l'uploadant dans le répertoire réservé aux thèmes. Vous avez maintenant deux thèmes.

Par convention puisque nous travaillons ensemble, nommez votre nouveau thème “defaut-moi” (”-moi“ peut être votre prénom mais n'oubliez pas le tiret).

Ouvrez la page paramètres/Options d'affichage et vous constatez à l'item “Choix du thème :” qu'il existe maintenant un thème “defaut-moi”. Sélectionnez celui-là et enregistez cette nouvelle configuration (Modifier les options d'affichage).

Rien ne change, bien sûr puisque “defaut-moi” est la copie conforme de “defaut” et c’est sur ce thème que nous allons travailler.

Commençons par quelque chose de facile.

Nous allons faire une page dont le look sera complètement différent. Regardez donc ici. ;)

Il est à noter que ce principe est applicable aussi pour vos articles (article.php au lieu de static.php) et même toute une catégorie en allant dans administration/Catégorie/option de la catégorie.

Pour résumer la situation, grâce à notre nouvelle static-quelquechose.php, nous avons créé un autre look (template) en lui donnant sa propre feuille de style, son propre header et, si nous l'avions voulu sa propre sidebar. Avec ce principe, vous faites ce que vous voulez. :)

Ce qu'il faut retenir, c'est que les fichiers que vous fabriquez doivent êtres nommés en minuscule et toujours respecter le préfixe pour que Pluxml le reconnaisse (et pour que vous vous y retrouviez plus facilement.

static-jack.php style-jack.css static-sidebar-droite.php static-header-jaune.php

……ce qui est en gras étant le préfixe et n'oubliez pas le tiret.

Tout cela vous sera bien utile pour faire des tests sans toucher à vos pages déjà en ligne. Je m'explique.

En avançant de plus en plus avec Pluxml, vous découvrirez qu'il suffit d'ajouter des tags, ou instructions, pour obtenir des effets aussi jolis qu'utiles. Par exemple, vous pourriez vouloir la liste des derniers articles dans votre header (oui, je sais, c'est débile), celle des cinq derniers articles d'une telle catégorie dans votre menu ou les commentaires dans votre pied de page. Pourquoi pas ? ;)

Il vous suffira de coller ces instructions là où vous le voulez et nous étudierons cela un peu plus tard quand vous serez bien familiarisé avec Pluxml.

C'est là que vous serez bien content de produire des templates différents sans toucher aux pages qui sont déjà en ligne et il ne vous restera plus qu'à modifier votre template d'un clic quand vous serez prêt à montrer votre oeuvre à la face du monde.

Attention tout de même au fait que si vous changez de thème, il faudra refaire vos templates additionnels si vous voulez que cela fonctionne. A par ça….

Fini le stress du webmaster. :)

Voici maintenant le grand principe pour modifier Pluxml en profondeur.

Utilisation

Sauvegarder ses données

PluXml n’ayant pas de base de données, il suffit de sauvegarder sur un support externe :

tout le dossier racine du site.\ Par exemple, si votre site se trouve dans le répertoire /var/www/pluxml, il suffit de faire une copie du dossier pluxml.
ou le répertoire /var/www/pluxml/data si vous ne voulez sauvegarder que les articles, les commentaires, les pages statiques et la configuration du site et des plugins.

Désinstallation

Pour supprimer cette application, il suffit d'effacer son répertoire.

Voir aussi

(fr) site officiel de pluxml
(fr) Un excellent tutoriel à suivre pas à pas :
- Phase 1
- Phase 2
- Phase 3
- Phase 4
- et le reste de ce site …
des tutoriaux :
(fr) comment est constitué un thème, par Ti-Pierre : http://www.pluxml.org/article45/gestion-avancee-des-themes-dans-pluxml
(fr) une page plus technique sur les thèmes : http://www.pluxml.org/article54/gestion-des-feuilles-de-style.
(fr) le site du lapin bleu : http://www.samare.net/

Basé sur « Pluxml pour les nuls, Phase 1 et suivantes » par Jack.

¹⁾

tel que Apache

²⁾

le .htaccess est obsolète

³⁾

xxx/ par exemple

⁴⁾

ce sera modifiable par la suite

⁵⁾

un blog sert à publier des articles que le visiteur peut commenter

⁶⁾

on veut faire un site internet et non un blog

⁷⁾

sidebar

⁸⁾

Documentation du Dr FRAPPE

Table des matières

Pluxml : création d'un site internet

Introduction

Pré-requis

Installation

Comment déplacer un site PluXml

Configuration

Configuration de l'envoi d'email par PHP

Profil

Configuration de base

Options d'affichage : thème

Configuration avancée

Modules

Informations

Personnalisation : thèmes et templates

Comment est fait un site pluxml

Articles de blog

Pages statiques

La barre latérale

Édition des pages

Edition des articles de blog

Le grand principe pour modifier Pluxml en profondeur

Plus simple : économiser les feuilles de style

Retrouver le mot de passe admin perdu

Le look : les templates

Utilisation

Sauvegarder ses données

Désinstallation

Voir aussi

Recherche

Navigation

Imprimer/exporter

Outils

QR Code