{{tag>Logiciel}} ====== Pluxml : création d'un site internet ====== ===== Introduction ===== **PluXML** est un CMS ===== Pré-requis ===== * un **serveur Web** ((tel que **Apache**)) **ou un hébergeur**. Tout serveur web devrait pouvoir faire tourner PluXml. * un **accès FTP** sur ce serveur * **PHP 5** ou supérieur [[tutoriel:internet:php5]] * Installez les **extensions PHP** suivantes : **[[apt>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-zipPour 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 | 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** 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. ((le .htaccess est obsolète)) : 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** AddType x-mapp-php5 .php **Free** php 1 **Online.net** AddType application/x-httpd-php5 .php __NB__: nécessite également un chmod 755 sur le dossier d'installation de PluXml **Nuxit** 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é ((**xxx/** par exemple)) 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. {{ logiciel:internet:pluxml:pluxml-01.jpg?600 |}} 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__" {{ logiciel:internet:pluxml:lien_admin.png |}} (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 : {{ logiciel:internet:pluxml:pluxml-02.jpg |}} 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 : [[logiciel:programmation:php:start#Configuration de l'envoi d'email par PHP]] ==== Profil ==== Dans le menu de gauche, cliquer sur **Profil**. {{ logiciel:internet:pluxml:profil.png |}} 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 ((ce sera modifiable par la suite)) : * **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** {{ logiciel:internet:pluxml:themes.png |}} 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 : {{ logiciel:internet:pluxml:pluxml-05.jpg?600 |}} Pour en savoir plus sur les thèmes et les templates, voir la page [[.themes:start]] ==== Configuration avancée ==== Dans le menu de gauche, cliquer sur **Paramètres** puis sur **Configuration avancée**. une page s'ouvre : {{ logiciel:internet:prestashop:configuration_avancee.png?600 |}} 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. {{ logiciel:internet:pluxml:pluxml-06.jpg?600 |}} Notre premier plugin apparaît maintenant dans la liste des **Plugins actifs** : {{ logiciel:internet:pluxml:pluxml-07.jpg |}} 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 : {{ logiciel:internet:pluxml:pluxml-08.jpg?600 |}} 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 : (...) 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. : {{ logiciel:internet:pluxml:pluxml-10.jpg?600 |}} 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 [[logiciel:internet:pluxml:themes:start]] ==== Comment est fait un site pluxml ==== Revenons à la page d'accueil du site (onglet) : {{ logiciel:internet:pluxml:pluxml-05.jpg?600 |}} 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 ((un blog sert à publier des articles que le visiteur peut commenter)) 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 : {{ logiciel:internet:pluxml:page_statique_liste.png?600 |}} 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 :

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. ((on veut faire un site internet et non un 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 >> : {{ logiciel:internet:pluxml:case_page_accueil.png?600 |}} 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 ((sidebar)). Elle est livrée d'origine avec des étiquettes ((tags)) 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** : C'est une succession de %%
%% qui contiennent chacun une instruction, par exemple :

lang('ARCHIVES')?>

 qui signifie que ce qui est entre les balises %%

%% est ce qui apparaît dans la barre latérale du site sous le nom d'Archive et le tag archList('
  • #archives_name (#archives_nbart)
    • '); ?>     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 %%
    %%, 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 [[http://tuto-pluxml.reseauk.info/article15/modifier-la-sidebar-pour-y-faire-apparaitre-autre-chose|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 : {{http://tuto-pluxml.reseauk.info/data/images/entree-administration.png}} 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 >> ((en effet, elle est vide)). Dans l'administration, colonne **Action** de la nouvelle page, cliquer sur **Éditer** pour entrer un contenu, même du PHP : {{http://tuto-pluxml.reseauk.info/data/images/copie-page-test.png}} 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. ((mais si le site où elle se trouve tombe en panne ou disparaît, ... plus d'image !)) - 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** : {{http://tuto-pluxml.reseauk.info/data/images/media.png}} 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. {{http://tuto-pluxml.reseauk.info/data/images/dossiers-media.png}} 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. {{http://tuto-pluxml.reseauk.info/data/images/importation-image.png}} 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 (100x100 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. ((Une bulle apparaît au passage de la souris sur chacun d'eux)) et cliquez dessus. Une fenêtre d'importation d'image dans votre document s'ouvre. {{http://tuto-pluxml.reseauk.info/data/images/importer-image.png}} 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 styledata/images/sauteur.gifCela 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 : [[http://wiki.pluxml.org/index.php?page=D%C3%A9placer+un+site+PluXml|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 : {{http://tuto-pluxml.reseauk.info/data/images/voir-page-test.png}} ++++ ++++ Edition des pages statiques | Dans le menu, Cliquer sur **Pages statiques** : {{ logiciel:internet:pluxml:pluxml-12.jpg?600 |}} 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 | Le plus simple : * afficher la page * copier l'adresse en omettant le nom du site (donc à partir de **index.php?...**) * et utiliser cette url dans le lien. ++++ ++++ 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". {{logiciel:internet:pluxml:pluxml-14.jpg|}} 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. {{logiciel:internet:pluxml:pluxml-15.jpg|}} 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) 100x100 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 : {{logiciel:internet:pluxml:pluxml-16.jpg|}} 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. {{logiciel:internet:pluxml:pluxml-17.png|}} 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. {{logiciel:internet:pluxml:pluxml-18.png|}} ++++ ++++ 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 : * **Template** : laissez tel quel (nous verrons plus tard) * Trois champs : * **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 pour les moteurs de recherche. Vous pouvez enregistrer votre page de test et aller voir ce que ça donne, comme par exemple : {{logiciel:internet:pluxml:pluxml-19.png|}} 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** : {{logiciel:internet:prestashop:pluxml-11.jpg|}} 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 : {{logiciel:internet:pluxml:pluxml-20.png|}} 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**. {{logiciel:internet:pluxml:pluxml-12a.jpg|}} 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 : [[http://tuto-pluxml.reseauk.info/static6/page-menu-droite|Sidebar à droite]] [[http://tuto-pluxml.reseauk.info/static19/page-menu-gauche|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 [[http://tuto-pluxml.reseauk.info/static18/page-sidebar-ensembles|Thème "Défaut" arrangé pour ce site]] [[http://tuto-pluxml.reseauk.info/static20/theme-defaut-original|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 [[http://forum.pluxml.org/|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 ^ ^ | | 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é : Collez entre les