Retournez à Accueil /

Vous savez donc maintenant, qu'elles soit un article ou une (page) statique, modifier une page et même en faire une car entre la Phase 2 et la Phase 3 vous vous êtes un peu entraîné. :)

Nous reviendrons tout à l'heure sur le sujet mais avant, nous allons voir ensembles comment Pluxml est fait en général et qu'est-ce qu'il nous apporte en particulier.

Ouvrez votre site sur le front-end, sur la page d'accueil, et regardons de concert la belle chose que voilà.
 
Le menu dans l'espace de gauche se nomme la sidebar. Un nom qui parle même aux non anglophones. Mais, qu'est-ce donc que la sidebar a donc de si spécial ?
 
Dans l'état actuel des choses, elle est livrée d'origine avec des tags (ou instructions) qui affichent des informations que nous trouvons en général sur les sites modernes et surtout viennent apparaître automatiquement. Regardez bien.
 
Il y a en principe 5 catégories bien distinctes.
 
Fil RSS
Catégories
Mots clefs
Archives
Derniers articles
Dernier commentaires
 
Détaillons un peu ces items et modifions-les pourvoir comment ça marche.
 
Le fil RSS est un système, une ressource du World Wide Web, dont le contenu est produit automatiquement (sauf cas exceptionnels) en fonction des mises à jour d’un site Web. Les flux RSS sont des fichiers XML qui sont souvent utilisés par les sites d'actualité et les blogs pour présenter les titres des dernières informations consultables en ligne. Wikipédia 
 
C’est sympathique et peut rapporter gros en terme d’audience quand on sait s'en servir
 
Catégories est comme son nom l'indique la possibilité de ranger vos articles ou pages statiques dans des catégories ce qui vous permettra de les retrouver plus rapidement et surtout de les afficher comme bon vous semble.
Ce qu'il y a dans la sidebar en est un exemple et beaucoup de combinaisons sont possibles
 
Mots clefs : Ce sont des mots clefs. Lol !
Dans chaque page ou articles que vous rédigez, un espace est prévu pour insérer ces mots clefs qui peuvent apparaître sous forme de nuage de mots ou être trouvés grâce à un moteur de recherche interne qui existe sous Pluxml sous forme de plugin.

En cliquant sur ces mots clef, le visiteur retrouvera tous les articles qui parlent de ce mot là. 
 
Archives : Pluxml répertorie toutes vos publications par mois et années et vous les restitue à la demande ce qui évite au visiteur de chercher pendant des heures un publication qu'il sait trouvez à à peu prés telle date.
 
Derniers articles : Il n'y a pas photo. Ce sont les derniers articles publiés.
 
Dernier commentaires : Idem pour les derniers commentaires des utilisateurs. Pratique pour savoir ce qu'il se passe sur le site d'un seul coup d’œil.
 
Toutes ces informations se modulent et on peut en rajouter où en enlever.
 
Par exemple, on peut virer l'affichage des derniers commentaires si notre site ne les utilise pas, limiter (ou augmenter) le nombre de mots clefs, faire disparaître les archives, et placer les derniers articles ailleurs.
 
En fait, ce système est prévu pour les sites dédiés blog et les internautes ont l’habitude de ce genre d'affichage dans le menu vertical.
 
Pour ce qui nous concerne, comme on fait surtout un site (équipé d'un blog si nous le voulons), nous pouvons changer complètement cet affichage pour l'adapter à nos besoins (un menu perso par exemple) quitte à réserver la sideber originale à la partie blog.
 
Nous modulerons cette ou ces sidebars comme nous l'entendons parce qu'avec Pluxml, nous pouvons avoir un menu (et des couleurs) différent pour chaque page à n'importe quel niveau du site.
 
Bon, avant de faire des projets, allons voir un peu ce qu'il y a dans le ventre de cette fameuse sidebar en ouvrant de l'admin/Paramètres/Options d'affichage/Éditer les fichiers du thème «theme-votre-theme», le fichier sidebar.php.
 
Il se présente comme ça...

<?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="https://tuto-pluxml.reseauk.info/<?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="https://tuto-pluxml.reseauk.info/<?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>

Bon, on ne s'affole pas et, pour ceux qui ne parlent pas hébreu comprenons ce qu'il y a écrit la-dedans. :)

Nous remarquons qu'il s'agit d'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>
Cela dit que ce qu'il y a entre les balises <h3> </h3> est ce qui apparait dans la sidebar du site au nom d'Archive et le tag...

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


...Lui, affiche le mois concerné, la date et le nombre d'article qu'il y a sur le site pour ce mois-là. Présentement (24) mais cela va changer dés que j'aurais publié un autre article pour passer à (25).

Si il me prenait l'envie de virer l'affichage des archives dans la sidebar, il me suffirait de supprimer ce <div></div>, ou de le commenter pour l'empêcher d'être vu (et de libérer de l'espace au passage).

Notons qu'à la place, je peux faire apparaitre un petit oiseau ou la photo de ma grand-mère mais ça est une autre histoire et nous en reparlerons si vous le voulez dans un autre sujet.

attentionAttention de toujours garder une sauvegarde de vos fichiers avant vos petits bidouillages.
En cas de malheur, vous pourriez toujours récupérer un fichier original dans l'archive avec laquelle vous avez installé Pluxml.

Savoir que dans cette sidebar, vous pouvez mettre ce que vous voulez (des menus "maison", votre photo, la mienne, un petit animal ou une machine à café).
 
Non, je plaisante, pas de machine à café. :)
 
Bon, peut-être que le débutant est un peu intimidé par ces lignes de code et qu'il voudrait  remplir sa sidebar avec des informations qu'il sait mettre en avant avec un éditeur de texte comme au bon vieux temps. C’est possible. ;)
 
Pour ce faire, nous allons appliquer une méthode géniale (ce qui est génial est que Pluxml permet de le faire) et appeler dans cette sidebar une page que vous aurez conçus préalablement avec les informations que vous voulez voir apparaître.
 
 
C'est parfait; Nous savons maintenant que "le menu" peut être bidouillé pour apparaître là où nous le souhaitons sur et être différent pour n'importe quelle page.
Nous allons nous intéresser maintenant à la construction des pages ou plutôt devrions nous dire à leur édition.
 
attentionRappel : Dans Pluxml, il existe 2 sortes de pages.
Les pages dites "statiques" (dans lesquelles on peut intégrer du PHP qui servent à construire votre site) et les "Articles" qui sont en principe les articles du blog que vous l'utilisiez ou pas.
 
La particularité d'un blog est que les articles publiés apparaissent sur l'écran du public par ordre chronologique c'est à dire le dernier en premier (quoi que cela se modifie) et que ces dernier peuvent recevoir les commentaires des internautes ce qui est très bien. ;)
 
En fait, pour construire notre site, nous allons utiliser les deux (si tel est notre bon plaisir) et comprenons qu'au niveau de l'édition, c’est exactement pareil et c’est ce que nous allons apprendre à faire.
 
Rendez-vous donc dans l'administration de votre site et commençons à regarder comment ça marche.
 
Une fois entré, vous voyez ceci....
 
administration pluxml
 
Il s'agit de la page qui va construire vos articles mais, avant de chercher à l'utiliser, cliquons dans le menu sur le lien "Pages statiques" et nous voyons cela.
 
pages statiques pluxml
 
C'est cette page qui répertorie et va fabriquer vos pages statiques.
 
Nous allons rester sur celle là et voir comment elle est faite et ce que nous allons pouvoir faire avec. :)
 
Remarquez tout d'abord son titre "Création et édition des pages statiques". C'est clair non ?
 
Vous voyez qu'elle est constituée de 9 collones ayant pour nom "Identifiant-Page d'accueil-Groupe-Titre-Url-Active-Ordre-Menu-Action", qu'une page existe déjà et que cette dernière se titre "Statique 1" 
Pas très original mais il fallait un exemple,  et voyez aussi son identifiant "Page 001" qui n'a l'air de rien, comme ça mais qui vous rendra bien des services plus tard. Lol ! 
 

Pour "Page d'accueil", vous cocherez cette cas si vous décidiez de voir apparaitre la page en question en page d'accueil. Simple. ;)

Pour "Groupe", c'est pour quand vous serez plus grand et voudrez regrouper vos pages pour des raisons que nous verrons plus tard quand cela sera utile.

"Titre" est le titre de votre page (ou son nom)

Le champs "Url" sera rempli automatiquement par Pluxml sauf si vous vouliez qu'un nom différent du titre de la page apparaisse dans la barre d'adresse du navigateur. Par exemple, titre de la page "mapage" et vous voules dans le navigateur un truc du style....

 http://mon-site.info/essayez-les-chaussettes-noires.htm
"Active" sert à l'activer (ou la publier) quand on veut.
Si vous n'avez pas fini de l'écrire, laissé-là non activée et fous ferez cela plus tard.
 
"Ordre" c'est l'ordre d'apparition dans le menu en front-end.

"Menu" afficher ou non permet d'aboir le nom de cette page (son titre) dans le menu en front-end.

"Action", voir votre page comme un visiteur ou l'éditer pour la modifier à loisir.
 
Pour gagner du temps, laissons la page "Statique 1" là où elle est et empressons-nous de fabriquer une deuxième page.

Pour cela, c'est facile. :)
 
Dans le champs "Titre" de la proposition "Nouvelle page" qui vous est offerte, marquez ce que vous voulez (test par exemple) et c'ets tout (pour le moment). Validez en cliquant le bouton "Modifier la liste des pages statiques".
 
Et voilà, bravo ! Vous avez ajouté une page à votre site. :)
 
Mais elle n'apparait pas sur le site puisque le bouton "Active" est à non et et nous allons l'activer tout de suite.
Changez "Active" à oui, enregistrez et allez voir votre site. Son nom "test" s'affiche maintenant dans le menu. Cliquez "test".
 
Votre page apparait, on voit son nom et un texte qui raconte que "Cette page est actuellement en cours de rédaction" ce qui est tout à fait normal puique elle est vide. Nous allons la remplir. 
 
Dans l'aministration, vous voyez maintenant que votre nouvelle page est entièrement paramétrée et et que Pluxml a fait son travail.
 
Dans la colonne "Action" de votre nouvelle page, cliquez sur "Editer" et vous pouvez rentrer absolument tout ce que vous voulez, même du PHP, et nous verrons comment un peu plus loin.
 
Voici ce que moi j'a obtenu pour mon premier test de page statique.
 
 
 
Nous allons détailler l'opération en nous servant de cet exemple.
Retournons à l'étape édition de la page de test dans l'administration.
 
Ne nous préoccupons pas pour le moment des menus, du Header (haut du site) ou du Footer (bas du site. Tout cela se règle ailleurs.
Seule, la page nous intéresse.

Vous avez donc des outils d'édition car, rappelez-vous, je vous ais fais installer dans ce tutoriel deux plugins  dont un dénommé CKeditor qui est le meilleur. Il en existe plusieurs et vous choisirez plus tard celui qui vous convient le mieux.
 
Il est très classique et vous apprendrez vite à vous servir de toutes ses fonctionnalités. ;)
 
Pour le moment, je veux juste attirer votre attention sur celui de ces outils que vous utiliserez souvent, c'est l'importataure d'image qui travaille avec une vraie bibiothèque qui se nomme dans le menu de votre administration "Média".
 
Il faut savoir que pour faire apparaître une image ou un quelconque média sur votre page, vous avez deux méthodes. 
 
a) Insérer le lien vers l'image où qu'elle se trouve sur le net.
b) L'importer sur votre serveur (dans la bibliothèque justement) et aller la chercher au besoin.
 
Le truc est que si vous importez votre image dans votre page avec un lien direct vers le site où elle se trouve est que si le site en question tombe en carafe ou disparaît, vous n'avez plus d'image et votre page est moche.
L'intérêt est donc d'importer cette image sur votre serveur et vous êtes tranquille. Pluxml est fait pour cela. :)
 
Cliquons donc dans l'admin sur le lien "Média" et allons voir comment cela est-il fait.
 
bibliotheque media pluxml
 
 
Dans mon exemple ci-dessus, on voit tout de suite qu'il y a deux images dans ma bibliothèque et leurs miniatures respectives. J'ai choisi leurs tailles à l'importation et je pourrais modifier cela par la suite.
 
Nous remarquons tout de suite l'item "Dossier :".
 
Si vous cliquez sur la petite flèche là où il y a marqué "Racine", vous verrez que ça bouge et il n'y a pas autre chose parce que il n'y a rien d'autre.
Maintenant, si vous portez votre regard à droite, vous voyez un autre item nommé Nouveau dossier :" et un bouton "Créer".
 
Cela sert, mais vous l'aurez compris à faire des répertoires dans votre bibliothèque dans lesquels vous classerez vos images et documents comme vous l'entendez. 
 
Il existe tout de même deux dossiers principaux dans votre bibliothèque Média qui apparaissent très distinctement sur la copie écran ci dessous. "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 dans l'autre.
 
Cette fonctionnalité est bien pratique si votre site propose beaucoup de ressources que vous saurez toujours retrouver quand vous en aurez besoin.
 
dossiers media pluxml
 
Bien sûr, pour les images que vous aurez importé, vous pourrez les supprimer, les déplacer ou recréer le miniatures si elles ne vous conviennent pas  à votre gré grâce au bouton "Pour la sélection". Magique non ?  ;)
 
Avant toute choses, nous allons importer dans la bibliothèque (Média) une image que nous prévoyons d'utiliser plus tard. 
 
Admin/Médias/
 
Nous sommes sur la page "Gestion des médias" et allons vite cliquer sur "Ajouter fichiers" tout en ayant eu soin de privilégier le répertoire "Images" existant.
 
Le système nous demande de parcourir notre ordinateur à la recherche de l'oeuvre que nous voulons publier. Choisissez l'image qui vous chante.
 
Notons au passage que cela pourrait être n'importe quoi. Une photo, une vidéo, un fichier .pdf (etc...) pour autant que le format soit reconnu. Contentons-nous d'une image en .gif, .jpg ou .png. Privilégions le .png qui est le plus léger donc le meilleur. ;)
 
Vous avez cliqué sur "Parcourir" et le système a importée l'image de votre choix.
En ce qui me concerne, cette image se nomme "sauteur.gif" et son nom apparaît sous le champs d'importation
 
 
Pour terminer cette importation, je  choisi la taille à laquelle elle doit être enregistrée sur le serveur (je choisis personnellement toujours "taille originale" ) et la taille de la miniature (vignette) désirée.
 
Astuce pluxmlAstuce : Vous utilisez en général la miniature pour illustrer le titres de vos articles. 100x100 est un bon choix mais vous faites ce que vous voulez. ;)
 
Notons qu'il vous sera toujours possible plus tard de redéfinir les tailles de vos images et qu'il faut éviter de leur donner plus de 650 pixels de largeur de crainte de déformer votre template.
 
Il ne vous reste plus qu'à .... envoyer. 
 
Maintenant que nous avons une image dans notre bibliothèque de média, nous allons la faire apparaître sur notre page de test. Ouvrons-là en mode édition.
 
Positionnons le curseur de la souris là ou nous voulons voir l'image, cliquons (pour sélectionner l'endroit) et trouvons dans la première rangée des outils de l'éditeur celui nommé "Image". Une bulle apparaît au passage de la souris sur chacun d'eux. Cliquons !
 
Une fenêtre d'importation d'image dans votre documennt s'ouvre.
 
importer image sous pluxml
 
 
Là, vous avez le choix de renseigner le champs "URL" avec l'adresse de l'image en question ou de cliquer sur le bouton "Explorer le serveur" pour fouiller votre bibliothèque. Faites donc cela.
 
Vos images apparaissent, vous choisissez la vôtre, double- cliquez dessus et hop! C'est dans la poche. 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.
 
1/ Le champs "Texte de remplacement".
 
Ce champs peut rester vide mais il est capital de le renseigner car les moteurs de recherche s'en servent pour référencer votre site. 
Ecrivez une breve description de l'image et une référence pertinente au thème de votre site. Par exemple : "Le grand-père de srtaline avant son mariage".
 
D'autre part, si pour une raison ou une autre l'image ne s'affichait pas dans le navigateur du visiteur, ce texte apparaitrait à sa place.
 
2/ Lightbox
 
Si cette case est cochée, le visiteur en cliquant sur cette image l'agrandira et cela est bien pratique pour fabriquer des galeries ou albums photos. ;)
 
3/ Lien
 
Vous pouvez mettre un lien sur votre image pour diriger l'internaute vers une information qui lui sera utile.
 
4/ Important : 
 
Voyez à ce stade  le contenu du champs l'URL automatiquement rempli par Pluxml si vous avez été cgercher 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.

Imaginons une seconde que vous construisiez votre site sur ce NDD (nom de domaine) et que vous décidiez demain d'en changer (de NDD) ou de le transférér votre site vers un autre serveur dont le NDD est nouveau-site.com.

Le chemin des images enregistré ne serait plus le même et, bien qu'étant physiquement dans la bibliothèque, elles n'apparaitraient plus.

Il vous faudrait alors ouvrir changer tous ces liens et ce serait fastidieux. Alors, usons d'une petite combine. ;)

Dans cet item, virez donc le NDD et ne gardez que....

/data/images/sauteur.gif

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

Pour info, je vous recommande cet article qui vous fera du bien. Pour déplacer un site PluXml

Je vous laisse découvrir les autres possibilités dont la description dépasse le cadre de ce tutoriel.
 
Avant d'enregistrer cette page statique, découvrons ensembles quelques nouveautés dont certaines capitales pour votre futur régérencement.
 
Il y a quatre informations juste en dessous de l'édditeur avant enregistrement.
 
a) Template :
b) Trois champs nommés...
Contenu balise title (option) : 
Contenu de la balise meta "description" pour cette page statique (option) :
Contenu de la balise meta "keywords" pour cette page statique (option) :
 
Pour le template, nous verrons plus tard et laissez tel quel.
 
Pour les autres champs, renseignez pour le premier le nom de votre page.
Le second, renseignez  des précisions que vous n'avez pas mis dans le titre par exemple "Tutoriel pour l'installation et l'utilisation du CMS Pluxml"
Le troisième recevra les mots clefs à destination de Google et des autres moteurs de recherche.
 
Cette étape est très importante et peut faire le succés de votre site. ;)
 
Voilà, vous pouvez entregistrer votre page de test et aller voir ce que ça donne. La mienne est....
 
page de test installation pluxml
 

Parfait, vous savez maintenant comment on confectionne les pages statiques du site et nous allons aller voir comment ça se passe pour les articles.
 
En fait, c’est exactement la même chose, avec des fonctionnalités en plus mais vous allez vitre comprendre. Direction Admin/Nouvel article
Nous avons une page comme celle-ci....
 
 
édition d'articles dans pluxml
 
Remarquons tout d'abord qu'il y a à droite plusieurs informations.
 
Brouillon : La page en courts est en mode "Brouillon" et le restera tant que vous n'aurez pas choisi de la publier (en bas de page).
 
Auteur : Si vous avez des inscrits sur votre site (Pluxml est multi-utilisateur) et qu'un "rédacteur" propose un article, son nom peut-être défini ici. Pour le moment, il n'y en a qu'un, vous.
 
Date de publication : Est bien sûr la date à laquelle votre article sera publié. Aujourd'hui, demain, dans trois mois, c’est comme vous voulez.
Notons au passage que, si vous voulez faire "remonter un article" (ils apparaissent en front-end par ordre chronologique (date), il vous suffira de changer la date pour celle du jour.
 
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îtrons (si vous le décidez ainsi)  dans la sidebar et constituerons "le nuage de mot" 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 remplie 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 ici, c'est le Chapô.
 
En cliquant sur "afficher", un autre éditeur s'ouvre et 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 si il ne plait pas à vos lecteurs. Lol ! :)
 
Bon, cela a tété facile juqu'à maintenant n'est-ce pas ?

Je vais vous laisser vous entraîner un petit peu et nous allons entamer La Phase 4 de ce tutoriel qui nous apprendra à nous servir de Pluxml avec ce que nous savons et même un peu plus.