Plonger dans les plugins
WordCamp Montréal 2015Francisco Sottolichio
www.utopsie.com
@fran6co
googlez-moi!
Plonger dans les plugins
WordCamp Montréal 2015Francisco Sottolichio
• Présentation
• Meilleures pratiques - et les autres
• Exemples
Présentation
• Designer graphique
• Designer web depuis le début du web
• WordPress depuis 10 ans
WordCamp Montréal 2015Francisco Sottolichio
Plugins - quantité
• Permettent de tout faire
• Quantité vertigineuse
• On n’en a jamais assez
WordCamp Montréal 2015Francisco Sottolichio
Plugins - qualité
• Chaque plugin est long à apprivoiser
• On s’y perd rapidement
• 95% du chemin
WordCamp Montréal 2015Francisco Sottolichio
Plugins
• Il faut modifier votre plugin!
WordCamp Montréal 2015Francisco Sottolichio
Plugins
• Changer les CSS
• Modifier à la mitaine
• Utiliser les Thèmes et les Hooks
WordCamp Montréal 2015Francisco Sottolichio
Plugins - CSS
WordCamp Montréal 2015Francisco Sottolichio
Inspecteur
Plugins - Mitaine
WordCamp Montréal 2015Francisco Sottolichio
Inspecteur
Plugins - Mitaine
WordCamp Montréal 2015Francisco Sottolichio
Plugins 11
Users
Comments
Plugins - Mitaine
WordCamp Montréal 2015Francisco Sottolichio
Diff
Plugins - Thèmes
WordCamp Montréal 2015Francisco Sottolichio
Plugins - Hooks
WordCamp Montréal 2015Francisco Sottolichio
Filtres et Actions
• Filtres modifient les valeurs dans une fonction
• Actions modifient le comportement d’une fonction
• Beaucoup de Hooks sont built-in dans WordPress
Plugins - HooksFiltres et Actions
WordCamp Montréal 2015Francisco Sottolichio
Filtres : add_filter() et apply_filter()
Actions : add_action() et do_action()
Plugins - Hooks
WordCamp Montréal 2015Francisco Sottolichio
Plugins - HooksCustom Hooks
WordCamp Montréal 2015Francisco Sottolichio
• Le moins de modifications au plugin original
Exemple
WordCamp Montréal 2015Francisco Sottolichio
Exemple - CSS
WordCamp Montréal 2015Francisco Sottolichio
Exemple - Thème
WordCamp Montréal 2015Francisco Sottolichio
Exemple - Template
WordCamp Montréal 2015Francisco Sottolichio
Exemple - Hooks
WordCamp Montréal 2015Francisco Sottolichio
Exemple
WordCamp Montréal 2015Francisco Sottolichio
Exemple
WordCamp Montréal 2015Francisco Sottolichio
• CSS
• Thème
• Filtre
Autre exemple
WordCamp Montréal 2015Francisco Sottolichio
Autre exemple - Plugin de base
WordCamp Montréal 2015Francisco Sottolichio
Autre exemple - CSS
WordCamp Montréal 2015Francisco Sottolichio
• Arranger la typo
• Changer la couleur du fond #overlay
• Changer le bouton «Close»
Autre exemple - CSS
WordCamp Montréal 2015Francisco Sottolichio
Autre exemple - CSS
WordCamp Montréal 2015Francisco Sottolichio
Autre exemple - PHP/JS
• Javascript : Trouver où on appelle le titre, ajouter Metadata : Medium, Dimensions, Date
• PHP : Back-end, ajouter option Border Width
WordCamp Montréal 2015Francisco Sottolichio
Autre exemple - PHP/JS
WordCamp Montréal 2015Francisco Sottolichio
Autre exemple - PHP/JS
WordCamp Montréal 2015Francisco Sottolichio
Autre exemple - PHP/JS
WordCamp Montréal 2015Francisco Sottolichio
Le bordel
Autre exemple
WordCamp Montréal 2015Francisco Sottolichio
• CSS
• JS
• PHP
Résumé
• Changer les CSS - simple et rapide
• Modifier à la mitaine - complexe et difficile à gérer
• Utiliser les Thèmes et les Hooks - idéalement
WordCamp Montréal 2015Francisco Sottolichio
3 niveaux d’intervention pour modifier un plugin
• Liens Plugin API : Hooks, Actions, Filters https://codex.wordpress.org/Plugin_API Ian Dunn : The Right Way to Customize a WordPress Plugin https://iandunn.name/the-right-way-to-customize-a-wordpress-plugin/ Creating Custom Hooks https://developer.wordpress.org/plugins/hooks/creating-custom-hooks/
• Plugins WP Slick Slider https://wordpress.org/plugins/wp-slick-slider/ WP jQuery Lightbox https://wordpress.org/plugins/wp-jquery-lightbox/
• Éditeur Espresso http://macrabbit.com/espresso/
• Slideshare http://www.slideshare.net/utopsie/plonger-dans-les-plugins-wordcamp2015-fsottolichio
WordCamp Montréal 2015Francisco Sottolichio
Ressources
Top Related