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

2WPTech Nantes 2014

Benjamin DenisDéveloppeur / intégrateur web en agence

@wpcloudy

FLASHBACK

Précédemment

dans WordPress

3WPTech Nantes 2014

4WPTech Nantes 2014

Mai 2003

WordPress 0.7

5WPTech Nantes 2014

Janvier 2004

WordPress 1.0

6WPTech Nantes 2014

Décembre 2005

WordPress 2.0

7WPTech Nantes 2014

Mars 2008

WordPress 2.5

8WPTech Nantes 2014

Décembre 2008

WordPress 2.7

9WPTech Nantes 2014

Aujourd’hui

WordPress 4.0

INTRO

Le Pourquoi

du Comment

10WPTech Nantes 2014

WPTech Nantes 2014

Pourquoi personnaliser l’admin de WordPress ?

11

• Simplification

• Apprentissage plus rapide

• Marque blanche

• « Sur mesure »

WPTech Nantes 2014

Comment ?

12

• Hooks (car c’est simple et rapide)

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

PORTE D’ENTREE

Ecran de connexion

13WPTech Nantes 2014

WPTech Nantes 2014

Changer l’url de connexion

14

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

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

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

}

17WPTech Nantes 2014

ARRIERE BOUTIQUE

Administration

18WPTech Nantes 2014

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

WPTech Nantes 2014

Supprimer le numéro de version de WordPress du footer

20

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/

WPTech Nantes 2014

Supprimer les crédits WordPress du footer

22

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

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

WPTech Nantes 2014

Supprimer l’onglet Aide

25

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

WPTech Nantes 2014

Supprimer l’onglet Options de l’écran

27

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/

ARRIERE BOUTIQUE

Tableau de bord

29WPTech Nantes 2014

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

WPTech Nantes 2014

Supprimer des widgets du tableau de bord

31

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

ARRIERE BOUTIQUE

Les menus / sous menus

33WPTech Nantes 2014

WPTech Nantes 2014

Supprimer des pages du menu d’admin

34

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

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

ARRIERE BOUTIQUE

Admin bar

37WPTech Nantes 2014

WPTech Nantes 2014

Supprimer des éléments de l’admin bar

38

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

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;

}

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

ARRIERE BOUTIQUE

Edition

42WPTech Nantes 2014

WPTech Nantes 2014

TINY MCE : l’éditeur de texte de WordPress

43

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/

WPTech Nantes 2014

Supprimer Obtenir le lien court

45

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/

WPTech Nantes 2014

Personnalisation d’Ajouter média

47

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/

WPTech Nantes 2014

Personnalisation d’Ajouter média

49

WPTech Nantes 2014

Supprimer des metaboxes

50

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

WPTech Nantes 2014

Supprimer des colonnes des vues listes

52

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/

ARRIERE BOUTIQUE

Divers

54WPTech Nantes 2014

WPTech Nantes 2014

Supprimer les notifications d’updates WordPress

55

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/

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

}

SHOWCASE

Exemple

58WPTech Nantes 2014

59WPTech Nantes 2014

60WPTech Nantes 2014

Happy Tables

LIENS UTILES

Ressources

61WPTech Nantes 2014

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….

Merci !