https://www.facebook.com/tr?ev=6029847359740&cd[value]=0.01&cd[currency]=EUR&noscript=1

L'ajout de vos propres fonctions PHP à un thème de gantry est réalisable, et peut être un processus très simple grâce à DI (Dependency Injection). Cet article vous guidera à travers les étapes nécessaires pour ajouter vos propres fonctions PHP sur votre site.

Dans cet exemple, nous allons ajouter Mobile Detect, une classe PHP open source qui détecte les périphériques mobiles (y compris les tablettes) ce qui vous permet de créer des réponses spécifiques au périphérique sur votre site.

Si vous développez vos propres thèmes à partir de zéro, c’est une bonne méthode pour accomplir cette tâche. Ce processus ne devrait pas devenir la solution à long terme pour les utilisateurs de thèmes existants. La substitution de theme.php sur un thème existant pourrait provoquer des problèmes lors de la mise à niveau. Un processus plus propre et plus intuitif pour étendre les fonctionnalités PHP est en préparation et ce document sera actualisé dès qu’il sera disponible.

Surcharge du fichier theme.php

Le fichier includes/theme.php définit le thème. Il peut également être utilisé pour ajouter des fonctions PHP supplémentaires.

A ce moment, il est impossible de surcharger le theme.php. Lorsque la fonctionnalité sera disponible, vous serez en mesure de créer un remplacement de ce fichier dans le répertoire custom/includes/, afin d'apporter vos modifications et de les avoir conservés dans le cas où le thème est mis à jour.

Étant donné que ce n'est pas encore possible, vous aurez besoin d'éditer directement le theme.php situé sous includes/ à la racine du thème. Il vous est conseillé de créer une copie du fichier dans le cas où vous devez revenir à son état d'origine.

Préparation à l'utilisation de Mobile Detect

Pour ajouter la fonction php de détection de mobile, nous avons d'abord besoin de télécharger la bibliothèque. Vous pouvez obtenir la dernière version stable de Mobile_Detect.php depuis GitHub et le placer dans le dossier custom/includes/.

Votre dossier themes devrait maintenant ressembler à ceci :

+ g5_hydrogen   
+ includes
+ theme.php
+ custom
+ includes
- Mobile_Detect.php

Vous êtes maintenant prêt à injecter Mobile_Detect dans gantry en modifiant le fichier theme.php et en ajoutant ces simples lignes de code suivantes au bas du fichier:

// Require the Mobile Detect library include_once dirname(__FILE__).'/../custom/includes/Mobile_Detect.php'; // Dependency Injection of Mobile Detect $gantry['mobile_detect'] = new Mobile_Detect();

Cela rendra la bibliothèque Mobile Detect disponibles aux fichiers Twig via l'appel gantry.mobile_detect. Toute méthode que Mobile Detect apporte vous est maintenant disponible.

Mettre la classe à utiliser

Une fois que vous avez la classe injectée, vous serez en mesure de le référencer dans tous les fichiers twig du thème. Cela inclut les fichiers Twig de base pour le thème, les particules individuelles, etc.

Voici un exemple d'un appel qui met en place Mobile Detect pour utilisation.

{%- if not gantry.mobile_detect.isMobile() -%}     THIS DEVICE IS NOT A MOBILE {%- endif -%}

Exemple réel

Nous allons créer une nouvelle particule simple Mobile Detect et mettre en place tout ce que nous avons appris.

Plus de détails sur la façon de créer une nouvelle particule peuvent être trouvée dans la section dédiée Création d'une nouvelle particule.

La première étape consiste à créer les fichiers requis YAML et Twig pour cette nouvelle particule. Vous pouvez le faire en créant un nouveau dossier custom/particles (Si pas déjà fait) et en ajoutant deux nouveaux fichiers: mobile_detect.html.twig et mobile_detect.yaml.

+ g5_hydrogen
+ custom
+ particles
- mobile_detect.html.twig
- mobile_detect.yaml

Pour l'exemple, la particule va être extrêmement simple et c'est le contenu que nous utiliserons pour ses fichiers:

mobile_detect.html.twig
{% extends '@nucleus/partials/particle.html.twig' %} {% block particle %}     <div>You are using Mobile Detect v<strong>{{ gantry.mobile_detect.getScriptVersion() }}</strong></div>     <div>         {% set device = (gantry.mobile_detect.isMobile() ? (gantry.mobile_detect.isTablet() ? 'tablet' : 'phone') : 'computer') %}         Your device is a <strong>{{ device }}</strong>     </div>     <p>         {% for name, match in gantry.mobile_detect.getProperties() %}             {% set check = gantry.mobile_detect.version(name) %}             {% if check != false %}                 <div>version(<strong>{{ name }}</strong>) => <strong>{{ check }}</strong></div>             {% endif %}        {% endfor %}     </p>     <div>         {{ gantry.mobile_detect.is('chrome') }}     </div>     <div>Your User Agent is: <pre>{{ gantry.mobile_detect.getUserAgent() }}</pre></div> {% endblock %}
mobile_detect.yaml
name: Mobile Detect description: 
Example Particle
type: particle

À ce stade, la particule Mobile Detect va apparaître dans l’administration Gantry 5 . Vous pouvez maintenant faire glisser et déposer la particule où vous voulez dans le gestionnaire de mise en page et après avoir enregistré, vous verrez Mobile Detect utilisé.

Actualisez le site, et vous verrez quelque chose comme ceci:

mobile detect

 

Nous avons déjà détaillé quelques-unes des façons dont vous pouvez utiliser le répertoire THEME_DIR/custom/ pour dupliquer et personnaliser les fichiers de particules et thème, mais pour le développeur Web expérimenté voulant franchir une étape supplémentaire et personnaliser pratiquement tous les aspects du thème Gantry-alimenté, nous vous fournissons un guide détaillé.

Le présent guide fournit des informations pour vous aider à créer des versions de fichiers qui se rapportent au cœur de Gantry, au thème, et plus encore. Cette ressource est destinée uniquement aux utilisateurs avancés et peut perturber ou casser la fonctionnalité. Dans le cas où cela se passerait, vous devriez être en mesure de supprimer le contenu de votre répertoire THEME_DIR/custom/ pour revenir aux paramètres par défaut.

Lorsque vous créez des fichiers personnalisés, vous devez toujours conserver ces fichiers dans votre répertoire personnalisé. Si vous placez les fichiers substitués ou modifiez ceux qui existent en dehors de ce chemin d’accès de répertoire, vous courez le risque de perdre ces personnalisations lorsque le thème alimenté par gantry, ou le framework gantry, est mis à jour.

Ici et dans d'autres parties de la documentation THEME_DIR fait référence au répertoire principal de thème. Dans Joomla en utilisant le template Hydrogen, le vrai chemin du répertoire serait /templates/g5_hydrogen/ avec le chemin du répertoire personnalisé de l'utilisateur étant /templates/g5_hydrogen/custom.

Structure de répertoire de Gantry

Gantry installe 6 extensions. Nous avons détaillé ces extensions ci-dessous, y compris les remplacements de fichiers exemple personnalisés pour les extensions avec des fichiers que vous seriez susceptible de personnaliser.

For the sake of simplicity, we have included a quick-reference table below of the information in the sections below.

Extension

Chemin d’accès du répertoire installé

Chemin d’accès du répertoire personnalisé

Gantry 5 Framework (Bibliothèque)

/libraries/gantry5

(voir les notes ci-dessous)

 

/media/gantry5/assets

TEMPLATE_DIR/custom

Gantry 5 Nucleus Engine (Fichier)

/media/gantry5/engines/nucleus

TEMPLATE_DIR/custom/engine

Gantry 5 Themes (Composant)

/administrator/components/com_gantry5

TEMPLATE_DIR/custom/admin

 

/components/com_gantry5

TEMPLATE_DIR/custom/admin

 

Des classes PHP situées dans /libraries/gantry5 Peuvent également être surchargées, mais comme elles doivent être chargées automatiquement, cela nécessite une intervention manuelle supplémentaire impliquant l'ajout d'un chargeur pour les classes.

Gantry 5 (Package)

Ce package comprend l'installation / désinstallation de toutes les autres extensions de base. C’est le seul paquet à installer et désinstaller, avec tous les autres paquets verrouillés à celui-ci. Il n'y a aucun fichier dans ce package dont nous recommandons la personnalisation car il est essentiel pour le fonctionnement de Gantry et la personnalisation ne fournirait aucun avantage réel.

Gantry 5 Framework (Bibliothèque)

Cette extension contient le code du framework. Ce code s'installe à /libraries/gantry5 et est toujours disponible pour chaque extension pour Joomla. Les fichiers ressources communs sont installés dans /media/gantry5/assets. Toutes les ressources peuvent être remplacées dans /templates/TEMPLATE_DIR/custom.

Fichier Exemple

Fichier Exemple personnalisé

/media/gantry5/assets/css/font-awesome.min.css

/templates/TEMPLATE_DIR/custom/css/font-awesome.min.css

Moteur Gantry 5 Nucleus (Fichier)

Le Moteur Nucleus est le moteur de rendu utilisé en interne par l'administrateur Gantry et tous les templates commerciaux de RocketTheme. Il s’installe dans /media/gantry5/engines/nucleus et tous ces fichiers peuvent être personnalisés dans /templates/TEMPLATE_DIR/custom/engine.

Fichier Exemple

Fichier Exemple personnalisé

/media/gantry5/engines/nucleus/templates/page.html.twig

/templates/TEMPLATE_DIR/custom/engine/templates/page.html.twig

Themes Gantry 5 (Composant)

C’est le gestionnaire de thèmes Gantry au sein de l’administration Joomla. Il est également utilisé sur le serveur frontal pour les vues de page personnalisée. Il est installé à la fois dans /administrator/components/com_gantry5 et /components/com_gantry5. Les dossiers d’administration spécifiques à gantry peuvent être substituées dans /templates/TEMPLATE_DIR/custom/admin.

Fichier Exemple

Fichier Exemple personnalisé

/administrator/components/com_gantry5/templates/pages/about/about.html.twig

/templates/TEMPLATE_DIR/custom/admin/templates/pages/about/about.html.twig

Quick Icon - Gantry 5 (Plugin)

Ce plugin simple ajoute une icône de raccourci au Panneau de commande de l’administrateur Joomla (page de destination après la connexion) vers le gestionnaire de thèmes Gantry..

System - Gantry 5 (Plugin)

Ce plugin Autoamorce le Framework Gantry5 et le connecte à certains événements pour améliorer la facilité d'utilisation. Il doit être toujours activée pour que les templates Gantry 5 fonctionnent.

Fichiers de thème de Gantry

Tous les templates se trouvent dans le dossier /templates. Ne pas modifier ou ajouter des fichiers dans le template lui-même, parce que ces changements seront anéantis lors de la prochaine mise à jour de template. Si vous souhaitez personnaliser un fichier de template, vous pouvez le faire donc dans le folder templates/TEMPLATE_DIR/custom/.

Voici un exemple d'emplacement du fichier source et du fichier en double personnalisé:

Fichier Exemple

Fichier Exemple personnalisé

/templates/TEMPLATE_DIR/images/ipad.png

/templates/TEMPLATE_DIR/custom/images/ipad.png

 

Ceci ne s’applique pas seulement à la personnalisation des fichiers existants, mais en ajoute de nouveaux tels que les fichiers de particules. Nous détaillons ce processus dans nos précédents guides sur Fichiers personnalisés du thème et Création d'une nouvelle particule. Vous pouvez également personnaliser les ressources communes, le moteur de rendu, ou même des parties de l'administrateur.