Hướng dẫn chỉnh sửa WordPress Admin : Dashboard admin

This entry is part 2 of 6 in the series Customize Wordpress Admin

Hướng dẫn chỉnh sửa WordPress Admin : Trang login
Hướng dẫn chỉnh sửa WordPress Admin : Dashboard admin
Hướng dẫn chỉnh sửa WordPress Admin : Custom Admin Menus
Hướng dẫn chỉnh sửa WordPress Admin : Help Text
Hướng dẫn chỉnh sửa WordPress Admin: Listing Screen
Hướng dẫn chỉnh sửa WordPress Admin: Adding Styling

Tiếp theo loại bài về customize wordpress admin, hôm nay sharecodeweb hướng dẫn các bạn customize trang dashboard của wordpress theo cách tạo plugin.

Demo hình ảnh kết quả

Sau khi học xong bài này chúng ta sẽ làm được một số việc như sau:

Gỡ bỏ một số metabox không cần thiết
Di chuyển metabox sang vị trí khác
Thêm metabox phù hợp với người dùng

Nếu chỉ có vậy thì chắc chắn các bạn sẽ nghĩ rằng là tại sao mình phải viết một bài hướng dẫn như thế này. Thực ra mình muốn cho các bạn một cách tiếp cận khác ngoài việc sử dụng tính năng Screen Option của wordpress. Nhưng điều hạn chế của cách này là user không có quyền administrator sẽ không thể remove được. Do đó,bài này sẽ cho các bạn cách thiết kế theo plugin riêng, như vậy sẽ cho các bạn học thêm về bộ core của wordpress nhiều hơn và có thể tùy biến nhiều hơn

Nguyên liệu cần cho bài học

Cũng như bài trước, nguyên liệu cho bài học chúng ta cần như sau:

Bộ cài wordpress
Quyền truy cập vào folder plugin trên host của bạn
Và một text editor để có thể code

Setting up plugin

Các bước tạo một file plugin các bạn xem lại bài trước tại đây nhé. Mình sẽ không đưa lại nữa.

Gỡ một số metabox không mong muốn

Để remove một metabox nào đó không mong muốn, chúng ta thêm đoạn mã sau

// remove unwanted dashboard widgets for relevant users
function wptutsplus_remove_dashboard_widgets() {
    $user = wp_get_current_user();
    if ( ! $user->has_cap( 'manage_options' ) ) {
        remove_meta_box( 'dashboard_recent_comments', 'dashboard', 'normal' );
        remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'normal' );
        remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
        remove_meta_box( 'dashboard_primary', 'dashboard', 'side' );
        remove_meta_box( 'dashboard_secondary', 'dashboard', 'side' );
    }
}
add_action( 'wp_dashboard_setup', 'wptutsplus_remove_dashboard_widgets' );

// remove unwanted dashboard widgets for relevant users

function wptutsplus_remove_dashboard_widgets() {

$user = wp_get_current_user();

if ( ! $user->has_cap( 'manage_options' ) ) {

remove_meta_box( 'dashboard_recent_comments', 'dashboard', 'normal' );

remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'normal' );

remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );

remove_meta_box( 'dashboard_primary', 'dashboard', 'side' );

remove_meta_box( 'dashboard_secondary', 'dashboard', 'side' );

}

add_action( 'wp_dashboard_setup', 'wptutsplus_remove_dashboard_widgets' );

Như vậy, ở đây, tôi đã thực hiện gỡ bỏ các metabox sau

Recent Comments
Incoming Links
QuickPress
WordPress Blog
Other WordPress News

Lúc này, nhìn dashboard của bạn sẽ trông sáng sủa hơn rất nhiều.

Di chuyển một Metabox bất kỳ

Giả sử mình muốn di chuyển metabox Right Now sang bên phải, thì làm thế nào. Trong plugin của bạn, bạn thêm đoạn code sau:

// Move the 'Right Now' dashboard widget to the right hand side
function wptutsplus_move_dashboard_widget() {
    $user = wp_get_current_user();
    if ( ! $user->has_cap( 'manage_options' ) ) {
        global $wp_meta_boxes;
        $widget = $wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now'];
        unset( $wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now'] );
        $wp_meta_boxes['dashboard']['side']['core']['dashboard_right_now'] = $widget;
    }
}
add_action( 'wp_dashboard_setup', 'wptutsplus_move_dashboard_widget' );

// Move the 'Right Now' dashboard widget to the right hand side

function wptutsplus_move_dashboard_widget() {

$user = wp_get_current_user();

if ( ! $user->has_cap( 'manage_options' ) ) {

global $wp_meta_boxes;

$widget = $wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now'];

unset( $wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now'] );

$wp_meta_boxes['dashboard']['side']['core']['dashboard_right_now'] = $widget;

}

add_action( 'wp_dashboard_setup', 'wptutsplus_move_dashboard_widget' );

Thêm mới một metabox

Để thêm mới một metabox, chúng ta sử dụng hàm wp_add_dashboard_widget(), và active hook của wordpress lên.

// add new dashboard widgets
function wptutsplus_add_dashboard_widgets() {
    wp_add_dashboard_widget( 'wptutsplus_dashboard_welcome', 'Welcome', 'wptutsplus_add_welcome_widget' );
    wp_add_dashboard_widget( 'wptutsplus_dashboard_links', 'Useful Links', 'wptutsplus_add_links_widget' );
}
function wptutsplus_add_welcome_widget(){ ?>
 
    This content management system lets you edit the pages and posts on your website.
 
    Your site consists of the following content, which you can access via the menu on the left:
 
    <ul>
        <li><strong>Pages</strong> - static pages which you can edit.</li>
        <li><strong>Posts</strong> - news or blog articles - you can edit these and add more.</li>
        <li><strong>Media</strong> - images and documents which you can upload via the Media menu on the left or within each post or page.</li>
    </ul>
 
    On each editing screen there are instructions to help you add and edit content.
 
<?php }
 
function wptutsplus_add_links_widget() { ?>
 
    Some links to resources which will help you manage your site:
 
    <ul>
        <li><a href="http://wordpress.org">The WordPress Codex</a></li>
        <li><a href="http://easywpguide.com">Easy WP Guide</a></li>
        <li><a href="http://www.wpbeginner.com">WP Beginner</a></li>
    </ul>
<?php }
add_action( 'wp_dashboard_setup', 'wptutsplus_add_dashboard_widgets' );

// add new dashboard widgets

function wptutsplus_add_dashboard_widgets() {

wp_add_dashboard_widget( 'wptutsplus_dashboard_welcome', 'Welcome', 'wptutsplus_add_welcome_widget' );

wp_add_dashboard_widget( 'wptutsplus_dashboard_links', 'Useful Links', 'wptutsplus_add_links_widget' );

}

function wptutsplus_add_welcome_widget(){ ?>

This content management system lets you edit the pages and posts on your website.

Your site consists of the following content, which you can access via the menu on the left:

<ul>

<li>Pages - static pages which you can edit.</li>

<li>Posts - news or blog articles - you can edit these and add more.</li>

<li>Media - images and documents which you can upload via the Media menu on the left or within each post or page.</li>

</ul>

On each editing screen there are instructions to help you add and edit content.

<?php }

function wptutsplus_add_links_widget() { ?>

Some links to resources which will help you manage your site:

<ul>

<li><a href="http://wordpress.org">The WordPress Codex</a></li>

<li><a href="http://easywpguide.com">Easy WP Guide</a></li>

<li><a href="http://www.wpbeginner.com">WP Beginner</a></li>

</ul>

<?php }

add_action( 'wp_dashboard_setup', 'wptutsplus_add_dashboard_widgets' );

Ở đây, mình thực hiện thêm 2 metabox là Welcome và Userful links. Các bạn cũng có thể tùy biến theo cách của mình.

Download code

Vậy là các bạn đã học xong cách remove một metabox không mong muốn, chỉnh sửa vị trí của nó, và thêm mới một số metabox theo ý bạn. Bài học tới đây kết thúc!
Nếu bạn nào còn không hiểu thì có thể download demo bên dưới về để tham khảo chi tiết hơn cách viết nhé

Series Navigation<< Hướng dẫn chỉnh sửa WordPress Admin : Trang loginHướng dẫn chỉnh sửa WordPress Admin : Custom Admin Menus >>

Hướng dẫn chỉnh sửa WordPress Admin : Dashboard admin

Demo hình ảnh kết quả

Nguyên liệu cần cho bài học

Setting up plugin

Gỡ một số metabox không mong muốn

Di chuyển một Metabox bất kỳ

Thêm mới một metabox

Download code

Like this:

Có liên quan

Nguyễn Trung Hiếu

Demo hình ảnh kết quả

Nguyên liệu cần cho bài học

Setting up plugin

Gỡ một số metabox không mong muốn

Di chuyển một Metabox bất kỳ

Thêm mới một metabox

Download code

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu