Drupal est l'un des trois meilleurs systèmes de gestion de contenu (CMS) au monde, avec Wordpress et Joomla. Drupal 8 (pas encore disponible) sera la dernière version de Drupal à sa sortie. Drupal est personnalisé à l'aide de thèmes, qui constituent un moyen puissant d'améliorer un site Web alimenté par Drupal en définissant la structure et l'apparence (et certaines fonctionnalités supplémentaires) du site. Cet article travaillera à créer un thème Drupal 8 du début à la fin.

Veuillez noter que bien que cet article vous guide dans le processus de création d'un thème à partir de rien, il est souvent préférable de commencer votre travail avec un thème de base, comme les thèmes populaires Zen, Omega ou Tao. Si vous êtes nouveau à cela, créer un thème à partir de zéro sera moins compliqué et vous en apprendra plus!


Avant que tu commences

Pour pouvoir suivre et compléter le tutoriel efficacement, vous devez comprendre les bases de:

  • Le but des sites Web
  • HTML et CSS: comment ils sont utilisés pour créer des sites Web
  • PHP: qu'est-ce que c'est et comment il est utilisé pour améliorer
  • Les CMS: ce qu'ils sont et comment ils sont utilisés pour alimenter les sites Web
  • Drupal: Comment mettre en place un simple site web en utilisant

Ne soyez pas rebuté par cette liste, cependant. Avec assez d'enthousiasme, vous pouvez apprendre ce dont vous avez besoin tout en suivant ce tutoriel.
Afin de développer un thème rapidement et sans heurts (sans problèmes liés à la connexion Internet), vous devez configurer un environnement de développement (un programme d’éditeur de code et un serveur de test) sur votre ordinateur. La méthode la plus courante consiste à installer une pile WAMP / LAMP / MAMP (W: windows; L: Linux; M: Mac, A: Apache, le logiciel serveur; M: MySQL, le logiciel de base de données; P: PHP, le script côté serveur) et télécharger un éditeur de code open source.

Première partie de trois:
Préparation

  1. 1 Concevoir le site web.
    • Commencez par dessiner la mise en page de la page d'accueil de votre site Web à l'aide d'un crayon et d'une feuille de papier propre. vous devez vous sentir libre de faire des erreurs et des changements. Dessinez toutes les parties d'une page Web de base, y compris l'en-tête, le menu de navigation (qui peut être juste en dessous de l'en-tête ou dans une barre latérale), le corps de la page (pour le contenu) et le pied de page. Vous pouvez avoir d'autres domaines dans votre conception.
    • Lorsque vous êtes satisfait de votre conception, recréez votre conception esquissée en un programme graphique qui vous permet de concevoir des pages Web, telles que Adobe Photoshop, ou mieux encore, Adobe Fireworks.
    • Assurez-vous ensuite d'ajouter tous les autres éléments visuels. considérez les couleurs et les contrastes de lumière sombre, la typographie et comment elle ajoute à l'expérience de l'utilisateur, la disposition et les espaces vides (les espaces sont importants!), et comment le contenu s'intégrera.
  2. 2 Développer le site en utilisant HTML et CSS.
    • Tout comme dans l'étape de la conception de sites Web, il est probablement plus efficace de créer uniquement les pages Web du site qui ont leurs propres mises en page, telles que la page d'accueil et la page Contactez-nous. Gardez la mise en page aussi simple que possible et utilisez des pratiques et des conventions modernes dans la mesure du possible (comme HTML5 et CSS3). À ce stade, n'ajoutez pas de script côté serveur (tel que PHP) et réduisez au minimum les scripts côté client (tels que Javascript) afin de ne pas interférer avec le code de Drupal. cela peut être ajouté plus tard.
  3. 3 Configurez Drupal pour commencer le thème. Téléchargez Drupal et déplacez les fichiers sur le serveur que vous utiliserez pour développer votre thème (votre serveur de test - recommandé - ou un serveur en ligne).
    • Placez les fichiers téléchargés dans le racine dossier (si vous utilisez un serveur de test, c'est le www ou localhost dossier). Utilisez un navigateur Web pour accéder au dossier racine (par exemple, http: // www /) et suivez le processus d'installation. Vous devez ensuite installer tous les modules qui seront utiles pour le développement de thèmes.
  4. 4 Comprenez la structure de la page Web de Drupal et convertissez-y vos pages statiques.
    • Les pages Web HTML sont dites «statiques» - ce qui signifie qu'elles ne sont pas conçues pour avoir un contenu qui change régulièrement - et sont construites à l'aide de balises de type bloc telles que «divs» (et «header», «footer», etc. HTML5).
    • Les pages Web de Drupal sont une combinaison de parties statiques (HTML) et de pièces dynamiques - des parties qui contiennent du contenu susceptible d'être modifié régulièrement. Ces parties dynamiques sont appelées 'les régions'à Drupal. Un exemple de région est une barre latérale, dans laquelle vous pouvez souhaiter insérer des liens de navigation, un champ de recherche, des boutons de médias sociaux, etc. Voir le schéma ci-dessous pour une représentation visuelle:
      Les choses que vous pouvez mettre dans les régions s'appellent 'des blocs'à Drupal. Par exemple, un champ de recherche ou un menu sont des blocs couramment utilisés. Vous pouvez insérer des blocs dans les régions, réorganiser les blocs et supprimer les blocs des régions lorsque vous vous connectez à Drupal sur le Structure > Blocs page. La plupart des blocs disponibles sur un site Web Drupal typique sont fournis par les modules installés, mais vous pouvez créer vos propres blocs sur la page Blocs.
      Le contenu de chaque page Web (le corps du texte, les en-têtes, les images, etc.) est également placé dans une région: la région «Contenu», requise pour tous les thèmes Drupal. Le contenu de chaque page Web (ou article de blog ou type de contenu personnalisé) est appelénœud', et est emballé dans le Contenu de la page principale bloc. En d'autres termes, le contenu de la À propos de nous La page est enregistrée dans le noeud (avec un type de page de type "page", bien sûr), et est sortie vers le Contenu de la page principale bloc, qui est placé dans le Contenu Région.
      Notez que parfois plusieurs nœuds sont affichés sur une page Web via le Contenu de la page principale bloc; un exemple est la page d'accueil, qui montre par défaut plusieurs des articles les plus récents du site (articles de blog).
      Votre thème contrôlera les régions, mais pas ce que les administrateurs du site y mettent. En tant que thème, vous devez informer Drupal des régions de votre thème et les enregistrer dans des fichiers appelés modèles, qui sont traités dans la section suivante.

Deuxième partie de trois:
Création des fichiers de thème

  1. 1 Configurez le dossier de thème. Dans ce dossier, créez un fichier .info qui contient le but du thème et donne des informations sur son utilisation. Énumérez ce qui s'y passe. Dans le dossier, ajoutez des captures d'écran. et un dossier CSS.
  2. 2 Créez les fichiers de modèle.
    Drupal 'modèle'Les fichiers (dont le nom de fichier se termine par' .html.twig ') sont utilisés par Drupal pour structurer la sortie de chaque page Web. Les modèles standard incluent:
    • html.html.twig
    • page.html.twig
    • block.html.twig
    • node.html.twig
    • pages de modèles personnalisés
      Chaque page Web générée par Drupal (la page d'accueil par exemple) utilisera html modèle une fois, le page modèle une fois, et le Région, bloc et nœud modèles au moins une fois chacun.
      Si vous souhaitez voir le code PHP et le balisage HTML typiques de chacun de ces modèles, vous pouvez consulter les fichiers de modèle du répertoire des thèmes Drupal drupal > thèmes dossier (pas le drupal > des sites > tout > thèmes dossier).
  3. 3 Insérer les fonctions Process et Pre-process.
    Pour comprendre ces fonctions, vous devez d'abord comprendre comment drupal enregistre et génère le contenu et le balisage HTML. Comme vous auriez dû le voir dans les modèles à l’étape précédente, tous les modèles Drupal disposent de plusieurs variables qu’ils peuvent afficher en utilisant des fonctions telles que Contenu de la page'] . Dans cet exemple, la variable contenu (qui est stocké dans le page tableau plutôt que comme une variable par lui-même; c'est juste comment Drupal le fait) stocke tout le texte que l'utilisateur a saisi dans le «corps» de la page Web lorsque l'utilisateur était connecté à Drupal.
    Fondamentalement, les fonctions de traitement et de pré-traitement permettent au générateur de modifier les variables disponibles pour les modèles avant que Drupal ne les utilise pour les modèles. Ces fonctions sont toutes écrites dans le template.php fichier (notez que ceci est ne pas un fichier '.html.twig').

Troisième partie de trois:
Installer le thème et les touches de finition

  1. 1 Installez le thème dans Drupal, configurez les vues requises et ajoutez les noeuds et régions requis.
  2. 2 Installez des modules utiles supplémentaires qui améliorent l'apparence, la sécurité et les fonctionnalités.
    La liste de modules suivante est très utile pour la plupart des sites Web Drupal et a été écrite par Steve Floyd dans son article Top 25 Drupal 7 Modules (NB Cette liste changera probablement pour Drupal 8):
    • Des vues. Pour les utilisateurs, Views vous permet de rassembler presque tous les contenus de votre site Web (tels que les 10 articles les plus récents) et de les présenter sous forme de page ou de bloc. Particulièrement utile pour créer une page d'accueil dynamique.
    • Vues Diaporama
    • Pathauto
    • Mollom
    • Google Analytics
    • WYSIWYG
    • XMLsitemap
    • Sauvegarde et migration
    • Table de travail
    • Médias
    • Drupal Commerce
  3. 3 Ajouter du contenu de site Web pour compléter le site.