63
1 Benjamin Denis @wpcloudy wpcloudy.com Personnaliser le Back Office de WordPress pour votre client WPTech Nantes 2014

Personnaliser le back office de WordPress pour votre client

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: Personnaliser le back office de WordPress pour votre client

1

Benjamin Denis

@wpcloudy

wpcloudy.com

Personnaliser le Back Office de WordPress

pour votre client

WPTech Nantes 2014

Page 2: Personnaliser le back office de WordPress pour votre client

2WPTech Nantes 2014

Benjamin DenisDéveloppeur / intégrateur web en agence

@wpcloudy

Page 3: Personnaliser le back office de WordPress pour votre client

FLASHBACK

Précédemment

dans WordPress

3WPTech Nantes 2014

Page 4: Personnaliser le back office de WordPress pour votre client

4WPTech Nantes 2014

Mai 2003

WordPress 0.7

Page 5: Personnaliser le back office de WordPress pour votre client

5WPTech Nantes 2014

Janvier 2004

WordPress 1.0

Page 6: Personnaliser le back office de WordPress pour votre client

6WPTech Nantes 2014

Décembre 2005

WordPress 2.0

Page 7: Personnaliser le back office de WordPress pour votre client

7WPTech Nantes 2014

Mars 2008

WordPress 2.5

Page 8: Personnaliser le back office de WordPress pour votre client

8WPTech Nantes 2014

Décembre 2008

WordPress 2.7

Page 9: Personnaliser le back office de WordPress pour votre client

9WPTech Nantes 2014

Aujourd’hui

WordPress 4.0

Page 10: Personnaliser le back office de WordPress pour votre client

INTRO

Le Pourquoi

du Comment

10WPTech Nantes 2014

Page 11: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Pourquoi personnaliser l’admin de WordPress ?

11

• Simplification

• Apprentissage plus rapide

• Marque blanche

• « Sur mesure »

Page 12: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Comment ?

12

• Hooks (car c’est simple et rapide)

• Plugins (car certaines fois c’est plus pratique)

Page 13: Personnaliser le back office de WordPress pour votre client

PORTE D’ENTREE

Ecran de connexion

13WPTech Nantes 2014

Page 14: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Changer l’url de connexion

14

https://wordpress.org/plugins/sf-move-login/

Page 15: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

http://codex.wordpress.org/Customizing_the_Login_Form

Styliser l’écran de connexion

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' );

Page 16: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Se souvenir de moi toujours coché

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>";

}

Page 17: Personnaliser le back office de WordPress pour votre client

17WPTech Nantes 2014

Page 18: Personnaliser le back office de WordPress pour votre client

ARRIERE BOUTIQUE

Administration

18WPTech Nantes 2014

Page 19: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Styliser l’administration de WordPress

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

Page 20: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer le numéro de version de WordPress du footer

20

Page 21: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer le numéro de version de WordPress du footer

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/

Page 22: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer les crédits WordPress du footer

22

Page 23: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

//Remove WordPress Footer Credits

function wpc_remove_footer_admin() {

return '';

}

add_filter('admin_footer_text', 'wpc_remove_footer_admin');

Supprimer les crédits WordPress du footer

23

Page 24: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

//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');

Favicon dans l’admin

24

http://codex.wordpress.org/Plugin_API/Action_Reference/admin_head

Page 25: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer l’onglet Aide

25

Page 26: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer l’onglet Aide

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

Page 27: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer l’onglet Options de l’écran

27

Page 28: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer l’onglet Options de l’écran

28

//Remove Screen Options

add_filter('screen_options_show_screen', '__return_false');

https://developer.wordpress.org/reference/hooks/screen_options_show_screen/

Page 29: Personnaliser le back office de WordPress pour votre client

ARRIERE BOUTIQUE

Tableau de bord

29WPTech Nantes 2014

Page 30: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer des widgets du tableau de bord

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

Page 31: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer des widgets du tableau de bord

31

Page 32: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Créer son widget perso dans le tableau de bord

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

Page 33: Personnaliser le back office de WordPress pour votre client

ARRIERE BOUTIQUE

Les menus / sous menus

33WPTech Nantes 2014

Page 34: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer des pages du menu d’admin

34

Page 35: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer des pages du menu d’admin

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

Page 36: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Ajouter vos propres pages au menu d’admin

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

//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');

Page 37: Personnaliser le back office de WordPress pour votre client

ARRIERE BOUTIQUE

Admin bar

37WPTech Nantes 2014

Page 38: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer des éléments de l’admin bar

38

Page 39: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer des éléments de l’admin bar

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

Page 40: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Ajouter vos propres éléments à l’admin bar 1/2

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;

}

Page 41: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Ajouter vos propres éléments à l’admin bar 2/2

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 );

Page 42: Personnaliser le back office de WordPress pour votre client

ARRIERE BOUTIQUE

Edition

42WPTech Nantes 2014

Page 43: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

TINY MCE : l’éditeur de texte de WordPress

43

Page 44: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

TINY MCE : l’éditeur de texte de WordPress

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/

Page 45: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer Obtenir le lien court

45

Page 46: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer Obtenir le lien court

46

//Remove Get Shortlink

add_filter( 'pre_get_shortlink', '__return_empty_string' );

https://developer.wordpress.org/reference/hooks/pre_get_shortlink/

Page 47: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Personnalisation d’Ajouter média

47

Page 48: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Personnalisation d’Ajouter média

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/

Page 49: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Personnalisation d’Ajouter média

49

Page 50: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer des metaboxes

50

Page 51: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer des metaboxes

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

Page 52: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer des colonnes des vues listes

52

Page 53: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer des colonnes des vues listes

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/

Page 54: Personnaliser le back office de WordPress pour votre client

ARRIERE BOUTIQUE

Divers

54WPTech Nantes 2014

Page 55: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer les notifications d’updates WordPress

55

Page 56: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Supprimer les notifications d’updates WordPress

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/

Page 57: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

Redirect non super-admin to dashboard

57

//Redirect users to Dashboard based on Admin

$pages = array( 'tools', 'options-general', 'options-writing', 'options-reading', 'options-discussion', 'options-permalink', 'options-media' ); //

Pages

foreach( $pages as $page )

add_action( "load-".$page.".php", 'wpc_block_users' );

function wpc_block_users() {

wp_redirect( admin_url() );

exit();

}

Page 58: Personnaliser le back office de WordPress pour votre client

SHOWCASE

Exemple

58WPTech Nantes 2014

Page 59: Personnaliser le back office de WordPress pour votre client

59WPTech Nantes 2014

Page 60: Personnaliser le back office de WordPress pour votre client

60WPTech Nantes 2014

Happy Tables

Page 61: Personnaliser le back office de WordPress pour votre client

LIENS UTILES

Ressources

61WPTech Nantes 2014

Page 62: Personnaliser le back office de WordPress pour votre client

WPTech Nantes 2014

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

62

etc….

Page 63: Personnaliser le back office de WordPress pour votre client

Merci !