Personnaliser le back office de WordPress pour votre client

20 606 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
20 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
20 606
Sur SlideShare
0
Issues des intégrations
0
Intégrations
8 104
Actions
Partages
0
Téléchargements
340
Commentaires
0
J’aime
20
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 !

×