Personnaliser le back office de WordPress pour votre client

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

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
• Marque blanche
• « Sur mesure »

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

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

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_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

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
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/

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 '';
}
add_filter('admin_footer_text', 'wpc_remove_footer_admin');
WPTech Nantes 2014
23

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

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, 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

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_screen', '__return_false');
https://developer.wordpress.org/reference/hooks/screen_options_show_screen/

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_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

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_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
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_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

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

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( '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

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

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

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_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/

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', '__return_empty_string' );
https://developer.wordpress.org/reference/hooks/pre_get_shortlink/

Personnalisation d’Ajouter média
WPTech Nantes 2014
47

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/

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('postimagediv', 'post', 'normal'); //Featured image
}
add_action( 'admin_menu', 'wpc_remove_meta_boxes' );
http://codex.wordpress.org/Function_Reference/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', '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
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_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/

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

SHOWCASE
Exemple
58
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 Admin Pointers
https://developer.wordpress.org/plugins/hooks/ : Comprendre les hooks
WPTech Nantes 2014
62
etc….

Personnaliser le back office de WordPress pour votre client

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Personnaliser le back office de WordPress pour votre client