[SPXCHILDTHEME] : création de thème enfants

je-evrardje-evrard Member
décembre 2016 modifié dans Plugins
Ce plugin va vous permettre de créer des thèmes enfants de vos thèmes préférés. Un peu à la manière de wordpress mais en beaucoup plus simple.

Plus d'infos sur thèmes parents enfants ici : theme-enfant-wordpress

L'idée est d'avoir un thème parent et un thème enfant dans le dossier themes de pluxml :

[list=*]
[*]le thème enfant surcharge le css et/ou js du thème parent. [/*]
[*]C'est le thème enfant qui est le thème sélectionné. [/*]
[*]La mise a jour du parent n'a aucune influence puisque la surchage est faite dans le thème enfant.[/*]
[/list]


Pour que ça fonctionne il faut installer ce plugin. Aucune configuration au niveau du plugin lui même.

Mise en place du theme enfant :

Nous créons un dossier enfant dans themes themes/childdefault/
Exemple : Dans le dossier childdefault et à la racine vous créer les fichiers suivants

[list=*]
[*]Un fichier child.css[/*]
[*]Un fichier child.js[/*]
[*]Un fichier child.php[/*]
[/list]


Pour les deux premiers c'est facile vous mettez respectivement votre css et javascript pour forcer le thème parent.

Pour child.php vous éditez et vous mettez le nom du dossier de votre parent :
[== PHP ==]
<?php define('PLX_PARENT_THEME', 'defaut'); ?>


Mise en place du theme parent :

Nous allons maintenant rajouter deux hook dans le header du thème parent pour qu'il prenne en compte le css et js de l'enfant

Dans le thème default (parent) ouvrez le header.php:

On commence par le css, à la place de :
[== PHP ==]
<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/plucss.css" media="screen"/>
<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/theme.css" media="screen"/>

Vous ajouter le hook en dessous ce qui donne :
[== PHP ==]
<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/plucss.css" media="screen"/>
<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/theme.css" media="screen"/>

<?php echo ($plxShow->callHook('spxchildtheme::getcss')); ?>

Puis le javascript :
[== Indéfini ==]
<?php echo ($plxShow->callHook('spxchildtheme::getjs')); ?>

Il existe une deuxième solution plus simple pour le css

dans child.php vous éditez et vous rajouter la constante suivante :
[== Indéfini ==]
<?php define('PLX_PARENT_THEME_PLUGIN_CSS', 'true'); ?>

Le css sera chargé directement dans le thème parent via: <?php $plxShow->pluginsCss() ?>. Dans ce cas vous n'avez pas à mettre le hook spécifique (spxchildtheme::getcss) dans le thème parent.

Ne pas oublier d'activer le thème enfant et non le thème parent !

Simple non ?

Un sample de thème a été créé : ici

spxchildtheme version 1.0

Niveau d'usage : facile

Compatible : pluxml 5.4 - 5.5

Réponses

  • DjbWebmasterDjbWebmaster Member
    Superbe bonne idée, j’utilisai ce système sur WP

    je vais tester :D
  • je-evrardje-evrard Member
    décembre 2016 modifié
    Héhé. Le plugin est simple pour le moment puisqu'il ne gère que la surcharge css + js. Je compte rajouter la surcharge de template par la suite (surcharge ou ajout d'ailleurs). Si vous avez des idées d'amélioration n'hésitez pas à me le faire savoir.

    a+

    jéjé
  • Jerry WhamJerry Wham Member
    Bonne idée mais dans wordpress, c'est bien le fichier du template qui est remplacé par celui de l'enfant. Il n'y a aucune modification à apporter sur les fichiers du thème original.
  • je-evrardje-evrard Member
    décembre 2016 modifié
    @jerry : 100% d'accord avec toi, a cogiter donc. Pour le css ça peut deja l'etre, mais pas pour le javascript effectivement (pour l'instant).
Connectez-vous ou Inscrivez-vous pour répondre.