Menu à droite ou menu à gauche ? (La sidebar)

Le menu peut être à gauche, à droite, des deux cotés et même là où vous le voulez. Comment ?
Facile comme "Bonjour !" avec Pluxml. :)

Le menu, poétiquement nommé "Sidebar" chez Pluxml, peut se déplacer à volonté avec quelques manips simples.
Vous pouvez également le modifier et faire apparaitre dans set espace absolument tout ce que vous voulez.

Pour vous en convaincre, regardez cette page que vous êtes en train de lire. Le menu est à droite.
Sur celle-ci, il est à gauche.
Maintenant, ici, il en a deux différents et je suis bien content. :)

Nous utilisons pour cela un principe qui nous sera bien utile par la suite et donnera à vos pages l'originalité qu'elles méritent.
Il faut savoir qu'avec Pluxml, tout est fait pour vous faciliter la vie. ;)

Le site est conçus de telle manière que les transformations que vous ferez sur telle ou telle page, tel ou tel template (thème) n'impactera en aucun cas le core c'est à dire le code source qui fait fonctionner l'ensemble.

En fait, chaque thème a ses propres fichiers et vous n'interviendrez que sur ceux-là.

Par exemple, pour modifier la page qui "fabrique" celle que vous êtes en train de lire, Pluxml va utiliser un gabarit qui affichera les ces pages en fonction de ce que vous lui demandez.
Si vous voulez un autre affichage (l'image de la bannière ou un menu différent par exemple) vous lui ordonnerez de la faire avec la plus grande simplicité.
Bien sûr, avant, vous aurez préparé le terrain en créant des sortes de modèles de pages que vous utiliserez selon votre bon vouloir.

En bref, quand pluxml "appelle une page", il "charge" plusieurs fichiers qui sont "listées" dans une page principale nommée static.php.
Cette page static.php appelle elle, grâce à des instructions spécifiques, des informations que nous indiquons ou pas selon notre bon vouloir.

Il nous suffit de créer un clone de static.php avec des instructions différentes pour obtenir l'affichage que nous voulons et, lors de l'édition de notre page, cliquer un bouton pour choisir le gabarit que nous voulons utiliser pour cette production en particulier.

Comme rien ne vaut un bon exercice pratique pour comprendre, nous allons nous y mettre.

Préparez une bière, ouvrez votre site dans votre navigateur préféré, lancez votre logiciel FTP avec lequel vous avez envoyé les fichiers du site sur le serveur et c'est tout. Vous êtes prêts à devenir un spécialiste. :

Tout d'abord, repérez sur votre serveur le répertoire "thèmes" et à l'intérieur le nom du thème que vous utilisez actuellement.

Si vous n'avez pas téléchargé de thème supplémentaire, vous n'avez dans ce répertoire qu'un seul dossier nommé "défaut".
Tout de suite, faites une sauvegarde de ce dossier sur votre ordinateur (en cas de malheur).

[Edit] Pour ces tutoriels, nous utilisons désormais le thème "Défaut" même si certaines pages de ce site font référence au thème-zen que nous avons privilégié au début.


Un petit truc (obligatoire) :

Pour éviter de faire des bêtises, vous allez travailler sur une copie de ce dossier que vous allez renommer pour la circonstance.

Par exemple, le dossier "defaut" que j'ai sauvegardé sur mon ordinateur, je le renomme defaut-jack et je le renvoie sur le serveur.
J'ai donc maintenant deux thèmes qui sont strictement les mêmes mais portent un nom différent.

Notons que si vous faites des modifications sur un thème donné, vous devrez faire l'équivalent sur les autres thèmes que vous voulez proposer à vos visiteurs.

Nous allons travailler sur defaut-jack pour être tranquille.

Maintenant, nous allons sur le site.

Administration, Paramètres, Options d'affichage, et le premier item qui s’offre à vous sur cette page est la possibilité de changer le thème de votre site.
Apparaissent le thème "defaut", les autres thèmes si vous en avez et surtout, celui que vous avez renommé pour travailler tranquille. Activez celui-là.

Votre site fonctionnera maintenant avec ce thème et aucunes modifications n'impacteront les autres thèmes ni le core de Pluxml.

Remarquez dans un premier temps que votre site n'a pas changé et c’est normal puisque le thème votretheme-quelquechose est la copie conforme de l'original. Cela ne va pas durer. Lol !

Maintenant, nous allons nous intéresser aux fichier que nous voulons modifier pour modifier notre menu (sidebar) ou le changer de place

Commençons par une petite expérience.

Repérons sur notre serveur le fichier themes/notre-theme/static.php
Faisons-en tout de suite une sauvegarde car nous allons le bidouiller et cela serait dommage de le perdre.
Quand c’est fait, ouvrons-le soit grâce au ftp et un éditeur de texte (surtout pas un traitement de texte) ou plus simple à l'aide de l'éditeur intégré dans pluxml en cliquant sur le lien "Éditer les fichiers du thème «theme-votre-theme»".
 
Recherchez le fichier static.php et regardez comment il est fichu.


<?php include(dirname(__FILE__) . '/header.php'); ?>
<section role="main">

	<div class="content">

		<div id="static-width-sidebar">

			<article role="article">

				<h1>
					<?php $plxShow->staticTitle(); ?>
				</h1>

				<?php $plxShow->staticContent(); ?>

			</article>

		</div>

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

	</div>

</section>

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

Bon, c'est sans doute du chinois pour beaucoup d'entre vous mais il n'y a pour le moment qu'une ligne qui nous intéresse. C'est celle...

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

Elle "appelle" la sidebar (le menu) et vous pourriez vous amuser à supprimer cette ligne et voir ce que a donne.

Pour éviter de vous embêter, désactivez-là seulement en la commantant avec des //

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

Vous voyez, la sidebar a disparue. :)

Maitenant, pourquoi pas la mettre ailleurs voire même en mettre une deuxième ?

regardez ce code et retrouvez celle que j'ai rajouté.

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

<section role="main">

    <div class="content">
<?php include(dirname(__FILE__).'/sidebar.php'); ?>
        <div id="static-width-sidebar">

            <article role="article">

                <h1>
                    <?php $plxShow->staticTitle(); ?>
                </h1>

                <?php $plxShow->staticContent(); ?>

            </article>

        </div>

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

    </div>

</section>

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

Ben voilà, vous savez maintenant comment apparait votre menu , le déplacer, le doubler et vous commencez à appréhender comment fonctionne pluxml.

Il va falloir à ce niveau nous intéresser à la feuille de style parce que, selon les thèmes ce n'ets pa stoujoiurs aussi simple.

Par exemple, pour le thème "defaut", il nous suffira de déplacer le contenu de la page pour avoir la sidebar de l'autre coté.

Ouverez style.php et repérez ces lignes....

#static-width-sidebar {
	float: left;
	width: 60%;

Changez float en right et le tour est joué. ;)

La personalisation des feuilles de style dépasse le cadre de cet article mais nous allons en parler plus avant dans d'autres tutoriels.

Et si nous la modifions cette sidebar pour y faire apparaitre autre chose ?

 

Écrire un commentaire

Quelle est la deuxième lettre du mot sbtp ? :