Tutoriels sur Joomla et la création de site

Il y a des moments où vous voulez juste avoir des ressources CSS ou JavaScript qui se chargent sans les voir apparaître dans la base de la page.
Les particules ont intégré la prise en charge pour les feuilles de...

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:

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

Fichiers de thème de Gantry

La création d'une nouvelle particule dans Gantry 5 est un processus assez simple. Comme vous allez créer deux fichiers pour la particule, vous allez avoir besoin d'un éditeur de texte.

Pour l'intérêt de ce guide, nous allons créer une simple...