Clément Chatellier - Fin de 1ère année BTS

Clément Chatellier - Fin de 1ère année
BTS Informatiques aux Organisations option Solutions Logicielles et Applications Métiers
- Stage Antiopa du 18 mai au 19 juin 2015 WORDPRESS
Installation et Paramétrage
1. Hébergement
–
–
–
Choisir un hébergeur et un espace sur un serveur
déposer un nom de domaine
télécharger WP
2. Installation du client FTP
–
–
–
Logiciel FileZilla : transfert de fichier sur le serveur
Gestionnaire de site > mes sites > nouveau site (Suivre indication. Important : type de
serveur : ftp ; type d'authentification : normale )
Envoyer le dossier wordpress sur le serveur
3. Base de données MySQL
–
Chez l'hébergeur, créer une BDD, donner des utilisateurs
4. Installation WP
4.1 Installation normale
–
–
Nom de domaine/wp-admin/install.php, puis créer le fichier de configuration
Ou faire à la main : copier wp-config-sample.php, entrer les infos et enregistrer sous avec un
autre nom wp-config.php
4.2 Installation en local
–
–
–
Télécharger WAMP (Apache + MySQL + php)
Déposer le dossier wordpress dans le dossier www
Créer la BDD (accès avec localhost/phpmyadmin)
5. Redirection du blog
–
–
–
Tableau de bord > réglages > général > changer adresse web du blog
Filezilla : copie le fichier index.php du serveur sur poste du travail : changer le chemin
d'accès en rajoutant « wordpress/ »
Renvoyer index.php sur le serveur
6. paramétrage de l'interface administration :
–
Option de l'écran
Personnalisation
1. Les modifications
1.1 Du thème
–
–
Changer le thème avec les thèmes par défaut de WP
Télécharger un thème gratuit ou payant (avec wordpress, niss.fr, 12aelba.com, thèmecss.com, etc )
1.2 Dans le thème
–
–
les modifications possibles dépendent du thème
Aller dans Editeur pour modifier la structure (.php) ou la forme (.css) ou directement sur
WP
2. Installation d'un thème WP (autres que les thèmes par défaut)
2.1 Avec WP
–
–
Apparence > thème > ajouter
On peut faire des recherches d'un thème en fonction de caractéristiques
2.2 Avec d'autres sites que WP
–
Opération manuelle : le télécharger puis le transférer sur le serveur dans le fichier wpcontent > thème. Sur WP, aller dans thème, et l'activer (possibilité de l'ajouter de WP
directement)
2.3 Générer/créer un thème
–
Création de hèmes payants (ex : artisteer.com) et thèmes gratuit (ex : yvoschaap.com). Le
télécharger et envoyer le dossier du thème sur le serveur dans le dossier wp-content > thème
3. Créer une favicon (icône à côté de l'URL, sur la page et dans les favoris)
–
–
–
–
Aller sur favicon.cc pour créer son icône
On peut importer une image jpeg
Une fois fini, la télécharger lui donner obligatoirement le nom « favicon.ico »
Le mettre à la racine du blog sur le serveur
Organiser son blog
1. Les widgets
–
–
–
–
Installer par défaut, en fonction des thèmes
On peut définir, organiser, supprimer des widgets
Apparence > Widgets
Types de widgets : catégories, archives, liens etc
2. Les catégories
–
Ils permettent organiser les articles en catégorie
–
Article > catégorie > ajouter, puis affecter les articles à une catégorie
3. Les mots-clés
–
–
On peut affecter aux article des mots-clés
Définir les mots-clés : article > mots-clés > ajouter, puis affecter aux articles des mots-clés
4. Gestion des catégories et mots-clés
–
–
Même gestion pour les deux
On peut convertir des catégories vers mot-clés, et réciproquement
5. Affichage et structure des liens
–
–
–
Liens vers des sites et blogs
Choisir les options (affichage (image, description), relation avec le propriétaire du site, etc)
Possibilité de les trier en catégories
6. Affichage du contenu statique dans des pages
–
–
–
ajouter/supprimer/modifier des pages statiques
On peut choisir des pages parents
Différents aspects pour les pages (« modèles » en fonction des thèmes)
Gérer des médias
1. Ajouter des photos, sons, vidéos dans la bibliothèque
–
–
–
–
Média >Bibliothèque
Réglages : aller dans Média : possibilité de changer des options
Deux façons de télécharger des médias : méthode flash (utilise un élément flash pour
envoyer les données) ou navigateur (élément html)
Archiver dans le dossier wp-content /uploads
2. Modifier un média
–
Editeur d'image pour modifier le média
3. Intégrer une image à un article
–
Article > ajouter> ajouter un média, puis définir les options (ex : options pour l'affichage)
4. Intégrer une vidéo
–
–
Ajouter une vidéo : mais l'affichage sur le site est un lien
Pour avoir l'image : mettre l'URL de la vidéo
5. Insertion de fichier sonores
–
Taille maximale du fichier : 2mb
Animer son blog
1. Rédiger un article
–
–
Article > ajouter, possibilité de quelques options
Possibilité d'écrire en visuel ou html
2. Attribut typographique
2.1 En mode visuel
–
Plusieurs options: écriture (gras, etc), structure (liste, alignement, etc), liens, etc
2.2 En mode html
–
Dans la barre d'outil, quelques options du mode visuel + options avec quelques balises html
3. État d'âme et More
–
–
État d'âme : afficher des smiley (les codes sont sur codex.wordpress.org/Using-Smilies)
La commande More permet de rendre visible une partie d'un article et de cliquer pour
accéder à son ensemble
4. État d'un article ou d'une page
–
–
–
Présence d'une corbeille (possibilité de restaurer l'article ou la page supprimé
ultérieurement)
Plusieurs états (publié, brouillon, etc ), plusieurs visibilité (public, protégé par un mot de
passe, privé, date de publication)
Publication des articles : ordre anti-chronologique par défaut (modification possible)
5. Définir des utilisateurs
–
–
–
–
Nom dans WP : rôles. Il donnent des autorisations, et des accès différents
Tableau de bord > utilisateurs > ajouter
Exemple de rôles : l'admin a tous les droits, le contributeur ne peut qu'écrire un article et
laisser des commentaires et l'abonné ne peut que laisser des commentaires)
Utilisation d'un widget Méta pour permettre la connexion des utilisateurs
6. Gestion des commentaires
–
En fonction des rôles : administration des commentaires différent
7. Champs personnalisés
–
–
–
Afficher des rubriques constantes avec des valeurs variables
Il faut modifier le fichier index.php pour utiliser cette fonction
Choisir un nom de rubrique et sa valeur
Réglages et outils
1. Généralité
–
Depuis Réglages, possibilité d'effectuer des réglages(écriture, lecture, discussion, média, vie
privé, permaliens, divers, etc)
2. Publier des articles depuis un compte e-mail
–
–
–
Créer un e-mail secret reconnu par WP (avec une adresse POP3)
Pour l'envoyer : aller sur votre compte mail normal, envoyer à l'adresse POP3, puis écrire le
titre et le contenu
Pour cette option : il faut activer le script php situé à l'adresse physique du blog auquel faut
ajouter /wordpress/wp-mail.php (plus d'information sur
codex.wordpress.org/Blog_by_Email)
3. Les permaliens
–
–
On peut modifier la structure et syntaxe de l'URL d'un article (par défaut : un numéro de
page)
Action non rétroactive sur les articles déjà écrit
4. Les outils
–
–
–
–
L'outil Turbo permet d'accélerer WP en rapatriant les articles sur le PC
Pour cela, il faut installer et activer Gears qui ajoute des fonctionnalité sur le navigateur
L'outil Publier un article ou bookmarklet permet d'activer la publication d'un article en
rajoutant un raccourci dan la barre des favoris du navigateur
Modifier l'URL sur Publier un article en supprimant le lien par défaut et en copiant l'URL de
la page de création d'article, puis le mettre dans la barre des favoris par exemple
5. Importation et exportation d’articles
–
Exemple : écrire un article en local, puis l’exporter sur le PC, puis l'importer dans le WP en
ligne
Widgets et extensions
1. Installation d'une extension
1.1 Installation automatique
–
–
–
–
–
–
Une extension ou plugin permet rajouter des fonctionnalités
Extensions >ajouter
Possibilité d'ajouter une extension fait nous-même
Possibilité de rechercher des extensions avec des mots-clés
Archiver dans wp-content/plugins (parfois le faire manuellement)
Dans Réglages > « nom du plugin » : option de réglages
2.1 Installation manuelle
–
–
Téléchargement sur wordpress.org/extend/plugins/ par exemeple (vérifier la compatibilité)
Installer le plugin dans wp-content/plugins (parfais donner des droits de permissions)
2. Mise en place et paramétrage d'un formulaire de contact
–
–
–
Télécharger un plugin (ex:cformII – Contact Form 7) et la mettre dans wp-content/plugins
Créer une page Contact
Intégrer le formulaire sur la page Contact : dans barre d'outil, icône « insert a form »
3. Activation de l'extension Askimet
–
–
–
Elle permet d'identifier les articles poubelles considérés comme du spam
Installer par défaut mais non activée
Besoin de créer un compte sur Akismet pour obtenir une clé d'enregistrement
4. Affichage de données météo
–
–
–
–
–
Télécharger le plugin WP-weather sur le site WP ou sur extension > ajouter
Besoin d'un compte sur weather.com
Faire une recherche sur le site sur le lieu que l'on veut et récupérer l'ID (dans l'URL)
Mettre en widget : Apparence > widget : disposer le widget Weather
Ou le mettre dans une page : copier la balise du site WP [weather_display] dans le Visuel
5. Affichage des photos
–
–
Télécharger le plugin Lightbox2 sur WP (il permet d'afficher les photos à la mode web2)
Pour les options : Aller dans Réglages ou Bibliothèque
6. Affichage d'une galerie Flickr
–
–
–
Télécharger l'extension Flickr Gallery sur WP
Besoin d'un compte Flickr, puis sur WP appliquer les permissions
Créer un nouvel article et cliquer sur l'icône Flickr Photos
7. Affichage de fichier .SWF
–
–
–
Télécharger le plugin SwfObj sur WP
Créer un nouvel article (dans le but de contenir une animation flash)
Icône Flash : choisir un fichier SWF
8. Nuage de tag flash
–
–
Télécharger l'extension Netlife's Tag Cloud sur WP
Dans widget : disposer FatCloud
9. Vidéos Quicktags
–
Télécharger le plugin Viper's Video Quicktags sur WP
–
Elle permet de mettre tous types de vidéo et permet d'importer des fichiers au format FLV
Données d'analyse de votre blog et sauvegarde
1. Avec WassUP
–
–
–
Plugin WassUP à télécharger sur WP
Permet de voir des information sur le trafic du blog (visiteur, pays, adresse ip, navigateur,
etc )
On peut rajouter le Widget WassUP pour afficher ses données sur le blog
2. Affichage des données WassUp avec VStats
–
–
–
Plugin Vstats à télécharer sur WP (pour l'utiliser, il faut obligatoirement WassUP)
Il faut modifier le fichier vstats.php : renseigner le nom de l'hôte, de l'utilisateur, le mot de
passe, la base de données
Il faut ensuite rajouter le widget Vstat pour changer l'affichage
3. Affichage des données géographiques avec Visitor's map
–
–
–
–
–
Plugin Visitor's map à télécharger sur WP
Il permet l'affichage des emplacements/lieu de connexion des lecteurs du blog
Besoin d'une base de données Maxmind : cliquer sur installer
Dans widget : disposer le widget whos's Online
Ou créer une page : rajouter dans le Visuel : [visitor-maps]
4. Optimiser le référencement avec All in One SEO
–
–
–
Plugin All in One SEO à télécharger sur WP – Wordpress SEO By Yoast
Il permet d'optimiser l'indexation dans les moteurs de recherches
Le plugin doit être configuré
5. Sauvegarde du blog
5.1 Sauvegarder la structure
–
Outils > exporter > télécharger : fichier xml
5.2 Sauvegarder le contenu
–
–
–
–
–
Sauvegarder la base de données
Télécharger une extension (ex : DBC backup)
Créer un dossier de sauvegarde à la racine du blog
Ou manuellement avec interface phpmyadmin de l'hébergeur
Cliquer sur exporter et choisir sa base de données
6. Analyse de trafic avec Piwik
–
–
Piwik : puissant outil d'analyse
Différence avec Google Analytic : avec piwik, vous êtes propriétaire car les informations
sont sur votre page de données
–
–
–
Télécharger Piwik et le mettre a racine du nom de domaine sur le serveur
Taper URL : nom de domaine + /piwik/ et suivre les indications
Copier le code php fourni dans index.php (le copier sur le bureau puis le renvoyer sur le
serveur ensuite)
7. Présentation des widget Piwik
–
–
–
–
Chaque donnée est affiché dans un widget
On peut ajouter, enlever, déplacer les widgets
On peut exporter le contenu des widgets sous différents formats (icône en dessous du
widget)
Dans lien Widgets , copier la balise <Frame> et la mettre dans le code de la page que l'on
veut, pour afficher les widgets que l'on veut sur le blog (réglages (hauteur, etc) dans le code)
8. Générateur de visite
–
–
Tester le fonctionnement de Piwik : générer de fausses visites
Lien API , cliquer sur Générer des données
9. Administrer plusieurs utilisateurs ou blogs avec Piwik
–
–
–
Lien Paramètre
On peut voir les plugins installés, rajouter plusieurs utilisateurs qui pourront accéder aux
statistiques ou autres, en fonction de son rôle dans Piwik
On peut rajouter plusieurs sites à analyser pour Piwik
10. Intégrer les données Piwik à votre interface administration WordPress
–
–
–
–
–
Plugin WP-Piwik à télécharger sur WP
Dans réglages > wp-piwik : plusieurs options
Dans Piwik url : nom de domaine + dossier d'installation (ex : nom de domaine + /piwik/)
Dans auth token : la clé se trouve sur piwik, lien Api
Dans tableau de bord > WP-piwik : pour voir les statistiques
Modifications avancées en PHP et CSS
1. Comprendre l'affichage des pages html
–
–
Le navigateur n'affiche que des pages html
Le php sert à fabriquer la page html
2. Comprendre la structure du blog
- header, blog-left, wordpress loop, blog-right, footer
3. Génération de pages html par un serveur
–
–
–
Le html est généré par le php qui est hébergé sur le serveur (ex :serveur Apache)
Le code php se trouve dans le dossier www dans le logiciel utilisé pour le local
Pour accéder à partir du navigateur, taper dans l'URL : localhost/ ou 127.0.0.1/
–
Un fichier php peut être composé de php, d'html, et de JavaScript
4. Pages dynamiques avec des fonctions php
–
Créer des fonctions : funtion + nom de la fonction + les arguments entre parenthèse
5. The_excerpt vs the_content
–
–
–
–
–
–
the_content affiche le contenu en entier. The_excerpt affiche un extrait
Quand on définit l'extrait d'un article dans l'administration, l'extrait ne s'affiche pas sur le
navigateur
Il faut modifier index.php
Remplacer la balise the_content (enlever toutes les arguments) par the_excerpt
Si c'est la balise the_excerpt qui est présente dans index.php, et si il n'y a pas d'extrait défini
dans l’article, la fonction en génère automatiquement un.
Ou le fait dans l'administration : Réglages > Lecture
6. Personnalisation de la page 404
–
–
Le fichier 404.php gère l'affichage des erreurs
Si on veut personnaliser, il faut modifier ce fichier (contenu dans le php, forme dans le css
(ex : création d'une classe ou id)
Trucs et astuces de WordPress
1. mettre votre blog en sommeil
–
–
Plugin Custom Coming Soon Page
il permet de paramétrer la page qui s'affiche quand on est indisponible (personnisation
possible)
2. Réglage du changement d'heure été/hiver
–
–
–
Manuellement Réglages > Général : changer le fuseau horaire
A l'url kimmo.suomine.com/sw/timezone/ : télécharger timezone.php qui le fait
automatiquement
Copier coller le contenu dans un nouveau fichier php « timezone.php » et le mettre dans le
répertoire wp-content/plugins, puis activer l'extension et mettre le fuseau horaire actuel
3. Affecter des avatars aux différents rôles
–
–
Réglages > discussions, avatar, et personnaliser
Si on coche Gravatar, cela permet de mettre un avatar personnalisé (il faut avoir un compte
sur le site Gravatar)
4. Enrichissements typographique avancés
–
–
–
L'éditeur d'articles est une version de base de TinMCE
Télécharger plugin tinyMCE advanced pour plus de fonctionnalités et la mettre sur le
serveur dans /plugin
Dans la barre d'outil : nouvelle icône avec de nouvelles fonctionnalités
–
Dans Réglages, le nom du plugin : possibilité de changer la barre d'outil
5. Colorisation syntaxique pour les développeurs
–
–
Plugin CodeColorer qui permet de coloriser le code en fonction des langages au sein des
article
Dans réglages, changer les paramètres
6. Donation par payement Paypal
–
–
–
Plugin Paypal Donation qui permet aux lecteurs de vous envoyer des donations
Réglages : le compte, la devise, etc
Dans widget : disposer le widget Paypal Donation
7. Abonnements aux flux RSS
–
–
Dans widget : disposer widget Flux
Choisir l'URL de notre flux (l'URL + /feed/)
8. Ajouter des icônes aux catégories
–
–
–
–
Plugin Category and Page Icons
Tableau de bord > Icons : télécharger les icônes qu'on veut affecter aux catégories
Liens Assign icons to categories
Puis personnalisé ( ex : pour avoir de la transparence autour des icones : fichier png)
9. Protéger son blog avec un script .htaccess
–
Créer un fichier a_,htaccess avec le contenu suivant
Options +FollowSymLinks
RewriteEngine On
RewriteCond %{QUERY_STRING} (<|%3C).*script.*(>|%3E) [NC,OR]
RewriteCond %{QUERY_STRING} GLOBALS(=|[|%[0-9A-Z]{0,2}) [OR]
RewriteCond %{QUERY_STRING} _REQUEST(=|[|%[0-9A-Z]{0,2})
RewriteRule ^(.*)$ index.php [F,L]
–
Le mettre à la racine du blog
10. Personnaliser le footer de son administration
– Dans function.php, après le 1er « if », taper :
–
function remove_footer_admin(){
echo « administration de mon blog » ;
}
add_filter('admin_footer_text', 'remove_footer_admin') ;
11. personnaliser le logo de la page login
–
–
–
Par défaut : logo WP
Mettre l'image que l'on veut dans \wordpress\wp-content\themes\theme choisi\images
Modifier function.php, après le 1er « if », taper :
function my_custom_login_log(){
echo '<style type=''text/css>
h1 a{ background-image:url('get_bloginfo('templace_directory').'/images/nom de
l'image.jpg) !important}</style>'}
add_action('login_head', my_custom_login_log) ;
12. Réparer une erreur catastrophique
–
Avoir une sauvegarde pour restaurer le fichier corrompu avec FileZilla
13. Comprendre le fichier wp_config
–
–
Il contient les paramètres de configuration du blog
Si c'est pas fait automatiquement lors de l'installation, copier le wp-content_sample.php et
changer les paramètres
Carmen (version WP 2.9) et ses nouvelles fonctionnalités
1. Retouche d'images et miniatures
– Modifier image lors de la mise en place sur le serveur
– Média > bibliothèque, choisir son fichier à importer
– Pour ajouter une miniature à l’article (pas possible par défaut), modifier function.php
– Rajouter entre deux fonctions :
add_theme_support('post-thumbnails') ;
set_post_thumbnail_size(px, px, true) ;
– Retourner sur l’article : apparition d'un nouveau widget : « Miniature d’article », puis
« utiliser comme miniature »
2. Intégration vidéo et gestion de la corbeille
Coller l'URL dans le visuel
On peut déplacer un article dans la corbeille puis restaurer l’article si besoin
Choisir le nombre de jours où les articles sont réellement supprimés de la corbeille en
modifiant wp-config.php avant le commentaire « c'est tout, ne touchez pas à ce qui suit !
Bon blogging ! »
define ('EMPTY_TRASH_DAYS', nbJour) ;
–
–
–
3. Autres fonctionnalités non visibles
–
–
–
Mettre à jour les versions de WP dans Outil > mettre à jour
Mettre à jour les extensions
WP supporte les URL canoniques (article avec les mêmes URL mais un contenu différent)
–
Moteur d'optimisation et de réparation de BDD en modifiant wp-config.php. A la fin du
fichier, rajouter define('WP_ALLON_REPAIR', true) ;
Créer un site web avec WordPress
1. Installer un menu déroulant
–
–
–
–
Installer par exemple l'extension Multi-level Navigation Plugin
Changer les paramètres
Pour ce plugin copier le code php dans header.php et supprimer le code de l'ancien menu
On peut changer le css manuellement ou en cliquant sur le lien (puis copier le code css)
2. Gestion des pages de votre site web
–
Installer l'extension pageMash pour une gestion simplifié
3. Fil d'ariane
–
–
–
Installer l'extension Breadcrumb NavXT
Depuis le site de téléchargement de l'extension, aller sur la page du plugin, copier le code
donné et le mettre dans le fichier où on veut le mettre
On peut le faire avec Wordpress SEO by Yoast