Tạo trang cài đặt WordPress

Tab Cài đặt trong thanh bên Quản trị viên WordPress là trung tâm trung tâm để định cấu hình cài đặt cho các phần khác nhau của trang web WordPress. Nó chứa nhiều bảng phụ và nhiều plugin WordPress cũng thêm trang cài đặt của chúng dưới dạng menu trong tab Cài đặt. Nhấp vào nó sẽ đưa người dùng đến màn hình Cài đặt » Chung. Các bảng phụ mặc định khác trong tab cài đặt là Đọc, Viết, Thảo luận, Phương tiện và Liên kết cố định

Chỉ người dùng có vai trò người dùng quản trị viên mới có quyền truy cập vào tab cài đặt

Chung chứa các cài đặt như Tiêu đề trang web, Dòng giới thiệu, URL WordPress, URL trang web, E-mail, tùy chọn Đăng ký và nhiều tùy chọn chung khác cho trang web WordPress

Viết chứa các cài đặt liên quan đến định dạng bài đăng và tùy chọn danh mục

Đọc chứa các cài đặt liên quan đến Trang đầu trang, Số lượng bài đăng sẽ hiển thị trên mỗi trang cho người đọc, các mục RSS sẽ được hiển thị, toàn văn hay tóm tắt sẽ được hiển thị và tùy chọn ngăn cản các công cụ tìm kiếm lập chỉ mục trang web

Thảo luận chứa các cài đặt liên quan đến liên kết các bài đăng với các blog khác được tham chiếu, cài đặt nhận xét, thông báo email cho nhận xét và các tùy chọn để kiểm duyệt nhận xét

Phương tiện chứa các cài đặt liên quan đến tải lên và quản lý hình ảnh cũng như phương tiện khác trong WordPress. Những thứ như kích thước hình ảnh và tùy chọn cắt xén có thể được quản lý tại đây

Permalinks chứa các cài đặt liên quan đến cấu trúc URL của trang web. Các cài đặt này giúp người dùng tìm và ghi nhớ URL của các bài đăng cụ thể dễ dàng hơn. Sử dụng đúng cấu trúc cũng sẽ giúp tổ chức tốt hơn các bài đăng trong các danh mục khác nhau. Các tùy chọn trong cài đặt này cho phép bạn kiểm soát xem bạn muốn ngày được phản ánh trong URL của mình hay chỉ tiêu đề và danh mục hoặc kết hợp cả hai

Các trang cài đặt tùy chỉnh của WordPress khá hữu ích khi bạn đang phát triển plugin hoặc chủ đề. Bạn chắc chắn sẽ cần một số vị trí trong khu vực quản trị nơi người dùng có thể định cấu hình plugin của bạn và API Cài đặt là hoàn hảo cho điều đó

Và vâng, chúng tôi sẽ sử dụng API Cài đặt sẽ giúp chúng tôi tạo các trang tùy chọn của mình. Nó đã được thêm vào trong WordPress 2. 7 chỉ. Tôi thực sự nghi ngờ rằng bạn đang sử dụng phiên bản WordPress trước 2. 7, nhưng dù sao tôi nghĩ tôi phải đề cập đến điều đó

Dưới đây là ảnh chụp màn hình của trang cài đặt mà chúng ta sẽ tạo trong hướng dẫn này. Tôi quyết định làm cho nó đơn giản, vì vậy chúng tôi có nhiều trường – trường văn bản và hộp kiểm

Các bạn, đây là hướng dẫn siêu chi tiết và từng bước về API Cài đặt, nếu bạn không có thời gian cho việc này, tôi thực sự khuyên bạn nên tiếp tục

1. Thêm một trang tùy chọn

Đây là bước đầu tiên của chúng ta – chúng ta sẽ tạo một thành phần menu quản trị với một trang trống. Tin vui ở đây là bạn có thể thêm nó ở bất cứ đâu – ngay sau mục menu “Dashboard” như một phần tử con của mục menu “Tools”

Thêm trang menu quản trị cấp cao nhất

Chức năng duy nhất có thể giúp chúng tôi ở đây là

add_action[ 'admin_menu', 'rudr_submenu' ];

function rudr_submenu[]{

	add_submenu_page[
		'tools.php', // parent page slug
		'Slider Settings',
		'Slider',
		'manage_options',
		'rudr_slider',
		'rudr_slider_page_callback',
		0 // menu position
	];
}

function rudr_slider_page_callback[]{
	echo 'What is up?';
}
3. Thỉnh thoảng tôi sẽ đề cập đến các chức năng khác nhau của WordPress trong hướng dẫn này – bạn có thể tìm thấy bất kỳ chức năng nào trong WordPress Codex chính thức

Vì vậy, hãy thêm trang của chúng tôi ngay sau menu "Bảng điều khiển", phải không?

add_action[ 'admin_menu', 'rudr_top_lvl_menu' ];
 
function rudr_top_lvl_menu[]{
 
	add_menu_page[
		'Slider Settings', // page Title
		'Slider', // link text
		'manage_options', // user capabilities
		'rudr_slider', // page slug
		'rudr_slider_page_callback', // this function prints the page content
		'dashicons-images-alt2', // icon [from Dashicons for example]
		4 // menu position
	];
}
 
function rudr_slider_page_callback[]{
	echo 'What is up?';
}

Khi bạn đã chèn đoạn mã trên vào tệp chủ đề hiện tại của mình

add_action[ 'admin_menu', 'rudr_submenu' ];

function rudr_submenu[]{

	add_submenu_page[
		'tools.php', // parent page slug
		'Slider Settings',
		'Slider',
		'manage_options',
		'rudr_slider',
		'rudr_slider_page_callback',
		0 // menu position
	];
}

function rudr_slider_page_callback[]{
	echo 'What is up?';
}
4 hoặc vào một plugin tùy chỉnh, bạn sẽ nhận được kết quả như thế này

Giá trị vị trí menu bằng 4 cho phép chúng tôi thêm liên kết menu ngay trước “Bài đăng” nhưng sau “Bảng điều khiển” và dấu phân cách

Thêm trang menu con quản trị

Khi tạo một plugin hoặc chủ đề tùy chỉnh, tôi không khuyên bạn nên sử dụng các menu cấp cao nhất vì một số người dùng có xu hướng kích hoạt tới một trăm plugin trên trang web WordPress của họ, điều này khiến menu quản trị bị quá tải và lộn xộn

Vì vậy, hãy tạo nhưng đặt nó chẳng hạn trong menu “Tools”

Và đây là mã sẵn sàng để sử dụng

add_action[ 'admin_menu', 'rudr_submenu' ];

function rudr_submenu[]{

	add_submenu_page[
		'tools.php', // parent page slug
		'Slider Settings',
		'Slider',
		'manage_options',
		'rudr_slider',
		'rudr_slider_page_callback',
		0 // menu position
	];
}

function rudr_slider_page_callback[]{
	echo 'What is up?';
}

Điều duy nhất tôi muốn làm nổi bật ở đây là một con sên trang mẹ trên dòng

add_action[ 'admin_menu', 'rudr_submenu' ];

function rudr_submenu[]{

	add_submenu_page[
		'tools.php', // parent page slug
		'Slider Settings',
		'Slider',
		'manage_options',
		'rudr_slider',
		'rudr_slider_page_callback',
		0 // menu position
	];
}

function rudr_slider_page_callback[]{
	echo 'What is up?';
}
5. Đây là một thứ khá dễ dàng để có được, chỉ cần truy cập vào bất kỳ trang menu cấp cao nhất nào và bạn sẽ thấy nó trong URL. Và còn hơn thế nữa – WordPress có các chức năng thay thế cho mọi thành phần menu cấp cao nhất. Hãy để tôi giải thích nó trong một bảng

Parent page slugAlternative function
add_action[ 'admin_menu', 'rudr_submenu' ];

function rudr_submenu[]{

	add_submenu_page[
		'tools.php', // parent page slug
		'Slider Settings',
		'Slider',
		'manage_options',
		'rudr_slider',
		'rudr_slider_page_callback',
		0 // menu position
	];
}

function rudr_slider_page_callback[]{
	echo 'What is up?';
}
6 [Dashboard]
add_action[ 'admin_menu', 'rudr_submenu' ];

function rudr_submenu[]{

	add_submenu_page[
		'tools.php', // parent page slug
		'Slider Settings',
		'Slider',
		'manage_options',
		'rudr_slider',
		'rudr_slider_page_callback',
		0 // menu position
	];
}

function rudr_slider_page_callback[]{
	echo 'What is up?';
}
7
add_action[ 'admin_menu', 'rudr_submenu' ];

function rudr_submenu[]{

	add_submenu_page[
		'tools.php', // parent page slug
		'Slider Settings',
		'Slider',
		'manage_options',
		'rudr_slider',
		'rudr_slider_page_callback',
		0 // menu position
	];
}

function rudr_slider_page_callback[]{
	echo 'What is up?';
}
8 [Posts]
add_action[ 'admin_menu', 'rudr_submenu' ];

function rudr_submenu[]{

	add_submenu_page[
		'tools.php', // parent page slug
		'Slider Settings',
		'Slider',
		'manage_options',
		'rudr_slider',
		'rudr_slider_page_callback',
		0 // menu position
	];
}

function rudr_slider_page_callback[]{
	echo 'What is up?';
}
9
add_management_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	0 // menu position
];
0 [Media]
add_management_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	0 // menu position
];
1
add_management_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	0 // menu position
];
2 [Pages]
add_management_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	0 // menu position
];
3
add_management_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	0 // menu position
];
4 [Comments]
add_management_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	0 // menu position
];
5
add_management_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	0 // menu position
];
6 [Appearance]
add_management_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	0 // menu position
];
7
add_management_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	0 // menu position
];
8 [Plugins]
add_management_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	0 // menu position
];
9
$icon = '';

add_menu_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	'data:image/svg+xml;base64,' . base64_encode[ $icon ],
	4
];
0 [Users]
$icon = '';

add_menu_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	'data:image/svg+xml;base64,' . base64_encode[ $icon ],
	4
];
1
$icon = '';

add_menu_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	'data:image/svg+xml;base64,' . base64_encode[ $icon ],
	4
];
2 [Tools]
$icon = '';

add_menu_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	'data:image/svg+xml;base64,' . base64_encode[ $icon ],
	4
];
3
$icon = '';

add_menu_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	'data:image/svg+xml;base64,' . base64_encode[ $icon ],
	4
];
4 [Settings]
$icon = '';

add_menu_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	'data:image/svg+xml;base64,' . base64_encode[ $icon ],
	4
];
5

Vậy là xong, bây giờ chúng ta có thể dễ dàng thay thế hàm

$icon = '';

add_menu_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	'data:image/svg+xml;base64,' . base64_encode[ $icon ],
	4
];
6 trong đoạn code trên bằng hàm
$icon = '';

add_menu_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	'data:image/svg+xml;base64,' . base64_encode[ $icon ],
	4
];
3

add_management_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	0 // menu position
];

Sử dụng các biểu tượng SVG tùy chỉnh

Vào năm , khi chúng tôi tạo menu cấp cao nhất, chúng tôi đã thêm một biểu tượng ở đó. Chúng tôi đã cung cấp tên của nó là

$icon = '';

add_menu_page[
	'Slider Settings',
	'Slider',
	'manage_options',
	'rudr_slider',
	'rudr_slider_page_callback',
	'data:image/svg+xml;base64,' . base64_encode[ $icon ],
	4
];
8 dưới dạng đối số hàm
add_action[ 'admin_menu', 'rudr_submenu' ];

function rudr_submenu[]{

	add_submenu_page[
		'tools.php', // parent page slug
		'Slider Settings',
		'Slider',
		'manage_options',
		'rudr_slider',
		'rudr_slider_page_callback',
		0 // menu position
	];
}

function rudr_slider_page_callback[]{
	echo 'What is up?';
}
3

Tôi nghĩ bạn đã biết rằng WordPress có phông chữ biểu tượng vector Dashicons và chúng ta có thể sử dụng bất kỳ biểu tượng nào từ nó. Tất cả những gì chúng ta cần làm là cung cấp tên của nó như


		

Chủ Đề