Documentation du Dr FRAPPE

Ce wiki regroupe les résultats de mes expériences en informatique accumulés au cours de mes recherches sur le net.
Dans la mesure du possible, j'ai cité mes sources ; il en manque certainement…
Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
{{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 : <cli>$ sudo apt install php-curl php-gd php7.3-xml php-zip</cli>Pour un Raspberry Pi, on utilisera php5-gd)
  * Avoir activé les directives .htaccess

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

++++ Activer PHP5 ou + sur votre hébergement |

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

<WRAP center round tip 60%>
__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**
</WRAP>
++++

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

<WRAP center round info 60%>
Ces directives sont à mettre dans votre fichier .htaccess sauf pour OVH depuis fin 2014
</WRAP>

**OVH**

<code - .htaccess>
SetEnv PHP_VER 5
</code>

**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)) :

<code - .ovhconfig>
app.engine=php
app.engine.version=5.5
http.firewall=none
environment=production
</code>

Pour changer de version PHP il suffira de jouer avec les versions en remplaçant le numéro de version :
<code>app.engine.version=5.4</code>
<code>app.engine.version=5.5</code>
<code>app.engine.version=5.6</code>

**1and1**

<code - .htaccess>
AddType x-mapp-php5 .php
</code>

**Free**

<code - .htaccess>
php 1
</code>

**Online.net**

<code - .htaccess>
AddType application/x-httpd-php5 .php
</code>

<WRAP center round info 60%>
__NB__: nécessite également un chmod 755 sur le dossier d'installation de PluXml
</WRAP>

**Nuxit**

<code - .htaccess>
options -indexes
AddHandler x-httpd-php5 .php
AddType application/x-httpd-php5 .php
</code>
++++

===== 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))
<WRAP center round info 60%>
Dans ce tutoriel, nous supposons qu'il a été envoyé à la racine d'un serveur local **[RACINE]/xxx** (par exemple **/var/www/xxx**).
</WRAP>
  * 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.<WRAP center round info 60%>
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/|]].
</WRAP>
  - Cliquer sur <key>Installer</key>.\\ Via **FTP**, effacer le fichier **[RACINE]/xxx/install.php** à la racine du site
<WRAP center round tip 60%>
En cas d'oubli, un message le rappellera dès l'entrée dans l'administration.
</WRAP>

{{ 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 <key>Modifier votre profil</key>

==== 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 <key>Modifier la configuration de base</key>, 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 <key>Modifier les options d'affichage</key> 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 <key>Modifier la configuration avancée</key> et fermer cette page.

<WRAP center round info 60%>
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%%
</WRAP>

==== 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 <key>OK</key>.

{{ 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 |}}
 
<WRAP center round info 60%>
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|]].
</WRAP>
 
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 <key>Télécharger</key> 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 <key>Enregistrer</key>

Activer le plugin **CKEditor**.

<WRAP center round info 60%>
Certains plugins ont besoin d'être configurés at d'autres pas.
</WRAP>

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 :
<code - [...]/plugins/ckeditor/ckeditor/ckeditor.js>
(...)
defaultLanguage:"fr",
(...)
</code>

==== 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)

<WRAP center round info 60%>
**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.
</WRAP>

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).

<WRAP center round important 60%>
__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.
</WRAP>

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 <key>Enregistrer</key>.

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 <key>Modifier la liste des pages statiques</key> 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é.

<WRAP center round tip 60%>
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 :

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

Si on clique à nouveau sur le bouton <key>source</key>, 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.
</WRAP>

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 <key>Modifierla liste des pages d'accueil</key>.

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** :
	
<code 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>
</code>

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

<code php>
<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>
</code>

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

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.

<WRAP center round important 60%>
Toujours garder une sauvegarde des fichiers avant de les modifier. En cas de malheur, cela permettra de revenir en arrière.
</WRAP>

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.

<WRAP center round info 60%>
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.
</WRAP>

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 <key>Modifier la liste des pages statiques</key>.
 
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 <key>Créer</key> 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 <key>Pour la sélection</key>.

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 <key>Images</key> 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 <key>Envoyer</key>. 

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é <key>Image</key>. ((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 <key>Explorer le serveur</key> 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<code>data/images/sauteur.gif</code>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<code>/data/images/sauteur.gif</code>

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

<WRAP center round tip 60%>
Voyez cet article : [[http://wiki.pluxml.org/index.php?page=D%C3%A9placer+un+site+PluXml|Pour déplacer un site PluXml]]
</WRAP>

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.

<WRAP center round important 60%>
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).
</WRAP>

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.
 
<WRAP center round tip 60%>
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.
</WRAP>

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.

<WRAP center round tip 60%>
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.
</WRAP>

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).
 
<WRAP center round tip 60%>
Cela peut être n'importe quoi. Une photo, une vidéo, un fichier .pdf (etc...) pour autant que le format soit reconnu.
</WRAP>

{{logiciel:internet:pluxml:pluxml-15.jpg|}}

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

<WRAP center round tip 60%>
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.
</WRAP>

Cliquez sur le bouton <key>envoyer</key>

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|}}

<WRAP center round tip 60%>
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".
</WRAP>

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 <key>Explorer le serveur</key> 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.
 
<WRAP center round important 60%>
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.
</WRAP>

{{logiciel:internet:pluxml:pluxml-18.png|}}
++++

++++ Pour renommer une page statique |

Modifiez **Titre** et effacez le contenu du champ **URL**.

Cliquez sur le bouton <key>'Modifier la liste des pages statiques'</key> 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 <key>Enregistrer</key>.

<WRAP center round info 60%>
Nous verrons plus loin l'utilisation des outils de publication.
</WRAP>

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é.<WRAP center round tip 60%>
Pour faire "remonter un article", il suffit de changer la date pour celle du jour (ils apparaissent en front-end par ordre chronologique).
</WRAP>
  ; 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 <key>Modifier' 'la' 'liste' 'des' 'pages' 'statiques</key>

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.

<WRAP center round tip 60%>
Votre page s'affiche désormais dans le menu sous **Accueil** : vous pouvez donc mettre l'item **Menu** à **Masquer**
</WRAP>
++++

==== 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**|

<WRAP center round important 60%>
Le préfixe (static-header-style-sidebar) est obligatoire, le reste est à personnaliser.
</WRAP>

Dans **static-bretelles-us.php** modifiez les lignes :
^ ^ en ^
^<code><?php include(dirname(__FILE__) . '/header.php'); ?>
<?php include(dirname(__FILE__).'/sidebar.php'); ?></code>|<code><?php include(dirname(__FILE__) . '/header-bretelles-us.php'); ?>
<?php include(dirname(__FILE__).'/sidebar-bretelles-us.php'); ?></code>|

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
<code>background: url('/data/images/logo-bretelles.jpg') no-repeat top left;</code>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é :
<code><?php if(!defined('PLX_ROOT')) exit; ?></code>
	
<code ->
<aside role="complementary">
 
</aside>
</code>

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

<code ->
<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>
</code>

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 :

<code - header.php>
<header role="banner">
  <div class="content">
    <div id="header-title">
      <?php $plxShow->mainTitle('link'); ?>
    </div>
    <p>
      <?php $plxShow->subTitle(); ?>
    </p>
  </div>
</header>
</code>

<WRAP center round info 60%>
  * <code><div id="header-title"></code> : nom du %%<div>%%
  * <code><div class="content"></code> : classe qui gère les affichages concernant  ce %%<div>%% particulier.
</WRAP>

<WRAP center round box 60%>
Cet exemple part du thème par défaut ; on peut faire la même chose avec un autre thème.
</WRAP>

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 |
 
[[tutoriel:mini-tutoriels:ficedit#Modifier un fichier sans les droits d'administration|Ouvrez]] le fichier **themes/defaut/header-modele.php** pour modifier :
  * la classe en :<code - themes/defaut/header-modele.php>
<div class="content-modele">
</code>
  * et l'appel à la feuille de style en :<code - themes/defaut/header-modele.php>
<link rel="stylesheet" href="<?php $plxShow->template(); ?>/style-modele.css" media="screen"/>
</code>
++++

++++ Fichier static-modele.php |

[[tutoriel:mini-tutoriels:ficedit#Modifier un fichier sans les droits d'administration|Ouvrez]] le fichier **themes/defaut/static-modele.php**.

Repérez la rubrique<code>/* ---------- HEADER ---------- */</code>

et les lignes<code - themes/defaut/static-modele.php>
header .content {
  background: url('img/header.jpg') no-repeat top left;
  background-position: 25px 0;
  height:170px;
}
</code>

Recopiez ces lignes juste en dessous, mais avec le nom de la nouvelle image d'en-tête :<code - themes/defaut/static-modele.php>
(...)
header .content {
  background: url('img/mon-image.jpg') no-repeat top left;
  background-position: 25px 0;
  height:170px;
}
</code>

Toujours dans **static-modele.php**, changez l'appel au **header.php** par celui créé pour la circonstance :<code -static-modele.php>
<?php include(dirname(__FILE__) . '/header-modele.php'); ?>
</code>
++++

++++ Utilisation |

Créez une nouvelle page, donnez-lui le template **static-modele.php** et visualisez le résultat.

<WRAP center round tip 60%>
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**.
</WRAP>

 
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 ====

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

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

==== Le look : les templates ====

Sur un site internet, un template est son habillage, ce qui sert à mettre en avant une charte graphique ou un agencement.
 
Dans Pluxml, nous appelons cela un thème, mais le mot "template" sera utilisé aussi.

Ces templates sont modifiables à loisir (toutes les pages peuvent être différentes si on veut) et surtout sans avoir besoin de toucher au coeur du système Pluxml lors de vos modifications.
 
Les mises à jour du CMS ne posent donc aucun problème.
 
Il existe des [[http://ressources.pluxml.org/|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 [[http://www.pluxml.org/article45/gestion-avancee-des-themes-dans-pluxml|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 [[http://www.pluxml.org/article54/gestion-des-feuilles-de-style|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.
 
<WRAP center round info 60%> 
  * 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).
</WRAP>
 
Pour voir où cela se passe, allez dans Admin/Paramètres/Options d'affichage et regardez "Choix du thème :" (vous voyez le nom de votre thème).
 
Ensuite, ouvrez en mode édition votre page de test et repérez  une liste déroulante nommée "Template :"
Là, normalement, il y a un truc nommé "satic.php"
 
Cette page utilise donc le template "static.php" et le thème "nom de votre thème"
 
Maintenant, imaginions que nous voulions mettre en ligne une autre page qui n'a pas besoin de sidebar (le menu "automatique").
Dans "Template :", choisissez   "static-full-width.php", enregistrez et allez voir ce que cela donne. Une petite démonstration ici. :)
 
Vous avez vu ?
 
C'est donc très facile d'appliquer un autre template à une ou plusieurs pages ou article de votre thème. Voyons comment fabriquer ces templates. ;)
 
Nous allons maintenant passer aux exercices pratiques et vous allez fabriquer votre premier template. Merci de suivre ces conseils à la lettre afin de ne pas vous perdre et de m'obliger à me répéter. :)
 
Nous avons vu par ailleurs que les thèmes (donc aussi les templates) sont physiquement indépendant du core (code coeur du système) Pluxml, ce qui veut dire que quoi que vous fassiez, nous ne risquez pas l'Apocalypse et il sera très facile de revenir en arrière au cas où vous auriez fais une bêtise.
 
Toutefois, par sécurité, et parce que c’est un réflexe de codeur/programmeur, nous allons faire une copie du thème par défaut et travailler sur une copie.
Direction votre FTP, regardez dans le répertoire "Thèmes" et repérez celui nommé "defaut". Si vous n'avez pas été plus vite que moi, c’est le seul thème installé sur votre site. ;)
 
Hé bien, nous allons en mettre un second en copiant ce répertoire (defaut), en le renommant gentiment, et l'uploadant dans le répertoire réservé aux thèmes. Vous avez maintenant deux thèmes.
 
Par convention puisque nous travaillons ensemble, nommez votre nouveau thème "defaut-moi" ("-moi" peut être votre prénom mais n'oubliez pas le tiret).
 
Ouvrez la page paramètres/Options d'affichage et vous constatez à l'item "Choix du thème :" qu'il existe maintenant un thème "defaut-moi". Sélectionnez celui-là et enregistez cette nouvelle configuration (Modifier les options d'affichage).
 
Rien ne change, bien sûr puisque "defaut-moi" est la copie conforme de "defaut" et c’est sur ce thème que nous allons travailler.
 
Commençons par quelque chose de facile.
 
Nous allons faire une page dont le look sera complètement différent. Regardez donc ici. ;)
 
Il est à noter que ce principe est applicable aussi pour vos articles (article.php au lieu de static.php) et même toute une catégorie en allant dans administration/Catégorie/option de la catégorie.
 
Pour résumer la situation, grâce à notre nouvelle static-quelquechose.php, nous avons créé un autre look (template) en lui donnant sa propre feuille de style, son propre header et, si nous l'avions voulu sa propre sidebar. Avec ce principe, vous faites ce que vous voulez. :)
 
Ce qu'il faut retenir, c'est que les fichiers que vous fabriquez doivent êtres nommés en minuscule et toujours respecter le préfixe pour que Pluxml le reconnaisse (et pour que vous vous y retrouviez plus facilement.
 
static-jack.php
style-jack.css
static-sidebar-droite.php
static-header-jaune.php
 
......ce qui est en gras étant le préfixe et n'oubliez pas le tiret.
 
Tout cela vous sera bien utile pour faire des tests sans toucher à vos pages déjà en ligne. Je m'explique.
 
En avançant de plus en plus avec Pluxml, vous découvrirez qu'il suffit d'ajouter des tags, ou instructions, pour obtenir des effets aussi jolis qu'utiles.
Par exemple, vous pourriez vouloir la liste des derniers articles dans votre header (oui, je sais, c'est débile), celle des cinq derniers articles d'une telle catégorie dans votre menu ou les commentaires dans votre pied de page. Pourquoi pas ? ;)
 
Il vous suffira de coller ces instructions là où vous le voulez et nous étudierons cela un peu plus tard quand vous serez bien familiarisé avec Pluxml.
 
C'est là que vous serez bien content de produire des templates différents sans toucher aux pages qui sont déjà en ligne et il ne vous restera plus qu'à modifier votre template d'un clic quand vous serez prêt à montrer votre oeuvre à la face du monde. 
 
Attention tout de même au fait que si vous changez de thème, il faudra refaire vos templates additionnels si vous voulez que cela fonctionne. A par ça....
 
Fini le stress du webmaster. :)
 
Voici maintenant le grand principe pour modifier Pluxml en profondeur.

===== Utilisation =====

==== Sauvegarder ses données ====

PluXml n’ayant pas de base de données, il suffit de sauvegarder sur un support externe :
  * tout le dossier racine du site.\ Par exemple, si votre site se trouve dans le répertoire **/var/www/pluxml**, il suffit de faire une copie du dossier **pluxml**.
  * ou le répertoire **/var/www/pluxml/data** si vous ne voulez sauvegarder que les articles, les commentaires, les pages statiques et la configuration du site et des plugins.

===== Désinstallation =====

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

===== Voir aussi =====

  * **(fr)** [[http://www.pluxml.org/|site officiel de pluxml]]
  * **(fr)** Un excellent tutoriel à suivre pas à pas :
    * [[http://tuto-pluxml.reseauk.info/article19/pour-votre-pemiere-installation|Phase 1]]
    * [[http://tuto-pluxml.reseauk.info/article20/phase-2-de-l-installation-et-utilisation-de-pluxml|Phase 2]]
    * [[http://tuto-pluxml.reseauk.info/article25/installer-et-utiliser-pluxml-phase-3|Phase 3]]
    * [[http://tuto-pluxml.reseauk.info/article28/phase-4-du-tutoriel-pour-les-nuls|Phase 4]]
    * et le reste de ce site ...
  * des tutoriaux :
    * [[http://www.pluxml.org/article38/realiser-un-theme-statique]]
    * [[http://www.pluxml.org/article40/plxtoolbar-creer-vos-propres-boutons]]
    * [[http://www.pluxml.org/article41/utiliser-la-fonction-groupe-des-pages-statiques]]
    * [[http://www.pluxml.org/article43/realiser-une-page-statique-avec-commentaires]]
    * [[http://www.pluxml.org/article45/gestion-avancee-des-themes-dans-pluxml]]
    * [[http://www.pluxml.org/article46/realiser-un-fil-d-ariane]]
    * [[http://www.pluxml.org/article49/passer-votre-theme-5-02-en-5-1]]
    * [[http://www.pluxml.org/categorie3/tutos]]
  * **(fr)** comment est constitué un thème, par Ti-Pierre : [[http://www.pluxml.org/article45/gestion-avancee-des-themes-dans-pluxml]]
  * **(fr)** une page plus technique sur les thèmes : [[http://www.pluxml.org/article54/gestion-des-feuilles-de-style|]].
  * **(fr)** le site du lapin bleu : [[http://www.samare.net/]]

----
//Basé sur << [[http://tuto-pluxml.reseauk.info/article19/pour-votre-pemiere-installation|Pluxml pour les nuls, Phase 1 et suivantes]] >> par Jack.//
Piste : • Bureautique • Raccourcis clavier pour Windows XP, 7 et 8 • Donner une IP locale fixe à votre Raspberry Pi • DNSmasq : un serveur DNS local pour un PC sous Ubuntu • Internet et réseaux • Transformer un compte Pop en Imap • Système d'exploitation Ubuntu • Créer une Base de données sur OVH • templatepagename : pages de modèle c_template et i_template • DWservice sur Raspberry Pi : un TeamViewer like, voire mieux
Documentation du Dr FRAPPE

Recherche

Navigation

Imprimer/exporter

Outils
