créer un thème - étape fichiers 03
Dans cet article nous allons éditer et compléter les deux fichiers header.php et footer.php afin d'afficher l'entête, la navigation principale et le pied de page de votre site.. Ce sont les parties de pages généralement identiques sur un site.
Les quelques différences que l'ont peut malgré tout trouver dans ces parties de code commune sont généralement:
- le titre de la page affichée dans l'onglet du navigateur
- Une class ou une id qui permet d'identifier le mode d'affichage, type de page
- la navigation qui met le lien vers la page en cours en évidence,
- les balises meta pour
description, keywords, author, - Le titre de la page,
- et autres données non visuelles.
Ces différences étant gérer par PluXml, il n'y a pas lieu de s'en inquiéter.
- header.php : quelles données extraire ?.
Nous avions dans le précedent article cette base:
<?php if (!defined('PLX_ROOT')) exit; ?><!doctype html>
<html lang="XX">
<head>
<meta charset="XX">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XX</title>
<link rel="stylesheet" href="XX/styles.css" media="all">
</head>
<body>
<!-- entête et navigation classiquement contenu dans header.php -->Où XX sera remplacer par des fonction de PluXml.
Nous pouvons commencer à extraire la langue d'affichage, le format d'encodage utilisé par PluXml, le titre de la page en cours, le chemin vers le thèmes pour acceder à une feuille de style et identifier le mode d'affichage.
- La langue
<?php $plxShow->defaultLang(true) ?> - Le format d'encodage
<?php $plxShow->charset() ?> - Le titre de la page
<?php $plxShow->pageTitle() ?> - Le chemin vers le thème actif
<?php $plxShow->template() ?> - Le chemin vers le thème actif
<?php $plxShow->template() ?> - Le mode d'affichage
<?php $plxShow->mode(true) ?>au travers d'uneclass
ce qui nous donne:
<?php if (!defined('PLX_ROOT')) exit; ?><!doctype html>
<html lang="<?php $plxShow->defaultLang(true) ?>">
<head>
<meta charset="<?php $plxShow->charset() ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php $plxShow->pageTitle() ?></title>
<link rel="stylesheet" href="<?php $plxShow->template() ?>/styles.css" media="all">
</head>
<body class="mode-<?php $plxShow->mode(true) ?>">
<!-- entête et navigation classiquement contenu dans header.php -->break
Il est temps de créer notre fichier pour la feuille de style et de la ranger dans un sous-dossier explicite.
Si vous ne l'aviez pas encore fait, créer un sous dossier css dans le dossier de votre thème et créer dans ce nouveau dossier un fichier vide nommé :styles.css.
Mettez la ligne : <link rel="stylesheet" href="<?php $plxShow->template() ?>/styles.css" media="all"> à jours le nouveau chemin vers la feuille de styles:
<link rel="stylesheet" href="<?php $plxShow->template() ?>/css/styles.css" media="all">.
balise meta et fichiers de styles des plugins
Votre site et chacune de vos pages peuvent afficher des métadonnées. Celles ci sont des champs à remplir depuis l'administration du site et à la création de vos pages.Une fonction d'affichage existe :<?php $plxShow->meta() ?>.
Des plugins sont aussi disponibles pour modifier ou compléter les fonctionnalités de PluXml, ces plugins peuvent embarquer leur propre feuille de styles. Les feuilles de styles des plugins actifs sont compilés et minifiés dans un unique fichier qui est chargé dans votre page à l'aide de ce code : <?php $plxShow->pluginsCss() ?>
Notre fichier devient:
<?php if (!defined('PLX_ROOT')) exit; ?><!doctype html>
<html lang="<?php $plxShow->defaultLang(true) ?>">
<head>
<meta charset="<?php $plxShow->charset() ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php $plxShow->pageTitle() ?></title>
<link rel="stylesheet" href="<?php $plxShow->template() ?>/css/styles.css" media="all">
<?php
$plxShow->meta('description');
$plxShow->meta('keywords');
$plxShow->meta('author');
$plxShow->pluginsCss();
?>
</head>
<body class="mode-<?php $plxShow->mode(true) ?>">
<!-- entête et navigation classiquement contenu dans header.php -->Afficher le titre du site et son menu
Ces données sont généralement incluse dans la balise <header> , le titre principal dans une balise <h1> et le menu principal en liste dans <nav>. Le sous-titre de votre site peut-être inclus dans un simple paragraphe <p>.
La base de notre code serait:
<header id="header">
<h1>XX</h1>
<p>XX</p>
<nav><ul>XX</ul></nav>
</header>Les fonctions pour extraire ces informations sont :
<?php $plxShow->mainTitle('link') ?><?php $plxShow->subTitle() ?><?php $plxShow->staticList() ?><?php $plxShow->pageBlog() ?>
Plusieurs de ces fonctions prennent des paramètres , nous allons simplement utilisé celles du thème par défaut pour créer nos liens et les items de liste du menu. Les liens vers la doc officielle vous donne le détails de leurs usages.
Ajoutons à notre HTML trois id pour créer des liens directement vers le haut de page, la navigation principale et le contenu principal
Le fichier header.php est finalisé pour le moment comme ceci:
<?php if (!defined('PLX_ROOT')) exit; ?><!doctype html>
<html lang="<?php $plxShow->defaultLang(true) ?>">
<head>
<meta charset="<?php $plxShow->charset() ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php $plxShow->pageTitle() ?></title>
<link rel="stylesheet" href="<?php $plxShow->template() ?>/css/styles.css" media="all">
<?php
$plxShow->meta('description');
$plxShow->meta('keywords');
$plxShow->meta('author');
$plxShow->pluginsCss();
?>
</head>
<body id="top" class="mode-<?php $plxShow->mode(true) ?>">
<a href="#main" class="sr-only">aller au contenu</a>
<header id="header" >
<h1><?php $plxShow->mainTitle('link') ?></h1>
<p><?php $plxShow->subTitle() ?></p>
<nav id="nav" >
<ul>
<?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>
</nav>
</header>
<main id="main">
<!-- le contenu principal s'affichera ci-aprés depuis son propre fichier -->L'item contenant le lien de la page active pourra recevoir un style different via la class .active qui sera générée automatiquement par les mots clés dans code d'appel des fonctions : #page_status et #static_status.
Fichier header.php: ✓
Ce premier fichier devenu fonctionnel mettra automatiquement son contenu à jour selon la page visitée, trop bien!
Premiers tests
Maintenant que nous avons un fichier qui affiche quelque chose, il est possible de le tester en activant ce thème depuis l'administration.
Ce thème n'affichera pour le moment que le titre du site,son sous-titre et la liste des liens principaux, tout cela sans aucun style.
- footer.php : quelles données extraire ?
Classiquement, on retrouve dans un pied de page le titre du site et plusieurs mentions ou liens comme un retour en haut de page, un retour vers le menu principal ou une copie de celui-ci si le site à tendance à avoir de longue pages.
Reprenons une structure trés similaire à celle du thème par défaut, sans oublier de refermer la balise main:
<?php if (!defined('PLX_ROOT')) exit; ?> </main>
<footer id="footer">
<ul>
<li><?php $plxShow->mainTitle('link'); ?> - <?php $plxShow->subTitle(); ?> © <?= date('Y') ?></li>
<li>
<?php $plxShow->lang('POWERED_BY') ?> <a href="https://pluxthemes.com/<?= PLX_URL_REPO?>" title="<?php $plxShow->lang('PLUXML_DESCRIPTION') ?>">PluXml</a>
<?php $plxShow->lang('IN') ?> <?php $plxShow->chrono(); ?>
<?php $plxShow->httpEncoding() ?> -
<a rel="nofollow" href="https://pluxthemes.com/<?php $plxShow->urlRewrite('core/admin/'); ?>" title="<?php $plxShow->lang('ADMINISTRATION') ?>"><?php $plxShow->lang('ADMINISTRATION') ?></a>
</li>
<?php if($plxShow->plxMotor->aConf['enable_rss']) { ?>
<li><a href="https://pluxthemes.com/<?php $plxShow->urlRewrite('feed.php?rss') ?>" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS'); ?>"><?php $plxShow->lang('ARTICLES'); ?></a></li>
<?php } ?>
<?php if($plxShow->plxMotor->aConf['enable_rss_comment']) { ?>
<li><a href="https://pluxthemes.com/<?php $plxShow->urlRewrite('feed.php?rss/commentaires'); ?>" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>"><?php $plxShow->lang('COMMENTS'); ?></a></li>
<?php } ?>
<li><a href="https://pluxthemes.com/<?php $plxShow->urlRewrite('#top') ?>" title="<?php $plxShow->lang('GOTO_TOP') ?>"><?php $plxShow->lang('TOP') ?></a></li>
</ul>
</footer>
</body>
</html>Nous retrouvons deux fonctions utilisées dans l'entete : mainTitle() et subTitle() entre autres.
La fonction urlRewrite() rend vos liens internes génerés par PluXml conforment à sa configuration de réécriture des liens.
La fonction $plxShow->lang('clé') traduit les textes de votre thème à partir des fichiers lang du thème en fonction de la langue d'affichage de PluXml.
Une partie du code verifie la configuration de votre PluXml pour afficher ou non les lien RSS, le formulaire de commentaire, ... : if($plxShow->plxMotor->aConf['clé']) {}.
Un thème peut se conformer à la configuration de PluXml et être multilingue si l'on y inclut des fichiers(dictionnaires) pour plusieurs langues. Une bonne base est de réutiliser une copie du dossier lang/, fournis avec le thème par défaut, et de modifier et compléter aux besoins ses fichiers .
Interlude
Maintenant que votre théme est partiellement fonctionnel et qu'il peut-être tester , nous allons dans le prochain article construire la page d'acceuil home.php et les pages articles article.php.
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. | |