Création d'un blog Wordpress

TP2 Wordpress 1. RAPPELS Le blog créé lors du précédent TP, nous avons créé un blog sur la plateforme Wordpress.com. Nous avons créé des articles (avec intégration de média), des pages et un menu. Nous avons choisi le thème Reddle. La page d'accueil d'un site wordpress affiche soit : des articles classés anté-chronologiquement (fonction blog de Wordpress) une page statique et dans ce cas, l'apparence se rapproche d'un site "vitrine". Nous avons remarqué qu'il y avait peu de thèmes "gratuits" disponibles, les plus graphiques sont payants. C'est la même chose pour customiser le thème Redle choisi Comme pour les médias, il est possible d'intégrer des éléments de réseaux sociaux dans les pages et articles. 2. TOUR D'HORIZON DE LA PLATEFORME Etape 1 Menu "Réglages" : c'est le menu de paramétrage. Elisabeth Pecatte Page 1 sur 11

Modifier l'affichage des dates La catégorie par défaut : économie du web Ajouter "Publier un article" dans le navigateur. Un utilisateur doit être inscrit pour publier un article La taille des miniatures est de 100px*100px Ne garder que Tweeter et Facebook comme média. Modifier les termes "Share this" par "Partager". Les partages vers les réseaux sociaux ne doivent être affichés que sur les articles. Demander une notification par mail pour les modifications de pages et d'articles. Remarque : o un "crochet" web est l'appel d'une URL lorsqu'une action est effectuée ( Par exemple, dès qu'un article est créé, il est possible de créer une page php pour prévenir tous les contacts => cette url sera indiquée comme "crochet") o OpenId est un système d'authentification unique entre plusieurs sites (tous les systèmes n'ont pas encore OpenID)=> une seule authentification suffit. Etape 2 : Ajouter un formulaire de contact Nous allons créer une page du type "Nous contacter". Il s'agit d'un contenu pérenne, qui n'a pas à être affiché chronologiquement=> il s'agit d'une page et non pas d'un article. Créer une nouvelle page. Vous allez cliquer sur le bouton "Ajouter un formulaire de contact" formulaire. Une boite de dialogue s'ouvre avec les paramétrages d'affichage du En cliquant sur le signe -, supprimer la demande du Website Elisabeth Pecatte Page 2 sur 11

En cliquant sur "modifier" au niveau du champ "comment", vous allez modifier le terme "comment" par "saisir votre message". Pensez à enregistrer le champ. Ajouter un nouveau champ, pour demander à l'internaute de saisir le nom de son entreprise. Déplacer, par glisser déposer, ce nouveau champ, avant le champ "Saisir votre message". Cliquer ensuite sur l'onglet "Notifications par email" pour saisir l'adresse à laquelle les informations saisies par l'internaute dans le formulaire vont être envoyées. Préciser également l'objet du mail. Enregistrer ensuite le formulaire. Une fois revenu dans le constructeur, cliquer sur "insérer" le formulaire(add this form..) Compléter la page en ajoutant vos coordonnées (ou autres...) les éléments de partage et désactiver les commentaires. ensuite votre page. Décocher Enregistrer Créer un lien de menu "Contact", puis tester le formulaire. Elisabeth Pecatte Page 3 sur 11

Etape 3 : Les utilisateurs La gestion des utilisateurs est accessible via le menu "utilisateurs". Dans ce menu, sont également disponibles vos propres paramétrages (via Param.Personnels) : c'est là que vous pourrez par exemple modifier votre mot de passe... Les droits sont appelés "Rôles". Il existe 5 niveaux d'utilisateurs suivant les rôles qui leur sont donnés : Administrateur : possède tous les droits Editeur : peut publier des articles, les modifier, les supprimer. Auteur : peut publier uniquement ses propres articles Contributeur : peut rédiger et gérer des articles, mais ne peut pas les publier, c'est un éditeur ou un administrateur qui pourra publier l'article. Abonné : ne peut pas écrire, il peut lire les articles, écrire des commentaires et recevoir des newsletters. Remarque : Nous avons vu que pour la rédaction de pages ou d'articles, il est possible de gérer la visibilité d'un article. Lorsqu'un article est publié "privé" il n'est visible que par les administrateurs et les éditeurs. Créer 2 comptes de type "abonné" ( choisir des camarades de promo. par exemple). Etape 4 : Les extensions. Pour personnaliser au plus près de nos besoins le blog(/ou site ) Wordpress, il est nécessaire d'installer des extensions qui apportent des fonctionnalités supplémentaires aux fonctionnalités de base de Wordpress. Elles sont de 2 types : Les plugins et les widgets. *Les widgets sont des "petits" bout de code qui s'installent, se paramètrent et s'affichent dans des positions définies par le thème. Chaque thème a ses propres positions, par exemple sidebar-1(pour une colonne à gauche), sidebar-2, footer... Les plugins : ils apportent des fonctionnalités plus importantes que les widgets, ils ne s'affichent pas dans des positions. Par exemple : plugin de gestion de newsletter, plugin de gestion d'agenda, widget de photos défilantes, widget d'un calendrier. Elisabeth Pecatte Page 4 sur 11

Les widgets sont disponibles à partir du menu Apparence/widgets. Un certain nombre de widgets sont déjà installés, ils ne sont cependant pas visibles car ils n'ont pas étés positionnés dans le thème. Sur la plateforme en ligne, il n'est possible d'ajouter que des widgets (et encore pas tous). La plateforme permet de créer rapidement un blog, mais ne permet pas de le personnaliser entièrement : l'administrateur n'a pas la main sur tous les éléments. 3. CREATION D'UN BLOG WORDPRESS SUR UN ESPACE D'HEBERGEMENT Etape 1 : Création d'un blog Wordpress "indépendant" de la plateforme. Nous avons vu que l'utilisation de la plateforme est très pratique et rapide mais ne permet pas une customisation très élaborée..ou alors il est nécessaire de payer des extensions. Nous allons installer Wordpress sur l'hébergement NFrance que vous avez déjà utilisé pour les enseignements de php et mysql et y importer les éléments de la plateforme. Télécharger sur le site wordpress-fr.net la dernière version de wordpress. Le fichier téléchargé est un fichier zippé. Il est nécessaire de l'extraire pour pouvoir le transférer sur l'hébergement. Connectez-vous avec Filezilla sur l'hébergement web NFrance. Créer un dossier Wordpress et uploader dans ce dossier tous les fichiers. Ouvrir le navigateur et afficher l'url http://vsp149406.nfrance.cim/~votreidentifiant/wordpress. Il n'y a pas de fichier de config=> poursuivre en demandant sa création. Insérer tous les éléments nécessaires. Attention : concernant l'administrateur donner le même nom d'administrateur que le worpress de la plateforme. L'application ne peut pas créer de fichier de configuration=> vous allez copier le code proposé, ouvrir notepad et le coller. Vous allez nommer ce fichier wp-config.php, puis télécharger-le à la racine de votre dossier wordpress. Vérifier votre installation. ( Rq : la page pour se loguer : http://vsp149406.nfrance.cim/~votreidentifiant/wordpress/wp-admin ) Etape 2 : Exportation des données du site wordpress.com. Connectez-vous sur le site wordpress.com. Aller dans le menu Outils "exporter". Choisir l'exportation gratuite. Confirmer l'enregistrement. Etape 3 : Importation des données : Installation de l'outil d'importation : L'outil d'importation est une extension à installer, au préalable, sur Wordpress. Depuis le blog "fraichement" installé, cliquer sur le menu "Outils/importer". Choisir Wordpress dans la liste. Cliquer sur "Installation". Elisabeth Pecatte Page 5 sur 11

Dans la boîte de dialogue suivante, vous allez saisir les informations de connexion (identiques à celles de filezilla). L'installation de l'outil d'importation peut démarrer". Création du dossier de téléchargement. Une fois l'extension installée, un message d'avertissement aparait. Les droits sur les dossiers n'ont pas permis la création d'un dossier nécessaire au téléchargement. Il faut créer ce dossier "à la main" avec Filezilla. A l'intérieur du dossier "wp-content", créer un dossier nommé "uploads", à l'intérieur du dossier "uploads" créer un dossier "2013", puis à l'intérieur de 2013, créer un dossier "11". Modification des droits sur les dossiers Lorsqu'on créé des dossiers et des fichiers des droits sont accordés, on appelle cela les CHMOD. Vous pouvez voir le code de ces droits à coté du nom du dossier (ou du fichier) : 755, 644... Pour permettre à l'application de charger le fichier d'exportation, il est nécessaire de donner des droits d'accès complet. Pour cela, depuis filezilla, cliquer sur le dossier "uploads" que vous venez de créer. Puis, avec un clic droit sur le dossier "uploads", choisir "droit d'accès au fichier". Ecrire ensuite la valeur numérique 777 et penser à cocher "Récursion dans les sous-dossiers"/ Appliquer à tous les dossiers et fichiers.(voir capture d'écran suivante). Elisabeth Pecatte Page 6 sur 11

Importation des données Actualiser ensuite la page de votre navigateur. Le message d'avertissement a disparu et il est maintenant possible de charger le fichier d'exportation.(outils / importer / Wordpress puis parcourir) Tour d'horizon du blog Vérifier qu'après l'importation, vous avez récupérer toutes vos données. Certains réglages n'ont cependant pas été importés. Le thème par défaut n'est plus Redle mais Twenty Thirteen. 1. MENU "REGLAGES" Réglage "général" : o Le slogan n'a peut être pas été importé : réécrire votre slogan. o Dans le réglage général, il y a maintenant des informations sur les utilisateurs, et un réglage des rôles par défaut. Mettre ce qui vous convient. Réglage "lecture" Le choix de la page d'accueil n'a également pas été importé. Re-paramétrer cette page. Réglages des permaliens Les permaliens sont en fait des URL ré-écrite. Au lieu d'avoir une url de type : http://vsp149406.nfrance.com/~dml0383a/wordpress/?p=123 l'url sera ré-écrite en http://vsp149406.nfrance.com/~dml0383a/wordpress2013/contact/ bien plus compréhensible pour les internautes... et les moteurs de recherche. Pour la ré-écritue d'url, cocher les options disponible ne suffit pas, il faut également créé un fichier ".htaccess". Pour cela, vous allez démarrer l'application notepad++ et ouvrir une nouvelle page. Vous allez y copier/coller le code en bas des réglages "permaliens". Elisabeth Pecatte Page 7 sur 11

Enregistrer le fichier en le nommant htaccess.txt. A l'aide de Filezilla, charger ce fichier à la racine de votre dossier wordpress(sur NFrance). Une fois chargé : clic droit puis renommer. Renommer le en l'appelant.htaccess Dans le réglages de Wordpress, choisir ensuite "structure personnalisée" et écrire %postname% 2. LA GESTION DES LIENS Il existe une différence entre la plateforme wordpress et l'hébergement : au niveau de l'hébergement, la gestion des liens n'existe pas. Cette fonctionnalité a été jugée obsolète et a donc été supprimée. Si on souhaite malgré tout afficher une liste de liens, il y a deux possibilités : créer une page ou utiliser un widget. Nous avons déjà vu la création de page, nous allons maintenant utiliser un widget. Les widgets : Depuis le menu Apparence/widget, vous pouvez remarquer des éléments et une organisation différente de la plateforme : Widgets installés et disponibles mais qui ne sont pas forcément utilisés widgets installés et désactivés Widget actifs, placés dans la position "pied de page" Elisabeth Pecatte Page 8 sur 11

Notion de positions ou "zones" : Les positions sont définies dans le thème. Dans le cas du thème par défaut, 2 zones ont été déclarées : une zone principale, avec comme nom de position "pied de page" et une zone secondaire. Plusieurs widgets sont activés et positionnés dans le pied de page. Aucun ne l'est dans la zone secondaire. Pour positionner un widget dans la zone secondaire, il suffit de glisser/déposer le widget vers cette zone. Pour le supprimer, il faut le glisser/déposer de la position vers la liste de widgets désactivés. Supprimer le widgets "Commentaires récents" du pied de page Glisser/déposer le widget "Texte" dans la zone secondaire. Ce widget permet d'afficher du texte saisi en html. Saisir 2 ou 3 liens, par exemple : Enregistrer et vérifier l'affichage en front-end. 3. INSTALLATION DE PLUGINS Nous avons vu qu'il existe un certain nombre de widgets et de plugin déjà installés. Tous ne correspondent pas forcément à nos besoins et il est donc nécessaire d'en installer. Par exemple, si vous observer votre page de contact, vous remarquerez que le formulaire de contact n'est plus présent : c'est une fonction supprimée dans le blog indépendant. Sur la page http://wordpress.org/plugins/contact-form-7/, télécharger une extension permettant l'ajout de formulaire. Puis à partir du menu extension, installer cette extension sans la "dézipper". Elisabeth Pecatte Page 9 sur 11

Pour finir l'installation, vous devez communiquer votre mot de passe FTP. Puis activer l'extension. Lorsque l'extension est installée, elle est maintenant accessible depuis le menu du tableau de bord. Créer un formulaire de contact, et intégrer le dans la page contact à la place de l'autre formulaire. Quelques extensions que vous pouvez ajouter : 1. un éditeur de texte plus complet que celui par défaut : http://wordpress.org/plugins/ckeditor-forwordpress/ 2. un plan de site : http://wordpress.org/plugins/google-sitemap-generator/ (accessible via le menu Réglages/ X-map) 3. la sauvegarde du site : http://wordpress.org/plugins/backwpup/ Pour paramétrer une sauvegarde du site (important car Wordpress est régulièrement hacké) : a. avec Filezilla, créer un dossier "sauvegardes" à la racine de html. Modifier les droits en 777 pour ce dossier. b. dans l'onglet "Général" cocher " sauvegarder vers le serveur FTP c. Dans l'onglet "programmation", cocher "cron" et programmer un envoi par semaine. d. Dans l'onglet "A:FTP", ecrire les informations FTP, puis après sauvegarde, lancer une sauvegarde Elisabeth Pecatte Page 10 sur 11

Installer l'extension http://wordpress.org/plugins/easy-fancybox/ et tester la. 4. INSTALLATION D'UN THEME : Sur le site wordpress.org, cliquer sur "themes". Choisir et télécharger le thème "Customiz'r". Dans le tableau de bord de wordpress, cliquer sur "Apparence", cliquer ensuite sur l'onglet "installer des thèmes" Puis cliquer sur "envoyer" ; choisir le fichier zippé et installer le. Après transfert sur le serveur, activer-le. Regarder la modification du design de votre site. Regarder comment il fonctionne et customiser-le en modifiant les couleur, en précisant le menu...(la documentation est disponible ici : http://www.themesandco.com/customizr/) Remarque : pour créer un diaporama, il suffit de télécharger des images via l'outil "média", puis de publier ces images et d'activer, en bas de l'image les options de diaporama. Depuis le menu "Apparence/widgets" vous pouvez également constater qu'il existe plus de positions disponibles que dans le précedent Thème(twenty thirteen) Elisabeth Pecatte Page 11 sur 11