Pluxml : création d'un site internet
Introduction
Pré-requis
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
Activer PHP5 ou + sur votre hébergement
Pour activer PHP5 sur votre hébergement, voici comment faire. (voir http://wiki.pluxml.org/index.php?page=Activer+PHP5+sur+votre+h%C3%A9bergement)
Créez sur votre ordinateur un fichier .htaccess
Recopiez dans ce fichier la directive pour activer PHP5 en fonction de votre hébergeur (voir liste plus bas)
Uploader le fichier .htaccess sur votre site à la racine de PluXml
Pour les utilisateurs sous Windows : Windows n'autorise pas de créer des fichiers commençant par le caractère « . ». Il faut donc :
Créer sur votre ordinateur un fichier htaccess.txt
Recopier dans ce fichier la directive pour activer PHP5 en fonction de votre hébergeur (voir liste plus bas)
Uploader le fichier htaccess.txt sur votre site à la racine de PluXml
Renommer le fichier htaccess.txt en .htaccess
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. 2) :
- .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 :
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é
3)
Dans ce tutoriel, nous supposons qu'il a été envoyé à la racine d'un serveur local [RACINE]/xxx (par exemple /var/www/xxx).
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.
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
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 4) :
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 :
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",
(...)
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
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 5) et un site, avec 2 sortes de pages :
Par défaut, la page d'accueil de Pluxml affiche un article du blog intégré, nommé Accueil.
Le menu horizontal (en haut) affiche :
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. 6)
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 7).
Elle est livrée d'origine avec des étiquettes 8) 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 :
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 » 9).
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.
10)
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. 11) 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.
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
Dans le menu, Cliquer sur Pages statiques :
C'est la page qui répertorie les pages statiques et permet de les construire.
Le tableau comporte 9 colonnes :
- Identifiant
Une page existe déjà et son identifiant est “Page 001”
; Page d'accueil
cocher cette case pour que cette page apparaisse en page d'accueil
; Groupe
pour regrouper les pages
; Titre
titre de la page
; Url
sera rempli automatiquement par Pluxml
; Active
pour activer ou publier la page. Ne l'activer que quand son écriture est terminée ; vous l'activerez plus tard.
; Ordre
ordre d'apparition dans le menu en front-end
; Menu
afficher ou non le nom de cette page (son titre) dans le menu en front-end
; Action
voir la page comme un visiteur ou l'éditer pour la modifier
Toujours dans le menu pages statiques de l'admin, il y a deux liens à droite de la ligne de votre page statique.
Cliquez sur Editer : vous pouvez la modifier.
Cliquez sur le lien Visualiser la page (le nom que vous lui avez donné) sur le site → vous visualisez la page comme un visiteur.
Si vous cliquez sur “Source” (dernier outil à droite de la barre d'outils d'édition), vous voyez le code.
Un nouveau clic sur l'outil “Source” revient en mode édition.
Dans ce mode, le message codé en php n'apparaît pas car on n'édite pas du PHP avec un éditeur HTML (qui ne l’interprète pas).
Pour insérer du PHP à cet endroit, il faut désactiver l'éditeur de texte HTML (le plugin CKEditor).
Enregistrez votre page après y avoir écrit quelque-chose.
Revenez à la page d'accueil et affichez la page en question : son nom et son contenu ont été modifiés.
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 :
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
Modifiez Titre et effacez le contenu du champ URL.
Cliquez sur le bouton Modifier la liste des pages statiques et allez voir en page d'accueil le résultat : la page a changé de nom et le menu aussi.
Le reste de la page
Avant d'enregistrer cette page statique, juste au-dessous de l’éditeur, quatre informations utiles pour le référencement :
Vous pouvez enregistrer votre page de test et aller voir ce que ça donne, comme par exemple :
Vous savez maintenant confectionner les pages statiques du site.
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
La page d'accueil peut être une page statique de votre choix.
Pour la faire apparaître à l'accueil ua lieu de la liste des articles du blog, revenez au menu pages statiques qui ouvre la fenêtre Création et édition des pages statiques.
Sur la première ligne, cochez la case Page d'accueil. Enregistrez en cliquant sur le bouton Modifier' 'la' 'liste' 'des' 'pages' 'statiques
Revenez à la page d'accueil : Votre page statique est maintenant la page d'accueil (ou home) de votre site. Les articles se retrouvent dans le menu sous l'appellation Blog
Vous pouvez ainsi faire de n'importe quelle page statique de votre site ou article de votre blog la page d'accueil.
Votre page s'affiche désormais dans le menu sous Accueil : vous pouvez donc mettre l'item Menu à Masquer
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'); ?>
|
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
Pour obtenir un nouveau template en n'ayant que header.php et static.php à dupliquer, nous allons regrouper les informations d'affichage dans la feuille de style principale au lieu d'en créer une personnalisée. En effet, grâce aux “classes de styles” en .css, nous pouvons obtenir à peu prés tout ce que nous voulons.
Dans header.php, le style de notre template est appelé par des lignes comme celles-ci :
- header.php
<header role="banner">
<div class="content">
<div id="header-title">
<?php $plxShow->mainTitle('link'); ?>
</div>
<p>
<?php $plxShow->subTitle(); ?>
</p>
</div>
</header>
<div id="header-title">
: nom du <div>
<div class="content">
: classe qui gère les affichages concernant ce <div> particulier.
Cet exemple part du thème par défaut ; on peut faire la même chose avec un autre thème.
Au lieu de de dupliquer les fichiers originaux, nous allons intégrer dans notre feuille de style principale une classe supplémentaire avec les informations dont nous aurons besoin pour afficher nos variantes que nous appellerons dans nos templates en fonction de ns besoins. Prenons un exemple.
Image
L'image (ex. mon-image.jpg) qui s'affichera sur notre page spéciale est placée en themes/defaut/img/mon-image.jpg
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
Ouvrez le fichier themes/defaut/header-modele.php pour modifier :
et l'appel à la feuille de style en :
- themes/defaut/header-modele.php
<link rel="stylesheet" href="<?php $plxShow->template(); ?>/style-modele.css" media="screen"/>
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
Créez une nouvelle page, donnez-lui le template static-modele.php et visualisez le résultat.
Ce qui est nouveau, c'est que plutôt que fabriquer une feuille de style par template, nous renseignons toutes nos infos dans la même.
Il est préférable de n'utiliser style-modele.css que pour les templates “maison” et de réserver l'original (style.css) pour les pages que vous ne désirez pas modifier.
Toutes les autres “transformations” se feront selon principe, valable pour les pages du blog qui fonctionnent, elles, avec article.php.
Cette technique permet d'avoir différentes sidebar ou autres pieds de pages spécifiques aux pages que vous voulez afficher.
Retrouver le mot de passe admin perdu
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