PluxThèmes

03 juin 2025

créer un thème - étape integration 01

Rédigé par GC-nomade Aucun commentaire

Classé dans : Les thèmes, fichier, intégration, tutos et astuces Mots clés : adaptation, création de thème, CSS, fichiers du thème, tutoriel, tutos

Dans cet article nous allons regarder comment transformer un thème gratuit HTML pour le rendre utilisable dans PluXml.

Nous trouvons sur html5up.net le thème "MASSIVELY" qui peut convenir à PluXml.

A première vue, il y manquera au moins la liste vers les "catégories" et un fil d’Ariane .Il faudra aussi prévoir l'affichage des commentaires si l'on veut garder une certaine inter-action avec les visiteurs. Pour le reste nous nous conformerons au thème.

Ce thème est livré avec des images neutres colorées. Il faudra personnaliser l'image de fond principale.

Le thème est sous licence, licence que nous conserverons dans les fichiers et mention du thème ainsi que le lien vers son site d'origine.

Préparations

Créez un dossier massively dans le dossier themes/ de PluXml.

Télécharger l'archive du thème massively-html5up.zip .

Étape 01 - extraction du thème.

Déployez l'archive dans le répertoire thèmes/massively de PluXml.

Une fois l'archive déployée, nous trouvons deux dossiers, deux fichiers TXT (readme et licence) à conserver et 3 fichiers HTML qui vont nous servir à recréer les fichiers template, gabarits de PluXml.

contenu du répertoire massively

Le dossier assets/ contient les feuilles de styles et scripts nécessaires au fonctionnement du thème. Nous pourrons y ajouter nos styles supplémentaires: fil d’Ariane, navigation des catégories, affichage des commentaires.

Le dossier images/ contient les images du thème.

Étape 02 créations des fichiers manquants

Nous allons créer les fichiers de base pour un thème. Pour se faciliter la tâche, nous créons un seul fichier avec un script PHP pour créer ces fichiers.

Dans le dossier de votre thème massively/, créer ce fichier : themesFiles.php et insérer dedans le code suivant:

<?php
	$check='<?php if (!defined('PLX_ROOT')) exit; ?>';
	$infos='<?xml version="1.0" encoding="UTF-8"?>
	<document>
	<title>
	<![CDATA[massively]]>
	</title>
	<author>
	<![CDATA[html5up]]>
	</author>
	<version>1.0</version>
	<date>03/06/2022</date>
	<site>https://html5up.net</site>
	<description>
	<![CDATA[Massively by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
	Credits:
	Icons:
	Font Awesome (fontawesome.io)
	Other:
	jQuery (jquery.com)
	Scrollex (github.com/ajlkn/jquery.scrollex)
	Responsive Tools (github.com/ajlkn/responsive-tools)]]>
	</description>
	</document>';
	$files= array(
	'archives.php'=>$check,
	'article.php'=>$check,
	'article-full-width.php'=>$check,
	'categorie.php'=>$check,
	'categorie-full-width.php'=>$check,
	'commentaires.php'=>$check,
	'erreur.php'=>$check,
	'footer.php'=>$check,
	'header.php'=>$check,
	'home.php'=>$check,
	'sidebar.php'=>$check,
	'static.php'=>$check,
	'static-full-width.php'=>$check,
	'tags.php'=>$check,
	'infos.xml'=>$infos
	);
	
	function makeThemeFile($name,$content) {
	$file = $name;
	$tpl = fopen($file, "w+") or die("Unable to open file!");
	fwrite($tpl, $content);
	fclose($tpl);
	echo '<p>Fichier : '.$name .' crée.</p>';
	}	
	foreach ($files as $name => $content) {
	makeThemeFile($name,$content);
}

Lancer ce fichier depuis votre navigateur : //votrePluxml.com/themes/masively/themeFiles.php pour générer les fichiers utilisés par le thèmes.

Votre dossier ressemble maintenant à ceci:

dossier contenant maintenant les fichiers vides nécessaires au thème

Vous pouvez maintenant effacer le fichier themeFiles.php qui ne servira plus pour ce thème.

Ouvrir le fichier index.html dans votre éditeur.

Identifier les conteneurs principaux de la page (voir l'article ... étape fichiers 02) pour commencer à les distribuer dans les fichiers du thème.


	<body class="is-preload">
		<!-- Wrapper -->
			<div id="wrapper" class="fade-in">
			
			<!-- Intro -->
				<div id="intro">
				...
				</div>
			
			<!-- Header -->
				<header id="header">
				...
				</header>
			
			<!-- Nav -->
				<nav id="nav">
				...
				</nav>
			
			<!-- Main -->
				<div id="main">
				
					
				
				</div>
			
			<!-- Footer -->
				<footer id="footer">
				...
				</footer">
			
			<!-- Copyright -->
				<div id="copyright">
				...
				</div>
        
		</div>
		
		<!-- Scripts -->
		...
		
		</body>
	</html>

Nous pouvons déjà identifier 3 portions de pages dont deux seront communes à toutes les pages. ouverture du document et haut de page, Contenus de la page proprement dite et pied de page et fermeture du document.

Étape 03 édition et premiers affichages

Maintenant que nous avons identifier les 3 grandes zones du document HTML du thème original, nous commençons par::

éditer le fichier home.php .Il servira à tester l'affichage de nos avancées en page d'accueil. en y incluant header.php et footer.php.
éditer nos deux fichiers communs à l'ensemble des pages que PluXml affichera: header.php et footer.php
éditer les autres fichiers mode de PluXml pour tester l'affichage dans les différentes pages

Le fichier `home.php`

Dans ce fichier, nous incluons header.php et footer.php et un commentaire pour la partie centrale des contenus à venir.

<?php if(!defined('PLX_ROOT')) exit; ?>
	<?php include __DIR__.'/header.php'; ?>
	
	<!-- ici le contenu de la page -->
	contenus
	
<?php include __DIR__.'/footer.php'; ?>

À ce stade, il n'y a encore aucun contenus à afficher, si vous avez déjà activé ce thème, il vous affichera une page blanche.

Le fichier `header.php`

Dans ce fichier nous commençons par copier/coller de la ligne à 53 contenues dans le fichier index.html.

<!DOCTYPE HTML>
	<!--
	Massively by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
	-->
	<html>
	<head>
		<title>Massively by HTML5 UP</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
	</head>
	<body class="is-preload">
		
		<!-- Wrapper -->
		<div id="wrapper" class="fade-in">
			
			<!-- Intro -->
			<div id="intro">
				<h1>This is<br />
				Massively</h1>
				<p>A free, fully responsive HTML5 + CSS3 site template designed by <a href="https://twitter.com/ajlkn">@ajlkn</a> for <a href="https://html5up.net">HTML5 UP</a><br />
				and released for free under the <a href="https://html5up.net/license">Creative Commons license</a>.</p>
				<ul class="actions">
				<li><a href="#header" class="button icon solid solo fa-arrow-down scrolly">Continue</a></li>
				</ul>
			</div>
			
			<!-- Header -->
			<header id="header">
				<a href="index.html" class="logo">Massively</a>
			</header>
			
			<!-- Nav -->
			<nav id="nav">
				<ul class="links">
					<li class="active"><a href="index.html">This is Massively</a></li>
					<li><a href="generic.html">Generic Page</a></li>
					<li><a href="elements.html">Elements Reference</a></li>
				</ul>
				<ul class="icons">
					<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
					<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
					<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
					<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
				</ul>
			</nav>
		
	<!-- Main -->
<div id="main">

insertion des fonction de PluXml

Nous remplaçons toutes les données inscrite dans le HTML par celles issue de PluXml avec les fonctions adéquates en respectant la structure HTML initiale du thème. Voir l'article ... étape 03 fichiers

Il ne faut pas oublié de mettre à jour les liens vers les ressources du thème. <?php $plxShow->template() ?>

Du texte du thème peut être propre à ses fonctionnalité, il peut-être utile de les inclures aux dictionnaire de langues.

Le conteneur principale : <div id="wrapper" class="fade-in">, contient une id qui peut nous servir d'ancre pour retourner en haut de page.

Comme vue dans l'article , l'insertion des données de PluXml n'est pas compliquée et consiste à les distribuer aux bons endroits en passant les paramètres qu'il faut.

L'intégration des fonctions de PluXml donne:

<?php if (!defined('PLX_ROOT')) exit; ?><!DOCTYPE HTML>
		<!--
		Massively by HTML5 UP
		html5up.net | @ajlkn
		Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
		-->
		<html lang="<?php $plxShow->defaultLang(true) ?>">
		<head>
			<title><?php $plxShow->pageTitle() ?></title>
			<meta charset="<?php $plxShow->charset() ?>">
			<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
			<link rel="stylesheet" href="<?php $plxShow->template() ?>assets/css/main.css" />
			<noscript><link rel="stylesheet" href="<?php $plxShow->template() ?>assets/css/noscript.css" /></noscript>
			<?php
			$plxShow->meta('description');
			$plxShow->meta('keywords');
			$plxShow->meta('author');
			
			$plxShow->pluginsCss();
			?>
		</head>
		<body class="is-preload mode-<?php $plxShow->mode(true) ?>">
		
			<!-- Wrapper -->
			<div id="wrapper" class="fade-in">
			
				<!-- Intro -->
				<div id="intro">
					<h1><?php $plxShow->mainTitle() ?></h1>
					<p><?php $plxShow->subTitle() ?></p>
					<ul class="actions">
						<li><a href="#header" class="button icon solid solo fa-arrow-down scrolly">Continue</a></li>
					</ul>
				</div>
				
				<!-- Header -->
				<header id="header">
					<a href="<?php $plxShow->racine() ?>" class="logo"><?php $plxShow->mainTitle() ?></a>
				</header>
				
				<!-- Nav -->
				<nav id="nav">
					<ul class="links">
						<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_class #static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>') ?>
						<?php $plxShow->pageBlog('<li class="#page_class #page_status" id="#page_id"><a href="#page_url" title="#page_name">#page_name</a></li>') ?>
					</ul>
					<ul class="icons">
						<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
						<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
						<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
						<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
					</ul>
				</nav>
				
				<!-- Main -->
				<div id="main">

Dans cette première adaptations, il y a deux choses qui n'ont apparemment pas d'équivalent dans Pluxml:

Le mot continue, anglophone pour inciter a descendre dans la page, on peut le traduire par exemple par continuer ou le terme qui vous semblera le plus aproprié.
La liste des réseaux sociaux: PluXml ne gère pas ce genre d'informations.

Un plugin pourrait gerer ce genre de liste mais nous ne voulons pas que le thème dépende d'un plugin.

PluXml dispose d'une fonction utile pour facilement intégrer dans le thème des portion de codes à partir d'une autre page éditable depuis l'administration.

La fonction <?php $plxShow->staticInclude('parametre') ?> permet d'inclure le contenu d'une page statique en passant dans le paramètre soi son identifiant numéro soi son nom titre, !!! la doc ne mentionne pas cette fonctionnalité..

Passons sur ces deux premières incompatibilités que nous résoudrons dans un prochain article.

Le fichier `footer.php`

Les lignes à copier/coller depuis index.html vont de la ligne 160 à 229(la derniere).

Comme dans le fichier précédent, l'idée est d’intégré les contenus gérer par PluXml

Ça se complique !

La mise à jour des liens vers les ressources se fait simplement en mettant à jour le chemin avec lt;?php $plxShow->template() ?>. Nous avons aussi une mention de copyright pour les contenus du site, que l'on peut actualiser avec $plxShow->mainTitle('link') avec le lien vers le site lui même.

Mais, nous trouvons aussi dans cette partie plusieurs choses étrangéres aux fonctionnement de base de PluXml.

Un formulaire de contact qui n'est pas fonctionnel.
Une liste des réseaux sociaux du site.

Ajoutons les à notre liste d'incompatibilités que nous traiterons ultérieurement et mettons uniquement à jour ce que PluXml sait gérer:

MAJ de footer.php

<?php if (!defined('PLX_ROOT')) exit; ?>

					</div>

				<!-- Footer -->
					<footer id="footer">
						<section>
							<form method="post" action="#">
								<div class="fields">
									<div class="field">
										<label for="name">Name</label>
										<input type="text" name="name" id="name" />
									</div>
									<div class="field">
										<label for="email">Email</label>
										<input type="text" name="email" id="email" />
									</div>
									<div class="field">
										<label for="message">Message</label>
										<textarea name="message" id="message" rows="3"></textarea>
									</div>
								</div>
								<ul class="actions">
									<li><input type="submit" value="Send Message" /></li>
								</ul>
							</form>
						</section>
						<section class="split contact">
							<section class="alt">
								<h3>Address</h3>
								<p>1234 Somewhere Road #87257<br />
								Nashville, TN 00000-0000</p>
							</section>
							<section>
								<h3>Phone</h3>
								<p><a href="#">(000) 000-0000</a></p>
							</section>
							<section>
								<h3>Email</h3>
								<p><a href="#">info@untitled.tld</a></p>
							</section>
							<section>
								<h3>Social</h3>
								<ul class="icons alt">
									<li><a href="#" class="icon brands alt fa-twitter"><span class="label">Twitter</span></a></li>
									<li><a href="#" class="icon brands alt fa-facebook-f"><span class="label">Facebook</span></a></li>
									<li><a href="#" class="icon brands alt fa-instagram"><span class="label">Instagram</span></a></li>
									<li><a href="#" class="icon brands alt fa-github"><span class="label">GitHub</span></a></li>
								</ul>
							</section>
						</section>
					</footer>

				<!-- Copyright -->
					<div id="copyright">
						<ul><li>© <?php $plxShow->mainTitle('link') ?></li><li>Design: <a href="https://html5up.net">HTML5 UP</a></li></ul>
					</div>

			</div>

		<!-- Scripts -->
			<script src="<?php $plxShow->template() ?>assets/js/jquery.min.js"></script>
			<script src="<?php $plxShow->template() ?>assets/js/jquery.scrollex.min.js"></script>
			<script src="<?php $plxShow->template() ?>assets/js/jquery.scrolly.min.js"></script>
			<script src="<?php $plxShow->template() ?>assets/js/browser.min.js"></script>
			<script src="<?php $plxShow->template() ?>assets/js/breakpoints.min.js"></script>
			<script src="<?php $plxShow->template() ?>assets/js/util.js"></script>
			<script src="<?php $plxShow->template() ?>assets/js/main.js"></script>

	</body>
</html>

Après avoir mis à jour nos fichiers : home.php,header.php et footer.php , il est déjà possible de d'activer le thème pour le tester. et vérifier que nos premières intégrations fonctionnent.

Il n'y a à ce stade que la page d'accueil qui affichera quelque chose

Préparations des autres gabarits

Nos autres gabarits d'affichage seront préparés comme home.php sans s'occuper des contenus, cela concernent les fichiers suivants:

article.php
categorie.php
static.php
archives.php
tags.php
erreur.php

Le code de base à insérer dans ces fichier est :

<?php if(!defined('PLX_ROOT')) exit; ?>
	<?php include __DIR__.'/header.php'; ?>
	
	<!-- ici le contenu de la page -->
	contenus
	
<?php include __DIR__.'/footer.php'; ?>

La gestions des contenus sera traité ultérieurement

Ce théme n'affiche pas de barre latérale, et pour la rétro compatibilité avec le thème par défaut, les fichiers alternatifs incluront simplement le gabarit de base avec uniquement les codes respectifs suivants:

article-full-width.php => <?php include __DIR__.'/article.php'; ?>
categorie-full-width.php => <?php include __DIR__.'/categorie.php'; ?>
static-full-width.php => <?php include __DIR__.'/static.php'; ?>

Étape 04 affichage du contenu des articles

Affichage d'un article

Nous avons une page par articles, Le modèle de ce type de page dans le thème HTML est affiché avec le fichier generic.html.

Ouvrez ce fichier dans un éditeur, sélectionnez et copiez les lignes 43 à 57.

Ouvrez le fichier article.php et remplacer:

	<!-- ici le contenu de la page -->
	contenus

par les lignes copiées.

La mise à jour de cette partie HTML se fait comme indiquée dans étape fichiers 4 en injectant les fonctions d'affichage de PluXml .

<?php if (!defined('PLX_ROOT')) exit; ?>
<!-- Post -->
	<section class="post">
		<header class="major">
			<span class="date"><time datetime="<?php $plxShow->artDate('#num_year(4)-#num_month-#num_day'); ?>">
				<?php $plxShow->artDate('#num_day #month, #num_year(4)'); ?>
			</time></span>
			<h1><?php $plxShow->artTitle(); ?></h1>
			<?php $plxShow->artChapo('',false); ?>
		</header>
		<div class="image main"><?php $plxShow->artThumbnail(); ?></div>
		<?php $plxShow->artContent(false); ?>
	</section>

Le wiki vous sera utile pour formater l'affichage de la date. et utiliser correctement la fonction artContent()

Affichages des resumés d'articles.

Plusieurs gabarits servent à afficher le résumé de plusieurs articles avec un lien vers chacun d'eux. Ces Pages sont:

La page d'accueil en les triant par date de publication.
Les pages "catégories" en les triant par date de publication.
Les pages "archives" en les triant par date de publication et période
Les pages "mots clés" font un tris par date et mot clé

Ces quatre gabarits traiteront les articles par lot avec un affichage similaire , un nouveau gabarit servira à cet usage. Les fichiers archives.php et tags.php utiliseront le fichier categorie.php, le fichier home.php a un affichage légerement différent.

Créer un nouveau fichiers dans votre thème que vous nommez articles.php(avec un s), puis modifier les quatres gabarits : home,categorie,archive et tag de la manière suivante:

<?php if(!defined('PLX_ROOT')) exit; ?>
<?php include __DIR__.'/header.php'; ?>	
<!-- Ici le fil d'Ariane -->
<?php include __DIR__.'/articles.php'; ?>	
<?php include __DIR__.'/footer.php'; ?>

Le fichier index.html du theme HTML , affiche un article en évidence dans un conteneur avant qu'un second conteneur affiche une série d'article.

<!-- Featured Post -->
    <article class="post featured">
        <header class="major">
            <span class="date">April 25, 2017</span>
            <h2><a href="#">And this is a<br />
            massive headline</a></h2>
            <p>Aenean ornare velit lacus varius enim ullamcorper proin aliquam<br />
            facilisis ante sed etiam magna interdum congue. Lorem ipsum dolor<br />
            amet nullam sed etiam veroeros.</p>
        </header>
        <a href="#" class="image main"><img src="https://pluxthemes.com/images/pic01.jpg" alt="" /></a>
        <ul class="actions special">
            <li><a href="#" class="button large">Full Story</a></li>
        </ul>
    </article>

Ce conteneur sert à accrocher un article spécifique en page d'accueil . La structure de l'article est similaire aux autres mais avec des class pour le styler différemment.

La fonction d'accrochage d'un article en page d'accueil de PluXml n'est pas compatible avec le principe d'affichage de ce thème. Cela sera traité dans les incompatibilités.

Le second conteneur qui affiche la liste d'article recevra la boucle pour afficher les résumés ainsi que la fonction de pagination de PluXml derriere la boucle.

<!-- Post -->
    <section class="posts">
        <?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>
            <!-- Ici affiche des données d'un article -->
        <?php endwhile; ?>
       <?php $plxShow->pagination() ?>
    </section>

Puis nous insérons dans cette boucle la structure HTML du thème en la mettant à jours avec les fonctions d'affichages de PluXml:

<!-- Post -->
<section class="posts">
<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>
    <!-- Featured Post -->
    <article>
        <header>
            <span class="date">
                <time datetime="<?php $plxShow->artDate('#num_year(4)-#num_month-#num_day'); ?>">
                <?php $plxShow->artDate('#num_day #month, #num_year(4)'); ?>
                </time>
            </span>
            <h2><a href="<?php $plxShow->artUrl() ?>"><?php $plxShow->artTitle(); ?></a></h2>
        </header>
        <?php $plxShow->artThumbnail(); ?>
        <?php $plxShow->artChapo('',false) ?>
        <ul class="actions special">
            <li><a href="<?php $plxShow->artUrl() ?>" class="button">lire la suite</a></li>
        </ul>
    </article>
<?php endwhile; ?>
</section>

Le lien pour afficher l'article est ici rédiger en français dans notre adaptation, nous pouvons l'ajouter aux incompatiblités pour l'ajouter aux dictionnaires. Nous corrigerons aussi les styles appliqués à l'image d'accroche.

Étape 05 affichage des commentaires

Ce thème ne propose pas l'affichage des commentaires. Si vous souhaitez les intégrer, la page elements.html du thème liste quelques éléments. Les styles sont sobres.

En regardant le code source HTML on remarque qu'il y a assez peu de class utilisées. L'adaptation du code natif de PluXml ne devrait pas posé de soucis majeures.

L'article etape fichier 04 aborde l’intégration des commentaires qu'il suffira d'appliquer dans un premier temps pour vérifier la façon dont ils s'affichent.

Nous traiterons les commentaires et son formulaire avec nos "incompatibilités".

Étape 06 ajout d'un fil d'Ariane.

L'article etape fichiers 05 nous indique quels code insérés et dans quels fichiers.

Les styles seront abordés avec les incompatibilitès.

L'intégration du fil d'Ariane et de la pagination pour les gabarits en ayant l'utilité, sera ajouté individuellement dans un second temps comme indiqué dans l'article.

Étape 07 affichage du contenu des pages statiques

Pour cette page et pour coller au thème, nous reprenons une balise article avec un entête pour afficher sa date de création , puis le contenu de la page:

<article>
    <header class="major">
        <span class="date">
            <time datetime="<?php $plxShow->staticDate('#num_year(4)-#num_month-#num_day'); ?>">
                <?php $plxShow->staticDate('#num_day #month, #num_year(4)'); ?>
            </time>
                </span>
        <h2><?php $plxShow->staticTitle() ?></h2>
    </header>
    <?php $plxShow->staticContent() ?>
</article>

Dans le fichier static.php, ce code prend la place de :

<!-- ici le contenu de la page -->
contenus

Étape 08 affichage de la page erreur.

Celle ci reprend la balse article avec un titre et l'affichage du message d'erreur.

<article>
    <header class="major">
        <h2><?php $plxShow->lang('ERROR'); ?></h2>
    </header>
    <?php $plxShow->erreurMessage() ?>
</article>

Dans le fichier erreur.php, ce code prend la place de :

<!-- ici le contenu de la page -->
contenus

Interlude

Notre intégrations est déjà fonctionnelle de page en page. archive du theme du tutoriel : massively-integration-01.zip.

Le thème ne génére aucun lien vers les archives, catégories et mots clés, bien qu'il soit capable d'afficher ces pages. Nous gardons ces gabarits pour des raisons de retro compatibilités. Ces pages peuvent-être déjà referencés, dans les favoris ou l'historiques de vos visiteurs.

Il y a quelques défauts et manque à l'affichage, le prochain article va les reprendre un a un.

L'article de la page d'accueil.
La liste de liens "reseaux sociaux".
Le sous-menu des groupe de pages statique
La liste des catégories (peut remplacer la liste des pages statiques)
traduction des textes en dur
L'ajout et les styles des commentaires
Les styles de quelques élements: fil d'ariane et pagination
La gestion du formulaire de contact si vous tenez à le garder

Vue d'ensemble

Articles de la série: "créer un thème"	articles connexes	Ressources externes
étape fichiers 01	MAJ d'un vieux thème	Installer un thème La doc officielle Bases HTML Bases CSS Tutoriel PHP en français Tutoriel JavaScript en français
étape fichiers 02
étape fichiers 03	thème multilingue
étape fichiers 04	affichage des commentaires.
étape fichiers 05	le fil d'Ariane
étape fichiers 06
archive ZIP du thème construit dans ce tutoriel themedututo.zip.
étape CSS 01		meta "viewport"
étape CSS 02		la balise "link"
étape CSS 03		Outils de verification du W3C.
* * *
étape intégration 01	étape fichier 02 - étape fichier 03 - étape fichier 05
Archive du theme du tutoriel massively-integration-01.zip
étape intégration 02	mettre en place un edito
Archive du theme du tutoriel massively.zip.

PluxThèmes

Zone de ressources - thèmes et tutoriaux - PluXml

créer un thème - étape integration 01

Préparations

Étape 01 - extraction du thème.

Étape 02 créations des fichiers manquants

Étape 03 édition et premiers affichages

Le fichier `home.php`

Le fichier `header.php`

insertion des fonction de PluXml

Le fichier `footer.php`

Ça se complique !

Préparations des autres gabarits

Étape 04 affichage du contenu des articles

Affichage d'un article

Affichages des resumés d'articles.

Étape 05 affichage des commentaires

Étape 06 ajout d'un fil d'Ariane.

Étape 07 affichage du contenu des pages statiques

Étape 08 affichage de la page erreur.

Interlude

Vue d'ensemble

Écrire un commentaire

Préparations

Étape 01 - extraction du thème.

Étape 02 créations des fichiers manquants

Étape 03 édition et premiers affichages

Le fichier home.php

Le fichier header.php

insertion des fonction de PluXml

Le fichier footer.php

Ça se complique !

Préparations des autres gabarits

Étape 04 affichage du contenu des articles

Affichage d'un article

Affichages des resumés d'articles.

Étape 05 affichage des commentaires

Étape 06 ajout d'un fil d'Ariane.

Étape 07 affichage du contenu des pages statiques

Étape 08 affichage de la page erreur.

Interlude

Vue d'ensemble

Écrire un commentaire

Le fichier `home.php`

Le fichier `header.php`

Le fichier `footer.php`