PluxThèmes

Zone de ressources - thèmes et tutoriaux - PluXml

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

Rédigé par GC-nomade Aucun commentaire
Classé dans : Les thèmes, scripts, fichier, CSS, intégration, tutos et astuces Mots clés : aucun

Le début de l'intégration du thème Massively est fonctionnelle. Dans cet article nous ajouterons et corrigerons les manques et défauts pour le rendre entierement fonctionnel.

Ce sont des fonctionnalités comme les liens vers les catégorie ou les réseaux sociaux, le formulaire de contact, les traductions et l'application des styles.

Visuels - étape 01

Nous ajoutons une feuilles de styles aux fichier du thème.

Cette feuille de styles nous permettra de ne pas toucher à la feuille de style originale. Les ajouts ou modifications de style viendront dans cette feuille uniquement.

Ajout d'une feuille de styles

  1. Créez un fichier pluxml.css dans le dossier themes/massively/assets/css/.

  2. Liez ce fichier au thème en modifiant le fichier header.php

    Insérer la balise <link rel="stylesheet" href="<?php $plxShow->template() ?>/assets/css/pluxml.css" /> après la ligne 12.

    Vous avez maintenant une feuille de style supplémentaire qui sera chargée. Les lignes 12 et 13 ressemblent à ceci.

    <link rel="stylesheet" href="<?php $plxShow->template() ?>/assets/css/main.css" />
<link rel="stylesheet" href="<?php $plxShow->template() ?>/assets/css/pluxml.css" />

Visuels - étape 02

la pagination

La pagination est afficher par PluXml depuis le fichier articles.php avec la fonction <?php $plxShow->pagination() ?>:

Cette fonction ne prend aucun paramètres. Elle affiche quelques liens pour aller en avant ou en arrière et le numéro de la page en cours dans des balises <span>.

La navigation est un peu différente de celles proposée par le thème original.

Reprenons simplement les styles du thème et encapsulons la fonction dans une balise avec une id .

<nav id="pagination" ><?php $plxShow->pagination() ?></nav>

Mettez à jour le fichier articles.php, ligne 21 et enregistrez le.

Nous pouvons maintenant ciblé ce conteneur et ce qu'il contient depuis une feuilles de styles pour y appliquer une mise en forme avec les sélecteurs suivants:

/* pagination PluXml */
#pagination {
}
#pagination span {
}
#pagination span a {
}

Les règles CSS sont à retrouver et à copier depuis main.css, le fichier CSS original du thème.

Ajouter ces sélecteurs au fichier pluxml.css précédemment créé.

Reprenons les règles générale permettant de style la navigation en les adaptant à notre structure différente.

Adaptation possible des styles:

Commençons à remplir notre feuille de styles:pluxml.css


		/**********************/
		/* MASSIVELY  HTML5UP */
		/* Intégration PluXml */
		/**********************/

/* pagination PluXml */
#main #pagination {
	display: block;
	user-select: none;
	cursor: default;
	list-style: none;
	margin: 2rem auto;
	width:100%;
	padding: 0 1em;
}
#pagination  span {
	display: inline-block;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
	border: solid 2px;
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-size: 0.8rem;
	font-weight: 900;
	height: 3rem;
	letter-spacing: 0.075em;
	line-height: calc(3rem - 4px);
	min-width: 10.5rem;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	border-color: #eeeeee;
	padding: 0 1.75rem;
}
#pagination  span:is(.p_first,.p_last) {
	min-width: 2rem;
}
#pagination  span:has(a:hover) {
	color: #18bfef ;
	border-color: #18bfef;
}
#pagination  span.p_current {
	background-color: #eeeeee;
}

Nous venons de voir que l'adaptation des styles ne passe pas uniquement par la feuille de styles, il faudra, au cas par cas, retoucher le HTML pour y ajouter des conteneurs, class ou id.

Le fil d'Ariane

Si notre thème ne montre pas les liens vers les pages archives, catégories et mots clés, elles existent et affichent un Fil d'Ariane

Le code que nous avons utilisé est construit sur une liste issue du thème par défaut. Elles peuvent être ciblées avec ul.repertory.menu.breadcrumb.

Préparons nos sélecteurs dans le fichier pluxml.css et utilisons flexbox comme grille d'affichage.

/**********************/
/*   Le fil d'Ariane  */
/**********************/
ul.repertory.menu.breadcrumb {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:1em;
	list-style:none;	
}

Pour marquer cette effet visuel d'arborescence, ajoutons un / entre chaque éléments:

ul.repertory.menu.breadcrumb li + li::before {
	content:'/ ';
	padding-inline-end:1em;
}

Cette façon de créer notre fil de fer a un défaut. Si nous avons un article, une catégorie et un mot clés identique, notre fil de fer sera identiques pour ces 3 là. Ajoutons un niveau dans l’arborescence qui nous indiquera le mode d'affichage de PluXml.

Le nom de ce type de page est inclus dans les dicos de PluXml. Le fichier sidebar.php du thème par défaut les utilise, reprenons ces portions de codes pour les intégrer dans nos fil de fer. Par exemple, dans le fil de fer du gabarit categorie.php nous glissons dans la liste:

<li><?php $plxShow_>lang('CATEGORIES'); ?></li>

Mettez à jour les listes de tags.php et achives.php de la même manière.

Visuels - étape 03

L'affichage du résumé des articles diffère du thème original.

Pour chaque résumé, le thème affiche une image, environ 3 lignes de textes et ils ont tous la même hauteurs

Dans PluXml, l'image d'accroche d'un article n'est pas obligatoires et les introductions des articles ne sont pas limités en longueur de textes. Le titre d'un article n'est pas limité en longueur.

Peut-on uniformiser cela ?

Oui

  1. À la rédaction d'un article en imposant systématiquement une image d'accroche de taille similaire et une introduction en texte de longueur similaire d'un article à l'autre.

  2. Il y a aussi quelques sélecteur CSS peuvent être utiles pour afficher une image par défaut si l'image d'accroche est manquante.Il est aussi possible de limité l'affichage à un nombre donné de lignes. Si vous installez ce thème sur un site qui à déjà de nombreux contenus il est probablement plus sur de se servir des styles pour uniformiser les résumés que de reprendre vos articles un à un pour caler à la grille du design du thème.

Nos résumés sont actuellement affichés dans cette structure HTML:

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

Pour afficher une image par défaut, nous ajoutons un conteneur vide avec une des images de fond neutre fournis avec le thème. Si le résumé contient une image d'accroche, nous le cachons.

La longueur du texte d'introduction est inconnues. En ajoutant un second conteneur pour l'introduction, nous pouvons imposer une hauteur et un nombre de lignes maximum.

Adaptation du gabarit articles.php

Ajoutons nos deux conteneurs et avec class.

<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="https://pluxthemes.com/<?php $plxShow->artUrl() ?>"><?php $plxShow->artTitle(); ?></a></h2>
    </header>
    <?php $plxShow->artThumbnail(); ?>
    <div class="image fit"></div>
    <div class="intro-art">
    <?php $plxShow->artChapo('',false) ?>
    </div>
    <ul class="actions special">
        <li><a href="https://pluxthemes.com/<?php $plxShow->artUrl() ?>" class="button">lire la suite</a></li>
    </ul>
</article>

Puis retournons dans la feuilles de styles pour y ajouter nos sélecteurs et nos idées de styles

/**********************/
/*   Résumés articles  */
/**********************/
/* impose une taille aux images d'accroche et alternative */
img.art_thumbnail,
div.image.fit {
	aspect-ratio:1.6/1;
	width:100%;
	object-fit:contain;
	margin: 2.5rem 0;
	padding:0;
	display:block;
}
/* donne une image de fond alternative */
div.image.fit{
	background:url(../../images/pic01.jpg);
}
/* distribue différentes images selon la position de l'article */
article:nth-child(2n) div.image.fit{
	background:url(../../images/pic02.jpg);
}
/* etc ... pour les images de fond, vous pouvez utilisé les vôtres */
}
/* cache l’alternative si inutile */
a:has( img.art_thumbnail) + div.image.fit {
	display: none;
}
/* donne une hauteur au titre et centre les textes */
article header.major h2{
	min-height:4em;
	display:grid;
	place-content:center;
}
/* donne une dimension et nombre de ligne maxi pour l'intro */
article div.intro-art {
	height:7.8em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

Ces styles sont à compléter avec quelques réglages cosmétiques.

Les images neutre du thème, utilisées en images de fond peuvent être remplacées ou affichées sous vos images.

Les images décoratives sont généralement affichées en background pour ne pas polluer les contenus d'informations inutiles.

Visuels - étape 04

Ajout d'éléments manquants

Le thème est sobre et il n'y est pas prévu d'afficher les liens vers les catégories. Certains d'entre vous voudront quand même catégoriser les articles publiées pour ne pas mélanger les sujets. Vous pouvez remplacer la liste des pages statiques par celle des catégorie dans le code de header.php

Nous allons insérer ces liens en début de pied de page avec la fonction <?php $plxShow->catList() ?> ou déplacer les liens de pages statiques) juste devant la balise <footer>. Cette fonction prend des paramètres permettant de contrôler le HTML produit.

Le début du fichier footer.php ressemblera à ceci:

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

</div>
<aside id="asideLinks">
	<ul class="cat-list unstyled-list">
		<?php $plxShow->staticList(...) ?> <!-- ou selon votre choix --> <?php $plxShow->catList(...) ?>
	</ul>
</aside>
<!-- Footer -->
...
Les styles seront similaire à celle de la barre de navigation principale 
/**********************/
/*  liste pied page   */
/**********************/


#asideLinks {
	color: #ffffff;
	display: flex;
	transition: transform 1s ease, opacity 1s ease;
	background: rgba(0, 0, 0, .8);
	mix-blend-mode:screen;
	height: 4rem;
	line-height: 4rem;
	margin:  0 auto;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: calc(100% - 4rem);
	max-width: 72rem;
	z-index: 2;
}
#asideLinks ul{
	display:flex;
	flex-wrap:wrap;
	list-style:none;
	margin: 0;
	padding: 0;
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-weight: 900;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}
#asideLinks ul li{
	padding:0;
	min-height:3rem;
	color: #ffffff;
	display:grid;
	place-content:center;
}
#asideLinks ul li a{
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	display: block;
	font-size: 0.8rem;
	outline: none;
	padding: 0 2rem;
	color: #ffffff;
	border-bottom-color: rgba(255, 255, 255, 0.5);
	
}
#asideLinks a.active {
	background: #ffffff;
	color: #1e252d;
}
#asideLinks ul li a:hover {
	color: inherit !important;
	background-color: rgba(255, 255, 255, 0.5);
}

Visuels - Interlude

Ajout d'une image dans le fond principal

Le fond principal est créer à partir de plusieurs image, listées les unes après les autres dans la feuille de style. Nous pouvons en ajouter une en début de liste en redéfinissant les différentes valeurs de background.

exemple avec l'image d'un micro 

/**********************************/
/*      ajout image de fond       */
/**********************************/
#wrapper > .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #212931;
  background-image: url("../../images/mic.png"),url("../../images/overlay.png"), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../images/bg.jpg");
  background-size: 450px, auto, auto, 100% auto;
  background-position:calc(50% + 67px) 15vh, center, center, top center;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat;
  background-attachment:fixed, scroll, scroll, scroll;
  background-blend-mode: luminosity, normal, normal, normal;
  z-index: -1;
}

Empêcher PluXml de générer des sous-menu pour les groupes de pages statiques.

Certains thème ne sont pas prévus pour afficher des sous menus.
Les styles ci-dessous sont pour assurer une rétro compatibilité.

Ces styles ne sont pas spécifiques à ce thème mais à l'affichage par défaut de PluXml:

/**********************************/
/*   pas de sous menu déroulant   */
/**********************************/
li.menu:has(ul) ,
li.menu:has(ul) ul {
	display:contents;
}
li.menu>span {
	display:none;
}

Nous faisons disparaître virtuellement l’élément de liste, le span qu'elle contient et la balise ul de sous menu.

Ces éléments de liste s’afficheront alors comme si elles étaient dans le menu principal.

Ajouts d'éléments éditables

Nous utiliseront des pages statiques. Ces pages statiques doivent être configurer active et masquer au menu.

Les listes de réseaux sociaux

Le thème original propose d'afficher les liens vers vos comptes "réseaux". Nous reporteront cette liste dans une page statique, ce qui vous permettra de mettre ces listes à jours.

Nous nommerons notre nouvelle page statique : social, et elle sera incluse dans le thème avec la fonction: 

<?php $plxShow->staticInclude('social') ?>

Qui remplacera dans header.php et footer.php le code HTML suivant:

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

Le code remplacé par la fonction sera copié et à éditer dans la page statique.

Les icônes du thème sont affiché avec le framework Fontawesome 5.15.4. (Suivez ce lien pour retrouver le code des icônes).

FontAwesome est installé dans le thème, vous pouvez réutiliser les icônes dans vos contenus

L'article accroché en page d'acceuil

Nous créons une autre page statique, elle aussi configurée active et masquer au menu. Nommez la : artEdito et pour l'inclure:

voir cet Article pour la création et gestion d'un édito: mettre en place un edito

<?php $plxShow->staticInclude('artEdito') ?>

Pour afficher un seul article en page d'accueil, nous utiliseront la fonction lastArtList() qui permet de:

  1. Extraire toutes les infos d'un article
  2. Créer une architecture HTML complète pour un article
  3. Afficher le dernier article d'une catégorie.

Pour choisir l'article à afficher:

  1. Créer une nouvelle catégorie en la nommant :homeEdito, noter son numéro d'identifiant.
  2. Configurez cette catégorie en :masquer au menu
  3. Éditer l'article choisis et cochez la catégorie homeEdito

Paramétrer la fonction lastArtList() avec le code HTML et le numéro de catégorie.

<?php 
#mettre à jour le numéro de la catégorie:    
$numeroCategorie= 1 ;

#ne pas toucher :)
$this->lastArtList('
    <article class="post featured">
        <header class="major">
            <span class="date">#art_date</span>
        <h2><a href="#art_url">#art_title</a></h2>
        <div class="art-intro">#art_content</div>
        </header>
        <a href="#img_url" class="image fit main">#art_thumbnail</a>
        <ul class="actions special">
            <li><a href="#art_url" class="button">lire la suite</a></li>
        </ul>
</article>',1,$numeroCategorie);
 ?>

Visualiser cette page statique pour vérifier que l'article sélectionné est affiché et le bon.

Insertion du contenu de cette page statique en Accueil

L'idée est d'afficher cette article uniquement en page d'accueil et sur la première page. Pour cela, nous vérifions simplement qu'il n'y a aucun paramètre transmis à PluXml dans l'adresse de la page.

Mise à jour du fichier home.php:

<?php if(!defined('PLX_ROOT')) exit; ?>
<?php include __DIR__.'/header.php'; ?>	
<?php if (empty($plxShow->plxMotor->get)) $plxShow->staticInclude('homeEdito') ?>
<?php include __DIR__.'/articles.php'; ?>	
<?php include __DIR__.'/footer.php'; ?>

Fonctions et formulaire

Le thème HTML massively propose en bas de page un formulaire de contact.

Ce formulaire n'est pas fonctionnel, il faudrait créer un script pour traiter les infos du formulaire et les envoyées sur la boite mail de l'administrateur.

PluXml dispose de fonctions d'envoi de courriel et du courriel de l'administrateur.
Les requêtes passées dans l'URL sont triées et nettoyées. La methode post est à privilégiée.

Pour traiter ce formulaire, nous créons un nouveau dossier(form) et un fichier(formContact.php) que nous rangeons dans le thème à: themes/massively/assets/form/formContact.php.

De nombreux script existe, nous pouvons créer une base pour le notre en laissant vide pour le moment la partie envoie.

squelette d'un script testant les variables du formulaire 
<?php 
	if(!defined('PLX_ROOT')) exit; 
	
	if(isset($_POST['name']) && isset($_POST['email']) && isset($_POST['message']) && $_POST['token'] == $_SESSION["token"]){
		
		$_POST['email'] = trim(strip_tags($_POST['email']));
		if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
			$_SESSION['error'] = "l'email n'est pas valide";
		}
		else{
			/*
				// traitement du formulaire
			*/
			$_SESSION["return"] = "Nous avons bien pris en compte votre e-mail.";
			
			unset($_SESSION['token']);
			header('Location: '.$_SERVER['PHP_SELF']);
			exit;
		}
	}
	
	if(!isset($_SESSION['token'])) {
		$_SESSION["token"] = md5(uniqid());
	}
	if(isset($_SESSION['return'])) {
		$message = $_SESSION['return'];
		unset($_SESSION['return']);
	}
	
	if(isset($message) {
		echo '<script>alert("'. $message .'")</script>';
	}
	if(!empty($_SESSION['error'])){
		echo '<script>alert("'. $_SESSION['error'] .'")</script>';
	}

Ce script traite le formulaire si tous les champs sont remplis.

Ce script utilise un jeton aléatoire qui sert à vérifier que le visiteur vient bien d'une page du site et une vérification simple sur le format de l'adresse courriel fournie. Ces deux vérifications sont un minimum.

Les fonctions d'envoi de courriel de PluXml

PluXml à déjà ses fonctions d'envoi de courriel et de vérification des éléments de formulaires, nous les utiliseront.

Le script compléter avec les fonctions de nettoyage et d'envoi 
<?php 
	if(!defined('PLX_ROOT')) exit; 
	
	if(isset($_POST['name']) && isset($_POST['email']) && isset($_POST['message']) && $_POST['token'] == $_SESSION["token"]){
		
		$mail = trim(strip_tags($_POST['email']));
		if(!filter_var($mail, FILTER_VALIDATE_EMAIL)){
			$_SESSION['error'] = "l'email n'est pas valide";
		}
		else{
			# nettoyage
			$name = trim(plxUtils::strCheck($_POST['name']));
			$content = trim(plxUtils::strCheck($_POST['message']));
			
			# configuration d'envoi
			$to = $plxShow->plxMotor->aUsers['001']['email'];
			$subject= '### contact de:  '.$plxShow->plxMotor->aConf['title'].' ###';
			$from = 'no-reply@'.$_SERVER['SERVER_NAME'];
			
			if(empty($plxShow->plxMotor->aConf['email_method']) or $plxShow->plxMotor->aConf['email_method'] == 'sendmail' or !method_exists(plxUtils::class, 'sendMailPhpMailer')) {
				# fonction mail() intrinsèque à PHP
				$success = plxUtils::sendMail($name, $from, $to, $subject, $content);
				} else {
				# On utilise PHPMailer
				// send the e-mail and if it is OK store the token
				$success = plxUtils::sendMailPhpMailer($name, $from , $to, $subject, $content, false, $plxShow->plxMotor->aConf, false);
			}
			
			$_SESSION["return"] = "Nous avons bien pris en compte votre e-mail.";
			
			unset($_SESSION['token']);
			header('Location: '.$_SERVER['PHP_SELF']);
			exit;
		}
	}
	
	if(!isset($_SESSION['token'])) {
		$_SESSION["token"] = md5(uniqid());
	}
	if(isset($_SESSION['return'])) {
		$message = $_SESSION['return'];
		unset($_SESSION['return']);
	}
	
	if(isset($message)) {
		echo '<script>alert("'. $message .'")</script>';
	}
	if(!empty($_SESSION['error'])){
		echo '<script>alert("'. $_SESSION['error'] .'")</script>';
	}

Nous avons maintenant un formulaire fonctionnel avec un minimum de vérifications qui s’intègre à PluXml.

Le multilingue

PluXml est un C.M.S. multilingue. Ils utilisent plusieurs dictionnaires. Les thèmes ont aussi cette capacité à être multilingue et à embarquer leur propre dictionnaire..

Préparation

Copier le répertoire lang du thème par défaut dans le répertoire de votre thème. De nombreuses traductions y sont déjà présentes, vous pouvez alors ajouter celles manquantes.

Les dictionnaires sont contenus dans des fichiers avec les 2 premières lettre d'une langue. par exemple, le dictionnaire français se trouve dans :themes/massively/lang/fr.php.

Ces dictionnaires sont stockés dans un tableau , avec une clé qui sera la même dans chaque fichier de langue et une valeur correspondant au texte traduit.

Structure de d'un tableau de traduction:

$LANG = array(
	'L_CLE' 	=> 'Valeur traduite',
	'L_AUTRE_CLE' 	=> 'Une autre valeur traduite',
);

Pour accéder à ces traduction dans le thème, PluXml dispose de 2 fonctions:

  1. Insère le texte traduit dans le script.

    <?php $plxShow->getLang('L_CLE') ?>

  2. Insère le texte traduit et l'affiche aussitôt.

    <?php $plxShow->lang('L_CLE') ?>

La langue d'affichage est automatiquement détectée et la traduction extraite du fichier de langue correspondant.

Inventaires des textes en dure dans le thème par fichier :

  1. fichier header.php
    1. aller au contenu
  2. fichier footer.php
    1. Name
    2. Address
    3. Email
    4. Message
    5. Phone
    6. Social
  3. fichier articles.php
    1. lire la suite
  4. page statique homeEdito
    1. lire la suite
  5. fichier formContact.php
    1. l'email n'est pas valide
    2. Nous avons bien pris en compte votre email.

Nos premieres traductions à inserer dans le tableau du fichier fr.php:


# suplement theme massively
'GO_TO_CONTENT'			=> 'aller au contenu',
'NAME'				=> 'Nom',
'ADRESS'			=> 'Addresse',
'MAIL'				=> 'courriel',
'MESSAGE'			=> 'Message',
'PHONE'				=> 'Télephone/mobile',
'SOCIAL'			=> 'Réseaux Sociaux',
'READ_MORE'			=> 'lire la suite',
'INVALID_MAIL'			=> 'l\'email n\'est pas valide',
'MAIL_SENT'			=> 'Nous avons bien pris en compte votre email.',

Notre dernière étape est de reporté ces nouvelles clés dans les autres fichiers de langue de votre thème, Utilisez un traducteur en ligne pour les termes que vous ne savez pas traduire.

Dernières étapes de ce tutoriels

Remplacer dans nos fichiers les textes à traduire avec la fonction adéquate: <?php $plxShow->getLang('L_CLE') ?> ou <?php $plxShow->lang('L_CLE') ?>.

Reproduire un moyen d'éditer les infos de contact à droite du formulaire.

Interlude

Le thème est maintenant fonctionnel et prêt à être utilisé, cependant il y a encore de nombreuses choses manquantes ou à améliorées.

Il n'y a pas de favicon, pas de gestion d'URL canoniques, la liste des métadonnées peut-être complétée. Il n'y a pas de feuille de style pour l'impression , etc.

Les commentaires ne sont pas intégrés, vous pouvez vous inspirer du tutoriel :

En fait , nous avons un thème prêt à être travaillé.

L'archive du tutoriel :massively.zip.

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
é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.
0 notes / moyenne 0

Hébergeur bénévole de ressources pour le CMS PluXml, un CMS en flat file propulsé à l'XML.

Mon site PluXml perso : re7net.com.

Écrire un commentaire

Quelle est le deuxième caractère du mot kq3dbmr ?

Fil RSS des commentaires de cet article