Structure du Framework Thematic

Avant d’aller un peu plus loin avec Thematic il me semble important de regarder de plus près la structure du framework. L’objectif est de pouvoir retrouver facilement le code, les fonctions et le CSS afin de voir les possibilités d’adaptation au travers d’un thème enfant.

Pour vous faire une idée précise des possibilités offertes par l’utilisation d’un thème enfant à partir de Thematic je ne peux que vous conseiller de lire la série d’articles de Ian Stewart How To Modify WordPress Theme the Smart Way. Vous y apprendrez les bases pour :

• Créer un thème enfant : WordPress Child Theme Basis
• Créer des feuilles de style CSS modulaires pour un thème enfant : Modular CSS in WordPress Child Theme
• Utiliser les hooks de filtre pour un thème enfant : Using Filter Hooks in WordPress Child Theme
• Utiliser les hooks d’action pour un thème enfant : Using Action Hooks in WordPress Child Theme

Lisez ces 4 articles et tout va devenir limpide et vous convaincre définitivement des avantages de l’utilisation d’un framework WordPress (avantages que j’ai déjà passés en revue il y a quelques jours). En plus cela ne paraît pas si compliqué – même pour un débutant comme moi.

Cependant pour maîtriser ces modifications il est indispensable de connaître l’architecture de Thematic pour savoir l’adapter à son propre besoin :

• Architecture des fichiers pour s’y retrouver dans le code et l’enchaînement des fonctions ce qui est indispensable pour savoir où chercher l’information.
• Architecture des div et classes pour mettre en place les styles CSS.
• Liste et emplacement des hooks pour savoir comment personnaliser le comportement du thème.

Les fichiers du thème

La structure des dossiers du thème est plutôt simple et tout est à sa place :

• Dans la racine du thème Thematic, vous retrouverez l’ensemble des fichiers Template habituels : index.php, header.php, page.php, comments.php, etc. Evidemment dans notre utilisation, nous n’apporterons jamais de modification directement dans ces fichiers.
• Le sous-dossier library contient le cœur du framework. Vous y retrouverez les dossiers :
  • extensions : contient toutes les fonctions appelées par les fichiers Template. Ce sont ces fichiers PHP qui contiennent le code détaillé du thème offrant les possibilités de personnalisation via les hooks. On trouve également dans ce dossier l’écran de configuration de Thematic dans le module d’administration (theme-options.php).
  • grids : fichiers GIF correspondant aux grilles de positionnement utilisable pour dessiner la maquette du site (sous Photoshop par exemple). Ces grilles sont celles du système Blueprint.
  • layout : feuilles CSS correspondant à des mises en page standard en 1, 3 ou 3 colonnes.
  • styles : feuilles de style par défaut. Il s’agit d’une base utilisable pour toute mise en page. A vous de voir si elles peuvent vous être utiles pour votre thème enfant ou si vous souhaitez repartir de zéro. Là encore, pas de modification dans ces fichiers : ils doivent juste être appelés via votre thème enfant.
  • languages : fichiers de traduction du thème.
  • scripts : scripts .js appelés par Thematic.
• le sous-dossier thematicsamplechildtheme est comme son nom l’indique un modèle pour créer un thème enfant. Copiez ce dossier dans un sous-dossier correspondant à votre thème enfant (dans wp-content/themes) pour avoir une base pour créer votre thème enfant.

L’architecture du code

Le plus simple est de partir d’un exemple : atteindre le code qui génère les informations méta de l’article (auteur+date). Il s’agit ensuite de voir s’il est possible de le modifier via un hook de filtre.

Le fichier index.php à la racine du thème est celui qui génère les articles comme dans tout thème WordPress :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?php
global $options;
foreach ($options as $value) {
    if (get_option( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; }
    else { $$value['id'] = get_option( $value['id'] ); }
    }
?>
<?php get_header() ?>
 
	<div id="container">
		<div id="content">
 
			<?php thematic_navigation_above();?>
 
<?php get_sidebar('index-top') ?>
 
<?php thematic_above_indexloop() ?>
 
<?php thematic_indexloop() ?>
 
<?php thematic_below_indexloop() ?>
 
<?php get_sidebar('index-bottom') ?>
 
			<?php thematic_navigation_below();?>
 
		</div><!-- #content -->
	</div><!-- #container -->

<?php thematic_sidebar() ?>
<?php get_footer() ?>

Comme vous le voyez, son contenu est plutôt condensé. On n’y retrouve pas la classique loop WordPress habituelle. A la place nous avons un appel de la fonction thematic_indexloop().

Le réflexe est donc d’aller voir le contenu de function.php pour en avoir le détail. Là encore, le code est plutôt sommaire. En réalité le fichier function.php de Thematic ne fait que mettre en place un certain nombre de variables et appeler les fonctions contenues dans le dossier library/extensions.

Effectivement, dans le dossier library/extensions, on retrouve un fichier nommé content-extensions.php. Dans ce fichier, à la ligne 46, on retrouve effectivement la déclaration de notre fonction thematic_indexloop() :

46
47
48
49
50

// Located in index.php
// The Loop
function thematic_indexloop() {
		do_action('thematic_indexloop');
} // end thematic_indexloop

Cette fonction renvoit vers l’action ‘thematic_indexloop’ elle-même définie dans la fonction thematic_index_loop() plus bas à la ligne 256 – notez la subtile différence entre la fonction et l'action correspondante avec le _ entre index et loop. Vous retrouvez ici la loop WordPress classique.

256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279

// The Index Loop
function thematic_index_loop() {
		/* Count the number of posts so we can insert a widgetized area */ $count = 1;
		while ( have_posts() ) : the_post() ?>
 
			<div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
    			<?php thematic_postheader(); ?>
				<div class="entry-content">
<?php thematic_content(); ?>
 
				<?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
				</div>
				<?php thematic_postfooter(); ?>
			</div><!-- .post -->
 
				<?php comments_template();
 
				if ($count==$thm_insert_position) {
						get_sidebar('index-insert');
				}
				$count = $count + 1;
		endwhile;
}
add_action('thematic_indexloop', 'thematic_index_loop');

Toujours pas de trace de notre date+auteur de l’article cependant, on peut suspecter que la fonction thematic_postheader() appelée à la ligne 262 est celle qui va générer ces données. Voici son contenu, un peu plus loin dans le fichier content-extension.php :

354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407

// Information in Post Header
function thematic_postheader() {
    global $id, $post, $authordata;
 
    // Create $posteditlink    
    $posteditlink .= '<a href="' . get_bloginfo('wpurl') . '/wp-admin/post.php?action=edit&amp;post=' . $id;
    $posteditlink .= '" title="' . __('Edit post', 'thematic') .'">';
    $posteditlink .= __('Edit', 'thematic') . '</a>';
    $posteditlink = apply_filters('thematic_postheader_posteditlink',$posteditlink); 
 
 
    if (is_single() || is_page()) {
        $posttitle = '<h1 class="entry-title">' . get_the_title() . "</h1>\n";
    } elseif (is_404()) {    
        $posttitle = '<h1 class="entry-title">' . __('Not Found', 'thematic') . "</h1>\n";
    } else {
        $posttitle = '<h2 class="entry-title"><a href="';
        $posttitle .= get_permalink();
        $posttitle .= '" title="';
        $posttitle .= __('Permalink to ', 'thematic') . the_title_attribute('echo=0');
        $posttitle .= '" rel="bookmark">';
        $posttitle .= get_the_title();   
        $posttitle .= "</a></h2>\n";
    }
    $posttitle = apply_filters('thematic_postheader_posttitle',$posttitle); 
 
    $postmeta = '<div class="entry-meta">';
    $postmeta .= '<span class="meta-prep meta-prep-author">' . __('By ', 'thematic') . '</span>';
    $postmeta .= '<span class="author vcard">'. '<a class="url fn n" href="';
    $postmeta .= get_author_link(false, $authordata->ID, $authordata->user_nicename);
    $postmeta .= '" title="' . __('View all posts by ', 'thematic') . get_the_author() . '">';
    $postmeta .= get_the_author();
    $postmeta .= '</a></span><span class="meta-sep meta-sep-entry-date"> | </span>';
    $postmeta .= '<span class="meta-prep meta-prep-entry-date">' . __('Published: ', 'thematic') . '</span>';
    $postmeta .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta .= get_the_time(thematic_time_title()) . '">';
    $postmeta .= get_the_time(thematic_time_display());
    $postmeta .= '</abbr></span>';
    // Display edit link
    if (current_user_can('edit_posts')) {
        $postmeta .= ' <span class="meta-sep meta-sep-edit">|</span> ' . '<span class="edit">' . $posteditlink . '</span>';
    }               
    $postmeta .= "</div><!-- .entry-meta -->\n";
    $postmeta = apply_filters('thematic_postheader_postmeta',$postmeta); 
 
 
    if ($post->post_type == 'page' || is_404()) {
        $postheader = $posttitle;        
    } else {
        $postheader = $posttitle . $postmeta;    
    }
 
    echo apply_filters( 'thematic_postheader', $postheader ); // Filter to override default post header
} // end thematic_postheader

A la ligne 380 commence le code générant les informations auteur+date dans la variable $postmeta. La ligne 397 est la ligne qui nous intéresse vraiment :

397

    $postmeta = apply_filters('thematic_postheader_postmeta',$postmeta);

En effet elle définit un hook de filtre appelé ‘thematic_postheader_postmeta’ correspondant au contenu de $postmeta qui contient donc le texte généré pour l’affichage de l’auteur et de l’article.

Vous allez pouvoir remplacer ce texte par celui de votre choix grâce à votre thème enfant selon la technique décrite dans l’article de Themeshaper Using Filter Hooks in WordPress Child Theme. Cette technique consiste à créer une fonction personnalisée dans le fichier function.php du thème enfant et de remplacer le filtre ‘thematic_postheader_postmeta’ par votre propre code grâce à l’utilisation de l’instruction add_filter().

La structure des éléments

Fouiller dans les fichiers pour comprendre le fonctionnement peut être utile pour atteindre un élément précis mais avoir une vision globale de l’architecture des éléments du code est indispensable.

Dwenaus, un des membres du forum d’aide de Thematic a eu la bonne idée de réaliser un diagramme de la structure Thematic.

Vous y retrouverez les différents éléments d’une page : les div avec leur classe et ID, les appels des fonctions (via les actions), ainsi que la liste des fameux hooks.

Du très beau travail qui va faciliter grandement les choses.