1 
Personnaliser le Back Office de WordPress 
pour votre client 
Benjamin Denis 
@wpcloudy 
wpcloudy.com 
WPTech Nantes 20...
2 
WPTech Nantes 2014 
Benjamin Denis 
Développeur / intégrateur web en agence 
@wpcloudy
FLASHBACK 
Précédemment 
dans WordPress 
3 
WPTech Nantes 2014
4 
WPTech Nantes 2014 
Mai 2003 
WordPress 0.7
5 
WPTech Nantes 2014 
Janvier 2004 
WordPress 1.0
6 
WPTech Nantes 2014 
Décembre 2005 
WordPress 2.0
7 
WPTech Nantes 2014 
Mars 2008 
WordPress 2.5
8 
WPTech Nantes 2014 
Décembre 2008 
WordPress 2.7
9 
WPTech Nantes 2014 
Aujourd’hui 
WordPress 4.0
INTRO 
Le Pourquoi 
du Comment 
10 
WPTech Nantes 2014
Pourquoi personnaliser l’admin de WordPress ? 
WPTech Nantes 2014 
11 
• Simplification 
• Apprentissage plus rapide 
• Ma...
Comment ? 
WPTech Nantes 2014 
12 
• Hooks (car c’est simple et rapide) 
• Plugins (car certaines fois c’est plus pratique...
PORTE D’ENTREE 
Ecran de connexion 
13 
WPTech Nantes 2014
Changer l’url de connexion 
WPTech Nantes 2014 
14 
https://wordpress.org/plugins/sf-move-login/
Styliser l’écran de connexion 
http://codex.wordpress.org/Customizing_the_Login_Form 
WPTech Nantes 2014 
15 
//Custom CSS...
Se souvenir de moi toujours coché 
WPTech Nantes 2014 
16 
//Remember me always checked 
function wpc_login_checked_rememb...
17 
WPTech Nantes 2014
ARRIERE BOUTIQUE 
Administration 
18 
WPTech Nantes 2014
Styliser l’administration de WordPress 
WPTech Nantes 2014 
19 
//Load custom admin CSS 
function wpc_load_custom_admin_cs...
Supprimer le numéro de version de WordPress du footer 
WPTech Nantes 2014 
20
Supprimer le numéro de version de WordPress du footer 
WPTech Nantes 2014 
21 
//Remove WordPress version in footer 
funct...
Supprimer les crédits WordPress du footer 
WPTech Nantes 2014 
22
Supprimer les crédits WordPress du footer 
//Remove WordPress Footer Credits 
function wpc_remove_footer_admin() { 
return...
Favicon dans l’admin 
//Favicon in WordPress admin 
function wpc_admin_favicon() { 
echo '<link rel="Shortcut Icon" type="...
Supprimer l’onglet Aide 
WPTech Nantes 2014 
25
Supprimer l’onglet Aide 
WPTech Nantes 2014 
26 
//Remove Help tab 
add_filter( 'contextual_help', 'wpc_remove_help', 999,...
Supprimer l’onglet Options de l’écran 
WPTech Nantes 2014 
27
Supprimer l’onglet Options de l’écran 
WPTech Nantes 2014 
28 
//Remove Screen Options 
add_filter('screen_options_show_sc...
ARRIERE BOUTIQUE 
Tableau de bord 
29 
WPTech Nantes 2014
Supprimer des widgets du tableau de bord 
WPTech Nantes 2014 
30 
//Remove Dashboard widgets 
function wpc_remove_dashboar...
Supprimer des widgets du tableau de bord 
WPTech Nantes 2014 
31
Créer son widget perso dans le tableau de bord 
WPTech Nantes 2014 
32 
//Custom widget dashboard 
function wpc_dashboard_...
ARRIERE BOUTIQUE 
Les menus / sous menus 
33 
WPTech Nantes 2014
Supprimer des pages du menu d’admin 
WPTech Nantes 2014 
34
Supprimer des pages du menu d’admin 
WPTech Nantes 2014 
35 
//Hide menu page 
function wpc_remove_menus(){ 
remove_menu_p...
Ajouter vos propres pages au menu d’admin 
//Create custom submenu page 
function wpc_my_submenu_pages() { 
add_submenu_pa...
ARRIERE BOUTIQUE 
Admin bar 
37 
WPTech Nantes 2014
Supprimer des éléments de l’admin bar 
WPTech Nantes 2014 
38
Supprimer des éléments de l’admin bar 
WPTech Nantes 2014 
39 
//Remove elements from WordPress admin bar 
add_action( 'ad...
Ajouter vos propres éléments à l’admin bar 1/2 
WPTech Nantes 2014 
40 
function wpc_admin_menu_avatar() { 
$current_user ...
Ajouter vos propres éléments à l’admin bar 2/2 
WPTech Nantes 2014 
41 
function wpc_admin_bar_logout( $wp_admin_bar ) { 
...
ARRIERE BOUTIQUE 
Edition 
42 
WPTech Nantes 2014
TINY MCE : l’éditeur de texte de WordPress 
WPTech Nantes 2014 
43
TINY MCE : l’éditeur de texte de WordPress 
WPTech Nantes 2014 
44 
//Enable full TinyMCE by default 
add_filter( 'tiny_mc...
Supprimer Obtenir le lien court 
WPTech Nantes 2014 
45
Supprimer Obtenir le lien court 
WPTech Nantes 2014 
46 
//Remove Get Shortlink 
add_filter( 'pre_get_shortlink', '__retur...
Personnalisation d’Ajouter média 
WPTech Nantes 2014 
47
Personnalisation d’Ajouter média 
WPTech Nantes 2014 
48 
//Remove items from Add media 
add_filter( 'media_view_strings',...
Personnalisation d’Ajouter média 
WPTech Nantes 2014 
49
Supprimer des metaboxes 
WPTech Nantes 2014 
50
Supprimer des metaboxes 
WPTech Nantes 2014 
51 
//Remove metaboxes 
function wpc_remove_meta_boxes() { 
remove_meta_box('...
Supprimer des colonnes des vues listes 
WPTech Nantes 2014 
52
Supprimer des colonnes des vues listes 
WPTech Nantes 2014 
53 
//Remove columns in list view 
add_action( 'admin_init', '...
ARRIERE BOUTIQUE 
Divers 
54 
WPTech Nantes 2014
Supprimer les notifications d’updates WordPress 
WPTech Nantes 2014 
55
Supprimer les notifications d’updates WordPress 
WPTech Nantes 2014 
56 
//Disable Update WordPress nag 
add_action('after...
Redirect non super-admin to dashboard 
//Redirect users to Dashboard based on Admin 
$pages = array( 'tools', 'options-gen...
SHOWCASE 
Exemple 
58 
WPTech Nantes 2014
59 
WPTech Nantes 2014
60 
WPTech Nantes 2014 
Happy Tables
LIENS UTILES 
Ressources 
61 
WPTech Nantes 2014
http://generatewp.com/ : Générateur de code pour WordPress 
https://wordpress.org/plugins/better-admin-pointers/ : Better ...
Merci !
Prochain SlideShare
Chargement dans…5
×

Personnaliser le back office de WordPress pour votre client

16 766 vues

Publié le

[NEW] Le plugin WP Admin UI est disponible en freemium pour appliquer toutes les techniques décrites dans ses slides : http://wpadminui.net/

Créez une expérience unique pour vos clients en personnalisant de A à Z le back-office de WordPress.
Tout y passe : écran de connexion, widgets du dashboard, barre et menu d’admin…

Supprimez le superflu, ajoutez des options, réordonnez l’ensemble afin d’offrir à votre webmaster une interface adaptée à son besoin et une meilleure appropriation de l’outil.

WordPress en marque blanche ? Oui c’est possible ! C’est tout l’enjeu de cette conférence.

Publié dans : Logiciels
0 commentaire
15 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
16 766
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6 390
Actions
Partages
0
Téléchargements
278
Commentaires
0
J’aime
15
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Personnaliser le back office de WordPress pour votre client

  1. 1. 1 Personnaliser le Back Office de WordPress pour votre client Benjamin Denis @wpcloudy wpcloudy.com WPTech Nantes 2014
  2. 2. 2 WPTech Nantes 2014 Benjamin Denis Développeur / intégrateur web en agence @wpcloudy
  3. 3. FLASHBACK Précédemment dans WordPress 3 WPTech Nantes 2014
  4. 4. 4 WPTech Nantes 2014 Mai 2003 WordPress 0.7
  5. 5. 5 WPTech Nantes 2014 Janvier 2004 WordPress 1.0
  6. 6. 6 WPTech Nantes 2014 Décembre 2005 WordPress 2.0
  7. 7. 7 WPTech Nantes 2014 Mars 2008 WordPress 2.5
  8. 8. 8 WPTech Nantes 2014 Décembre 2008 WordPress 2.7
  9. 9. 9 WPTech Nantes 2014 Aujourd’hui WordPress 4.0
  10. 10. INTRO Le Pourquoi du Comment 10 WPTech Nantes 2014
  11. 11. Pourquoi personnaliser l’admin de WordPress ? WPTech Nantes 2014 11 • Simplification • Apprentissage plus rapide • Marque blanche • « Sur mesure »
  12. 12. Comment ? WPTech Nantes 2014 12 • Hooks (car c’est simple et rapide) • Plugins (car certaines fois c’est plus pratique)
  13. 13. PORTE D’ENTREE Ecran de connexion 13 WPTech Nantes 2014
  14. 14. Changer l’url de connexion WPTech Nantes 2014 14 https://wordpress.org/plugins/sf-move-login/
  15. 15. Styliser l’écran de connexion http://codex.wordpress.org/Customizing_the_Login_Form WPTech Nantes 2014 15 //Custom CSS Login function wpc_custom_login() { wp_enqueue_style( 'wpc-custom-login-css', plugins_url('css/wpc-login.css', __FILE__)); } add_action('login_head', 'wpc_custom_login'); //Custom Logo URL function wpc_url_login(){ return esc_url( home_url( '/' ) ); } add_filter('login_headerurl', 'wpc_url_login'); //Custom Logo Title function wpc_login_logo_url_title() { return 'Une création WPCloudy.com’; } add_filter( 'login_headertitle', 'wpc_login_logo_url_title' );
  16. 16. Se souvenir de moi toujours coché WPTech Nantes 2014 16 //Remember me always checked function wpc_login_checked_remember_me() { add_filter( 'login_footer', 'wpc_rememberme_checked' ); } add_action( 'init', 'wpc_login_checked_remember_me' ); function wpc_rememberme_checked() { echo "<script>document.getElementById('rememberme').checked = true;</script>"; }
  17. 17. 17 WPTech Nantes 2014
  18. 18. ARRIERE BOUTIQUE Administration 18 WPTech Nantes 2014
  19. 19. Styliser l’administration de WordPress WPTech Nantes 2014 19 //Load custom admin CSS function wpc_load_custom_admin_css() { wp_enqueue_style('wpc_admin_css', plugins_url('css/wpc-admin.css', __FILE__)); } add_action( 'admin_enqueue_scripts', 'wpc_load_custom_admin_css' ); http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts
  20. 20. Supprimer le numéro de version de WordPress du footer WPTech Nantes 2014 20
  21. 21. Supprimer le numéro de version de WordPress du footer WPTech Nantes 2014 21 //Remove WordPress version in footer function wpc_remove_version_footer() { remove_filter( 'update_footer', 'core_update_footer' ); } add_action( 'admin_menu', 'wpc_remove_version_footer' ); https://developer.wordpress.org/reference/hooks/update_footer/
  22. 22. Supprimer les crédits WordPress du footer WPTech Nantes 2014 22
  23. 23. Supprimer les crédits WordPress du footer //Remove WordPress Footer Credits function wpc_remove_footer_admin() { return ''; } add_filter('admin_footer_text', 'wpc_remove_footer_admin'); WPTech Nantes 2014 23
  24. 24. Favicon dans l’admin //Favicon in WordPress admin function wpc_admin_favicon() { echo '<link rel="Shortcut Icon" type="image/x-icon" href="'.get_stylesheet_directory_uri().'/img/favicon.ico" />'; } add_action('admin_head', 'wpc_admin_favicon'); WPTech Nantes 2014 24 http://codex.wordpress.org/Plugin_API/Action_Reference/admin_head
  25. 25. Supprimer l’onglet Aide WPTech Nantes 2014 25
  26. 26. Supprimer l’onglet Aide WPTech Nantes 2014 26 //Remove Help tab add_filter( 'contextual_help', 'wpc_remove_help', 999, 3 ); function wpc_remove_help( $old_help, $screen_id, $screen ){ $screen->remove_help_tabs(); return $old_help; } http://codex.wordpress.org/Class_Reference/WP_Screen/add_help_tab
  27. 27. Supprimer l’onglet Options de l’écran WPTech Nantes 2014 27
  28. 28. Supprimer l’onglet Options de l’écran WPTech Nantes 2014 28 //Remove Screen Options add_filter('screen_options_show_screen', '__return_false'); https://developer.wordpress.org/reference/hooks/screen_options_show_screen/
  29. 29. ARRIERE BOUTIQUE Tableau de bord 29 WPTech Nantes 2014
  30. 30. Supprimer des widgets du tableau de bord WPTech Nantes 2014 30 //Remove Dashboard widgets function wpc_remove_dashboard_widgets() { global $wp_meta_boxes; unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']); unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_activity']); unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']); unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']); unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']); unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_drafts']); unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']); unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']); unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']); } add_action('wp_dashboard_setup', 'wpc_remove_dashboard_widgets' ); http://codex.wordpress.org/Plugin_API/Action_Reference/wp_dashboard_setup
  31. 31. Supprimer des widgets du tableau de bord WPTech Nantes 2014 31
  32. 32. Créer son widget perso dans le tableau de bord WPTech Nantes 2014 32 //Custom widget dashboard function wpc_dashboard_widget_function() { echo ' code HTML de votre super widget '; } function wpc_add_dashboard_widgets() { wp_add_dashboard_widget('wpc_summary_dashboard_widget', 'Titre de votre super widget', 'wpc_dashboard_widget_function'); } add_action('wp_dashboard_setup', 'wpc_add_dashboard_widgets' ); http://codex.wordpress.org/Function_Reference/wp_add_dashboard_widget
  33. 33. ARRIERE BOUTIQUE Les menus / sous menus 33 WPTech Nantes 2014
  34. 34. Supprimer des pages du menu d’admin WPTech Nantes 2014 34
  35. 35. Supprimer des pages du menu d’admin WPTech Nantes 2014 35 //Hide menu page function wpc_remove_menus(){ remove_menu_page( 'index.php' ); //Dashboard remove_menu_page( 'edit.php' ); //Posts remove_menu_page( 'upload.php' ); //Media remove_menu_page( 'edit.php?post_type=page' ); //Pages remove_menu_page( 'edit-comments.php' ); //Comments remove_menu_page( 'themes.php' ); //Appearance remove_menu_page( 'plugins.php' ); //Plugins remove_menu_page( 'users.php' ); //Users remove_menu_page( 'tools.php' ); //Tools remove_menu_page( 'options-general.php' ); //Settings } add_action( 'admin_menu', 'wpc_remove_menus' ); http://codex.wordpress.org/Plugin_API/Action_Reference/admin_menu
  36. 36. Ajouter vos propres pages au menu d’admin //Create custom submenu page function wpc_my_submenu_pages() { add_submenu_page( 'tools.php', 'My Custom Submenu Page', 'My Custom Submenu Page', 'manage_options', 'my-custom-submenu- page', 'my_custom_submenu_page_callback' ); add_action('admin_menu', 'wpc_my_submenu_pages'); WPTech Nantes 2014 36 //Create custom menu function wpc_my_menu_pages() { add_menu_page('custom menu title', 'custom menu', 'manage_options', 'myplugin/myplugin-admin.php', '', plugins_url( 'myplugin/images/icon.png' ), 6 ); //Custom menu page } add_action('admin_menu', 'wpc_my_menu_pages'); } http://codex.wordpress.org/Function_Reference/add_menu_page http://codex.wordpress.org/Function_Reference/add_submenu_page
  37. 37. ARRIERE BOUTIQUE Admin bar 37 WPTech Nantes 2014
  38. 38. Supprimer des éléments de l’admin bar WPTech Nantes 2014 38
  39. 39. Supprimer des éléments de l’admin bar WPTech Nantes 2014 39 //Remove elements from WordPress admin bar add_action( 'admin_bar_menu', 'wpc_remove_wp_logo', 999 ); function wpc_remove_wp_logo( $wp_admin_bar ) { $wp_admin_bar->remove_node( 'wp-logo' ); $wp_admin_bar->remove_node( 'my-account' ); $wp_admin_bar->remove_node( 'menu-toggle' ); $wp_admin_bar->remove_menu( 'view' ); $wp_admin_bar->remove_menu( 'comments' ); $wp_admin_bar->remove_menu( 'new-content' ); $wp_admin_bar->remove_menu( 'view-site' ); } http://codex.wordpress.org/Function_Reference/remove_node
  40. 40. Ajouter vos propres éléments à l’admin bar 1/2 WPTech Nantes 2014 40 function wpc_admin_menu_avatar() { $current_user = wp_get_current_user(); $wpc_id = $current_user->ID; $wpc_email = $current_user->user_email; $wpc_name = '<div class="wpc-name">'.__('Bienvenue','wpc').' <span class="highlight">'.$current_user- >user_firstname.'</span></div>'; $wpc_avatar = '<div class="wpc-avatar">'.get_avatar( $wpc_email, 96 ).'</div>'; $wpc_edit_profil = '<div class="wpc-profil"><a href="'.get_edit_user_link().'" title="'.__('Editer profil','wpc').'">'.__('Editer profil','wpc').'</div>'; $wpc_logout_url = '<div class="wpc-logout"><a href="'.wp_logout_url( home_url() ).'" title="'.__('Se déconnecter ?','wpc').'">'.__('Déconnexion','wpc').'</a></div>'; return $wpc_avatar.$wpc_name.$wpc_edit_profil.$wpc_logout_url; }
  41. 41. Ajouter vos propres éléments à l’admin bar 2/2 WPTech Nantes 2014 41 function wpc_admin_bar_logout( $wp_admin_bar ) { if ( is_user_logged_in() ) { $wp_admin_bar->add_menu( array( 'id' => 'my-log-out', 'parent' => 'top-secondary', 'meta' => array( 'html' => wpc_admin_menu_avatar(), 'class' => 'wpc_avatar', ), 'class' => 'pb-logout', ) ); } } add_action( 'admin_bar_menu', 'wpc_admin_bar_logout', 100 );
  42. 42. ARRIERE BOUTIQUE Edition 42 WPTech Nantes 2014
  43. 43. TINY MCE : l’éditeur de texte de WordPress WPTech Nantes 2014 43
  44. 44. TINY MCE : l’éditeur de texte de WordPress WPTech Nantes 2014 44 //Enable full TinyMCE by default add_filter( 'tiny_mce_before_init', 'wpc_myformatTinyMCE' ); function wpc_myformatTinyMCE( $in ) { $in['wordpress_adv_hidden'] = FALSE; return $in; } //Add buttons in TinyMCE function wpc_add_more_buttons($buttons) { $buttons[] = 'charmap'; $buttons[] = 'cut'; $buttons[] = 'copy'; $buttons[] = 'paste'; return $buttons; } add_filter("mce_buttons", "wpc_add_more_buttons"); http://www.wpexplorer.com/wordpress-tinymce-tweaks/
  45. 45. Supprimer Obtenir le lien court WPTech Nantes 2014 45
  46. 46. Supprimer Obtenir le lien court WPTech Nantes 2014 46 //Remove Get Shortlink add_filter( 'pre_get_shortlink', '__return_empty_string' ); https://developer.wordpress.org/reference/hooks/pre_get_shortlink/
  47. 47. Personnalisation d’Ajouter média WPTech Nantes 2014 47
  48. 48. Personnalisation d’Ajouter média WPTech Nantes 2014 48 //Remove items from Add media add_filter( 'media_view_strings', 'wpc_custom_media_uploader' ); function wpc_custom_media_uploader( $strings ) { unset( $strings['insertMediaTitle'] ); //Insert Media unset( $strings['uploadFilesTitle'] ); //Upload Files unset( $strings['mediaLibraryTitle'] ); //Media Library unset( $strings['createGalleryTitle'] ); //Create Gallery unset( $strings['setFeaturedImageTitle'] ); //Set Featured Image unset( $strings['insertFromUrlTitle'] ); //Insert from URL return $strings; } https://developer.wordpress.org/reference/hooks/media_view_strings/
  49. 49. Personnalisation d’Ajouter média WPTech Nantes 2014 49
  50. 50. Supprimer des metaboxes WPTech Nantes 2014 50
  51. 51. Supprimer des metaboxes WPTech Nantes 2014 51 //Remove metaboxes function wpc_remove_meta_boxes() { remove_meta_box('postimagediv', 'post', 'normal'); //Featured image } add_action( 'admin_menu', 'wpc_remove_meta_boxes' ); http://codex.wordpress.org/Function_Reference/remove_meta_box
  52. 52. Supprimer des colonnes des vues listes WPTech Nantes 2014 52
  53. 53. Supprimer des colonnes des vues listes WPTech Nantes 2014 53 //Remove columns in list view add_action( 'admin_init', 'wpc_remove_columns' ); function wpc_remove_columns() { remove_post_type_support( 'post', 'comments' ); remove_post_type_support( 'post', 'author' ); } add_filter( 'manage_media_columns', 'wpc_remove_media_columns' ); function wpc_remove_media_columns( $columns ) { unset( $columns['author'] ); unset( $columns['comments'] ); return $columns; } https://developer.wordpress.org/reference/hooks/manage_media_columns/
  54. 54. ARRIERE BOUTIQUE Divers 54 WPTech Nantes 2014
  55. 55. Supprimer les notifications d’updates WordPress WPTech Nantes 2014 55
  56. 56. Supprimer les notifications d’updates WordPress WPTech Nantes 2014 56 //Disable Update WordPress nag add_action('after_setup_theme','wpc_remove_core_updates'); //Disable Plugin Update Notifications remove_action('load-update-core.php','wp_update_plugins'); add_filter('pre_site_transient_update_plugins','__return_null'); //Disable all the Nags & Notifications function wpc_remove_core_updates(){ global $wp_version;return(object) array('last_checked'=> time(),'version_checked'=> $wp_version,); } add_filter('pre_site_transient_update_core','wpc_remove_core_updates'); add_filter('pre_site_transient_update_plugins','wpc_remove_core_updates'); add_filter('pre_site_transient_update_themes','wpc_remove_core_updates'); //Hide WordPress Update Alert add_action('admin_menu', 'wpc_wphidenag'); function wpc_wphidenag() { remove_action('admin_notices', 'update_nag', 3); } http://www.wpoptimus.com/626/7-ways-disable-update-wordpress-notifications/
  57. 57. Redirect non super-admin to dashboard //Redirect users to Dashboard based on Admin $pages = array( 'tools', 'options-general', 'options-writing', 'options-reading', 'options-discussion', 'options-permalink', 'options-media' ); // Pages WPTech Nantes 2014 57 foreach( $pages as $page ) add_action( "load-".$page.".php", 'wpc_block_users' ); function wpc_block_users() { wp_redirect( admin_url() ); exit(); }
  58. 58. SHOWCASE Exemple 58 WPTech Nantes 2014
  59. 59. 59 WPTech Nantes 2014
  60. 60. 60 WPTech Nantes 2014 Happy Tables
  61. 61. LIENS UTILES Ressources 61 WPTech Nantes 2014
  62. 62. http://generatewp.com/ : Générateur de code pour WordPress https://wordpress.org/plugins/better-admin-pointers/ : Better Admin Pointers https://developer.wordpress.org/plugins/hooks/ : Comprendre les hooks WPTech Nantes 2014 62 etc….
  63. 63. Merci !

×