Bienvenue

Bienvenue sur le blog WordPress CMS, blog consacré exclusivement à WordPress. WordPress est un C.M.S (Content Management Systems) open source. On peut lire sur le site Web http://fr.wordpress.org/

WordPress est le nec plus ultra des plates-formes sémantiques de publication personnelle

Il permet après  installation, d’avoir un site Web professionnel, modifiable en quelques clics via un interface privé (Mode administrateur), il fonctionne grace au couple PHP (langage de programmation) / MySQL (base de données).

Ce C.M.S est de type Weblog, vous pouvez écrire des articles (billets) via un éditeur assez facile à prendre en main. A ce jour WordPress est en version 2.x.

ScreenCast: Decouverte de WordPress Screencast Video

Découverte de WordPress

Exemple de Weblog sous WORDPRESS

Voici un exemple de Webblog sous WordPress, je vais illustrer les cours via mon blog personnel

Pour information:

Je suis (pour l’instant) en version 2.8 de WordPress, les versions sont régulierement mises à jour, j’utilise comme thème pour mon blog personnel, Magazine Basic, ce thème permet une disposition en une deux ou trois colonnes. Il permet également l’utilisation de widgets. Voici ci-dessous un exemple d’interface public. (Source du blog officiel)

Pour cette première approche j’ai volontairement utilisé un vocabulaire dédié aux C.M.S

Petite visite guidée

Voici une petite visite guidée en images, elle a pour but de vous présenter la différence entre interface public et interface privé, de vous donner le vocabulaire qu’il faut employer, de vous faire comprendre certains mots de vocabulaire

Interface public; Interface privé; racine d’un site Web

Voici ce qu’est l’interface public de WordPress, c’est la racine de votre Weblog, tout le monde peut y accéder

L'interface public de WordPress

L’interface public correspond à l’url racine de votre site Web, chez free par exemple la racine de votre site est sous la forme http://login.free.fr

Pour accéder à votre interface privé, c’est à dire l’interface qui va vous permettre d’administrer votre Weblog, il faut passer par la page login, on y accède via un lien “Log in” ou “administration du site” (cela dépend du thème, de l’habillage de votre Weblog). Si vous ne trouvez pas le lien pas de soucis il suffit de taper apres la racine de votre site /wp-login.php

La page d'accès à votre interface privé passe par le login administrateur

Comme l’indique la capture d’écran, il vous suffit de mettre votre login et votre mot de passe (Pas celui de chez Free, rien à voir) que vous avez indiquez lors de l’installation.

Après vous êtes “logué”, vous allez pouvoir accéder à l’interface privé, qui va vous permetre d’administrer votre WordPress.

L'interface d'administration de votre WordPress

Etape 1: Ouverture d’un compte Free

Voici comment procéder à l’installation de WordPress sur un hébergeur Web. Pour cet exemple nous allons voir comment paramétrer le compte Free pour accueillir notre C.M.S préféré.

Avant de commencer voici la liste de ce que vous devez avoir pour l’installation du C.M.S WordPress:

• WordPress dans un dossier non zippé dans votre ordinateur
• Un compte Web
• Un logiciel de transfert de fichier (Filezilla)

Première Etape: Ouverture d’un compte Web gratuit chez Free.fr

Free.fr

Accès Gratuit

formulaire (à droite)

Remplir le formulaire

Étape 4: Choix du login et Url du site

Choix du login

Demande des informations

Verification

Les informations de configuration de chez Free

Après une dizaine de jours (15 jours environ), vous allez recevoir par voie postale un courrier du fournisseur d’accès Free. Ce courrier contient vos identifiant qui vont permettre d’ouvrir votre espace personnel sur Internet. Cette lettre contient:

• Votre login
• Votre mot de passe (A ne pas changer sous peine de grande galère)…

Elle contient également d’autres informations générales (Compte Pop, DNS…)

Etape 2: Validation du compte Free

Le facteur est passé vous avez enfin reçu vos informations de connexion! Youpiiii!!! (si au bout d’une quizaine de jours vous n’avez toujours rien reçu… recommencer les opérations de l’étape 1)

Voici pas à pas les différentes étapes ( trois au total) à suivre:

Vous rendre sur le site officiel de free

Munissez vous de vos identifiants (lettre). Vous rendre sur le site de Free http://portail.free.fr/ Cliquez sur Mon compte, attention le site de Free change assez souvent graphiquement parlant il se peut que “Mon compte” bouge de place…

Lorsque vous serez connecté à votre compte chercher la rubrique Gestion de vos pages perso, et choisissez Activer votre compte pour les pages personnelles.

Gestion de vos pages perso

Dernière étape: Activation des pages perso et de la base de donnée MySQL

Etape 3: Télécharger Filezilla

Logo Filezilla

Maintenant que votre compte est ouvert sur Free, nous allons maintenant télécharger le logiciel open source de transfert de fichiers: Filezilla. Voici les étapes qui vont vous guider pas à pas dans cette étape. Attention il faut télécharger Filezilla client et non Filezilla server

Première étape: localiser le site officiel à l’aide de Google

Fig. 1

Dans la case de recherche (Fig.1) tapez le mot clé Filezilla, Google va alors vous retourner la page des résultats

Fig. 2

Il faut toujours télécharger à partir du site officiel, ceci afin d’éviter le téléchargement d’une version antérieure. Cliquez sur Download Filezilla Client

Il ne vous reste plus qu’à choisir la version de votre système d’exploitation

Choisir la version de votre O.S

Fenêtre de téléchargement pour Mac OS X

L'archive en .zip

Après l’installation vous pouvez lancer Filezilla pour voir l’interface du logiciel, nous parlerons de la configuration FTP dans un autre article. Patience…

Interface Graphique

Etape 4: Téléchargement du C.M.S

Comme je vous l’ai dit nous allons pour commencer travailler avec un C.M.S (avant de se lancer dans d’autres installations…). Lancer votre navigateur préféré Internet Explorer Firefox. Rendez-vous à l’adresse suivante. Vous devriez donc voir ceci:

Télécharger la version française

Il ne vous reste plus qu’à télécharger la version française en cliquant sur “Télécharger WordPress 2.8″

Cliquez sur "Télécharger WordPress 2.8"

Attention cliquez bien sur le bouton pour le format zip, le lien en dessous donne le format tar.gz, voici un exemple d’utilité de 7zip (open source) qui ouvre tous les formats par rapport à Winzip (privatif).

Dé-zipper l'archive sur votre bureau

A partir de cette étape enregistrer l’archive sur votre Bureau et décompresser là sur votre Bureau également. Vous devriez avoir un dossier WordPress sur votre Bureau.

PS: Sur ce site vous avez la possibilité de télécharger des anciennes version de WordPress mais aussi des versions expérimentales (versions Alpha, bêta, Release Canditate “RC”). C’est ce que l’on appelle les phases de développement:

Phases de développement

Voici une partie de l’historique du développement des versions de WordPress, observez la rapidité de développement le 26 juin 2009 la version 2.8.1 Beta 2 (Respect…)

2.3 Beta 1 Août 2007

2.3 Beta 2 04 Septembre 2007

2.3 25 septembre 2007

2.3.3 Version avec maj de sécurité Février 2008

2.5 Mars 2008

2.6.5 Novembre 2008 Maj sécurité

2.7 Release Candidate 1 , 1er Décembre 2008

2.7 Release Candidate 2, 10 Décembre 2008

2.7 Coltrane, 11 Décembre 2008

……..

2.8.1 Beta 1, 21 Juin 2009

Présentation de WordPress 2.8

2.8-baker-web

►

Etape 5: Zoom sur le dossier WordPress

WordPress

Vous voici maintenant en possession d’un dossiers zippé que vous pouvez supprimer puisque dans l’étape 4, je vous ai demandé de le dé-zipper Nous allons un peu regarder ce qu’il y a dans le dossier WordPress. Encore un peu de patience vous allez bientôt pouvoir envoyer le dossier ou les fichiers (précision importante) sur votre hébergement Web (Free en l’occurence).

Voici donc le dossier wordpress en question:

Le dossier Dé-zippé

Analysons un peu son contenu:

Vous pouvez voir que le dossier principal de wordpress  contient des fichiers et des sous-dossiers:

Contenu du dossier principal

Jusque là vous devez me suivre , les fichiers portent tous l’extension .php sauf deux :

Un fichier .html et un fichier .txt

Je n’ai pas besoin de vous dire que personnes n’ouvrent ces deux fichiers mais ils sont pourtant très importants!!

Commençons par readme.html, en cliquant dessus il devrait s’ouvrir avec votre navigateur par defaut c’est à dire Firefox.

Ce fichier contient une foule d’informations dont voici les pricipaux extraits:

Le préambule

Le Préambule est peut-être la seule lecture à faire pour commencer dans WordPress, nous apprenons le nom de l’auteur qui a rédigé ce préambule et qui est le créateur de WordPress: Matt Mullenweg (vous vous conseille de regarder son Weblog sous WordPress (heureusement lol) à cette adresse, Petit détail rigolo regarder le .ico dans l’url de son blog cela ne vous rappelle rien ?

Retourner l'écran de votre ordinateur pour voir la solution...

Je reviens encore sur le préambule sur une portion plus précisément:

Nous avons passé des milliers d’heures sur le développement WordPress, et nous nous attachons tous les jours à vous faciliter la vie.

Juste pour dire: Respect, respect à matt, au développeurs, aux traducteurs, à tous ceux qui utilisent WordPress, c’est aussi pour cela que j’ai du mal à comprendre quelqu’un qui me dirait “Pfff c’est nul WordPress, je comprends rien, ….” voila ça c’est fait.

On ne se lance pas dans les C.M.S comme on passe chez Mac-Do, Flunch, Quick, comme on boit un café ! D’abord il faut se documenter sur les C.M.S, connaître leurs noms, leurs points forts, faibles, les tester, et enfin se stabiliser sur un choix

Voici une interwiew sous-titrée en français pour mieux comprendre le “phénomène”

L’équipe de WordPress ne s’arrentent pas à la création d’un C.M.S, je me demande d’ailleurs quand ils dorment… Leurs projets vont bien plus loin encore:

bbPress (un logiciel de forum)

Akismet (ou Automattic Kismet) est un système permettant de lutter contre le spam dans les commentaires des billets de WordPress. Plugin commercial non libre mais une autorisation gratuite pour les Weblog personnel.

WordPress MU

WordPress Mu, ou Multi Utilisateurs, est un logiciel conçu par Automattic et la communauté WordPress. Il propose aux utilisateurs une version de WordPress capable de gérer des centaines voire des milliers de blogs sur une unique installation. Il est utilisé par le journal Le Monde, le blog de la fondation Mozzila…

Les logos en vrac

Etape 6: Transfert de WordPress vers Free

Attention

Nous voici à une étape importante du développement Web c’est le transfert des fichiers et dossiers de WordPress vers notre hébergeur Web. Ici je vais vous donner la configuration qu’il faut entrer dans Filezilla pour accéder à votre espace personnel via le protocole FTP. Cette étape importante n’est pas compliquée si vous respecter les consignes. Les captures ci-dessous sont faites sous Mac OS X, cela ne change pas grand chose pour les Windosiens.

1ere étape: Ouvrez votre logiciel FTP pour l’exemple je vais vous montrez l’opération sous Filezilla Client

Cliquez sur le Menu Fichier (Capture sous Mac Os X)

Pour éviter de retaper les codes FTP Utilisons le gestionnaire de sites

Déclaration du compte

Voici les informations des champs à remplir

Après cette étape vous pouvez maintenant cliquer sur le bouton connexion:

Cliquez sur le bouton connexion

A cette étape vous devriez voir apparaître dans l’interface de Filezilla votre ordinateur (à gauche) et le site distant (votre hébergeur à droite). Dans l’interface de gauche placez-vous dans votre dossier WordPress (Dossier doit se trouver sur le Bureau Desktop)

La partie de gauche votre ordinateur, la partie de droite votre hébergeur

En appuyant sur connexion Filezilla a envoyé un message au serveur afin d’y accéder et de lister les fichiers à l’interieur de votre espace (qui pour l’instant ne contient aucun fichiers).

Filezilla se connecte à votre hébergeur Web

Nous allons maintenant vérifier sous la forme d’un petit exercice, que vous pouvez créer un dossier chez votre hébergeur, pour cela c’est très simple faite un clic droit dans la partie droite de Filezilla et choisissez “Nouveau Dossier” appelez le “test”. voir captures ci-dessous.

Cliquez droit et créez un nouveau dossier Test

Si vous regarder dans la fenêtre du haut de Filezilla vous verrez que celui-ci a envoyé une commande unix au serveur MKD pour lui dire de créer un répertoire. (Voir ci-dessous). Le nom complet de la commande est mkdir

Envoie d'une commande unix au serveur Make a directory

Vous devriez voir le dossier test dans la partie de droite. Nous allons maintenant déposer un fichier dans ce dossier. Double cliquez sur le dossier test pour entrer à l’intérieur. Voir capture d’écran ci-dessous

L'interieur du dossier test

Nous allons maintenant comme exercice envoyer le fichier readme.html dans le dossier test: dans la partie de gauche de Filezilla, sélectionnez le fichier readme.html, faîtes un clic droit dessus et choisissez envoyez

Filezilla envoie au serveur la commande d’envoie du fichier readme.html

Filezilla transfert le fichier readme.html de votre ordinateur vers votre hébergeur

Vérifiez sur internet en tapant votresiteweb.free.fr/test/ vous devriez voir apparaître le readme.html

Maintenant nous allons supprimer le fichier readme.html et le dossier test, dans un premier temps entrez dans le dossier test en double cliquant sur le dossier test dans la partie de droite de Filezilla, sélectionnez le fichier readme.html, clic droit dessus => supprimer. (voir figure ci-dessous)

Suppression du fichier readme.html

Tout comme pour la création du repertoire Filezilla envoie une commande DELE (delete)

Répétez l’opération pour le dossier test.

Bon il est l’heure d’envoyer les fichiers sur WordPress…

Alors placez-vous dans le dossier WordPress de votre Bureau, seletionnez tous les fichiers, faites un clic droit dessus et envoyer…

Selectionnez tous les fichiers WordPress

A ce stade vous pouvez prendre un café il faut attendre maintenant que tous les fichiers soient envoyés…

Le début du transfert commence... patience... Café UP

Vous pouvez regardez défiler vos fichiers en bas dans Filezilla

Comme au restaurant... y a la file...

Faite bien attention à la fin que tous vos fichiers ont été transférés!!! sinon passez sur l’onglet Transfert échoués, réinitialisez l’état de la file (clic droit) remettre dans la file d’attente (clic droit)

A la fin vous devriez avoir autant de fichiers d’un côté que de l’autre…

Vérifiez que vous avez bien envoyé tous les fichiers

Fin de cette étape importante vous pouvez reprendre un café, ou thé…

Étape 7: Installation Paramètrage de WordPress,

Cette étape réclame votre attention

Nous voici à la seconde étape incontournable et à suivre pas à pas…, vos fichiers sont envoyés, il est temps maintenant de demander à WordPress de travailler pour vous, c’est la moindre des choses non… ?

Connectez-vous à votre espace perso, si vous êtes chez free vous devriez avoir une url comme celle-ci:

monsiteperso.free.fr où monsiteperso est votre login, ne vous inquietez pas des Warning dans la partie superieur c’est normal, ils disparaîtront à la fin de l’installation. Voici pas à pas ce que vous allez devoir faire.

Nous aurions pu créer le fichier wp-config.php avant d’envoyer par FTP mais WordPress peut le faire pour nous (chez certains hébergeur seulement…)

Petite pause… Café Up

Voici à quoi ressemble se fichier:

Une partie du fichier de configuration

Voici comment le remplir à la main (mais WordPress le fera pour nous…)

Avec les paramètres de l'hebergeur Free

Cliquez sur Créer le fichier de configuration

WordPress vous demande de vous munir de vos codes

remplissez les champs en suivant l'exemple ci-dessus

Le nom de la base de données, l’identifiant correspont à votre login chez free, le mot de passe est celui du courrier. L’hôte de la DB: sql.free.fr

Si tout est ok alors vous devez voir apparaître ceci:

WordPress c'est connecté à votre DB

Cliquez sur “Lancer l’installateur”

Sinon… vous vous êtes planté en recopiant vos codes….

Installation en 5 minutes pas le temps pour le café...

Donnez un titre à votre Weblog, indiquez une adresse e-mail valide (très important), cochez ou non l’autorisation du passage des bots de Google et Technorati. Puis cliquez sur Installer WordPress.

Attention important veuillez noter le login et le mot de passe

Vous allez pouvoir vous connecter à votre Weblog FÉLICITATION

Grand classique… j’ai pas noté mon mot de passe… heureusement WordPress l’a automatiquement envoyé par mail à l’e-mail que vous avez renseigné dans l’étape au dessus…

L'email reçu dans votre boite avec vos identifiants

C’est le moment de vous connecter

Première Connexion racinedevotresite/wp-login.php

Premier pas dans votre interface privé Félicitation Il est temps de changer immédiatement votre mot de passe… et NOTEZ LE!!!

A ce stade WordPress vous demande de changer votre mot de passe

Cliquez sur Oui je “le” veux …. vous ne serez pas marié(e) pour autant

Changez votre mot de passe ici

Allons voir la tête de notre WordPress en cliquant en haut à gauche “Allez sur le site”

Cliquez sur Allez sur le site pour voir votre interface public

et voici à quoi il devrait ressembler par défaut

Votre interface public par défaut

Si vous êtes arrivé à cette étape sans soucis Félicitation

Ce qu’il faut retenir:

Voici la structure de votre WordPress

Vous retrouver cette structure dans Filezilla

MySQL avant, après…

MySQL est votre DB (Data Base, base de données) elle contient toutes les informations de votre C.M.S, c’est elle qui sait qui est administrateur de votre WordPress?, combien d’articles (billets) votre C.M.S contient-il ?, qui a écrit tel ou tel commentaire ? …

Pour vous connecter à votre base de données il y a plusieurs possibilités: la première:

Via votre interface Free (Sur http://free.fr >> Mon compte)

Accéder à votre DB MySQL via l'interface Free

Seconde méthode: en “dur” sur votre base de données en passant par l’url: sql.free.fr

Seconde méthode tapez sql.free.fr dans votre barre d'adresse

Vous devez alors vous “loguer” via vos mots de passes Free (courrier)

Fenêtre d'authentification sous Firefox 3.5 Mac Os X

Troisième méthode: Free utilise pour gérer Mysql l’interface libre phpMyAdmin (PMA) url: http://phpmyadmin.free.fr/phpMyAdmin/

Même chose que pour la seconde méthode vous devez vous identifiez (heureusement…)

Fenêtre d'authentification sous Safari 4.0.1 Mac Os X

Maintenant voici a votre base de données avant l’installation de WordPress:

Aucune tables présentent...

Après le script d’installation de WordPress:

10 tables sont présentes

Il y a maintenant 10 tables :

Voici les 10 tables de votre WordPress

Vous les retrouvez dans votre structure:

Sans connaître MySQL il y a au moins une table qui vous parle … non ?

Regardez la dernière table wp_users, c’est cette table qui contient les logins et mots de passe des utilisateurs de votre Weblog.

Vous aller accéder aux champs de wp_users

En cliquant sur la petite icône vous allez voir apparaître les champs de la table wp_users, ses champs sont:

Explications de quelques champs

Pour voir les Affichage des enregistrements des champs cliquez sur wp_users à droite de l’icône.

Affichez les enregistrements des champs

Détails des renseignements de la table wp_users

Et le wp_ il vient d’où ??? hein ??? retour en arrière, lorsque vous avez configurez l’installation de WordPress…

Prefixe des tables

C’est le Préfixe de table… à quoi sert-il ??? tout simplement à installer plusieurs C.M.S sur un même hébergement Web, lorsque l’on a qu’une seule base de donnée. Il suffira de créer un nouveau dossier à la racine du site histoire de ne pas mélanger et d’écraser les même fichier (index.php,…) de transférer par exemple un second WordPress dans les nouveaux dossier créer et de recommencer l’étape 7 mais en changeant le préfixe de table exemple: wp2_ facile non ?

Interface Privé: Découverte des outils

Vous avez réussis l’installation de votre WordPress Félicitation, connectez vous a votre interface privé, et laissez vous guider dans la découverte des outils.

Détail des zones

Listes des outils présents

Le menu de votre interface

L’outil Articles qui est peut-être le plus utilisé car c’est lui qui gére vos billets de votre blog, les articles sont classés par date mais cela peut varier avec le thème utilisé..

L’outil Média c’est un peu votre Médiathèque (Images,Photos, Vidéos…)

L’outils Liens, cet outil comme son nom l’indique permet de faire apparaître une liste de liens qui peuvent-être triés par catégories.

Vous avez la possibilité de créer des pages via l’outil Pages, l’outil commentaires vous permet de gerer les commentaires de vos billets.

Apparence c’est la gestion de vos thèmes et des Widgets

Les rôles des utilisateurs dans WordPress

Voici un petit article résumant les rôles des utilisateurs dans le Weblog WordPress:

Droits de l’administrateur:

• Changements de thèmes
• Édition de thème
• Activation de plugins
• Édition de plugins
• Édition d’utilisateurs
• Édition de fichier
• Gestion des options
• Modération des commentaires
• Gestion des catégories
• Gestion des liens
• Upload de fichiers
• Importations
• Utilisation de code HTML et Javascript
• Édition d’articles
• Édition des articles des autres utilisateurs
• Édition d’articles publiés
• Publication d’articles
• Édition de pages
• Lecture

Droits de l’éditeur:

• Modération des commentaires
• Gestion des catégories
• Gestion des liens
• Upload de fichiers
• Utilisation de code HTML et Javascript
• Édition d’articles
• Édition des articles des autres utilisateurs
• Édition d’articles publiés
• Publication d’articles
• Édition de pages
• Lecture

Droits de l’auteur:

• Upload de fichiers
• Édition d’articles
• Publication d’articles
• Lecture

Droits du contributeur:

• Upload de fichiers
• Édition d’articles
• Lecture

Droits de l’abonné:

• Lecture

L’outil utilisateurs vous permet de gérer les rôles de vos inscrits, il vous permet également de modifier votre profil.

Menu déroulant Utilisateurs

Liste des isncrits

Vous pouvez ajouter des utilisateurs facilement

Écrire un premier article dans WordPress

Pour commencer, nous allons supprimer l’article créé automatiquement par WordPress lors de l’installation, la première chose à faire c’est de se connecter à son interface privé, administration. Regardons de plus près l’interface d’un nouvel article. Première chose à faire Ajouter un nouvel article via le menu de gauche.

Découverte des outils

Le menu est très explicite...

Pour dérouler le menu des articles (mais aussi des autres outils) il suffit de cliquer sur la petite flèche à côté d’Articles. Cliquez maintenant sur Ajouter. Vous devriez voir apparaître ceci:

Description de l'interface

Pour faciliter la rédaction les developpeurs de WordPress vous donne l’accès un un éditeur dont les raccourcis ressemblent a un traitement de texte classique (comme open office). Plusieurs zones à découvrir

• Zone Titre
• Zone corps du message (c’est ici que vous écrivez votre article)
• Zone de publication (en haut à droite)
• Zone de l’extrait (Pas obligatoire)

Zoom sur l’Éditeur:

WordPress utilise comme éditeur: TinyMCE (Pour en savoir +)

L’Éditeur est très fonctionnel il permet une mise en forme rapide de votre article:

L'Éditeur gérant les articles sous WordPress

Voici une première vue de l’Éditeur en mode simple, il peut être développé en cliquant sur la dernière icône sur la droite, il affichera alors les outils sur deux lignes comme ci-dessous:

Cliquez sur la dernière icône sur la droite

Vous avez maintenant l’Éditeur sur deux lignes:

L'éditeur sur deux lignes

pas besoin de plus d’explications pour expliquer les différents symboles… juste un petit zoom sur les deux onglets surplombants l’Éditeur.

Les deux onglets

Par défaut il est sur Visuel mais vous pouvez basculer en mode HTML (très pratique pour débugger certaines balises html récalcitrantes.

Voici les premières lignes de l’article en mode visuel:

L'article onglet Visuel

Le même article vu sous l’onglet HTML:

L'article vu par l'onglet HTML

L'article vu par l'onglet HTML

Insérer une image

Une des fonctions la plus utilisée dans l’éditeur c’est l’insertion d’une image, (vous pouvez également inserer une video, du son, un média, et depuis peu un sondage)

il suffit de cliquer sur le bouton Insérer image en haut de l’éditeur:

Cliquez sur l'icône juste à côté d'Envoyer/Insérer

S’ouvre alors une nouvelle fenêtre:

• Depuis votre ordinateur (permet de télécharger une image depuis son ordinateur)
• Faire un lien vers une url (permet d’inserer une image d’un site Web en copie collant son url)
• Galerie (permet d’insérer une galerie flash des images déjà télécharger dans son WordPress)
• Bibliothèque de médias  (c’est là où sont stockées tous vos médias images, photos, sons…)

Zoom sur les thèmes

Avec les nouvelles versions de WordPress il fallait pour changer de thème, le faire via FTP, depuis quelques versions, WordPress facilite l’installation des thème via l’outil Apparence. Par défaut, le thème présent est bleu ce n’est pas qu’il n’est pas joli, mais WordPress propose pas moins de 800 thèmes différents. Ce qui serait dommage de ne pas les tester

Voici par défaut le thème :

Thème par défaut

Grâce à l’outil “Apparence” vous pouvez changer le thème de votre Weblog très rapidement.

L'outil "Apparence" via votre interface privé

En cliquant sur Ajouter de nouveaux thèmes vous pouvez installer un autre thème rapidement

Thème Journalist

Même si l’outil fonctionne bien il est toujours bien de savoir dans quel répertoire se trouve vos thèmes, pour cela retournons dans Filezilla:

Connectez vous à votre compte

Le dossier “themes” se trouve dans le répertoire /wp-content

Double cliquez sur le dossier themes

Trois thèmes 1) classic 2)default 3)journalist

Entrons dans le dossier du thème default

Les fichiers qui constituent votre theme defaut

En double cliquant sur le dossier image vous accédez aux images du thèmes… il est alors assez facile de changer une image de son thème non???…

Reprenons… des thèmes il en existe des centaines tous différents les uns des autres: normalement chacun devrait trouver un thème à son goût… ou alors vous êtes très difficile…

Exemple de thèmes:

Zoom sur l’installation d’un thème:

Cliquez sur l’outil Apparence, sélectionner ajouter un nouveau thème

Vous pouvez choisir un thème par mot, mot clé..

Vous avez également la possibilité de filtrer les résultats:

Recherche par filtre

Exemple d’installation par mot clé:

Je recherche un thème sur la nature je tape donc nature et je clic sur Recherche

Thèmes proposés à partir du mot clé: nature

En cliquant sur Apercu, WordPress vous montre ce que votre weblog donnera avec ce thème, si il vous plait cliquez sur Installer.

Voici en un clic à qioi ressemble le site catic6.free.fr

Voilà vous savez installer un thème.

De rien

Zoom sur les extensions

La gestion des extensions est aussi facile que la gestion des thèmes. Via votre interface privé vous pouvez facilement, ajouter modifier et supprimer des extensions de votre WordPress. Rendez vous donc dans votre interface privé, menu de gauche.

C'est ici que l'on vous pouvez gerer vos extensions

Nous allons voir comment installer une extensions, c’est aussi simple que pour l’installation d’un thème. Cliquez sur “Ajouter”, vous devez arriver sur cet interface:

Plusieurs modes de recherche

L’installation est assez facile il suffit t’utiliser un des modes de recherches puis sélectionner l’extension que vous desirez. Pas de soucis, une extensions s’installe et se désinstalle aussi facilement d’un clic.

La désinstallation d’une extension

Pensez d'abord à desactiver votre extensions

Maintenant que votre extension est desactivée vous pouvez la supprimer

Message de confirmation de WordPress avant la désinstallation

L’installation d’une extension en images

Recherchons une extension sur Google Talk par exemple (hasard si si.. ) wp-googletalk en passant par les mots clés c’est plus facile, il y a bien un tag Google mais nous risquons d’avoir plusieurs pages de recherche.

Mot clé: wp-googletalk puis cliquer sur installer

Une pop-up sous flash s’ouvre et vous propose une description du Widget, des photos (screenshots) une FAQ (si elle existe)

Description de wp-googletalk cliquez sur Installer maintenant

Activer l’extension

Activer l'extension

Votre extension est désormais activée et se place avec les autres extensions actives, à ce stade il faut encore configurer le Widget, certaines extensions sont directement visibles et utilisables, d’autres non…

L'extension est active mais pas encore utilisable

Rendez-vous dans les widgets (Apparence)

Déposer le widget dans la sidebar

Il ne vous reste plus qu’à vous connecter sur votre compte google et de vous rendre à l’url suivante; http://www.google.com/talk/service/badge/New copier coller le texte dans le widget, enregister et allez voir votre page d’accueil

Paramètrage du Widget http://www.google.com/talk/service/badge/New Enregister et Fermer

Et voilà le résultat:

et voila le travail

TP World Of WodPress IV

C’est maintenant à vous de me montrez l’installation d’une extension sur votre WordPress en écrivant un petit article dessus avec capture d’écran… ha oui j’allais oublier… je vous demande obligatoirement que dans cet article soit insérer cette vidéo en utilisant deux extensions différentes..

Modifier un thème simplement…

Malgré un nombre incalculable de thèmes dans WordPress, il n’est pas rare que l’on veuille changer l’image du bandeau de son WordPress. Figurez-vous que c’est assez facile

Voici comment s’y prendre:

Téléchargeons un thème simple avec une belle image en bandeau le thème Poetry me semble approprié pour l’exercice Je vous remontre l’installation d’un thème mais rapidement car j’en ai déjà parler dans un billet précédent…

Cliquer sur installer

Cliquez sur Installer maintenant

Activer votre thème

Visualisez votre thème via votre interface public

Pour travailler proprement nous allons rapatrier l’image sur notre disque dur, pour cela:

Ouvrez Filezilla
Connectez vous à votre site distant
Entrez dans le dossier wp-content
Entrez dans le dossier themes
Entrez dans le dossier poetry
Entrez dans le dossier img

L’image de fond se trouve dans ce dossier… Comment je le sais ? tout simplement lorsque je suis dans l’interface public je fais un clic droit sur l’image >> Afficher l’image

Firefox me donne le chemin d’accès à l’image de fond

Chemin d'accès à l'image (arborescence des répertoires)

L’image de fons porte donc le nom header.jpg il suffit d’aller dans Filezilla et de télécharger l’image clic droit dessus Télécharger (vérifiez bien que vous êtes dans le bureau dans la partie de gauche de Filezilla afin de ne pas chercher des heures où Filezilla à mis l’image…

Ouvrez cette image avec un Editeur… ou clic droit propriétés, pour connaitre ses dimensions exactes.

Choissez une image de fond sur le net genre wallpaper, et decouper là au dimension de header.jpg (936×306).

J’ai téléchargé l’image header.jpg pour une question de sauvegarde, elle pourra être re-transférée en cas de soucis.

Voilà j’ai ma nouvelle image retravaillée légèrement 5 min avec un éditeur d’images et une police (TP n°22 … à parceque maintenant faut faire un pont avec les autres TP ??? pfiouuu.. )

header.jpg avant:

header.jpg après:

Je vais maintenant envoyer ma nouvelle image dans le bon dossier …/…./img/ elle viendra donc écraser header.jpg

Il ne me reste plus qu’à regarder le résultat

TP World Of WordPress V:

Il ne vous reste plus qu’à faire de même une capture avant une capture après les capture seront affichées dans un article de votre WordPress, vous m’enverrez le lien par mail