• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction à WordPress
 

Introduction à WordPress

on

  • 5,848 views

2h pour avoir les notions de base et créer un portfolio simple avec WordPress et quelques plugins

2h pour avoir les notions de base et créer un portfolio simple avec WordPress et quelques plugins

Statistics

Views

Total Views
5,848
Views on SlideShare
5,691
Embed Views
157

Actions

Likes
5
Downloads
47
Comments
0

3 Embeds 157

http://stageurfistrennes.wordpress.com 76
http://www.fcpe78.fr 64
http://artsplastiquescollege.wordpress.com 17

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction à WordPress Introduction à WordPress Presentation Transcript

    • Walter Stéphanie - 6 juin 2012
    • http://www.inpixelitrust.fr/http://dribbble.com/stephaniewalterhttp://forrst.me/inpixelitrust/posts@walterstephanie
    • • un CMS open source• sous licence GPLv2• basé sur du PHP (requière PHP 5.2 depuis la version 3.2)• nécessite une base de donnée MySQL• wordpress.org le site du projet, pour télécharger les fichiers,plugins, etc.• wordpress.com : solution d’hébergement en ligne de sites sousWordPress
    • • créé en 2003 : orienté blog, évolution vers plus de fonctionnalitésCMS depuis la 2.6 (2008)• aujourd’hui version 3.3 (3.4 en RC1 pour le moment)• les noms de chaque version font référence au Jazz• plus de 60 millions d’utilisateurs• presque 20 000 plugins sur le site officiel• plus de 1500 thèmes sur le site officiel (et le double si on comptetous les autres sites payants ou non)• disponible dans 74 langues
    • • Homepage => notre page d’accueil • A propos • Me Contacter • Portfolio => pour afficher les créations • Projets Web • Projets logo • Projet mobilitéhttp://sandbox.stephaniewalter.fr/caweb_wp_demo/
    • • Un serveur local (xampp) ou distant avec PHP 5.2+ et une base dedonnée MySQL• La version FR de WordPress sur le site francophonehttp://www.wordpress-fr.net/• Télécharger les fichiers, copier dans le dossierdu serveur
    • • Ajouter un mot de passeà la base de donnéeMySQLhttp://localhost/security/index.php xamppsecurity.phpRedémarrez MySQL
    • • Connexion à http://localhost/phpmyadmin/index.php• Créer une base de donnée
    • « »• Aller à la racine du dossier d’installation et cliquer sur « Créer le fichier deconfiguration »
    • • Nom de la base dedonnée, login, mot de passeet hôte (souvent localhost)• Point sécurité : changer lepréfixe pour autre choseque wp_
    • • Evitez « admin » en nomd’utilisateur !!
    • Bravo !!
    • Pour accéder à l’administration : moniste/wp-admin/
    • Permet quelque soit la page d’afficher ou cacher des éléments dont on n’a pas besoin
    • • Tableau de bord : résumé de toute ce qu’il y a sur le site• Articles : le contenu « daté » du site ( avec les catégories et métas)• Medias : la bibliothèque où on va trouver les images et médias attachés auxdifférents pages / articles• Liens : pour créer des listes de liens thématiques (nous n’allons pas nous en servir)• Pages : le contenu « statique » du site• Commentaires : la gestion des commentaires, nous allons les désactiver pour notresite• Apparence : là où on va choisir le thème et gérer les menus et widgets• Extensions : là où va gérer les plugins• Utilisateur : gestion des comptes avec les différents rôles (notre compte est admin)• Outils : différents outils, pour le moment rien, mais certains plugins peuvent ajouterici des onglets. Permet également d’exporter la base d’articles sans passer parphpmyadmin• Réglages : les principaux réglages du site.
    • • Titre du site : utilisé pardéfaut si pas de balise title• Slogan : utilisé comme« sous-titre » par certainestemplates• Changer le fuseau horairepour Paris pour avoir labonne heure dans lesarticles.
    • • Changer la taille du champ wysiwyg pour plus de confort• On peut choisir les catégories par défaut des articles (et les formatsd’article)
    • • Choix d’affichage de la paged’accueil. Par défaut,récupération des x derniersarticles, mais on peutassigner une page statiquepour afficher la page d’accueilet la page des articles.Dans notre cas, nous allons yassigner notre page d’accueilune fois créée
    • • Réglage pour les commentaires• L’option importante à décocher :« Autoriser les visiteurs à publierdes commentaires sur lesderniers articles » ATTENTION, çane s’applique qu’ aux articlescréés APRES le changement, ceuxpubliés avant ont le statut descommentaires en « on ». Il fautaller le changer manuellementpour chaque article / page (ouune query dans la BDD)
    • • Gestion des tailles desminiatures• Permettre l’embed desvidéos youtube, etc..• Organiser les fichiers envoyés dans des dossiers mensuels et annuels =>décocher, préférence personnelle pour éviter d’avoir 150 dossiers après 3 ansde site.
    • Choisir si Google peut indexer et suivre les liens ou non, attentionà ne pas oublier de l’autoriser une fois le site en ligne !
    • • Pour faire de jolies urlsplus user/seo friendly (pardéfaut ?p=129)• Pour notre site, structurepersonnalisée, /%postname%/ (seraremplacé par le titre del’article)
    • • Sur le répertoire officiel http://wordpress.org/extend/themes/• Sur des sites dédiés de qualité : • http://www.studiopress.com/ • http://www.organicthemes.com/ • http://themeforest.net/ (catégorie WordPress) • http://www.woothemes.com/Il ne faut jamais chercher un thème WordPress gratuit sur un moteurde recherche : souvent des thèmes avec des soucis de sécurité OUdes thèmes qui ont des liens cachés (code encodé en base64, etc..).
    • • Correspond-t-il à mes besoins ?• Vérifier les scripts générés : 15 scripts dans le header c’est peut-être unpeu beaucoup non ?• Vérifier le code HTML généré (dans les démos) : code propre et valide?Pas redondant ? Pas de soucis d’accessibilité?• Dans les fichiers du thème (plus compliqué quand on l’achète) : • Vérifier que le texte soit dans des variables de localisation (on y reviendra dans le multilinguisme) • Vérifier qu’il n’y a pas de code caché (base64, etc..)• Préférer les appels à jQuery sur les DNS Google, ou depuis le cœur deWordPress pour être sûre d’avoir la dernière version
    • • Dans le doute, deux extensions pour vérifier son thème : • http://wordpress.org/extend/plugins/tac/ • http://wordpress.org/extend/plugins/theme-check/
    • https://github.com/inpixelitrust/wpbootstrap_portfolio
    • • Par FTP (ici en local windows) : dé-zipper, copier/coller le thème danswp-contentthemes• En ligne Apparence > Thèmes • sur le répertoire officiel onglet installer des thèmes > recherche • depuis un fichier .zip local, onglet installer des thèmes > envoyer Une fois le thème installé, il faut l’activer sous « gérer les thèmes »
    • • Déterminer le besoin : que doit faire le plugin ? Parfois il suffit de quelques lignes decode dans functions.php pour accomplir ce dont on a besoin• Jeter un coup d’œil dans le codex http://wordpress.org/extend/plugins/• Chercher une alternative sur le web. Certains auteurs ont des plugins très utiles quine sont pas sur le codex. STFW !!• Vérifier qu’il y ai du support : sur le forum WordPress catégorie support, ou unsupport dédié. Souvent le support des plugins payants est plus présent• Rechercher pour des problèmes sur Google « nom du plugin » + « problème » ou« issue » peut être un bon indicatif• Jeter un coup d’œil aux fichiers (plus technique) et au code : • Attention à tout ce qui est code encodé en base64 • Attention aux appels à des pages situées sur des serveurs externes • Attention aux liens cachés pour se faire de la pub.
    • • Version de WordPress minimale requise• Jusqu’à quelle version il est supporté ?• Le nombre d’étoiles : satisfaction del’utilisateur• La dernière date de mise à jour (le plugin est-il activement maintenu ?)• Regarder la documentation : est-il faciled’utilisation ?• Les screenshots aussi, si vous n’êtes pas trèstechniques, 150 manipulations risquent devous faire perdre pied
    • • Pour la sécurité : http://www.boiteaweb.fr/• Pour des avis sur des plugins utiles : http://www.geekeries.fr/wordpress/et http://www.geekpress.fr/wordpress/extension/• Pour trouver des plugins payants hors site officiel :http://codecanyon.net/category/wordpressPayer ? Ne pas payer ? Question de choix, le fait de payer permet d’avoirsouvent un peu plus de support
    • • Recherche sur le répertoire officiel via mots clés• Envoyer : permet d’envoyer un fichier .zip• Déposer directement sur le FTP dans wp-contentplugins
    • Avant de supprimer un plugin, il faut le désactiver. Deux possibilité : • sur le nom du plugin (un par un) • cocher plusieurs plugins et utiliser les actions groupéesExtensions > Editeur : éditer le code du plugin. A EVITER !
    • Installation en amont, car utile lors de la création des pagesPlugin d’amélioration des fonctionnalités SEO :http://wordpress.org/extend/plugins/wordpress-seo/ Choix des pages / articles sur lesquelles on va montrer le plugin ou pas
    • Gestion des titres via leplugin
    • • Utilisation des tags (cf. enbas de la page titres) pourconfigurer dynamiquementles balises title etdescription par défaut
    • • Dans la page / article onpeut ensuite écraser cestitres automatiques, avec unaperçu de la SERP Google
    • • Retirer /category/ de l’urldes catégories
    • • Choix de l’indexation (ou non) de certaines pages, catégories(gestion du duplicate content)• Intégration sociale Facebook• Intégration d’une sitemap automatisée• Gestion des permaliens plus poussée• Liens internes : fil d’Ariane• Gestion du flux RSS du site
    • Pages : Articles :• Données statiques • Données liées par le temps et classées par date• Indépendantes du temps de publication• Indépendante de la chronologie de • La hiérarchisation se fait par taxonomie : unpublication article DOIT se trouver dans une catégorie• Leur ordre peut être changé (hiérarchique)• Peuvent être classées par • Seconde taxonomie : les tags (mots clés). Ne« imbrication » de sous-pages sont pas liés par une hiérarchie, maisparent/enfant permettent une catégorisation plus affinée• Ex : nous contacter, a propos, etc.. • Ex : actualités, posts sur un blog, promotions, etc..
    • Page > Ajouter
    • • éditeur visuel ou HTML• seconde ligne cachéeavec plus d’options
    • • Ajout de liens manuels avecurl• Ajout de liens vers despages et articles internes
    • Par drag and drop ou téléchargement Possibilités d’alignement et d’ajouter un lien sur l’image
    • • Possibilité de créer une hiérarchie enchoisissant une page parente• Possibilité de changer l’ordre des pages
    • Possibilité de changer l’urlOptions de publications :• Enregistrer brouillon > pas publié de suite• Aperçu : voir à quoi va ressembler la page• Changer l’état• Visibilité : possibilité de « cacher » despages• Choix dans la date de publication• Supprimer en déplaçant dans la corbeille
    • Depuis la liste des pages
    • Réglages > Lecture
    • • articles >catégories• possibilité dehiérarchie (souscatégories, etc..)• changer lacatégorie pardéfaut poursupprimer « nonclassé » : réglages >écriture
    • Publié par date de publication,pour changer l’ordre il suffitde tricher sur la date
    • Si le thème l’autorise : Apparence > Menus• Donner un nom au menu• Enregistrer le menu• Sélectionner le menu dans « emplacement du thème » > Enregistrer
    • Possibilité dechanger l’ordrepar drag & drop,créer des sousmenus (si lethème lesupporte), etc.
    • Apparence > Widgets• Changer l’ordre par drag & drop• Supprimer des widgets• Changer leur titre• Ajouter des widgets• Ne pas oublier d’enregistrer pourchaque widgets
    • http://wordpress.org/extend/plugins/easing-slider/
    • • Pour chaque image : « uploadimage, » puis «insérer dans l’article »• Possibilité d’ajouter de lien surl’image
    • Un shortcode est un codeentre [ et ] qui sera exécuté,dans notre cas[easingslider]
    • Extensions > Ajouter : Recherche
    • Différents marqueurs pour générer son formulaireChangement du code de basepour quelque chose de pluspropre, possibilité d’ajout debalises HTML directement
    • • Récupération du code des marqueurs pour l’afficher dans le mail• Attention, ne fonctionnera pas en local (pas de phpmail)
    • Copier / coller le shortcode donné en haut de la page de configurationdu plugin
    • Mettre en ligne à la racine du FTP (ou dans le dossier souhaité)tous les fichiers
    • Changer les accès à la base de donnée : dans wp-config.php :• nom la base• utilisateur• mot de passe• localhost peut parfois changer• préfixe de la table si besoin
    • Faire un export de la base en local et un import dans la base en ligne VIDEAttention, la fonctionnalité « export » de WordPress, (sous « outils) permet d’exporter lesposts / pages, mais pas les options du site.
    • • A la main : long !!• Via une query MySQL• Via un petit script à placer à la racine du WordPressOn fait la manipulation ET ON LE RETIRE !!! Attention cependant aux tables quel’on choisi, il vaut mieux se limiter aux posts et pages• Mettre à jour lesPermaliens (pour mettre àjour le .htaccess).
    • Deux solutions :• Passer par un plugin• Créer une installation multi-site avecplusieurs langues.Article à lire :http://www.netmagazine.com/tutorials/build-multilingual-site-wordpress
    • • WPML/ => payant• Qtranslate/ => gratuit• Xili => gratuit Avantage : • Permet d’avoir des liens entre les articles d’une même langue • Une seule installation Inconvénients : • Moins de flexibilité (certains plugins obligent à avoir les mêmes articles et même structure dans les deux langues) • Plus il y a de plugins à localiser ensemble, plus ça sera compliqué
    • Installation multi site dès le départ : permet d’avoirplusieurs WordPress sur une seule installation avecdifférentes urls OU sous domaine : monsite.com/en ouen.monsite.comhttp://wpchannel.com/activer-fonctionnalites-multi-sites-wordpress-3-0/
    • Inconvénients :• Deux structures distinctes, par défaut pas de liaison entre les articlesMultisite language switcher permet de le faire manuellement)• BDD plus grosse (tables dupliquées)Avantage :• Possibilité d’avoir deux structures distinctes (pages, articles, catégories)• Gestion plus simple des templates et des plugins puisque chacun estrécupéré dans la langue du site• Choix entre sous domaine et sous dossier à l’installation
    • Deux articles à lire : How to make a translatable wordpress theme et How tolocalize wordpress themes and plugins/ • Basé sur GetText • Chaines de langue encapsulées dans des variables de traduction $hello = __(Hello, dear user!); _e(Your Ad here) • Permet de générer des fichiers .po et .POT, que l’on peut ensuite ouvrir avec Poedit et traduire. http://codex.wordpress.org/I18n_for_WordPress_Developers
    • Icanlocalize pour générer les fichiers .po.Si votre template n’a pas été préparée à la traduction :• Changez de thème et tapez le développeur !!• Encapsulez vous-même les variables (envoyez la au développeur ?)• Changez en dur ce dont vous avez besoin (on perd de la flexibilité)WordPress repose sur la collaboration pour la traduction, un bonexemple est le plugin yoast SEO, traduit par la communauté :http://translate.yoast.com/projects/wordpress-seo
    • • A l’installation changer le préfixe de la table• Ne JAMAIS mettre admin en nom d’utilisateur• Mettre à jour WP régulièrement• Mettre à jour les plugins régulièrement• Protéger les répertoires • Mettre un index.php à la racine vide • Interdire le listing des répertoire avec Options –Indexes• Eviter les plugins à failles et thèmes à failles (oui facile à dire)
    • Un plugin utile :• Limit-login-attempts pour limiter le nombre de connexions• Secure-wordpress-plugin ,quelques vérifications de sécurité de baseA lire :•http://wp.smashingmagazine.com/2011/11/10/securing-your-wordpress-website/•http://www.developerdrive.com/2011/09/securing-wordpress-part-1-%E2%80%93-the-basics/•http://www.webanddesigners.com/20-htaccess-hacks-to-prevent-your-wordpress-site-from-hacking/•http://andbreak.com/articles/wordpress-security/
    • Ce dont je n’ai pas eut le temps de parler :• Les custom post type : permet de créer n’importe quel type de contenu • Introduction-a-wordpress-3-custom-post-type-et-custom-taxonomy • Wordpress-custom-post-types-guide• Le code approfondi et système pour créer des templates • Guide des templates http://www.geekpress.fr/wordpress/guide/templates-wordpress-839/ • Hiérarchisation des templates http://codex.wordpress.org/Template_Hierarchy
    • •Les blogs en français • http://www.screenfeed.fr/blog/ des plugins, du code • http://www.seomix.fr/wordpress/ des manuels, du code • http://www.geekeries.fr/ : pleins de plugins et de ressources • http://www.geekpress.fr/ du code, des plugins, des bons conseils • http://www.wordpress-fr.net/ la communauté français•Les sites en anglais • Récupérer des bouts de code •http://www.wprecipes.com/ •http://digwp.com/ + le livre « digging into WordPress » •http://wpengineer.com/ •http://wpsnipp.com/ •http://www.wpfunction.me/ • Sites plus généralisés (tutoriels, bonnes pratiques) •http://wpcandy.com/ •http://wp.tutsplus.com/•Mes bookmarks à moi :http://zootool.com/user/stephanie_walter/type:all/search:wordpress
    • http://bonjour.pandaroux.net/