手機站首頁散文詩歌雜文隨筆日記小小說

散文網(wǎng) » 科技 »學習 » 02：講透WordPress 菜單 - 權限控制與加載指定JS

02：講透WordPress 菜單 - 權限控制與加載指定JS

2023-07-01 20:05 作者:Npcink_牧澤 0人讀過 | 我要投稿

承接上文，本節(jié)主要解決兩個問題，

菜單權限控制 - 僅限訪問指定菜單和僅限指定人員訪問菜單
指定菜單頁加載 CSS 和 JS

問題

本節(jié)圍繞以下兩個常見問題進行展開

權限控制

雖然默認的權限控制已經(jīng)好用，但有時，我們希望只有指定 ID 的用戶才能訪問菜單。

比如，在我開發(fā)退款插件時，為了控制退款員工的權限，我只讓他們訪問退款菜單，其他菜單都拒絕訪問，避免造成其他影響。

我可不希望退款員工刪除網(wǎng)站首頁，那就糟糕了

但是，只有管理員才有退款權限

加載 JS 和 CSS

默認的加載方式是在所有菜單頁面上都加載 JS 和 CSS 資源，當加載的資源過多，會造成所有菜單頁都會卡頓。

這點太不好了，該省省，該花花，這點瀏覽器資源，還是很有必要節(jié)省的。

通過在指定的菜單上才加載資源，可以有效的節(jié)省瀏覽器資源，提升后臺頁面訪問速度。

后臺一般是給管理者使用的，一般不太在乎頁面加載速度，但是，這個是可以省的，我們還是節(jié)省下吧

流程

僅限指定用戶可訪問此菜單

獲取用戶ID

一般用戶 ID 是設置選項給出的一個數(shù)組，這里我們進行簡化，直接從用戶列表中拿幾個用戶 ID 組成數(shù)組。

在用戶列表中，選擇你需要獲取的用戶，鼠標點擊編輯按鈕，

在 URL 中，注意這個?user_id?字段

http://localhost:10004/wp-admin/user-edit.php?user_id=2&wp_http_referer=%2Fwp-admin%2Fusers.php

其中，user_id?后面的值，就是用戶 ID 了，我們憑借這個值，來判斷當前訪問的用戶。

我們將需要控制的用戶 ID 組成數(shù)組

$a = array(1, 2, 3, 4, 5, 6); // 示例數(shù)組，存儲若干用戶ID

添加判斷

還記得之前講到，是如何創(chuàng)建頂級菜單的嘛？實例代碼如下

//創(chuàng)建一個菜單
function vuespa_create_menu_page()
{
? ?add_menu_page(
? ? ? ?'VueSpa選項', ? ? ? ? ? ? ? ? ? // 此菜單對應頁面上顯示的標題
? ? ? ?'VueSpa', ? ? ? ? ? ? ? ? ? ? ?// 要為此實際菜單項顯示的文本
? ? ? ?'administrator', ? ? ? ? ? ? ? // 哪種類型的用戶可以看到此菜單
? ? ? ?'vuespa_id', ? ? ? ? ? ? ? ? ? // ?此菜單項的唯一ID（即段塞）
? ? ? ?'vuespa_menu_page_display', ? ?// 呈現(xiàn)此頁面的菜單時要調(diào)用的函數(shù)的名稱
? ? ? ?'dashicons-admin-customizer', ?//圖標 - 默認圖標
? ? ? ?'500.1', ? ? ? ? ? ? ? ? ? ? ? //位置
? ?);
} // end vuespa_create_menu_page
add_action('admin_menu', 'vuespa_create_menu_page');

我們對其添加一個判斷，若當前訪問菜單的人是指定的用戶 ID，則輸出空值，不顯示菜單。

判斷條件如下：

if (
current_user_can('administrator')
&& is_array($a)
&& in_array(get_current_user_id(), $a)
) {}

判斷是否擁有管理員權限（可按需設置）
并且，變量?$a?是否是數(shù)組
并且，當前訪問菜單的用戶 ID 是否在數(shù)組?$a?中。

只有當前訪問菜單的用戶 ID 符合以上所有需求，才會展示菜單。

is_array()?用于類型檢查，提升代碼健壯性

示例

//創(chuàng)建一個菜單
function vuespa_create_menu_page()
{
//控制權限的員工 ID
$a = array(1, 2, 3, 4, 5, 6); // 示例數(shù)組，存儲若干用戶ID
//權限判斷
if (
current_user_can('administrator')
&& is_array($a)
&& in_array(get_current_user_id(), $a)
) {
? ?add_menu_page(
? ? ? ?'VueSpa選項', ? ? ? ? ? ? ? ? ? // 此菜單對應頁面上顯示的標題
? ? ? ?'VueSpa', ? ? ? ? ? ? ? ? ? ? ?// 要為此實際菜單項顯示的文本
? ? ? ?'administrator', ? ? ? ? ? ? ? // 哪種類型的用戶可以看到此菜單
? ? ? ?'vuespa_id', ? ? ? ? ? ? ? ? ? // ?此菜單項的唯一ID（即段塞）
? ? ? ?'vuespa_menu_page_display', ? ?// 呈現(xiàn)此頁面的菜單時要調(diào)用的函數(shù)的名稱
? ? ? ?'dashicons-admin-customizer', ?//圖標 - 默認圖標
? ? ? ?'500.1', ? ? ? ? ? ? ? ? ? ? ? //位置
? ?);
? ?}
} // end vuespa_create_menu_page
add_action('admin_menu', 'vuespa_create_menu_page');

現(xiàn)在，我們開發(fā)的這個菜單，即使是管理員來了，也只有指定的管理員才能訪問。

指定用戶僅限訪問指定菜單

業(yè)務介紹：

在開發(fā)退款插件時，只有管理員才有退款權限，所以，只能給退款員工以管理員權限。

但是為了防止退款員工進行除退款外的其他操作，我們需要限制退款員工只能訪問退款菜單。

流程

提供的變量是否是數(shù)組
當前訪問的用戶ID是否在提供數(shù)組中
獲取當前鏈接的 page 字段，是否是指定菜單
如果是 admin-ajax.php 或 admin-post.php，則不攔截
符合以上全部信息，則攔截，并提供提示信息

對于第四點，如果我們當前在限制的菜單中，當我們要進行數(shù)據(jù)查詢或保存數(shù)據(jù)等操作，會通過以上兩個文件發(fā)出請求，這會因為不符合第3個條件而被攔截，這里做個例外。

示例代碼

以下代碼可供參考

//權限管理
add_action('admin_init', 'mqzj_restrict_access');
function mqzj_restrict_access()
{
? ?$user = wp_get_current_user();
? $a = array(1, 2, 3, 4, 5, 6); // 示例數(shù)組，存儲若干用戶ID
? ?// 如果 $a 為空或為字符串，則將其賦值為空數(shù)組
? ?if (empty($a) || is_string($a)) {
? ? ? ?$a = array();
? ?}
? ? //是限定 ID
? ?if (in_array($user->ID, $a)) {
? ? ? ?//在訪問限定菜單
? ? ? ?if ((isset($_GET['page']) && $_GET['page'] == 'refund_querys') || (isset($_GET['page']) && $_GET['page'] == 'npcink_orders_list')) {
? ? ? ? ? ?return;
? ? ? ?} elseif (
? ? ? ?// 如果是 admin-ajax.php 或 admin-post.php，則不攔截
? ? ? ?preg_match('/^/wp-admin/(admin-ajax.php|admin-post.php)/', $_SERVER['PHP_SELF'])) {
? ? ? ? ? ?return;
? ? ? ?} else {
? ? ? ? ? ?//跳轉(zhuǎn)
? ? ? ? ? ?$adminPage = get_admin_url() . 'admin.php';
? ? ? ? ? ?$refundPage = get_admin_url() . 'index.php';
? ? ? ? ? ?$message = '
? ? ? ? ? ?您暫無授權訪問此頁面，請聯(lián)系管理員授權！
? ? ? ? ? ?<ul>
? ? ? ? ? ?<li>
? ? ? ? ? ?<a href="' . $adminPage . '?page=npcink_orders_list">訂單管理</a>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li>
? ? ? ? ? ?<a href="' . $refundPage . '?page=refund_querys">訂單退款</a>
? ? ? ? ? ?</li>
? ? ? ? ? ?</ul>
? ? ? ? ? ?';
? ? ? ? ? ?wp_die($message);
? ? ? ? ? ?exit;
? ? ? ?}
? ?}
}

上面僅允許訪問和提示的菜單如下

https://www.npc.ink/wp-admin/index.php?page=refund_querys
https://www.npc.ink/wp-admin/admin.php?page=npcink_orders_list&order_state=f

相信你已經(jīng)掌握了其中的思路，留一個思考題，

你知道如何禁止訪問評論菜單，比如這樣的鏈接

https://www.npc.ink/wp-admin/edit-comments.php

歡迎您在評論區(qū)中給出答案。

控制 JS 和 CSS 在菜單中的加載

加載資源

我們一般加載上述資源是這樣寫的

function vuespa_load_vues($hook)
{
? ?//版本號
? ?$ver = '66';
? ?//加載到頁面頂部
? ?wp_enqueue_style('vite', plugin_dir_url(__FILE__) . 'vites/dist/index.css', array(), $ver, false);
? ?//加載到頁面底部
? ?wp_enqueue_script('vite', plugin_dir_url(__FILE__) . 'vites/dist/index.js', array(), $ver, true);
}
//樣式加載到后臺
add_action('admin_enqueue_scripts', 'vuespa_load_vues');

這樣，我們就在所有后臺的所有頁面上，加載了上述資源。

獲取?`$hook`

還記得之前創(chuàng)建菜單時，每個菜單都有唯一的?slug?嘛？每個菜單頁面也是有唯一的?$hook?的。

我們可以通過以下代碼獲取當前菜單的?$hook?值。

function wpdocs_myselective_css_or_js( $hook ) {
? ?echo '<h1 style="color: crimson;text-align: center;">' . esc_html( $hook ) . '</h1>';
}
add_action( 'admin_enqueue_scripts', 'wpdocs_myselective_css_or_js' );

打開我們需要獲取的菜單頁面，效果如下

進行判斷

有了唯一值，剩下的交給判斷就好了。

function vuespa_load_vues($hook)
{
? ?//判斷當前頁面是否是指定頁面，是則繼續(xù)加載
? ?if ('toplevel_page_vuespa_id' != $hook) {
? ? ? ?return;
? ?}
? ?//版本號
? ?$ver = '53';
? ?//加載到頁面頂部
? ?wp_enqueue_style('vite', plugin_dir_url(__FILE__) . 'vites/dist/index.css', array(), $ver, false);
? ?//加載到頁面底部
? ?wp_enqueue_script('vite', plugin_dir_url(__FILE__) . 'vites/dist/index.js', array(), $ver, true);
}
//樣式加載到后臺
add_action('admin_enqueue_scripts', 'vuespa_load_vues');

通過上述代碼中的 if 判斷，就只會在符合要求的 $hook 菜單上加載資源了。

總結(jié)

本節(jié)關注菜單權限方面，進行了菜單展示權限和菜單中加載資源的研究，這是我們?nèi)粘ｉ_發(fā)中常用的功能。

通過上述兩個權限的適當配合，可以一定程度上解決部分安全問題和頁面加載緩慢的問題。

關于 WordPress 菜單的主要內(nèi)容，到此為止，后續(xù)會根據(jù)實際問題，不定期更新相關內(nèi)容。

国产精品天干天干,亚洲毛片在线,日韩gay小鲜肉啪啪18禁,女同Gay自慰喷水