Upload
benjamin-denis
View
5.461
Download
3
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
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 !