Ce tutoriel vous guidera à travers les étapes nécessaires pour créer un modèle Joomla à partir de zéro. Nous couvrirons chaque détail ; alors commençons !
Ce tutoriel est extrait du "Joomla! 1.6 : User Guide" récemment publié fourni par Pearson.
Plan de jeu
Que sont les modèles Joomla ? Quelles sont les fonctionnalités des modèles Joomla ? Quelle est la différence entre un modèle sans contenu et un modèle avec du contenu ajouté au CMS ?
En quoi le processus de conception d'un hôte local est-il différent du processus de conception Web HTML statique ?
Quelles sont les implications de la conception sans table dans Joomla ? Quelle est la relation entre les normes du W3C, la convivialité et l’accessibilité ?
De quels fichiers sont constitués les modèles Joomla et quelles fonctions remplissent-ils ?
Comment créer une mise en page à trois colonnes dans l'ordre des sources en utilisant CSS au lieu de tableaux ?
Quels sont les styles CSS de base qui doivent être utilisés dans Joomla et quels sont les styles par défaut utilisés par le noyau de Joomla ?
Comment placer et styliser les modules ? Quelles sont les nouvelles technologies pour les coins arrondis ?
Quelle est une stratégie simple pour créer un menu CSS simplifié qui imite l'effet d'un menu développé en JavaScript ?
Comment contrôler quand une colonne est affichée et quand aucun contenu n'est présent, quand une colonne est masquée ?
Quelles sont les bonnes étapes pour créer un modèle Joomla 1.6 ?
Que sont les modèles Joomla!
Les modèles Joomla sont une série de fichiers dans le CMS Joomla qui contrôlent le rendu du contenu
Les modèles Joomla sont une série de fichiers dans le CMS Joomla qui contrôlent le rendu du contenu. Un modèle Joomla n'est pas un site Web ; c'est un site Web. Il n’est pas non plus considéré comme une conception complète de site Web. Un modèle est la conception de base pour visualiser un site Web Joomla. Pour produire l'effet d'un site Web « complet », le modèle fonctionne en étroite collaboration avec le contenu stocké dans la base de données Joomla.
Le modèle est stylé de sorte que lorsque vous insérez du contenu, il hérite automatiquement des styles de la feuille de style définie dans le modèle, tels que les styles de liens, les menus, la navigation, la taille et la couleur du texte, etc.
Comme Joomla, l'utilisation d'un modèle CMS présente de nombreux avantages :
Joomla fait tout le travail de mise en place du contenu dans la page. Vous pouvez ajouter de nouvelles informations à une page de blog existante simplement en tapant un nouveau message. Le modèle et son CSS garantissent sa cohérence stylistique avec le reste du contenu du site.
Séparation complète du contenu et de la présentation, notamment lorsque CSS est utilisé pour la mise en page (au lieu d'utiliser des tableaux dans le fichier index.php). C’est l’un des principaux critères permettant de déterminer si un site Web répond aux normes modernes du Web. Dans les sites conformes aux normes, le balisage HTML des tableaux est réservé à l'affichage de données tabulaires, plutôt qu'à la présentation de la page en colonnes.
Vous pouvez appliquer votre nouveau modèle instantanément pour donner un nouveau look à votre site Web. Cela peut impliquer de placer le contenu et les modules à différents endroits ainsi que les couleurs et les graphiques.
Processus de conception de l'hôte local
La page Web que vous voyez sur un site Web propulsé par Joomla n'est pas statique ; elle est générée dynamiquement en fonction du contenu stocké dans la base de données. Lorsque le contenu de la base de données change, toutes les pages qui affichent ce contenu changent immédiatement. La page que vous voyez est créée via diverses commandes PHP dans le modèle qui interrogent la base de données. Il y a quelques difficultés lors de la phase de conception puisque le modèle ressemble à des lignes de code plutôt qu'à du contenu.
Il n’y a pas de « bonne façon » de créer une page Web.
Il est désormais courant d'utiliser des éditeurs HTML « ce que vous voyez est ce que vous obtenez » (WYSIWYG) tels que Dreamweaver, vous n'avez donc pas besoin d'écrire du code HTML. Cependant, l'utilisation d'un tel éditeur lors de la conception d'un modèle Joomla n'est pas possible car les éditeurs WYSIWYG ne peuvent pas afficher et modifier les pages dynamiques. Par conséquent, vous devez coder manuellement le modèle et son CSS et afficher la page de sortie de PHP sur la page de service qui est fréquemment actualisée lorsque des modifications sont apportées. Si la connexion est suffisamment rapide, il peut s'agir d'un serveur Web, mais la plupart des concepteurs utilisent un serveur local ou localhost sur leur ordinateur, un logiciel qui dessert les pages Web sur leur ordinateur, comme la configuration localhost décrite au chapitre 1 2. "Téléchargez et installez Joomla !"
Il n'y a pas de "bonne façon" de créer des pages Web ; la façon dont vous le faites dépend de votre expérience. Ceux qui préfèrent les graphiques ont tendance à créer des « images » de pages dans un programme graphique (tel que Photoshop), puis à diviser les images afin de les utiliser pour le Web (appelé découpage en tranches). Les concepteurs davantage axés sur la technologie se lancent souvent directement dans CSS et commencent à coder les polices, les bordures et les arrière-plans. Cependant, comme nous venons de le mentionner, en tant que concepteur de modèles Joomla, vous êtes limité par le fait que vous ne pouvez pas voir immédiatement les effets de votre codage dans le même éditeur. Vous pouvez donc utiliser le flux de conception modifié suivant :
Laissez le serveur localhost charger quelque chose qui s'exécute en arrière-plan pour "exécuter" Joomla.
Utilisez l'éditeur pour modifier le HTML et le CSS, puis enregistrez les modifications sur le serveur.
Affichez les pages concernées par vos modifications dans un navigateur Web.
Option de serveur localhost
Pour continuer ce tutoriel, vous devrez installer WampServer. Si vous ne l'avez pas déjà fait, poursuivez l'installation. J'attendrai ici.
Sur un serveur Web hébergé, vous pouvez modifier des modèles HTML et des fichiers CSS sur le backend tout en ouvrant le frontend dans un autre onglet du navigateur. Lorsque vous enregistrez les modifications, vous pouvez simplement actualiser la vue frontale pour voir l'impact.
Avec les paramètres localhost, vous pouvez accéder plus facilement aux fichiers directement et les modifier avec l'éditeur de votre choix. Après avoir enregistré vos modifications, vous pouvez actualiser la vue frontale dans votre navigateur et voir l'impact sans fermer l'éditeur.
W3C et conception sans table
Convivialité, accessibilité et optimisation pour les moteurs de recherche (SEO) sont autant d'expressions utilisées aujourd'hui sur Internet pour décrire des pages Web de haute qualité. En fait, il existe un chevauchement considérable entre la convivialité, l’accessibilité et le référencement, et les pages Web qui présentent l’une de ces caractéristiques présentent souvent les trois. Le moyen le plus simple d’atteindre ces trois objectifs consiste à utiliser le cadre spécifié dans les standards Web du W3C.
Par exemple, les personnes malvoyantes peuvent facilement lire des sites Web créés à l'aide de la sémantique HTML avec un lecteur d'écran. Il peut également être facilement lu par les robots des moteurs de recherche. Google est en fait aveugle sur la façon de lire un site Web, tout comme l'utilisation d'un lecteur d'écran.
Les normes Web établissent un ensemble commun de « règles » que tous les navigateurs Web utilisent pour afficher les pages Web. La principale organisation à l'origine de ces normes est le W3C, dont le directeur, Tim Berners-Lee, est reconnu pour avoir inventé le Web en 1989.
Pour comprendre d'où viennent les standards du Web, il est utile de connaître un peu d'histoire. De nombreuses pages Web sont en fait conçues pour les navigateurs plus anciens. Pourquoi? Depuis la naissance du World Wide Web, les navigateurs n'ont cessé d'évoluer. Chaque génération a introduit de nouvelles fonctionnalités, pour lesquelles les fabricants ont proposé des étiquettes (noms) différentes et parfois propriétaires. Chaque navigateur a tendance à avoir une syntaxe ou un « dialecte » différent et des bizarreries qui implémentent le même langage HTML de base. De nouveaux navigateurs sont apparus et certains anciens navigateurs ont disparu (vous vous souvenez de Netscape ?).
Les normes actuelles du W3C aident (espérons-le) à pousser les fabricants à publier des navigateurs plus compatibles, capables de lire les mêmes langues et d'afficher les pages de manière plus cohérente afin que les concepteurs puissent concevoir pour une seule plate-forme commune.
Un autre facteur de complication est qu'historiquement, les différents fabricants de navigateurs (tels que Microsoft) ont tendance à faire en sorte que leurs navigateurs interprètent le HTML de manière légèrement différente. Par conséquent, les concepteurs de sites Web doivent concevoir leurs sites Web pour prendre en charge les anciens navigateurs plutôt que les plus récents. Les concepteurs et les propriétaires de sites Web considèrent souvent qu'il est important que les pages Web s'affichent correctement dans ces navigateurs « plus anciens ». Les normes du W3C pour le code des pages Web sont développées pour assurer la cohérence. Un site Web qui intègre les normes Web du W3C dispose d’une bonne base pour se rendre accessible, utilisable et optimisé pour les moteurs de recherche. Considérez-les comme des codes de construction pour votre maison : les sites Web créés avec eux sont plus solides, plus sécurisés et conformes aux attentes des utilisateurs. Vous pouvez vérifier vos pages à l'aide du service de validation HTML du W3C (validator.w3.org). C'est simple et gratuit (assurez-vous simplement d'utiliser le bon DOCTYPE lorsque vous essayez de valider votre code. Dans sa forme la plus simple, les sites qui répondent à la validation W3C peuvent également utiliser le HTML sémantique et utiliser CSS pour séparer leur contenu de la présentation.
Demandez à cinq concepteurs Que sont les standards du Web et vous obtiendrez cinq réponses différentes, mais la plupart conviennent que les standards du Web sont basés sur l'utilisation d'un code valide, qu'il s'agisse de HTML (ou autre), comme spécifié dans la dernière version de la norme
Code sémantiquement correct
.
Sémantiquement correct signifie que les balises HTML de la page Web décrivent uniquement le contenu, pas la présentation
Comme mentionné précédemment, sémantiquement correcte signifie que les balises HTML de la page Web décrivent uniquement le contenu, pas la présentation en particulier. , cela signifie une organisation structurée des balises H1, des balises H2, etc., et l'utilisation de tableaux uniquement pour les données tabulaires et non pour la mise en page. Un domaine dans lequel les concepteurs de modèles Joomla ont légèrement compromis sur l'exactitude sémantique pure est le nom des colonnes gauche et droite d'un. disposition à deux ou trois colonnes "gauche" et "droite" au lieu de la barre latérale ou de la barre latérale plus sémantiquement correcte, ce qu'elles seraient si ce n'étaient que des noms de position utilisés dans le modèle PHP. Nommer ou classer tout ce qui concerne la gauche. La colonne de la page d'affichage est une commodité pardonnable si elles sont également utilisées pour définir des classes correspondantes en HTML et CSS. Dans l'exemple ci-dessous, vous verrez que la position à gauche est stylisée en utilisant la barre latérale de classe et la position à droite. est la barre latérale-2, qui est un code sémantiquement correct
Feuilles de style en cascade (CSS)
avec la création du code. L'utilisation du CSS pour contrôler l'apparence et la mise en page des pages Web est sémantiquement correcte et étroitement liée. mécanisme pour ajouter des styles (tels que les polices, les couleurs, l'espacement) aux documents Web
Le CSS existe côte à côte avec votre code HTML. Le contenu (code) peut être complètement séparé de la présentation (CSS)
Pour voir cela en action. , consultez CSS Zen Garden, un site Web qui affiche le même contenu HTML de manières différentes et uniques en modifiant simplement le fichier CSS. La page résultante est très différente, mais le contenu principal est exactement le même
.
Actuellement, la conception de sites Web propulsés par Joomla est confrontée à des défis considérables pour répondre aux normes de validation.
Actuellement, la conception de sites Web propulsés par Joomla est confrontée à des défis considérables pour répondre aux normes de validation. Dans la première série de versions de Joomla, 1.0.X, le code utilisait de nombreux tableaux pour afficher ses pages. Il ne s’agit pas vraiment d’une démonstration de l’utilisation de CSS et ne produit pas non plus de code sémantiquement correct. Ce problème est aggravé par le fait que de nombreux développeurs tiers de composants et de modules utilisent encore des tableaux pour générer des mises en page.
Heureusement, l'équipe de développement principale de Joomla a reconnu ce problème avec Joomla. Dans Joomla 1.5, les concepteurs de modèles peuvent remplacer complètement la sortie du noyau (appelée vues) et supprimer des tableaux ou personnaliser les mises en page comme ils le souhaitent.
Des précautions doivent encore être prises lors de la création d'un modèle pour s'assurer qu'il est accessible (par exemple, taille de police évolutive), utilisable (navigation claire) et optimisé pour les moteurs de recherche (code source trié).
Créer un modèle simple : Étape 1
Pour comprendre en quoi consiste le modèle, nous examinons d'abord un modèle Joomla vierge.
Composant de fichier modèle
Cette section passe en revue le processus manuel de configuration des fichiers modèles. Normalement, vous installez le modèle à l'aide du programme d'installation de Joomla, qui s'occupe de toutes ces étapes.
Lors de la création de votre propre modèle, vous devez configurer plusieurs fichiers et dossiers de manière coordonnée. Les modèles doivent contenir divers fichiers et dossiers. Ces fichiers doivent être placés dans le répertoire /templates/ de votre installation Joomla, chaque fichier étant placé dans le dossier spécifié pour ce modèle. Si vous avez installé deux modèles nommés Element et Voodoo, votre répertoire ressemblerait à ceci : /templates/ 目录中，每个文件都放置在为该模板指定的文件夹中。如果您安装了两个名为 Element 和 Voodoo 的模板，您的目录将如下所示：
/templates/element
/templates/voodoo
Copier après la connexion
请注意，模板的目录名称必须与模板的名称相同 - 在本例中为 element 和 voodoo。这些名称区分大小写且不应包含空格。
模板目录下有两个关键文件：
/element/templateDetails.xml
/element/index.php
Copier après la connexion
这些文件名和位置必须完全匹配，因为这是 Joomla 核心脚本调用它们的方式。第一个是模板 XML 文件。
这是一个 XML 格式的元数据文件，它告诉 Joomla 在加载使用此模板的网页时还需要哪些其他文件。 （注意大写的 D。）它还详细说明了作者、版权以及构成模板的文件（包括使用的任何图像）。
此文件的最后一个用途是在管理后端使用扩展安装程序时解压并安装模板。
第二个关键文件是生成页面的主要模板文件，index.php。
该文件是 Joomla 模板中最重要的文件。它对站点进行布局并告诉 Joomla CMS 在哪里放置不同的组件和模块。它是 PHP 和 HTML 的组合。
几乎所有模板都使用附加文件。按照惯例（尽管 Joomla 核心不要求）对它们进行命名和定位，如此处所示的名为 Element 的模板所示。
Veuillez noter que le nom du répertoire du modèle doit être le même que le nom du modèle - dans ce cas, element et voodoo. Ces noms sont sensibles à la casse et ne doivent pas contenir d'espaces. Il y a deux fichiers clés dans le répertoire des modèles : 🎜
🎜Ces noms de fichiers et emplacements doivent correspondre exactement car c'est ainsi que le script principal de Joomla les appelle. Le premier est un fichier modèle XML. 🎜🎜Il s'agit d'un fichier de métadonnées au format XML qui indique à Joomla quels autres fichiers sont requis lors du chargement d'une page Web utilisant ce modèle. (Notez le D majuscule.) Il détaille également l'auteur, les droits d'auteur et les fichiers qui composent le modèle (y compris les images utilisées). 🎜🎜La dernière utilisation de ce fichier est de décompresser et d'installer le modèle lors de l'utilisation du programme d'installation de l'extension sur le backend d'administration. 🎜🎜Le deuxième fichier clé est le fichier modèle principal pour générer des pages, index.php. 🎜🎜Ce fichier est le fichier le plus important du modèle Joomla. Il présente le site et indique au CMS Joomla où placer les différents composants et modules. C'est une combinaison de PHP et HTML. 🎜🎜 Presque tous les modèles utilisent des fichiers joints. Il est conventionnel (bien que cela ne soit pas requis par le noyau Joomla) de les nommer et de les positionner, comme indiqué ici dans le modèle nommé Element. 🎜
<?php
/**
* @copyrightCopyright (C) 2005 - 2010 Barrie North.
* @licenseGPL
*/
defined('_JEXEC') or die;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Copier après la connexion
Copier après la connexion
🎜Ce ne sont que des exemples. Certains fichiers courants dans les modèles ressemblent à ceci 🎜🎜/element/template_thumbnail.png -- Une capture d'écran du modèle dans un navigateur Web (généralement réduite à environ 140 pixels de large x 90 pixels de haut). Une fois le modèle installé, il fera office d'image d'aperçu, visible dans le gestionnaire de modèles d'administration Joomla. 🎜🎜/element/params.ini -- Un fichier texte qui stocke les valeurs de tous les paramètres du modèle. 🎜🎜/element/css/template.css -- CSS pour le modèle. L'emplacement du dossier est facultatif, mais vous devez préciser son emplacement dans le fichier index.php. Vous pouvez l'appeler comme vous voulez. Généralement, le nom affiché sera utilisé, mais vous découvrirez plus tard qu'il existe également des avantages à disposer d'autres fichiers CSS. 🎜🎜/element/images/logo.png – Toute image fournie avec le modèle. Également pour des raisons d'organisation, la plupart des concepteurs les placent dans des dossiers d'images. Ici, nous avons un fichier image appelé logo.png à titre d'exemple. 🎜🎜templateDetails.xml🎜🎜 Le fichier templateDetails.xml agit comme un manifeste ou une liste de colisage, qui comprend une liste de tous les fichiers ou dossiers appartenant à un modèle. Il comprend également des informations telles que l'auteur et le droit d'auteur. Certains de ces détails sont affichés dans le backend d'administration du gestionnaire de modèles. Un exemple de fichier XML est présenté ici : 🎜
The name of this site is <?php echo $mainframe->getCfg('sitename');?><br />
The administrator email is <?php echo $mainframe->getCfg('mailfrom');?><br />
This template is in the <?php echo $this->template?> directory<br />
The URL is <?php echo JURI::base();?>
left=<?php echo $this->countModules('left');?><br />
left and right=<?php echo $this->countModules('left and right');?><br />
left or right=<?php echo $this->countModules('left or right');?><br />
left + right=<?php echo $this->countModules('left + right');?>
Copier après la connexion
因此，如果我们将此代码插入到模板中，我们可能会通过示例 Joomla 内容获得以下结果：
countModules('left') - 返回 3，因为左侧有 3 个模块。
countModules('left and right') - 返回 1，因为左侧和右侧位置都有一个模块。两个测试都是正确的（>0）。
countModules('left or right') - 返回 1，因为左侧或右侧位置有一个模块。两个测试都是正确的（>0）。
