WordPress, CMS phổ biến nhất thế giới cũng được các nhà phát triển khá yêu thích. Trong số nhiều tùy chỉnh và tính linh hoạt có thể có của nó, có thể chỉ ra rằng việc mở rộng phía quản trị viên của WordPress. Trong bài đăng này, chúng tôi sẽ hướng dẫn bạn cách sử dụng trang quản trị tùy chỉnh WordPress để mang lại nhiều tùy chọn hơn cho người dùng

Trang quản trị tùy chỉnh WordPress là gì?

Bảng điều khiển quản trị viên WordPress là trang đầu tiên bạn sẽ thấy sau khi đăng nhập. Sử dụng menu bên, bạn có thể điều hướng đến các trang quản trị khác như Giao diện, Plugin, Cài đặt, Người dùng, v.v.

Bạn cũng có thể thấy các mục menu mới sau khi kích hoạt chủ đề hoặc plugin chuyển hướng bạn đến trang quản trị mới. Nó có thể là trang cài đặt cho plugin, bảng điều khiển của chủ đề, trang hiển thị trạng thái trang web của bạn hoặc thậm chí là trang tài liệu. Trang quản trị tùy chỉnh là một tính năng rất hữu ích cho phép nhà phát triển mở rộng quyền quản trị với các tùy chọn mới

Cách thêm trang quản trị tùy chỉnh WordPress

Để thêm trang quản trị tùy chỉnh trong WordPress, chúng ta cần 2 thứ

1. Một menu quản trị (chức năng add_menu_page)
2. Nội dung trang (chức năng tùy chỉnh)

Để thêm một mục menu quản trị mới, chúng ta có thể sử dụng chức năng sau

add_menu_page( string $page_title, 
string $menu_title, string $capability, 
string $menu_slug, callable $function = '', 
string $icon_url = '', int $position = null )

Hãy đi sâu vào từng mục để tìm hiểu chúng là gì

1. $page_title Văn bản sẽ được hiển thị trong thẻ tiêu đề của trang khi menu được chọn. Chọn một tiêu đề trang có ý nghĩa. Ví dụ: nếu trang quản trị tùy chỉnh của bạn là trang tùy chọn cho plugin, thì đó có thể là “Tùy chọn plugin của tôi”. Lưu ý rằng nó phải có thể dịch được. Vì vậy, hãy sử dụng hàm _ như ví dụ sau. _( 'Tùy chọn plugin của tôi', 'tên miền văn bản plugin của tôi')

2. $menu_title Văn bản được sử dụng cho menu

3. $capability Khả năng cần thiết để menu này được hiển thị cho người dùng. Ví dụ: nếu nó chứa một số tùy chọn chung cho trang web, thì manage_option có thể là lựa chọn tốt nhất. Chỉ cần đặt cẩn thận để tránh bất kỳ sự cố bảo mật nào có thể xảy ra

Kiểm tra trang và xem khả năng thích hợp dành cho trang quản trị tùy chỉnh của bạn là gì

4. $menu_slug Tên sên đề cập đến menu này. Nó phải là duy nhất cho trang menu này và chỉ bao gồm chữ và số viết thường, dấu gạch ngang và dấu gạch dưới để tương thích với sanitize_key(). Điều này sẽ được sử dụng làm tham số trong URL của trang quản trị tùy chỉnh của bạn như được hiển thị trong hình

5. $function Hàm được gọi để hiển thị nội dung đầu ra cho trang này. Ví dụ đơn giản, chúng ta có thể sử dụng đoạn mã sau để hiển thị tiêu đề trong trang quản trị

function my_admin_page_contents() {
	?>
		

			
	

6. $icon_url URL của biểu tượng được sử dụng cho menu này. Bạn có thể sử dụng hình ảnh, SVG được mã hóa hoặc biểu tượng dấu gạch ngang

• Để sử dụng một hình ảnh, chỉ cần chuyển URL của hình ảnh
• Nếu bạn muốn có một biểu tượng như mặc định của WordPress, có màu khác khi di chuột, bạn có thể chuyển tệp SVG được mã hóa. http. //b64. io/ có thể chuyển đổi tệp SVG của bạn thành dữ liệu được mã hóa base64. Sau khi tải lên SVG của bạn, chỉ cần sao chép liên kết bắt đầu bằng dữ liệu. image/svg+xml;base64 và dán nó vào
• Bạn có thể sử dụng các biểu tượng WordPress hiện có. Tìm một biểu tượng thích hợp từ trang WordPress Dashicons và chuyển tên lớp như dashicons-schedule làm đối số URL của biểu tượng
• Ngoài ra, bạn có thể sử dụng none value để rời khỏi div. wp-menu-image trống, vì vậy có thể thêm biểu tượng qua CSS

7. $position Vị trí trong thứ tự menu sẽ xuất hiện. Dưới đây là danh sách số menu quản trị mặc định

• 2 – Bảng điều khiển
• 4 – Dải phân cách
• 5 – Bài viết
• 10 – Truyền thông
• 15 – Liên kết
• 20 – Trang
• 25 – Nhận xét
• 59 – Dấu phân cách
• 60 – Ngoại hình
• 65 – Plugin
• 70 – Người dùng
• 75 – Công cụ
• 80 – Cài đặt
• 99 – Dấu phân cách

Vì vậy, nếu bạn muốn hiển thị menu của mình sau Bảng điều khiển, bạn nên sử dụng 3

Trong bảng sau, bạn có thể thấy một phần thông tin ngắn gọn về từng mục

Add_menu_page đối số

Đặt tất cả lại với nhau, bạn sẽ có

function my_admin_menu() {
		add_menu_page(
			__( 'Sample page', 'my-textdomain' ),
			__( 'Sample menu', 'my-textdomain' ),
			'manage_options',
			'sample-page',
			'my_admin_page_contents',
			'dashicons-schedule',
			3
		);
	}

	add_action( 'admin_menu', 'my_admin_menu' );


	function my_admin_page_contents() {
		?>
			

				
			
		

Bạn nên biết rằng có thể thêm menu con vào menu hiện có hoặc menu mới được thêm bằng các chức năng sau

• add_posts_page Thêm menu con trong menu Bài viết
• add_pages_page Thêm menu con trong menu Trang
• add_media_page Thêm menu con trong menu Media
• add_comments_page Thêm menu con dưới menu Nhận xét
• add_theme_page Thêm menu con trong menu Giao diện
• add_plugin_page Thêm menu con trong menu Plugins
• add_users_page Thêm menu con trong menu Người dùng
• add_manager_page Thêm menu con trong menu Công cụ
• add_options_page Thêm menu con trong menu Cài đặt

Và tất cả chúng đều là một trình bao bọc của hàm add_submenu_page, vì vậy chúng tôi sử dụng chúng theo cùng một cách

add_submenu_page( string $parent_slug, string $page_title, 
string $menu_title, string $capability, 
string $menu_slug, callable $function = '' );

Và đó là nó. Chúng tôi có một trang quản trị tùy chỉnh. Nhưng, còn việc thêm các kiểu và tập lệnh tùy chỉnh cho nội dung của nó thì sao?

Thêm kiểu và tập lệnh vào trang quản trị tùy chỉnh WordPress

Hãy xem cách chúng ta có thể đặt kiểu sau khi thêm nội dung trang

function load_custom_wp_admin_style($hook) {
	// Load only on ?page=mypluginname
	if( $hook != 'toplevel_page_mypluginname' ) {
		 return;
	}
	wp_enqueue_style( 'custom_wp_admin_css', 
plugins_url('admin-style.css', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

Đoạn mã trên sẽ tải các kiểu quản trị viên. chỉ tập tin css trong trang mypluginname. Nếu bạn thắc mắc tại sao chúng ta nên làm điều này, lý do là việc tải các kiểu trong tất cả các trang quản trị có thể gây ra những thay đổi không mong muốn trong các trang quản trị khác. Ví dụ: bạn không muốn thay đổi kích thước của văn bản trong trang tổng quan

Nếu bạn không chắc tên $hook của mình là gì, hãy sử dụng tên này để xác định tên hook của bạn. Và sau đó, thay đổi nó thành mã bên dưới

function load_custom_wp_admin_style( $hook ) {
	wp_die( $hook );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

Ghi chú. Không sử dụng wp_die trong khi bạn đang chỉnh sửa tệp từ trình chỉnh sửa plugin. Nó có thể khiến bạn mất quyền truy cập vào trang quản trị cho đến khi bạn gỡ bỏ nó

Bạn cũng có thể sử dụng các kiểu đã đăng ký mặc định trong WordPress, như thế này

function load_custom_wp_admin_style( $hook ) {
	// Load only on ?page=mypluginname
	if( $hook != 'toplevel_page_mypluginname' ) {
		 return;
	}
	// Load color picker styles. 
	wp_enqueue_style( 'wp-color-picker' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

Trong đoạn mã trên, chúng tôi không chỉ định bất kỳ URL nào cho tệp kiểu vì nó đã được đăng ký một lần và WordPress biết điều đó. Bằng cách đăng ký một tệp kiểu, bạn giới thiệu nó với WordPress mà không cần tải nó. Và sau đó, bạn có thể tải nó bằng cách sử dụng tên trình xử lý kiểu ở bất kỳ đâu trong mã. Hãy xem đoạn mã sau

function register_my_plugin_styles() {

wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );

}



// Register style sheet.

add_action( 'admin_enqueue_scripts', 'register_my_plugin_styles' );



function load_custom_wp_admin_style($hook) {

// Load only on ?page=mypluginname

if( $hook != 'toplevel_page_mypluginname' ) {

return;

}

// Load style

wp_enqueue_style( 'my-plugin' );

}



add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

Same as above, we can load custom scripts in admin pages:



function register_my_plugin_scripts() {

wp_register_script( 'my-plugin', get_stylesheet_directory_uri() . 'https://d3fvlpdr5b7667.cloudfront.net/plugin-scripts.js', array( 'jquery' ) );

}



// Register style sheet.

add_action( 'admin_enqueue_scripts', 'register_my_plugin_scripts' );



function load_custom_wp_admin_scripts($hook) {

// Load only on ?page=mypluginname

if($hook != 'toplevel_page_mypluginname') {

return;

}

// Load style

wp_enqueue_script( 'my-plugin' );

}



add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_scripts' );

Có rất nhiều thư viện JavaScript có trong WordPress mà bạn có thể sử dụng. Ngoài ra còn có một danh sách các tập lệnh mặc định được bao gồm và đăng ký bởi WordPress

Gói nó trong một plugin

Trong phần này, chúng tôi đặt tất cả các mã trong một tệp duy nhất, bạn có thể cài đặt tệp này dưới dạng plugin để thêm các trang quản trị tùy chỉnh WordPress mới

________số 8_______

Và kết quả cuối cùng sẽ như thế này

Trong bài đăng tiếp theo, chúng tôi sẽ chỉ cho bạn cách thêm cài đặt tùy chỉnh vào Trang quản trị tùy chỉnh WordPress, cách xử lý biểu mẫu và cách bảo mật chúng

Làm cách nào để tạo một plugin trong WordPress?

Cách tạo plugin WordPress (trong 6 bước) .

Bước 1. Thực hiện một số nghiên cứu và lập kế hoạch. Có hàng ngàn công cụ trong Thư mục plugin WordPress. .

Bước 2. Thiết lập môi trường thử nghiệm. .

Bước 3. Tạo tệp plugin. .

Bước 4. Thêm mã vào plugin của bạn. .

Bước 5. Kiểm tra plugin của bạn. .

Bước 6. Phân phối plugin của bạn

Tại sao tôi không thể thấy menu plugin trong WordPress?

Phần plugin sẽ không xuất hiện trên bảng điều khiển WordPress nếu bạn không có vai trò Quản trị viên . Nếu chủ sở hữu trang web yêu cầu bạn chỉnh sửa hoặc cài đặt plugin, bạn cần yêu cầu tăng vai trò người dùng của mình. Bạn có thể tìm thấy tên của quản trị viên tại WordPress Users > All Users Menu.

Làm cách nào để thêm Add_menu_page trong WordPress?

add_menu_page( string $page_title, string $menu_title, string $capability, string $menu_slug, callback $callback = '', string $icon_url = '', int. float $position = null ) . sợi dây. Thêm một trang menu cấp cao nhất.