F8EOZ » WordPress

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 6 – Créer son thème WordPress – Template Sidebar

admin — Fri, 02 Dec 2011 11:10:53 +0000

Objet
Ce template prend en charge l’affichage du sidebar.
Sidebar statique ou dynamique?
Le sidebar dynamique permet d’ajouter des widgets. Dans notre cas c’est peu utile puisque nous en maîtrisons la programmation. Il est possible d’en ajouter ou d’en retirer en modifiant le sidebar.php . Cependant si vous souhaitez diffuser votre thème cela offre à son utilisateur potentiel une possibilité d’adaptation qu’il ne faut pas négliger.

Structure du Sidebar statique
Un sidebar est composé de blocs: calendrier, pages, tags, etc.., affichés en colonne les uns à la suite des autres. Chaque bloc comporte un titre suivi d’une liste d’éléments. Pour obtenir un simple sidebar insérer dans sidebard.php entre les ligne

les lignes suivantes:

Pour habiller les titres et les éléments de la liste insérer à la fin de style.css les lignes suivantes:

/* SIDEBAR */

#sidebar h2 {
margin:1em 0 0 0; /* espace en haut de chaque chaque tête de chapitre */
padding:0 0 0.3em 0; /* esace entre la tête de chapitre et la 1ère ligne de la liste */
font-weight:normal;
font-size:1.4em;
font-family: Arial;
}

#sidebar ul {
margin: 0 0 0 2em; /* marge de liste générale */
padding:0 0 0 0;
list-style: none; /*enlève les bullets de la liste */
font-size: 1.0em; /* très important pour garder la même taille: taille des caractères X 1 */
}

#sidebar li ul, #sidebar ul li { /* s'applique à toutes les sous-listes */
margin: 0 0 0 0; /* 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 */
}

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le sidebar s’affiche sur fond blanc. Regarder aussi l’imbrication des balises

. Pour ce faire, clic droit sur la page affichée, sélectionner afficher le code source de la page.

Sidebar variable
Il est possible de faire varier le contenu du sidebar en fonction du contexte dans lequel on se trouve. Le sidebar devient aussi dynamique mais sans action de l’utilisateur, uniquement par la programmation. Par exemple, pour afficher uniquement sur la page d’accueil ou une autre page, la liste des liens du blogroll et méta insérer dans sidebar.php juste avant

les lignes suivantes:



    
        
            ', '', ' - '); ?>
        
    


    
        
            
            
            Valid XHTML
            XFN
            WP

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Vérifier que le sidebar affiche les blocs que nous venons d’ajouter. Cliquer maintenant sur un Post, les blocs ont disparu du sidebar.

Personnalisation du sidebar
Il est possible d’ajouter des bouts de code et des fonctions. Par exemple, une fonction qui affiche les n commentaires les plus récents. Cette fonction existe probablement quelque part mais je l’ai programmé pour le « fun ». Dans sidebar.php sous le bloc des catégories, par exemple, insérer les lignes suivantes :


    
        comment_post_ID); ?>
            comment_author); ?>
                -post_title) ?>

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Vérifier l’affichage du commentaire et de son émetteur. A ce stade de la programmation il n’est pas encore possible d’écrire un commentaire mais il devrait y avoir au moins le commentaire Hello world! de WordPress.

Sidebar dynamique
Pour rendre dynamique le contenu de sidebar il faut:
- ajouter la fonction register_sidebar() dans le fichier functions.php ,
- ajouter une instruction conditionnelle dans sidebar.php .

Le fichier functions.php est chargé automatiquement par WordPress lorsqu’il est présent à la racine du thème. La fonction register_sidebar(), permet d’indiquer les balises dans lesquelles seront emboîtées les Widgets activés. Vous pourrez ensuite les habiller avec le style de votre choix dans style.css. Avec votre éditeur, créer un nouveau fichier functions.php (attention à l’écrire avec la bonne orthographe, sinon il ne sera pas pris en compte et votre sidebar restera statique!). Insérer les lignes suivantes:

if (function_exists('register_sidebar') )
// est utilisé quand on ajoute un widget
    register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => '',
        )
    ); // ici tous les paramètres ont la valeur par défaut

Enregistrer ce fichier sous /montheme.

Tous les blocs du sidebar statique seront emboités dans l’ instruction conditionnelle suivante :
- si les Widgets sont activés ET si la fonction PHP dynamic_sidebar() , les Widgets sélectionnés dans l’interface d’administration du site seront affichés,
-sinon, les blocs du sidebar statique seront affichés.
Pour faire cela, sidebar.php sera modifié ainsi:


    
        
            Le code du sidebar statique

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Dans la barre d’administration, choisir Apparance Widgets, ajouter un Widget dans le sidebar. Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran. Le Widget a remplacé le sidebar statique.

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

Traduction
Noter qu’il est facile de franciser le sidebar. Les titres sont affichés par la fonction_e() qui permet le texte de votre choix.

Mon blog – Partie 5 – Créer son thème WordPress – Template Index

admin — Thu, 01 Dec 2011 11:06:41 +0000

Objet
Dans la partie 4 nous avons vu que le template index.php était le fichier nécessaire et suffisant (avec style.css) pour faire fonctionner notre thème. Il vaut bien un chapitre!

Que doit-il faire?

Il est chargé de présenter les Posts, titre et contenu, dans la page Web. Problème classique de la programmation, nous ne savons s’il y a des Posts, ni combien il y en a. S’il n’y a pas de Posts, il est intéressant de le signaler par un message. S’il y a des Posts, il faut éviter la saturation et en limiter le nombre par page Web tout en ayant un moyen d’en balayer l’ensemble. D’autre part, nous ne souhaitons pas encombrer notre page avec des Posts trop longs, il faut un moyen d’en présenter le début avec un lien pour en lire la suite.
Tout cela est réalisé simplement dans WordPress par une instruction conditionnelle, une boucle while un index et quelques fonctions.

Nous allons programmer cela pas à pas.

L’instruction conditionnelle
Dans index.php, entre la balise

insérer le code PHP suivant:

1er cas il y a des posts – la boucle while
Dans cette boucle il faut un index qui nous placera sur le Post suivant de l’ensemble des Posts de la sélection et qui est incrémenté à chaque boucle. Ceci est réalisé par la fonction the_post(). Entre la ligne if et else de l’instruction précédente placer le code PHP suivant:

Le plus difficile est fait! nous pouvons afficher maintenant le Post, son titre, ses méta-données. Pour habiller le Post nous allons l’insérer dans une balise

muni d’une classe post. La propriété id de la balise

est rendu unique par la fonction the_ID() . Nous allons d’abord afficher le titre du Post. Il est placé dans une balise et habillé d’une balise de titre

muni de la classe posttitle. Insérer dans index.php après la ligne the_post() les lignes suivantes:

Insérer dans style.css les lignes suivantes:

#post { float: left; margin: 0 0 0 0; padding: 0 0 0 0; } .posttitle { font-weight:normal; font-size:1.9em; padding: 0 0 0 0; margin: 1em 0 0 0; font-family: Arial; } .posttitle a, .posttitle a:link, .posttitle a:visited { color:#333; /* noir ;/ } .posttitle a:hover, .posttitle a:active { color: #C51500; / rouge /

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le titre de chaque Post* est affiché sur fond blanc. La colonne de gauche commence à se dessiner. Ce n’est pas encore parfait. Ne vous inquiétez pas on avance. La fonction the_permalink() a récupéré l’URL du Post pour la placer dans la balise de son titre. Regarder aussi la balise
du Post et son id. Pour ce faire, clic droit sur la page affichée, sélectionner afficher le code source de la page.

Nous allons achever la boucle while en y plaçant sous le titre, la date et le l’heure, le contenu du Post, les catégories et les tags. Nous allons aussi prévoir la possibilité de modifier le Post (uniquement pour l’dministrateur). Sous la balise

qui termine l’habillage du titre insérer les lignes suivantes:



      



    


    
        
        
    Catégories: 
    | 
    |

Insérer en fin de style.css les lignes suivantes:

.postmetadata {
font-size:1.1em;
text-align:left;
font-style:italic;
}

.postcontent, .postcontent p{
font-size:1.15em;
padding: 0 1.5em 0.2em 0;
margin: 1.5em 0 0.5em 0;
}

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le Post est affiché sur fond blanc. La fonction the_time() affiche la date et l’heure. La fonction the_content() affiche le contenu et gère le tag More qui limite le nombre de lignes affichées. La fonction the_tags() affiche les tags et établit un lien vers ceux-ci. La fonction the_category() affiche les catégories et établit un lien vers celles-ci. La fonction comments_popup_link() affiche le nombre de commentaires et établit un lien vers ceux-ci. La fonction edit_post_link() établit un lien pour modifier le Post.

Traduction
Noter que ces dernière fonctions sont munies de textes paramétrables que vous pouvez ainsi franciser facilement.

Navigation
Il faut maintenant gérer la navigation page précédente, page suivante. Sous la ligne endwhile insérer les lignes suivantes:

Insérer en fin de style.css les lignes suivantes:

.navigation {
margin: 1em 0 0 0;
font-size:1.1em;
}

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

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

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran. Vous ne pouvez constater l’effet de cet ajout que si vous avez un nombre de Posts qui dépasse le nombre définis dans les réglages de lecture. Vous pouvez, le temps du test, modifier ce réglage et le rétablir ensuite à sa valeur par défaut.

Traduction
Noter que les fonctions previous_posts_link() et next_posts_link() sont munies de textes paramétrables que vous pouvez ainsi franciser facilement.

2ème cas il n’y a pas de Posts
Nous terminons ici l’autre branche de l’instruction conditionnelle. Inserer après la ligne else du fichier index.php les lignes suivantes:

Enregistrer.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran. Pour constater l’effet de cet ajout, entrer dans le champ de recherche situé dans l’en-tête, un critère de recherche qui n’existe pas, cliquer sur le bouton chercher.

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

Traduction
Noter que la fonction_e() permet le texte de votre choix.

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

admin — Tue, 29 Nov 2011 14:57:10 +0000

Définition
Un thème WordPress est un ensemble de fichiers modèles appelés template qui produit la page Web. Il donne une présentation graphique à vos données. Le thème permet aussi d’associer des fonctions qui faciliteront l’accès aux données. Il est l’interface graphique entre l’utilisateur et vos données. Ces fichiers sont liés entre-eux par un lien hiérarchique. S’il y a un schéma à retenir, il est ici .

Au minimum, un thème comprend 2 fichiers: style.css, index.php. Tout autre fichier peut être ajouté mais pour répartir la programmation et faciliter la maintenance du thème il est d’usage d’inclure les fichiers: comments.php, footer.php, header.php, sidebar.php .

Pourquoi créer son propre thème WordPress ?
Il existe des centaines de thèmes, et de très bonne qualité. La documentation de WordPress est si luxuriante qu’on ne sait par quel bout l’aborder. On craint d’y passer du temps, mais finalement… pas tant que cela.

J’ai créé mon thème pour les raisons suivantes:
- j’aime comprendre et maîtriser ce que j’utilise,
- je veux savoir comment les concepteurs ont construit ce bel outil,
- je veux un blog en français qui correspond exactement à mon souhait.

C’est un travail complet de recherche, d’analyse et de synthèse très enrichissant qui vous permet de manipuler HTML, PHP, CSS.

Cahier des charges
- Un blog minimaliste mais complet.
- Un simple journal de bord, comme un cahier.
- La page comprend un en-tête, une barre de navigation, 2 colonnes, la colonne de gauche pour les articles, celle de droite pour la recherche, les archives, tags, catégories, etc…

Méthode de travail
Elle est fondée essentiellement sur l’expérimentation. Pour comprendre la logique de WordPress et construire mon thème, j’ai sélectionné et analysé quelques thèmes simples. Je vous livre simplement le résultat de cette expérience. Si vous voulez bien me suivre au cours de cette série d’articles, nous allons procéder de la même façon avec mon propre thème en le reconstruisant progressivement ensemble, de façon logique. A chaque étape, nous allons visualiser le résultat.

TRace ON !
Votre serveur Apache est actif. Votre serveur MySql aussi. Entrons maintenant dans WordPress.

Aller sous xampp/htdocs/wordpress/wp-content/themes et créer le répertoire montheme.
Avec un éditeur de texte comme Notepad++ créer les templates vides pour l’instant: index.php, header.php .
Créer de la même façon la feuille de style vide style.css .
Enregistrer ces fichiers sous le répertoire montheme .

Avec le navigateur, se connecter à http://localhost/wordpress/.
Sur la page Gérer les thèmes du tableau de bord vous trouvez dans les thèmes disponibles votre nouveau thème vide intitulé montheme by anyone. Il vous indique aussi que le thème se trouve sur /themes/montheme .

Nous allons compléter la description du thème.
Avec l’éditeur de texte ouvrir style.css et insérer les lignes de commentaire suivantes:

/*
Theme Name: MonTheme
Theme URI: http://moi.free.fr
Description: Un thème simple. Deux colonnes. Sidebar a droite qui supporte les widgets. Tags et gravatars. Valid XHTML and CSS.
Version: 1.0
Author: moi
Author URI: http://moi.free.fr
*/

Enregistrer.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
La description du thème apparaît maintenant.
Pour voir l’image associée au thème, il suffirait de placer sous le répertoire /themes/montheme une image au format 300×225 appelée screenshot.png .

Nous allons créer maintenant notre première page Web. Notre blog est une page blanche posée sur un fond gris. Nous allons d’abord peindre le fond. Une page comprend au minimum les balises . Il faut aussi lui donner un titre avec la balise , indiquer où trouver la feuille de style avec une balise , indiquer le lien vers le flux RSS, indiquer le lien vers XML-RPC pour traiter les pingbacks . Attention à bien coder les balises et . Elles sont trop souvent recopiées d’une page à l’autre sans se préoccuper de leur contenu. Bien coder ces balises, assure un fonctionnement correct des navigateurs. Depuis HTML 5, la balise a été simplifiée. Depuis le 26 janvier 2000, XHTML est la nouvelle norme du W3C en matière de langage balisé pour concevoir des documents Web. Le document doit respecter les normes de validation d’une des trois DTD XHTML : strict, transitional ou frameset. La DTD stricte n’autorise plus l’utilisation de certains anciens éléments de présentation mais elle a l’avantage de contraindre le développeur à séparer structure et présentation, avec les facilités de maintenance que cela apporte.

Avec l’éditeur de texte insérer les balises dans le fichier header.php :


>
    
        <?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?>

Insérer les lignes dans le fichier index.php :

Pour peindre le fond en gris nous donnons des attributs graphiques à la balise body. Nous fixons aussi la police de caractères et sa taille. Nous insérons ces lignes à la suite des commentaires dans style.css :

/* ============ STRUCTURE GENERALE DE LA PAGE =================== */
/*  balise qui enveloppe l’ensemble du thème. Les attributs de la balise  seront utilisés
tant que vous ne changerez rien à un niveau plus fin du thème. Peint tout le fond d'écran en gris */
body {
margin:1em 0 1em 0; /* espace entre les éléments HTML (haut, droite, bas, gauche) */
background: #3c3c3c; /* couleur du fond de l'écran gris foncé (hexadecimal) */
font-family: Verdana, Lucida Grande, Arial, Sans-Serif;
font-size: 62.5%; /* Fixe la taille des caractères de la page HTML */
color: #545454; /* couleur du texte gris foncé (hexadecimal) */
padding: 0 0 0 0; /*bords gris: distance entre le bord d'un élément HTML et son contenu (haut, droite, bas, gauche) */
min-height:100%; /*hauteur minimale sur une balise de type bloc. */
}

Enregistrer tous les fichiers.
Sur la page Gérer les thèmes du tableau de bord activer le thème montheme.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran. Avec le navigateur, se connecter à http://localhost/wordpress/. Une page grise s’affiche.

Le titre est rendu variable par la fonction is_single() qui y ajoute un texte supplémentaire ainsi que le titre de la page wp_title(). Vous pouvez en voir l’effet simplement sur l’onglet FireFox de la page affichée ou en glissant la souris dessus. Pour l’instant vous ne voyez que le nom du blog. La fonction bloginfo() récupère l’URL de la feuille de style. Quand le fichier index.php est exécuté la fonction get_header() réunit ces 2 parties pour former la page Web. Pour vous en convaincre, clic droit sur la page grise affichée, sélectionner afficher le code source de la page.

Nous allons maintenant placer notre page blanche sur ce fond et la structurer: un en-tête, deux colonnes, un bas de page. Nous allons aussi y placer en titre le nom du blog. La balise

va structurer notre page comme cela:

de la page, qui contient

du header,

de l’article à gauche,

du sidebar à droite. Une classe va habiller le titre. D’autre part, vous avez remarqué que la barre d’administration du blog en haut de page est absente. Nous allons aussi l’ajouter tout de suite pour notre confort avec la fonction wp_head() dans le header.php et wp_footer() dans le footer.php.

Avec l’éditeur de texte ouvrir header.php et juste au-dessus de la balise insérer les lignes suivantes:

Toujours dans header.php et sous la balise insérer les lignes suivantes:

Avec l’éditeur de texte ouvrir index.php et entre la ligne get_header() et la balise insérer les lignes suivantes:

Avec l’éditeur de texte ouvrir un nouveau fichier sidebar.php et insérer les lignes suivantes:

Avec l’éditeur de texte ouvrir un nouveau fichier footer.php et insérer les lignes suivantes:

Nous allons définir pour chaque division, sa disposition à droite ou à gauche, la couleur de fond, les marges – la taille générale des titres

à

– l’apparence générale de la balise – le style de la classe bloginfoname et de sa balise . Nous insérons ces lignes à la fin du fichier style.css :

/* dessine une page blanche centrée sur le fond gris entourée de marges grises */
#page {
margin:0 auto; /* marge droite s'adapte à la largeur disponible pour centrer le blog au milieu de la page web.*/
width: 92%;
background-color:#FFF; /* fond blanc */
/*background-color: yellow;*/ /* fond jaune pour test */
padding: 0 1.8em 0 1.8em; /* marges haut, droite, bas, gauche de toute la page*/
display:block;
}

#header {
margin: 0 0 0 0;
padding: 0 0 0 0;
background:#FFF; /* fond blanc */
/*background:green;*/ /* pour test */
}

#content {
width:75%;
float:left;
margin: 0 0 0 0;
padding: 0 0 0 0;
background:#FFF; /* fond blanc */
/* background-color: maroon;*/ /* pour test */
}

#sidebar {
float:right;
width:25%;
margin: 0 0 0 0;
padding: 0 0 0 0;
/*background-color:LightSteelBlue;*/ /* pour test */
background:#FFF; /* fond blanc */
}

#footer {
margin:0 0 0 0;
padding:0 0 0 0;
text-align:center;
font-size:1em;
color:white;
clear:both; /* force le footer sous content et sidebar */
}

/* ============ STYLE GENERAL =================== */

/* FONT-SIZE */
h1 {font-size:2.6em;}
h2 {font-size:2em;}
h3 {font-size:1.6em;}
h4 {font-size:1.2em;}
h5 {font-size:1em;}
h6 {font-size:0.8em;}

/* LIENS */
a, a:link, a:visited{
color:#258; /* bleu */
text-decoration:none;
}

a:hover, a:active {
color: #C51500; /* rouge */
/* text-decoration:underline;*/
}

/* ============ STYLE PARTICULIER =================== */

/* BLOGINFO NAME */

.bloginfoname {
float:left;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size:3em;
margin: 0.5em 0 0;
padding: 0 0 0 0;
}

.bloginfoname a, .bloginfoname a:link, .bloginfoname a:visited {
color: #7da939; /* vert */
text-decoration:none; /* ne pas souligner*/
}

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le nom du blog apparaît maintenant en titre sur fond blanc (pour l’instant seul le nom est sur fond blanc, le reste est gris). La fonction get_sidebar() du fichier index.php a uni le fichier sidebar.php au reste de la page Web. Pour vous en convaincre, clic droit sur la page affichée, sélectionner afficher le code source de la page.

Nous allons achever le header en y plaçant la description du blog, le dispositif de recherche, une barre de navigation pour afficher les pages. La classe bloginfodesc va habiller la description, la classe search le dispositif de recherche, la barre de navigation sera incluse dans une balise

Avec l’éditeur de texte ouvrir header.php et entre la balise

et la balise

insérer les lignes suivantes:



    
    
    
        Accueil

Avec l’éditeur de texte ouvrir un nouveau fichier searchform.php et insérer les lignes suivantes:

Nous allons définir le style de la classe bloginfodesc – de la classe search – des balises

de la barre de navigation. Nous insérons ces lignes à la fin du fichier style.css :

.bloginfodesc {
float:left;
font-size: 1.2em;
font-weight: bold;
font-style:italic;
color:#545454; /* couleur gris */
margin: 0 0 1.5em 0;
padding: 0 0 0 0;
}

.search { /* le bloc de recherche est placé en bas à droite du header */
float:right;
padding:0 2em 0 0; /* marge haut dans le header */

}

/* BARRE DE NAVIGATION gris foncé qui contient la liste des pages du thème */

#barredenavig {
background:#777; /* gris foncé */
font-size:1.1em;
clear:both; /* force la barre de navigation sous la  précédente */
float:left;
/*display:inline-block;*/
width: 100%; /* la barre occupe toute la largeur du header moins la marge et le padding du header */
}

#barredenavig ul {
margin: 0 0 0 0; /* marge de liste générale */
padding:0 0 0 0;
list-style: none; /*enlève les bullets de la liste */
font-size: 1.0em; /* très important pour garder la même taille: taille des caractères X 1 */
}

#barredenavig li { /* place chaque élément du menu à gauche, l'un après l'autre séparé par un léger trait de bordure */
float: left;
list-style:none;
border-right:1px solid #a9a9a9; /* bordure gris souris plus clair que le fond de la barre*/
}

/* Les éléments de la barre de navigation sont un lien placés dans la balise  dont les propriétés
sont changées pour la barre de navigation */
#barredenavig a, #barredenavig a:link #barredenavig a:visited {
display: block; /* l'espace forme un bloc qui tient compte des marges et du padding */
font-weight:bold;
color: #f5f5f4; /* blanc */
padding:6px 12px; /* élargit la barre, allume tout l'espace de l'élément de la barre */
}

#barredenavig a:hover, #barredenavig a:active {
background:#000; /* couleur noir */
}

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le header apparaît maintenant complet en titre sur fond blanc (pour l’instant seul le header est sur fond blanc, le reste est gris). La fonction wp_list_pages() du header retourne la liste des pages. Chaque titre de page est inclus dans une balise elle même incluse dans une balise

. C’est pour rester cohérent avec HTML que la page d’accueil est aussi placée dans une balise
et que l’ensemble de la liste est placé dans une balise

Mon blog – Partie 3 – Installation de WordPress sur serveur local

admin — Mon, 28 Nov 2011 14:48:28 +0000

L’installation de WordPress en local est très simple. Elle ne prend que quelques minutes.

1- Vérifier les prérequis système PHP et Mysql ici .
2- Télécharger WordPress ici .
3- Décompresser le fichier zip.
4- Copier le répertoire wordpress dans le répertoire xampp/htdocs .

5- Si ce n’est déjà fait, activer les serveurs Apache et MySql. Pour ce faire, sous le répertoire xampp, cliquer sur xampp-control.exe. A la ligne Apache, cliquer sur le bouton Start, à la ligne MySql cliquer sur le bouton Start .

6- Avec votre navigateur, aller sur http://localhost/wordpress. Le message suivant s’affiche:
There doesn’t seem to be a wp-config.php file. I need this before we can get started. Need more help? We got it. You can create a wp-config.php file through a web interface, but this doesn’t work for all server setups. The safest way is to manually create the file.
7- Cliquer sur Create a Configuration File.
8- Suivre les instructions jusqu’à la page de configuration de la base de données.
9- Entrer:

Database Name : wordpress //nom de la base MySQL créée
User Name : root //identifiant MySQL
Password :       //mot de passe vide (1)
Database Host : localhost
Table prefix : wp_

Remarque (1): si vous avez créé un mot de passe lors de la création de votre base de données entrer le ici. Sinon laisser vide.
10- Si tout se passe bien vous obtenez le message:
All right sparky! You’ve made it through this part of the installation. WordPress can now communicate with your database. If you are ready, time now to…
11- cliquer sur Run the install.
12- Terminer l’installation et noter précieusement le mot de passe d’administration de WordPress que vous avez choisi.
13- Si la configuration de la base de données ne fonctionne via le navigateur, aller dans le répertoire /htdocs/wordpress. Copier wp-config-sample.php et coller dans le même répertoire pour en obtenir une copie. Renommer cette copie en wp-config.php. Ouvrir avec un éditeur de texte le fichier wp-config-.php . Modifier ces lignes :

define('DB_NAME', 'wordpress'); //nom de la base MySQL créée
define('DB_USER', 'root'); //identifiant MySQL
define('DB_PASSWORD', ''); //mot de passe vide (1)
define('DB_HOST', 'localhost');

Enregistrer le fichier modifié.

Voilà, WordPress installé avec un thème par défaut.

Mon blog – Partie 2 – Environnement de développement et de qualification

admin — Mon, 28 Nov 2011 11:35:17 +0000

Avertissement
Si vous voulez construire vous-même votre thème, si vous voulez tester plusieurs thèmes WordPress avant de démarrer votre blog, si vous voulez tester une nouvelle version de WordPress, cette partie vous concerne. Sinon installer directement WordPress chez votre hébergeur.

Un peu d’organisation
En informatique, durant le cycle de vie d’une application on utilise plusieurs environnements dans l’ordre chronologique:
- l’environnement de développement, sur lequel sont développés les programmes de l’application,
- l’environnement de qualification, sur lequel sont testés les programmes de l’application,
- l’environnement de formation, sur lequel les utilisateurs sont formés à l’application,
- l’environnement de production, sur lequel sont exécutés les programmes opérationnels.

Nous nous limiterons à:
- l’environnement de production,
- l’environnement de développement et de qualification.

L’environnement de production sera situé chez notre hébergeur. Il est stable.

L’environnement de développement et de qualification, sera situé sur notre serveur local. Il permet de:
- corriger les éventuels bugs de la version de production actuelle,
- mettre au point la future version sans perturber l’environnement de production.

Création de l’environnement local de développement et de qualification.

1- Télécharger Xampp pour Windows ici (il y a une version pour chaque système d’exploitation).
2- Suivre la procédure d’installation (très rapide durée 1mn).
3- Avec votre navigateur, aller sur http://localhost. La page XAMPP s’affiche.

4- Dans la colonne de gauche, choisir phpinfo pour connaître la version PHP. Il est important de la connaître pour utiliser WordPress.
5- Toujours dans la page XAMPP, dans la colonne de gauche, choisir phpMyAdmin pour administrer les bases de données MySql. La page phpMyAdmin s’affiche.

6- Remarquer dans la colonne de droite, la version MySql. Il est important de la connaître pour utiliser WordPress.
7- Dans phpMyAdmin, cliquer en haut sur Base de données.
8- Dans le champ, créer une base de données, entrer le nom de la base de données, j’ai choisi wordpress , laisser interclassement et cliquer sur le bouton créer. La nouvelle base de données apparait maintenant dans la colonne de gauche. Cliquer dessus, la base est vide pour l’instant.

Voilà, l’environnement local est prêt à recevoir WordPress.

Attention
Un conflit peut se produire si skype est actif et empêcher le serveur Apache de se lancer. Dans ce cas quitter skype.

Mon blog – Partie 1 – Choix des outils

admin — Sun, 27 Nov 2011 10:36:39 +0000

Commençons par le début!
J’entame une série d’articles sur la genèse de ce blog, de sa conception jusqu’à sa réalisation.

Quelle solution?
Cahier des charges:
- utiliser un système de gestion de contenu SGC ou CMS,
- utiliser les ressources libre du net (open source),
- utiliser un hébergement simple et gratuit,
- rester maître de la conception du blog,
- rester indépendant de l‘hébergeur,
- pouvoir tester et mettre au point le blog sur un serveur local.

Un petit tour sur internet avec Firefox, mon navigateur préféré, pour examiner ce qui pourrait correspondre le mieux à ce que je recherche.

Mon choix est fait:
- SGC: WordPress,
- hébergeur: Free,
- en local: Xampp , application qui regroupe un serveur web Apache, serveur de base de données MySql, un serveur FTP et PHP , une interface d’administration phpMyAdmin.