Développer un plugin, on propose une balise template

Aujourd’hui on va ajouter une balise template qui nous permettra d’insérer le bouton d’accès aux réglages d’accessibilité à n’importe quel endroit de notre thème.

Nota : ceux qui ont suivi pourront objecter qu’il existe déjà de quoi faire de même avec la balise widget, ce qui est vrai ; mais comme l’objectif de cette série de billets est d’être, autant que faire se peut, le plus exhaustif possible quant aux possibilités offertes par Dotclear, j’ai décidé de l’implémenter. Libre à vous, d’ailleurs de l’utiliser en lieu et place du widget ;-)

Dans le cas qui nous occupe on va définir une balise template de type élément — l’autre type, bloc, permet de définir, par exemple, des boucles dans lesquelles des éléments sont répétés. Je ne détaille pas ici tout le système, il existe de la documentation si vous voulez en savoir plus.

Voilà à quoi ressemble la forme minimale de la balise (sans les attributs optionnels) :

<!-- # Test AccessConfig template -->
    {{tpl:AccessConfig}}

Et voici d’autres formes, un peu plus élaborées, avec quelques attributs supplémentaires :

<!-- # Test AccessConfig template -->
    {{tpl:AccessConfig title="Accessibilité"}}
    {{tpl:AccessConfig title="Accessibilité" icon="2" justification="0"}}
    {{tpl:AccessConfig title="Accessibilité" icon="2" justification="0" image="1"}}

Le code nécessaire pour cette balise est composé de deux parties.

La première permet d’enregistrer cette nouvelle balise, dans le fichier _public.php :

$core->tpl->addValue('AccessConfig', ['a11yconfigPublic', 'tplAccessConfig']);

Le premier argument est le nom de la balise, celui qu’on retrouve dans le code HTML, {{tpl:AccessConfig …}}. Le 2e argument permet de définir la fonction qui fournira le code PHP nécessaire pour gérer cette balise, code qu’on retrouve dans la deuxième partie, dans le fichier _public.php :

# Template function
    public static function tplAccessConfig($attr)
    {
        global $core;

        $core->blog->settings->addNamespace('a11yConfig');
        if (!(boolean) $core->blog->settings->a11yConfig->active) {
            return;
        }

        $title = isset($attr['title']) ? $attr['title'] : null;
        $icon  = isset($attr['icon']) ? (int) $attr['icon'] : a11yconfigConst::ICON_NONE;

        $params = [
            'Font'             => isset($attr['font']) ? (boolean) $attr['font'] : true,
            'LineSpacing'      => isset($attr['linespacing']) ? (boolean) $attr['linespacing'] : true,
            'Justification'    => isset($attr['justification']) ? (boolean) $attr['justification'] : true,
            'Contrast'         => isset($attr['contrast']) ? (boolean) $attr['contrast'] : true,
            'ImageReplacement' => isset($attr['image']) ? (boolean) $attr['image'] : true
        ];

        return '<?php echo "' . addcslashes(self::render($title, $icon, $params), '"\\') . '"; ?>';
    }

Rien de très nouveau ici. On vérifie que le plugin est actif puis on récupère les éventuels attributs définis dans la balise et on retourne en fonction le code PHP idoine (toujours en utilisant la fonction de rendu qui est déjà utilisée pour le widget ou pour l’injection automatique.

Ensuite je peux insérer cette balise là où je le souhaite dans un des fichiers template du thème utilisé, par exemple dans le fichier _top.html :

<div class="header">
		<ul class="skip-links" id="prelude">
			<li><a href="#main">{{tpl:lang To content}}</a></li>
			<li><a href="#blognav">{{tpl:lang To menu}}</a></li>
			<li><a href="#search">{{tpl:lang To search}}</a></li>
		</ul>

	<header class="banner" role="banner">
		<h1 class="site-title"><a class="site-title__link"
			href="{{tpl:BlogURL}}"><span class="site-title__text">{{tpl:BlogName encode_html="1"}}</span></a></h1>
		<p class="site-baseline">{{tpl:BlogDescription}}</p>
	</header>

	<!-- # --BEHAVIOR-- publicTopAfterContent -->
	{{tpl:SysBehavior behavior="publicTopAfterContent"}}

	<!-- # Test AccessConfig template -->
	{{tpl:AccessConfig title="Accessibilité" icon="2"}}

	{{tpl:SimpleMenu class="nav header__nav"}}
</div>

Ce qui donnera à l’écran :

a11yConfig : bouton sous forme d'image, déc. 2019

Voilà, rien de plus en ce qui nous concerne.

Ajouter un commentaire

Les champs suivis d'un * sont obligatoires

Les commentaires peuvent être formatés en utilisant la syntaxe Markdown Extra.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/14460

Haut de page