F8EOZ » Blog

Un blogueur averti en vaut deux

admin — Mon, 18 Nov 2013 12:20:48 +0000

Mon blog a disparu des écrans le 19 octobre 2013 dans le courant de l’après-midi. Les serveurs de mon hébergeur venaient de subir un grave piratage avec destruction de données. Confiant dans la technique et le savoir-faire des informaticiens, j’attendais quelques temps. L’hébergeur me garantit des sauvegardes dans son contrat. Malheureusement les serveurs de sauvegarde avaient été aussi touchés. Après maintes tentatives de réparation semble-t-il, aux dires de l’hébergeur, près d’un mois s’est écoulé. Le 15 novembre 2013 je recevais finalement un mail qui m’annonçait que mes données n’étaient pas récupérables. Le 16 novembre un nouvel espace vierge était remis à ma disposition. Dans la matinée du 16, je restaurais facilement l’ensemble du blog et sa base de données grâce aux sauvegardes personnelles que je fais régulièrement.

Ne vous fiez donc pas aux sauvegardes de l’hébergeur. Faites toujours et régulièrement des sauvegardes complètes de votre blog, répertoires, fichiers, base de données. Certains ont dû perdre dans cette désagréable expérience des mois, voire des années de travail.

Index des articles de la catégorie Blog

Mon blog – Créer un plug-in qui affiche l’ index des articles

admin — Sat, 09 Feb 2013 18:24:05 +0000

Aujourd’hui je reviens à la programmation du blog. Un peu d’exercice PHP et HTML pour garder la forme! J’ai l’habitude de placer en fin d’article, un index des articles de la même catégorie. Quand une catégorie ne comporte que quelques articles, ajouter une ligne dans l’index de chaque article ne prend que peu de temps. Quand le nombre d’articles d’une même catégorie devient important cela devient vite fastidieux. On oublie des lignes, le classement est aléatoire. La solution pour me libérer de ce travail est de le faire faire par un plug-in. Il en existe beaucoup sur ce sujet. Mais selon l’adage « On n’est jamais si bien servi que par soi-même» je saisis l’occasion pour réaliser mon propre plug-in. C’est une bonne occasion d’approfondir ma connaissance de WordPress et d’apprendre à réaliser un plug-in.

1. Cahier des charges

Je veux ce plug-in le plus simple possible. Qu’il fasse simplement pour moi ce que je fais actuellement à la main. Néanmoins, l’édition de l’index sera entièrement paramétrable.

2. Contenu

une ligne titre de l’index,
n lignes hyperlien pointant sur le titre de l’article.

3. Mode opératoire – Critères de sélection

On obtient le résultat en plaçant par une simple balise ou « Shortcode » selon le vocabulaire de WordPress, dans l’article à l’endroit où l’on souhaite afficher l’index, en général pour moi, à la fin de l’article. La balise peut être placée en plusieurs endroits de l’article si nécessaire.

4. Description de la balise

Deux formats possibles:

[format 1]: où format1 = f8eoz_post_index : 
affiche l 'index des articles 
de la même catégorie que l'article courant,

[format 2]: où format 2 = f8eoz_post_index category="category_name" : 
affiche l' index des articles 
de la catégorie=category_name.

Ceci permet de répondre à tous les cas. Pour la bonne organisation de mon blog, un article appartient à une catégorie et une seule. Le format 1 suffit. En cas d’ entorse à cette règle, en plaçant plusieurs balises de formats 2, il est est possible de réaliser un index par catégorie.

5. Edition de l’index

5.1. Le titre

Il est facultatif, s’il est vide il n’est pas affiché. Le plug-in est livré avec le contenu suivant :
‘

Index des articles de la catégorie ${category}

’

Description:

balises HTML facultatives, simple exemple au choix l’utilisateur,
Index des articles de… = texte libre facultatif,
${category} = tag facultatif remplacé par le nom de la catégorie de sélection.

exemple : ‘

Index des articles de la catégorie ${category}

’ affiche, si category_name = « Blog » :

Index des articles de la catégorie Blog

exemple : ‘

Index des articles>

’ affiche :

Index des articles

5.2. L’index

Contrôlé par 3 éléments modifiables. Le plug-in est livré avec les valeurs suivantes :

before =
- after =
before et after contiennent les balises HTML encadrant les lignes de l’index,
line =
${title}

6. Présentation

Deux critères définis par l’utilisateur. Le plug-in est livré avec les valeurs suivantes :

critère de tri: orderby = titre,
ordre de tri: order = ASC,
nombre de lignes :postsPerPage = -1 (illimité).

7. Administration

Vu la simplicité du plug-in, je n’ai pas réalisé de module d’administration pour l’instant (futur projet). Les éléments paramétrables sont placés en début de programme dans des constantes qu’il est possible de modifier facilement.

8. Description du programme

8.1. Entête

L’entête d’un plug-in WordPress respecte les conventions suivantes:

/*
Plugin Name: F8EOZ Post Index
Plugin URI: http://www.f8eoz.com
Description: Related posts index plugin. Filter: category name.
Author: F8EOZ Bernard Decaestecker
Version: 1.0 03/02/2013 19:00
Author URI: http://www.f8eoz.com
*/

8.2. Constantes

Ci-dessous les constantes. Le premier groupe appelé « Editable constant » contient les constantes de présentation et d’édition de l’index. Voir description paragraphes ci-dessus. Elles peuvent être adaptées par l’utilisateur. Le second groupe de constantes appelé « Not editable constant » ne doit pas être changé. Il fixe les éléments de base, répertoires, nom du plug-in, selon les conventions de WordPress.

//Editable constant
define('F8EOZPOSTINDEX_TITLE', 'Index des articles de la catégorie ${category}');
define('F8EOZPOSTINDEX_LINE', '${title}');
define('F8EOZPOSTINDEX_BEFORE_LINES', '');
define('F8EOZPOSTINDEX_AFTER_LINES', '');
define('F8EOZPOSTINDEX_ORDER', 'ASC');
define('F8EOZPOSTINDEX_ORDERBY', 'title');
define('F8EOZPOSTINDEX_POSTS_PER_PAGE', -1); //all posts, no limit

//Not editable constant
define('F8EOZPOSTINDEX_PLUGIN_NAME', 'f8eoz_post_index');
define('F8EOZPOSTINDEX_PLUGIN_BASENAME', plugin_basename(__FILE__));
define('F8EOZPOSTINDEX_PLUGIN_DIR', dirname(F8EOZPOSTINDEX_PLUGIN_BASENAME));
define("F8EOZPOSTINDEX_SHORTCODE", 'f8eoz_post_index');

8.3. Classe PostIndex

La classe PostIndex contient les propriétés et les méthodes (fonctions) pour créer l’index.

La méthode __construct est exécutée quand on crée une instance de cet objet. Elle initialise les propriétés avec les constantes de présentation et d’édition.

La méthode parse($category_name) traite le cas du format 1 ou du format 2 du Shortcode. En l’absence d’un nom de catégorie, c’est la catégorie de l’article qui est utilisée en référence. Si l’article contient plusieurs catégories, c’est la première de la liste qui sert de référence.

Dans la méthode PrintIndex la fonction
echo str_replace( ‘${category}’, $this->categoryName, $this->title );
remplace le tag ${category} s’il existe par le nom de la catégorie et affiche le titre ainsi édité.
De la même façon, la fonction
echo str_replace( ‘${permalink}’, get_Permalink() , str_replace( ‘${title}’ , get_the_title(), $this->line ) );
remplace les tags ${permalink} et ${title} par leur valeur et affiche une ligne de l’index ainsi éditée. Ces fonctions imbriquées, utilisent le principe du pipeline au sens UNIX du terme. Le pipeline exécute une série de fonctions dont le résultat de l’une sert d’argument à la suivante.

class PostIndex {
    private $title;
    private $categoryName;
    private $line;
    private $beforeLines;
    private $afterLines;
    private $order;
    private $orderby;
    private $postsPerPage;

function __construct($title, $line, $beforeLines, $afterLines, $order, $orderby, $postsPerPage) {
    $this->title = $title;
    $this->line = $line;
    $this->beforeLines = $beforeLines;
    $this->afterLines = $afterLines;
    $this->order = $order;
    $this->orderby = $orderby;
    $this->postsPerPage = $postsPerPage;
}

function getCategoryName() {
    return $this->categoryName;
}

function getIndexTitle() {
    return $this->title;
}

function setIndexTitle($title) {
    $this->$title = $title;
}

function parse($category_name) {
    if(empty($category_name)) {
        $categories = get_the_category( get_the_ID() ); //get catagories of current post
        if( !empty($categories) ) {
            $this->categoryName = $categories[0]->cat_name; //default = get 1st catagory_name
            return;
        }
    }
    $this->categoryName = $category_name; //other = specified category
}

function printIndex() {
    if(is_null($this->categoryName)) //no category, no index
        return;

    echo "\n \n";

    if(!empty($this->title)) {
        echo str_replace( '${category}', $this->categoryName, $this->title );
    }

    $args = array(  'order'=> $this->order,
                    'orderby' => $this->orderby,
                    'posts_per_page' => $this->postsPerPage,
                    'category_name' => $this->getCategoryName());

    echo $this->beforeLines;
    // The Query
    query_posts( $args );
    // The Loop
    while ( have_posts() ) : the_post();
        echo str_replace( '${permalink}'
                         , get_Permalink()
                         , str_replace( '${title}'
                         , get_the_title(), $this->line )
                         );
    endwhile;
    // Reset Query
    wp_reset_query();
    echo $this->afterLines;

    echo "\n \n";
    }
}

8.4. Exécution du plug-in

La fonction f8eoz_post_index() est accrochée à WordPress au moyen de la fonction add_action().

// ==========================================================================
// Runs after WordPress has finished loading but before any headers are sent.
add_action('init', 'f8eoz_post_index');
// ==========================================================================

*/

La fonction f8eoz_post_index()

crée une instance de PostIndex avec les constantes de présentation et d’édition,
décode le shortcode,
lance l’affichage de l’index en utilisant la bufferisation PHP.

function f8eoz_post_index() {
    //should be made during init
    load_plugin_textdomain( F8EOZPOSTINDEX_PLUGIN_NAME, false, F8EOZPOSTINDEX_PLUGIN_DIR );

    if(!is_admin()) {
        function f8eoz_post_index_func( $atts ) {
            //create a new instance of object PostIndex with initial properties
            $pi = new PostIndex(F8EOZPOSTINDEX_TITLE,
                                F8EOZPOSTINDEX_LINE,
                                F8EOZPOSTINDEX_BEFORE_LINES,
                                F8EOZPOSTINDEX_AFTER_LINES,
                                F8EOZPOSTINDEX_ORDER,
                                F8EOZPOSTINDEX_ORDERBY,
                                F8EOZPOSTINDEX_POSTS_PER_PAGE);
            /*
            Combines user shortcode attributes with known attributes and fills in defaults when needed.
            The result will contain every key from the known attributes,
            merged with values from shortcode attributes.
            Usage
            shortcode_atts( $pairs , $atts );
            Parameters
            $pairs  array) (required) Entire list of supported attributes and their defaults
            Default: None
            $atts : (array) (required) User defined attributes in shortcode tag
            Default: None
            Return Values (array) Combined and filtered attribute list.
            */
            extract( shortcode_atts( array ( 'category' => null ) , $atts ) ); //extract tag
            $pi->parse($category); //parse tag

            ob_start();    //store post data in buffer
            $pi->printIndex();
            $content = ob_get_contents();
            ob_end_clean();
            return $content;
        }
        add_shortcode(F8EOZPOSTINDEX_SHORTCODE, 'f8eoz_post_index_func');

    }
}

*/

9. Installation

Télécharger le plug-in.

Décompresser le fichier.
Copier le répertoire f8eoz-post-index dans le répertoire /wp-content/plugins/.
Dans la fenêtre d’aministration choisir Extensions et activer le plug-in F8EOZ Post Index.

10. Test

L’index ci-dessous est affichée par ce plug-in.

Index des articles de la catégorie Blog

Mon blog – Partie 14 – Créer son thème WordPress – Traduction

admin — Sun, 11 Dec 2011 09:48:38 +0000

Objet
Le thème est prévu pour être publié. Il a été programmé en utilisant, pour afficher les messages, les 2 fonctions WordPress:
__ ($message, $domain) qui renvoie un texte à une autre fonction,
_e($message, $domain) qui affiche directement le texte.

Pour écrire des programmes multilingues, WordPress s’appuie sur la bibliothèque logicielle GNU GetText .

GetText utilise la chaîne de caractères à traduire comme clef de recherche dans un fichier de traduction et renvoie, soit la chaîne traduite, soit la chaîne d’origine, si aucune traduction n’est disponible.

On se reportera utilement à la documentation Translating WordPress et load_theme_textdomain .

Le fichier de traduction source fr_FR.po
Le fichier peut être créé avec un simple éditeur de texte mais il est bien plus facile de le faire en utilisant un outil d’aide comme Poedit. Ce logiciel examine tous les fichiers .php contenu dans un ou plusieurs répertoires pour en extraire les textes à traduire. Pour cela il faut naturellement lui indiquer:
- les paramètres généraux: langue = fr, pays = FR, jeux de caractères = UFT8 qui serviront à produire l’entête du fichier,
- la liste des répertoires à balayer, ici C:/… …/themes/montheme,
- les fonctions qui contiennent les textes à traduire, c’est à dire, __ (bien mettre 2 underscores) et _e .

Poedit produit la liste des messages à traduire et le fichier compilé fr_FR.mo qui est utilisé par le thème. Il est ensuite très facile pour un utilisateur du thème de décliner le fichier source, selon sa langue, norme ISO 639 et son pays, norme ISO 3166-1, en de_DE, en_GB, en_US, xx_YY, …, d’y inclure sa traduction et de le recompiler.

Notion de domaine
Il permet de limiter le champ de la traduction à un domaine de programmes. Les plugins, par exemple, qui ont leur propre fichier de traduction. Le nom du fichier de traduction est alors préfixé du nom de de domaine. Il est de la forme domaine-fr_FR.po et domaine-fr_FR.mo. Pour le thème le nom du fichier ne doit pas être préfixé du nom de domaine.

Installation
Dans le répertoire /themes/montheme créer le répertoire languages. Mettre les fichiers fr_FR.po et fr_FR.mo créés avec Poedit dans /montheme/languages .

Avec l’éditeur de texte ouvrir le fichier functions.php, insérer en début de ce fichier les lignes suivantes:

// Path des fichiers de traduction
add_action('after_setup_theme', 'traduction_setup');
function traduction_setup(){
// Préparation du répertoire et du fichier de traduction
    load_theme_textdomain( 'montheme', TEMPLATEPATH . '/languages' ); // fixer le nom du domaine
    $locale = get_locale(); // Notre langue fr et notre pays FR = fr_FR
    $locale_file = TEMPLATEPATH . "/languages/$locale.php";
    if ( is_readable( $locale_file ) ) require_once( $locale_file );
    // The .mo files must use language-only filenames, like languages/de_DE.mo in your theme directory
} // end setup

Enregistrer les fichiers. Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Pour vérifier le fonctionnement, ouvrir fr_FR.po avec Poedit. Dans la liste des messages affichés, cliquer sur le premier, par exemple. Dans l’espace de traduction (partie basse de la fenêtre de Poedit), saisir (sans les quotes) « Ceci est un exemple de texte traduit ». Valider. Enregister. Vérifier que le texte a été remplacé. C’est terminé.

Télécharger les fichiers du thème et les copier sous /themes/montheme .

Mon blog – Partie 13 – Créer son thème WordPress – Autres Templates

admin — Thu, 08 Dec 2011 14:24:42 +0000

Erreur 404
Le template 404.php est utilisé quand un lien est fait vers une page qui n’existe pas. Je me suis contenté du minimum, afficher sur une page le message « Erreur 404 page non trouvée ». Cette page est néanmoins complète. Elle est construite simplement à partir du template index.php. Elle permet ainsi de se rebrancher facilement sur les pages du blog et de poursuivre la recherche.

Liens vers les réseaux sociaux, flux de syndication, contact
J’ai regroupé dans un template appelé social.php tous les liens vers les réseaux et médias sociaux, les flux de syndication de contenu, ma boîte aux lettres. Ces liens sont affichés en barre sous forme d’ icônes normalisés. Je les ai placé dans un template pour les raisons suivantes:
- un seul fichier à maintenir,
- possibilité de les utiliser en plusieurs emplacements de la page,
- suppression ou ajout de nouveaux icônes simplifié.

Les icônes sont placés dans /montheme/images/social .

Avec l’éditeur de texte ouvrir le nouveau fichier social.php, insérer dans ce fichier les lignes suivantes:


    /images/social/facebook.png" height=32 width=32 alt="Facebook" title="Facebook" />
    /images/social/twitter.png" height=32 width=32 alt="Twitter" title="Twitter" />
    /images/social/gplus.png" height=32 width=32 alt="Gplus" title="Google Plus" />
    /images/social/linkedin.png" height=32 width=32 alt="LinkedIn" title="LinkedIn" />
    /images/social/youtube.png" height=32 width=32 alt="YouTube" title="YouTube" />
    /images/social/googlemaps.png" height=32 width=32 alt="Google Maps" title="Google Maps" />
    /images/social/email.png" height=32 width=32 alt="E-mail" title="" />
    /images/social/rss.png" height=32 width=32 alt="RSS articles" title="" />
    /images/social/rsscomment.png" height=32 width=32 alt="RSS comment" title="" />

Afficher la barre d’ icônes
Pour des raisons pratiques, la barre est placée en haut et en bas de page, dans le header et en fin d’article. Elle est habillée d’une classe de style icons .

Avec l’éditeur de texte ouvrir le fichier header.php. Sous la balise , insérer les lignes suivantes:

La fonction get_template_part() charge ce template soit à partir de social-header.php (n’ existe pas) soit ici à partir de social.php.

Avec l’éditeur de texte ouvrir le fichier single.php. Sous la balise , insérer les lignes suivantes:

Avec l’éditeur de texte ouvrir le fichier style.css. En fin de fichier, insérer les lignes suivantes:

/* Social Icons  */

#social {
padding: 0.5em 0 0 0;
}

.icons a img {
opacity:.7;filter:alpha(opacity=50);
}

.icons a:hover img {
opacity:1;filter:alpha(opacity=100);
}

Enregistrer les fichier sous /themes/montheme.

Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Tester les liens. C’est terminé.

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

Mon blog – Partie 12 – Créer son thème WordPress – Style Print

admin — Wed, 07 Dec 2011 11:30:02 +0000

Objet
Quand un article m’intéresse ou qu’il est assez long, j’ai pour habitude de l’imprimer soit pour le conserver, soit pour le lire plus tard à tête reposée.
En l’état actuel de notre thème, essayez avec votre navigateur, de voir l’ aperçu d’un article sans l’imprimer. Ce n’est pas très beau! Votre page est encombrée de la barre de navigation, du sidebar, du footer. Même si vous n’ êtes pas un adepte de l’ impression, votre blog est surtout fait pour les autres. Il est important de proposer simplement une version imprimable de l’article. Pourquoi se priver de cette possibilité? Ceci est réalisé avec une feuille de style particulière qui sera dédiée au média print . Théoriquement, les feuilles de style pour l’impression permettent de gérer une mise en page relativement complète mais en pratique pour rester compatible avec tous les navigateurs, nous resterons simple.

Feuille de style print.css
Dans cette feuille de style, nous allons simplement mettre en noir les liens et nous débarrasser de la barre de navigation, du sidebar, du footer, du bloc de recherche, du bloc de saisie d’un commentaire, des commentaires.

Il suffit de partir de style.css . La propriété display:none sert à indiquer la non impression d’une division ou d’une classe. On supprime les parties inutiles. On redéfinit la taille des caractères, si nécessaire. Avec l’éditeur de texte ouvrir un nouveau fichier print.css. Insérer dans ce fichier les lignes suivantes:

body {
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
}

#header {
border-bottom: 1px solid #aaa;
}

a {
background:transparent;
color:black;
text-decoration:none;
}

.search {
display:none;
}

#barredenavig{
display:none;
}

#sidebar {
display:none;
}

#footer {
display:none;
}

.postmetadata, {
clear:both;
font-size:small;
}

.navigation {
display:none;
}

.alignleft {
float: left;
margin: 5px 5px 5px 0;
}

.alignright {
float: right;
margin: 5px 0 5px 5px;
}

/* COMMENTAIRES */
#commentform, #comments .reply {
display:none;
}

#comments h3 {
display:none;
}

#comments div.navigation {
display:none;
}

#comments p,  #comments ol{
display:none;
}

#comments ol{
display:none;
}

#respond{
display:none;
}

Lier la feuile de style à la page
Ceci est réalisé simplement avec la balise .

Avec l’éditeur de texte ouvrir le fichier header.php. Sous la balise du lien à la feuille de style.css, insérer dans ce fichier les lignes suivantes:

Enregistrer les fichier sous /themes/montheme.

Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Faire un aperçu de l’impression. C’est un peu mieux!

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

Mon blog – Partie 11 – Créer son thème WordPress – Template Comments

admin — Tue, 06 Dec 2011 14:43:41 +0000

Objet
Le template comments est chargé:
- d’afficher le nombre de commentaires par type,
- d’afficher les méta-données du commentaire (origine, date)
- d’afficher le commentaire selon son niveau de profondeur,
- de créer le lien vers la réponse à un commentaire,
- de ne pas afficher les commentaires en attente de modération,
- d’afficher le bloc de saisie d’un commentaire.

Les commentaires sont affichés dans l’ordre hiérarchique des réponses. Le niveau de profondeur maximum est modifiable dans le réglage des options de discussion du tableau de bord, paramètres: Enable threaded (nested) et comments levels deep.

Structure du template
S’il y a des commentaires
- compter les commentaires par type: commentaire ou pings
- afficher le nombre de commentaires
- s’il y a des pings, afficher le nombre de pings
- boucle d’affichage des commentaires: fonctions wp_list_comments et mytheme_comment
- s’il y a trop de commentaires par page, afficher la navigation par page
Sinon
- si les commentaires ne sont pas ouverts, afficher un message
Fin Si
Si les commentaires sont ouverts
- afficher le bloc de saisie d’un commentaire
- contrôler la présence des informations obligatoires, nom et email (1)
Fin Si

Remarque (1). Le traitement en cas d’erreur est assez brut. Un simple message sur une page blanche. Je m’en contente pour l’instant.

Avec l’éditeur de texte ouvrir un nouveau fichier comments.php. Insérer dans ce fichier les lignes suivantes:




    

        
        
            
                
            
            
                ·
                
            
        
        

        
         
            
        

         1 ) : ?>
            
                
                
            
        
        

    
        comment_status == 'open') : ?>
            
        
            
            
        

    

    comment_status == 'open' ) : ?>
        
            
               

            
                  
            
                
                    
                        
                          
                        | 
                        
                    
                        
                            
                        
                        
                            
                        
                        
                           
                        
                    
                    

                    
                    
                     
                    
                    ID); ?>
                

            
        

    comment_status ) ?>

Structure de la fonction mytheme_comment
La fonction mytheme_comment est une itération de la fonction d’affichage des commentaires wp_list_comments . Elle affiche les éléments suivants:
- les méta-données: auteur, date, type
- le lien modifier,
- le message non approuvé pour le commentaire en attente de modération,
- le lien répondre s’il s’agit bien d’un commentaire.

Avec l’éditeur de texte ouvrir le fichier functions.php. Insérer dans ce fichier les lignes suivantes:


>
    
        
             ·
        
        
            
            %1$s à %2$s ', 'montheme'),
                           get_comment_date('l j F Y'),
                           get_comment_time('H:m:s'),
                           '#comment-' . get_comment_ID() ); ?>   
            
        
    
    
        comment_approved == '0') : ?>
            
                
            
        
            
    
    
        
             __('Répondre','montheme'),
                'login_text' => __('Connexion pour répondre.','montheme'),
                'depth' => $depth,
                'before' => '',
                'after' => ''
            )));?>

Style
Insérer dans le fichier style.css les lignes suivantes:

/* COMMENTAIRES */

#comments {
margin: 3em 0 0 0; /* séparation du post et des commentaires */
padding: 0 0 0 0;
font-size:1.2em;
font-family: Arial;
font-weight:normal;
}

#comments h3 {
font-size:1.0em;
font-weight:bold;
}

#comments div.navigation {
font-size:0.9em;
}

#comments p,  #comments ol{
margin:1em 0 0 0;
padding:0 0 0 0;
}

#comments ol{
margin:1em 0 0 1.5em; /* marges de chaque tête de commentaires */
padding:0 0 0 0;
}

/*Je définis une taille de caractère dans mes ul en em (0.76em par exemple).
Mais comme j'ai des "ul d'ul", je me retrouve avec une taille qui diminue
jusqu'à devenir illisible dès le second niveau (0.76x0.76=0.5776). Solution mettre 1em */
#comments li ul, #comments ul li {
margin: 0 0 0 1.0em; /* marge d'indentation */
padding:0 0 0 0;
list-style:none;
font-size:1em; /* très important pour garder la même taille: taille des caractères X 1 */
}

.comment-author {
font-size:1.2em;
font-style:normal;
}

.comment-author cite {
font-style:normal;
font-weight:bold;
}

.comment-meta, .reply {
margin:0;
padding:0;
font-size:0.9em;
}

.reply {
margin: 1em 0 1em 0; /* séparation du post et des commentaires */
}

.comment-unapproved {
color:#e55c0c; /*orange*/
font-style:normal;
}

textarea#comment {
width:95%; /* largeur de l'espace pour la saisie du commentaire */
}

/* balise HTML des acronymes, sigles et abréviations */

acronym, abbr, span.caps {
border: 0;
cursor: help; /* curseur = point d'interrogation */
text-decoration: underline;
}

Enregistrer les fichier sous /themes/montheme.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Entrer quelques commentaires et réponses. Mettre quelques commentaires en attente. Vérifier l’affichage des commentaires et du bloc commentaire soit en cliquant sur le nombre de commentaires de l’article dans la page index, soit en cliquant sur le titre de l’article dans la page index pour en afficher le contenu.

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

Mon blog – Partie 10 – Créer son thème WordPress – Template Single

admin — Mon, 05 Dec 2011 08:41:06 +0000

Objet
A ce stade du développement de notre thème si vous cliquez sur le titre de l’article pour afficher son contenu, vous remarquez qu’il manque la possibilité d’introduire un commentaire et la navigation d’un article à l’autre, bien pratique pour suivre une série d’articles traitant du même sujet. Comme pour les templates archive et search, plusieurs solutions sont possibles:
- utiliser le template index et ajouter des instructions conditionnelles qui déterminent dans quel contexte on se trouve,
- utiliser le template single qui est la copie du template index modifié.
L’avantage de la première solution est de n’avoir qu’un seul template à maintenir. La seconde solution est intéressante si vous voulez personnaliser la page. La programmation de l’index devient alors plus complexe et moins facile à maintenir.
Nous allons utiliser cette dernière solution.

Fichier single.php
Avec l’éditeur de texte ouvrir un nouveau fichier single.php. Copier dans ce fichier le contenu de index.php.
Modifier la division navigation, entre les balises

de façon suivante:

Juste avant insérer la fonction:

Enregistrer le fichier sous /themes/montheme.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Vérifier l’affichage du bloc commentaire soit en cliquant sur le nombre de commentaires de l’article dans la page index, soit en cliquant sur le titre de l’article dans la page index pour en afficher le contenu. Remarquez aussi en bas de page, la navigation sur l’ article précédent et suivant.

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

Mon blog – Partie 9 – Créer son thème WordPress – Template Search

admin — Sun, 04 Dec 2011 17:58:49 +0000

Objet
La recherche des articles dans le blog en entrant un texte par le dispositif de recherche est réalisée en utilisant par défaut le template index. Comme pour le template archive, l’affichage doit être concis et présenter un bref extrait du début du contenu de l’article. Ceci est réalisé par la fonction the_excerpt() qui remplace avantageusement the_content().
Nous allons simplement copier le template archive.

Fichier search.php
Avec l’éditeur de texte ouvrir un nouveau fichier search.php. Copier dans ce fichier le contenu de archive.php.

Enregistrer le fichier sous /themes/montheme.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Pour vérifier l’utilisation du template, entrer un texte dans le champ de recherche, cliquer surle bouton chercher. Entrer un article assez long pour voir l’effet de la fonction the_excerpt().

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

Mon blog – Partie 8 – Créer son thème WordPress – Template Archive

admin — Sun, 04 Dec 2011 13:33:40 +0000

Objet
La recherche des articles dans le blog en filtrant les dates (archives), les catégories, les tags est effectuée en utilisant par défaut le template index. L’affichage doit être concis et présenter un bref extrait du début du contenu de l’article. Ceci est réalisé par la fonction the_excerpt() qui remplace avantageusement the_content(). Plusieurs solutions sont possibles:
- utiliser le template index et ajouter des instructions conditionnelles qui déterminent dans quel contexte on se trouve,
- utiliser le template archive qui est la copie du template index légèrement modifié.
Nous allons utiliser cette dernière solution.

Fichier archive.php
Avec l’éditeur de texte ouvrir un nouveau fichier archive.php. Copier dans ce fichier le contenu de index.php. Remplacer la fonction par .

Enregistrer le fichier sous /themes/montheme.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Vérifier l’utilisation du template en faisant une sélection sur la date, la catégorie ou le tag. Entrer un article assez long pour voir l’effet de la fonction the_excerpt().

Note:
En règle générale, en programmation, dupliquer du code identique n’est pas la bonne solution. Je le fais ici pour simplifier l’explication. Il est préférable de créer un fichier php qui permet d’inclure un morceau de code indentique ou une fonction qui sera utilisée dans les templates index, archive, single, search. La maintenance du programme s’en trouve facilité. En cas de modification, il suffit d’intervenir à un seul endroit.

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

Mon blog – Partie 7 – Créer son thème WordPress – Template Footer

admin — Sun, 04 Dec 2011 08:53:51 +0000

Objet
Ce template prend en charge l’affichage du pied de page. Vous pouvez y mettre ce que vous voulez. Dans mon journal que j’ai voulu volontairement sobre, j’ y ai mis sur une seule ligne les informations qui, à mon avis, me paraissent essentielles:
- le nom du blog,
- le SGC utilisé, ici WordPress,
- la version du SGC,
- l’ abonnement au blog (flux RSS),
- le titre du thème et sa version avec, éventuellement un lien pour son téléchargement,
- la référence aux thèmes que vous avez traduits ou utilisés (juste reconnaissance pour leurs auteurs).

Fichier footer.exe
Il contient les lignes suivantes:



    
    
    
    ©   |
    
    Propulsé par WordPress  |
    
    Articles (RSS) |
    Commentaires (RSS) |
    
    Thème  1.1
    
    adapté entre autres de
    Mimbo
    et
    GimpStyle

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .