Utilisation des paramètres de bloc

Un des grands avantages de Gantry 5 est d'avoir la possibilité d'accéder facilement à tout et d’ajuster les paramètres à plusieurs niveaux. Vous pouvez faire des choses comme ajouter une classe CSS à une section...

Les Media queries permettent d'appliquer des CSS uniquement à un type d'écran spécifique. Par exemple, si vous avez un élément sur votre page que vous souhaiteriez apparaître d’une manière différente sur les téléphones qu'il ne le fait sur un ordinateur...

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: