Voici un tuto assez général pour expliquer le fonctionnement de Calumma, le thème paramétrable que j’ai créé.
Après l’installation du thème et du plugin, le menu permettant de paramétrer Calumma se trouve entre « Apparence » et « Extensions » dans l’admin de WordPress.
Le menu de Calumma comprend sept sous-menus qui permettent respectivement de paramétrer les options de la typographie, la pagination, le menu, la configuration responsive, le code CSS additionnel, l’export et l’import de la configuration.
Les pages de configuration pour la typographie et la pagination affichent en haut à droite un schéma de la structure du thème. Cela permet de savoir quelle propriété changer.
Sur la page « typography », il est possible de changer toutes les polices du blog en un clic. Cela n’inclut pas les polices « pre » et « code ». Il suffit de remplir le champ « Replace all font-familly », puis de cliquer sur le bouton « Save » en bas de la page. Vous pouvez utiliser n’importe quelle police standard, mais également une Google Font qui sera auto-importée.
Les pages « typography » et « pagination » permettent d’atteindre facilement de nombreuses propriétés CSS de votre blog. Le rôle de certaines de ces propriétés est évident, d’autres moins. Si vous ne connaissez rien au CSS, il existe de nombreux sites qui vous permettront de comprendre comment on les utilise.
Par exemple, « font-familly » désigne le type de police, « font-size » la taille… Les propriétés « padding » et « margin » sont plus complexes à comprendre. La propriété « padding » désigne la marge intérieure, entre le contenu et la bordure d’un cadre. La propriété « margin » désigne la marge extérieure, entre la bordure du cadre et les éléments voisins. Pour plus de détails, n’hésitez pas à chercher sur Google.
Les propriétés de mise en forme sont parfois réunies en section. Par exemple, sur la page « Typography », onglet « site-branding », vous pouvez observer une section « Main Title » et une section « Site Description ». « Main title » désigne le titre du blog et « Site Description » désigne le sous-titre. Toutes les propriétés dans ces sections s’appliquent à ces éléments respectifs.
Lorsque certaines propriétés ne sont pas réunies en section, par exemple, dans l’onglet « content-area » de la page « Typography », elles sont globales au cadre en question. Dans cet onglet, toutes les propriétés avant « Entry Title » sont globales au cadre « content-area » qui désigne la partie du blog où s’affichent les articles. La section « Entry Title » s’applique au titre des articles.
Sur la page « Typography », les onglets « entry-links » et « h1-h6 » s’appliquent également à la zone « content-area ». Le premier permet de configurer les différents liens autour de l’article (l’auteur, les tags…) et le second permet de définir la hiérarchie de titres en six niveaux, de h1 à h6.
Dans la configuration du menu, onglet « general », il ne faut pas préciser l’unité des propriétés « font-size » et « padding ». Ces deux valeurs sont en « em », mais il ne faut pas le préciser, car elles sont utilisées pour faire des calculs de marges automatiques afin de mettre le menu correctement en forme.
Si vous ne connaissez rien au design responsive, je vous conseille de ne pas toucher aux options de la configuration responsive. Par défaut, si la largeur d’un écran est inférieure à 768 pixels, la mise en forme passe sur une colonne. La barre latérale du blog appairait alors après le contenu. Pour une résolution entre 768 et 1024, la mise en forme reste sur deux colonnes, mais passe en proportionnel. Et à partir d’une largeur de 1024, la mise en forme complète s’affiche. Pour que cela fonctionne, il faut limiter la largeur de la mise en page à 1024. Ceci sera détaillé dans un futur tuto expliquant pas à pas comment paramétrer la mise en forme de votre thème.
Dans la partie CSS, vous pouvez ajouter votre code. Celui-ci se placera automatiquement au bon endroit, sans que vous ne touchiez à aucun fichier. Cela permet d’accéder à certains paramètres « cachés » du thème. Et grâce à ce système, vos modifications seront sauvées lors de l’export de votre configuration.
La page export vous permet de sauvegarder votre configuration et éventuellement de la partager.
La page import vous permet de restaurer une ancienne configuration, ou de copier votre mise en forme d’un blog à une autre.
Si vous connaissez CSS, vous devriez pouvoir vous débrouiller avec ces premières indications. Si ce n’est pas le cas, je proposerais des tutos plus concrets pour vous permettre de prendre Calumma en main.