Học Wordpress

Cách tùy biến trang đăng nhập của WordPress

74

Bài này thuộc phần 2 của 4 phần trong serie Tùy biến trang quản trị WordPress


Trong bài đầu tiên của serie này, mình sẽ hướng dẫn các bạn sử dụng API của WordPress để tùy biến lại trang đăng nhập của WordPress, cụ thể mình sẽ lấy ví dụ đơn giản là sửa lại logo của WordPress thành logo của mình và thay đổi màu nền.

custom-login-admin-01

Trang đăng nhập mặc định của WordPress

Tạo Plugin

Trước hết để dễ dàng quản lý code của mình, mình khuyên các bạn nên tự tạo plugin cho riêng mình. Trong cả serie này chúng ta sẽ tạo một plugin riêng để quản lý, trước tiên hãy vào thư mục /wp-content/plugins/ và tạo một thư mục tên là tp-custom-admin.

Trong thư mục này chúng ta sẽ có tập tin custom-admin.php và thư mục images (để chứa hình ảnh mà bạn sử dụng trong plugin). Cấu trúc như thế này:

custom-login-admin-setup2

Kế tiếp chúng ta mở tập tin custom-admin.php ra để thêm thông tin plugin vào nhé, để nó có thể hiển thị trong trang quản lý plugin.

<?php
/**
* Plugin Name: TP Customize Admin Screen
* Plugin URI: https://thachpham.com
* Description: Tùy biến lại trang quản trị của admin.
* Version: 1.0
* Author: Thach Pham
* Author URI: https://thachpham.com
*/

Và trong bài này, các code bạn sẽ viết ngay bên dưới đoạn khai báo thông tin này. Bây giờ hãy vào trang quản trị plugin mà kích hoạt plugin lên.

Tạo hàm tương tác đến trang đăng nhập

Bây giờ chúng ta sẽ khai báo một hàm sẽ chứa các đoạn code mà bạn muốn tùy biến vào trang đăng nhập, ví dụ mình có một hàm tên tp_custom_login().


/**
* Thay đổi logo trang đăng nhập và đổi màu nền
*/
function tp_custom_logo() {

}
add_action(‘login_enqueue_scripts’, ‘tp_custom_logo’);

Như đoạn code trên, bạn sẽ thấy chúng ta móc hàm tp_custom_logo() vào hook tên login_enqueue_scripts. Đây là cái hook mà nó sẽ hiển thị những gì chúng ta móc vào trong trang đăng nhập, nên chúng ta muốn thay đổi lại hình ảnh, màu sắc tức là sẽ viết thêm CSS cho trang đăng nhập nên móc vào hook này.

Thêm CSS tùy biến vào trang đăng nhập

Chúng ta đã có hàm đã khai báo ở trên rồi, bây giờ chúng ta có thể thêm bất cứ code tùy biến nào nhưng để dễ thực hành nhất chúng ta sẽ thêm CSS để đổi hình logo và màu nền cho trang đăng nhập.

Trước tiên chúng ta cần đóng code PHP lại để có thể viết CSS dễ hơn như thế này:

function tp_custom_logo() { ?>

<?php }
add_action(‘login_enqueue_scripts’, ‘tp_custom_logo’);

Bây giờ chúng ta sẽ viết CSS hoặc HTML vào đoạn trống ở giữa đó nhé. Trước hết là ta sẽ thay đổi logo, bây giờ bạn ra trang đăng nhập xem cấu trúc HTML của nó thì sẽ thấy phần logo hiển thị nó nằm trong id #login.

Xem cấu trúc HTML của đối tượng cần sửa

Xem cấu trúc HTML của đối tượng cần sửa

Okay vậy bây giờ ta sẽ có đoạn CSS sau (nhớ thay lại ảnh logo của bạn nhé):

<style type="text/css">
#login h1 a {
background-image: url(<?php echo plugins_url(‘images/logo.png’, __FILE__); ?>);
background-size: 280px 80px;
width: 280px;
height: 80px;
}
</style>

Ngay dòng số 3, mình có sử dụng hàm plugins_url() như sau:

<?php echo plugins_url(‘images/logo.png’, __FILE__); ?>

Chỗ này nghĩa là nó sẽ in ra đường dẫn tới tập tin logo.png trong thư mục images của plugin hiện tại vì hàm plugins_url có tác dụng lấy đường dẫn của plugin, tham số __FILE__ nghĩa là lấy đường dẫn thư mục hiện tại của tập tin hiện tại.

Bây giờ kết quả ta có:

custom-login-admin-04

Giờ thì thêm tiếp CSS cho nó khác biệt hơn nha.


function tp_custom_logo() { ?>
<style type="text/css">

body {
background: #34566f !important;

}
.login #nav a, .login #backtoblog a, .login label {
color: #f3f3f3 !important;
}
.wp-core-ui .button-primary {
background: #31b36b !important;
border: none !important;
text-shadow: none !important;
box-shadow: none !important;

}
.login form {
box-shadow: none !important;
background: transparent !important;
}
#login h1 a {
background-image: url(<?php echo plugins_url(‘images/logo.png’, __FILE__); ?>);
background-size: 280px 80px;
width: 280px;
height: 80px;
}
</style>
<?php }
add_action(‘login_enqueue_scripts’, ‘tp_custom_logo’);

[alert color=”green” type=”alert-message-outline” title=”Tips” size=”small”]Để viết CSS chính xác, bạn nên dùng công cụ Inspect của trình duyệt để xem CSS của thành phần cần chỉnh sửa rồi viết CSS đè lên vùng chọn đó (xem video).[/alert]

Kết quả:

custom-login-admin-05

Nếu như bạn muốn tự xây dựng trang đăng nhập riêng cho WordPress mà không dùng trang /wp-admin mặc định thì có thể tham khảo hướng dẫn này.

Tự đánh dấu “Remember Me”

Nếu bạn muốn nút Remember Me được đánh dấu vào mặc định để ghi nhớ lần đăng nhập sau thì có thể thêm hàm dưới đây để tùy biến nó nhé.

</pre>
<pre>/**
* Tự đánh dấu vào nút Remember Me để ghi nhớ lần đăng nhập sau
*/
function tp_rememberme_check() {
add_filter( ‘login_footer’, ‘tp_rememberme_checked’ );
}
add_action( ‘init’, ‘tp_rememberme_check’ );

function tp_rememberme_checked() {
echo "<script>document.getElementById(‘rememberme’).checked = true</scrip>";
}</pre>
<pre>

Okay đơn giản vậy thôi, tiếp tục ở các bài sau chúng ta sẽ tùy biến lại bên trong trang quản trị của WordPress nhé.

Xem tiếp bài trong serie

Phần trước: Tùy biến trang quản trị WordPress – Chuẩn bịPhần kế tiếp: Thêm logo và sửa footer trong trang quản trị WordPress

Học Wordpress

Thêm và xóa widget trong trang quản trị WordPress

98

Bài này thuộc phần 4 của 4 phần trong serie Tùy biến trang quản trị WordPress


Khi nói đến widget trong WordPress có thể bạn sẽ nghĩ ngay đến các thành phần widget hiển thị ra ngoài website. Tuy nhiên widget mình nhắc đến trong bài này không phải để hiển thị ra ngoài website mà là widget bên trong trang quản trị, nó nằm ở phần Dashboard như hình dưới.

admin-widget-1

Và trong bài này mình sẽ hướng dẫn các bạn cách xóa đi những widget mặc định cũng như tạo ra một widget mới trong trang quản trị để dùng nó hiển thị một số thông tin mà bạn muốn.

Thông tin tham khảo:

  • Dashboard Widget API

[alert color=”orange” type=”alert-message-background” title=”Note” size=”small”]Bài này bạn sẽ viết code vào plugin đã tạo ở bài 2 trong serie này.[/alert]

Cách xóa widget mặc định trong trang quản trị

Nếu bạn giống mình, thì các widget trong trang quản trị hầu như mình không dùng tới từ rất lâu rồi vì nó cũng ít thông tin quá, chi bằng chúng ta nên xóa nó đi để khỏi phải nhìn thấy nó nữa.

Để làm việc này, chúng ta sẽ tạo một hàm và móc nó vào action hook tên wp_dashboard_setup.


/**
* Xóa widget mặc định trong trang quản trị
*/
function tp_remove_default_admin_widget() {

}
add_action( ‘wp_dashboard_setup’, ‘tp_remove_default_admin_widget’ );

Và sau đó trong hàm này ta dùng hàm remove_meta_box để xóa widget ở đây. Sở dĩ dùng hàm này vì những cái widget này là những meta box tạo ra cho loại trang tên là dashboard. Và ví dụ mình muốn xóa cái widget WordPress News thì có đoạn sau:


/**
* Xóa widget mặc định trong trang quản trị
*/
function tp_remove_default_admin_widget() {

remove_meta_box( ‘dashboard_primary’, ‘dashboard’, ‘side’ );

}
add_action( ‘wp_dashboard_setup’, ‘tp_remove_default_admin_widget’ );

Tương tự bạn có thể xem danh sách tên các dashboard mặc định tại đây và muốn xóa cái nào thì copy cái đó vào hàm của mình thôi nhé.

Trường hợp bạn muốn xóa đi cái phần hiển thị thông tin chào mừng trong Dashboard thì phải sử dụng remove_action() nhé, và đặt code này nằm bên ngoài hàm của bạn.

remove_action( ‘welcome_panel’, ‘wp_welcome_panel’ );

Cách tạo một widget trong trang quản trị

Thông thường khi tạo website cho khách hàng, chúng ta có thể cần sử dụng phần Dashboard để đăng một ghi chú nhắc nhở, hay các chức năng nâng cao như lấy tin tức mới nhất trên trang của mình, hay cập nhật giá vàng tỷ giá gì đó,….tùy theo mức độ code của bạn.

Trong hướng dẫn này mình sẽ hướng dẫn cách tạo một widget đơn giản và một widget hiển thị bài viết mới nhất trên trang của mình thông qua RSS nhé.

Trước tiên chúng ta cũng tạo một hàm riêng và móc nó vào action hook tên wp_dashboard_setup. Và trong hàm này chúng ta sử dụng hàm wp_add_dashboard_widget() để tạo ra một cái widget mới.


/**
* Tạo widget trong trang quản trị
*/
function tp_create_admin_widget_notice() {
wp_add_dashboard_widget( ‘tp_notice’, ‘Ghi chú nhắc nhở’, ‘tp_create_admin_widget_notice_callback’ );
}
add_action( ‘wp_dashboard_setup’, ‘tp_create_admin_widget_notice’ );

Ở đoạn trên, mình có:

wp_add_dashboard_widget( ‘tp_notice’, ‘Ghi chú nhắc nhở’, ‘tp_create_admin_widget_notice_callback’ );

Trong đó:

  • tp_notice: ID của widget, ID phải không trùng với các widget khác.
  • Ghi chú nhắc nhở: Tên tiêu đề của widget
  • tp_create_admin_widget_notice_callback: Tên của hàm mà nó sẽ thực thi trong cái widget này, ở đây bạn có thể hiểu hàm này chứa cái gì là nó sẽ hiển thị trong widget có ID là tp_notice.

Okay, bây giờ chúng ta tạo tiếp hàm tp_create_admin_widget_notice_callback() mà chúng ta đã khai báo ở trên để hiển thị nội dung ra widget đã tạo. Trong hàm này mình tạm thời cho hiển thị một đoạn văn bản đơn giản thôi.


function tp_create_admin_widget_notice_callback() {
echo ‘

Đây là nội dung mẫu trong bài hướng dẫn cách tạo một widget đơn giản trong trang quản trị.

‘;
}

Lưu lại và kết quả ta có:

admin-widget-2

Còn nếu các bạn muốn tạo một widget hiển thị danh sách những bài viết mới nhất trên website của mình hoặc website nào đó thì xem hướng dẫn tại bài Build Your Own WordPress Dashboard Widget for Any RSS Feed nhé.

Do bạn có toàn quyền sử dụng code PHP trong phần này nên bạn có thể tự sáng tạo ra những nội dung có thể hiển thị ở đây.

Theo cơ chế sử dụng thì chỉ đơn giản như vậy thôi. Nhưng hy vọng khi bạn đã biết được những cái đơn giản rồi thì sẽ có thể dễ dàng tự tìm ra những cách hay hơn để sử dụng những widget trong trang quản trị có ích hơn.

Xem tiếp bài trong serie

Phần trước: Thêm logo và sửa footer trong trang quản trị WordPress

Học Wordpress

Thêm logo và sửa footer trong trang quản trị WordPress

51

Bài này thuộc phần 3 của 4 phần trong serie Tùy biến trang quản trị WordPress


Trong bài tùy biến trang đăng nhập của WordPress chúng ta đã thành công trong việc đổi logo và thay đổi lại màu sắc tổng thể của trang đó. Tiếp tục từ trong bài này, chúng ta sẽ tiến hành tùy biến các thành phần bên trong trang quản trị, và đầu tiên là chúng ta sẽ thay đổi lại chữ dưới footer trang quản trị và thêm một logo của website vào trong đó cho nhìn thương hiệu hóa hơn.

[alert color=”orange” type=”alert-message-background” title=”Note” size=”small”]Bài này bạn sẽ viết code vào plugin mà chúng ta đã tạo ở bài 2 của serie này.[/alert]

Thêm logo vào trang quản trị

Vẫn là việc quen thuộc, trước tiên chúng ta tạo một hàm để làm việc này và móc vào action hook tên admin_notices.

/**
* Thêm logo vào trang quản trị WordPress
*/
function tp_admin_logo() {

}
add_action( ‘admin_notices’, ‘tp_admin_logo’ );

Trong hook này, nếu chúng ta in một cái gì đó ra thì nó sẽ hiển thị ra đầu trang quản trị, nên nếu chúng ta in một tấm hình logo ra thì chúng ta sẽ có logo thôi, đơn giản phải không.


/**
* Thêm logo vào trang quản trị WordPress
*/
function tp_admin_logo() {
echo ‘<br/> <img src="’ .plugins_url(‘images/logo.png’, __FILE__). ‘"/>’;
}
add_action( ‘admin_notices’, ‘tp_admin_logo’ );

Kết quả ta có:

custom-admin-01

Và dựa theo cách này, chúng ta có thể chèn bất cứ thứ gì nữa lên trên khu vực đó nhé.

Đổi chữ dưới footer của trang quản trị

Tham khảo trước: Hướng dẫn Filter Hook

Không giống như logo, mặc định WordPress đã có một dòng chữ dưới footer của trang quản trị mà bạn có thể nhìn thấy khi kéo xuống dưới cuối trang. Bây giờ chúng ta có thể dễ dàng đổi lại nó bằng cách sử dụng filter hook và móc vào hook admin_footer_text . Mình xin nhắc lại, tại sao lại dùng filter hook mà không dùng action? Vì nó đã có nội dung sẵn rồi, bây giờ chúng ta cần “filter” qua để chèn nội dung chúng ta muốn hiển thị thay vì mặc định nên dùng filter hook là vậy.

/**
* Sửa chữ dưới footer của trang quản trị
*/
function tp_admin_footer_credits( $text ) {
$text = ‘<p>Chào mừng bạn đến với website thachpham.com</p>’;
return $text;
}
add_filter( ‘admin_footer_text’, ‘tp_admin_footer_credits’ );

Khi filter chúng ta nên gán cho hàm một tham số tên tùy ý, rồi thiết lập nội dung vào tham số đó và dùng return để hiển thị nội dung ra nhé, đó là cách dùng filter thông dụng nhất.

Kết quả ta có:

custom-admin-02

Vậy là xong rồi đó, trong bài này chúng ta chỉ làm vậy thôi cho đỡ mệt mỏi. Ở các bài sau mình sẽ có thêm những hướng dẫn để bạn tùy biến lại trang quản trị WordPress nhiều hơn nữa.

Xem tiếp bài trong serie

Phần trước: Cách tùy biến trang đăng nhập của WordPressPhần kế tiếp: Thêm và xóa widget trong trang quản trị WordPress