Thème

CSS, PHP, HTML, …

CSS3_and_HTML5_badges.svg

Le code css doit être défini au sein du thème enfant impérativement. C’est le principe de l’héritage. De cette manière, on évite les pertes en cas de mise à jour du thème parent.

Le code html de chaque fichier peut être modifié suivant nos besoins mais encore une fois, il vaut mieux copier le fichier du parent dans le dossier de l’enfant avant de faire des modifications du html.

Le code php peut lui aussi être modifié suivant nos besoins. Il faut toutefois garder à l’esprit que dans beaucoup de cas, il est préférable d’injecter une fonction php dans le fichier functions.php de manière à pouvoir l’appeler dans n’importe quel fichier php de notre thème.

Ainsi, en cas de modifications nécessaires dans cette fonction,on ne doit les effectuer qu’une seule fois, même si la fonction est utilisée dans plusieurs fichiers.

2 janvier 2016 à 4 h 37 min

Modèles ou page.php

sw

Par défaut, l’affichage des pages se fait via le fichier page.php du thème parent, s’il existe.

En copiant le fichier page.php du thème parent dans le dossier du thème enfant, on peut modifier l’affichage des pages en ajoutant des marqueurs de modèles par exemple, ou des extensions, …

Mais ces changements s’appliqueront à toutes les pages statiques de notre site.

Pour personnaliser l’affichage d’une ou plusieurs pages statiques uniquement, il existe une autre méthode, créer des modèles de pages.

Pour créer un modèle de page, il faut créer un dossier page-templates et y placer un fichier php au nom que l’on souhaite, par exemple: full-width.php. Ce fichier doit contenir le nom du template en commentaire.

Exemple:
/*
Template Name: FullWidth
*/

à 4 h 25 min

Général ou customisé

gph1

Pour customiser l’affichage des articles via les catégories, il suffit de copier le fichier category.php du thème parent et le modifier à notre sauce.

Ces modifications peuvent être au niveau des marqueurs de modèles utilisés, ou bien dans le fichier content utilisé. On pourrait appeler un fichier content-category.php qui aurait un affichage spécifique.

Les marqueurs de catégories sont nombreux et certains permettent d’effectuer des contrôles: si la catégorie est la catégorie d’id 1, faire ceci. Sinon, faire cela ….

Pour aller encore plus loin, on peut créer un fichier category différent pour chaque catégorie en utilisant son id ou son nom comme ceci: catefory-8.php.

Ces différentes techniques permettent d’obtenir un grand nombre de résultats visuels différents pour les différentes sections d’un site internet, tout en restant très simple sur le principe.

à 4 h 13 min

Concernant ce fichier

images

Le fichier functions.php doit lui aussi contenir des informations concernant le thème parent.

Il faut donc intégrer une fonction qui ressemblerait à ceci dans notre cas:

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}

Une fois cette fonction intégrée et le thème parent déclaré dans le fichier style.css, on peut aller activer notre thème enfant dans le back-office à apparence->themes

à 3 h 56 min

Un fichier style un peu différent

2568645910_5a0704ee8e_o

Pour hériter un thème, il faut commencer par l’installer. Il est préférable de partir d’un thème au design épuré pour avoir moins de modifications à faire. Le thème twenty-twelve par exemple correspondrait parfaitement.

Ensuite, il faut créer un dossier dans le dossier wp-content/themes au nom de notre thème enfant et y placer un fichier functions.php et un fichier style.css qui contient ce genre de lignes en commentaire
Theme Name: enfant
Author: Kratz Geoffrey
Author URI: http://vsweb.be
Template: twenty-twelve
Description: Thème ultra complet, fils de twenty-twelve
Version: 1.0

C’est dans ce fichier style que nous définirons les règles de style qui s’appliquent à notre thème enfant. De cette manière, en cas de mise à jour du thème parent, les modifications ne sont pas perdues.

à 3 h 46 min

Déclarer son thème

6035854268_a79f95e300_o

Pour déclarer un nouveau thème, il faut créer dans le dossier wp-content/themes un nouveau dossier au nom de notre nouveau thème.

Au sein de ce dossier, on ajoute un fichier index.php et un fichier style.css qui doit contenir ces lignes en commentaire:
Theme Name: Minimum Theme
Description: Test
Author: Test
Version: 1.0

Ensuite, on peut aller activer le thème dans apparence->thèmes dans le back-office.

Pour ajouter une image au thème, il suffit d’ajouter un fichier de 300×225 px nommé screenshot.png dans le dossier de notre thème.

à 3 h 32 min

Structures de fichiers

gph2

Une fois le thème déclaré, on peut composer notre structure de fichiers

Seuls les fichiers style.css et index.php sont obligatoires. Pour une structure simple, on pourrait voir par exemple les fichiers php home, search, category, header, page, single, footer, sidebar, 404 ,functions, content, …

Pour une structure plus complexe, on pourrait voir également des modèles de page (par exemple pleine-page, avec sidebar, …) ainsi que d’autres fichiers php comme comments, category, archive, author, attachment, …

Il est également possible de créer des fichiers sur-mesure pour une catégorie par exemple (category-7.php) ou bien pour renvoyer un contenu différemment avec un fichier content-machin.php. Les possibilités sont nombreuses pour permettre de créer des thèmes assez complets et variés.

à 3 h 06 min

Qu’est-ce donc?

images

Le codex, c’est un site internet qui rassemble toutes les ressources nécessaires pour pouvoir utiliser tout le potentiel d’une installation wordpress

La communauté wordpress française est assez conséquente, il y a donc tout un tas de ressources qui sont disponibles en français, contrairement à d’autres ressources gratuites comme le sont les bundle symfony par exemple.

à 2 h 34 min

Les marqueurs de modèle

index

Ils sont d’une aide cruciale pour créer des templates. Ils permettent de récupérer certaines valeurs précises pour les afficher aux endroits que l’on souhaite au sein de nos modèles

Il y a des marqueurs pour toutes sortes de valeurs concernant les pages, les catégories, les articles, les dates, ….

Il y a dans la sidebar droite de cette page des liens directs vers le codex, et voici un lien vers les marqueurs de modèles.

à 2 h 27 min