読者WordPressの管理画面のメニューアイコンをカスタマイズは、最初にどこを理解するとよいですか？
木村WordPress標準機能、プラグインの機能、テーマ側の処理を分けて考えると、どこを変更すべきか判断しやすくなります。
読者実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？
木村はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。
実装画像
実装画像では、WordPressの管理画面のメニューアイコンをカスタマイズを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
ダッシュボードなどの既存のアイコンはそのまま残しつつ、カスタム投稿タイプのHTMLなどのアイコンをカスタマイズしたいと思います。実装画像で押さえたいポイント
実装画像は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
実装画像の確認方法
ローカル環境で変更し、未ログイン状態と管理者状態の両方で表示を確認します。PHPを変更した場合は、エラーログ、権限、エスケープ処理も合わせて確認してください。
実装の手順
実装の手順では、WordPressの管理画面のメニューアイコンをカスタマイズを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
手順①:admin_head
WordPressの管理画面のCSSにアクセスするためには、admin_head フックを利用します。 functions.php//---------------------------------------------------------------
// 管理画面のデザイン変更
//---------------------------------------------------------------
// 関数名は何でも良い
function admin_custom_css()
{
echo '<link rel="stylesheet" type="text/css" href="' . get_template_directory_uri() . '/admin-custom.css">';
}
add_action('admin_head', 'admin_custom_css');
手順②:デベロッパーツールの確認
様々な指定方法がありますが、以下は一例です。 ポイントとなるクラス wp-menu-images 疑似要素でアイコンを表示している wp-menu-name このクラスがカスタム投稿タイプの名前を表示している #adminmenu div.wp-menu-image 上記のように、#adminmenuを起点に値を記述しているため、詳細度が高くカスタマイズが難しいことがわかります。 さらに、すべてのカスタム投稿タイプに同じクラス名が付与されています。これにより、疑似要素での指定が困難であったため、それぞれに独自のクラスを割り当てることにしました。手順③: Javascriptにて独自のクラスを付与
admin-custom-script.js// DOMの読み込みが完了したときに実行されるコード
document.addEventListener("DOMContentLoaded", function () {
// カスタムクラスを要素に追加する関数
function addCustomClasses(selector, prefix) {
// 指定されたセレクタに一致するすべての要素を取得
var elements = document.querySelectorAll(selector);
// クラス名に付ける番号カウンターの初期値
var counter = 1;
// 取得した要素に対して順番に処理を実行
elements.forEach(function (element) {
// 要素のクラスリストにカスタムクラスを追加
element.classList.add(prefix + counter);
// カウンターを増加して、次の番号を準備
counter++;
});
}
// メニュー名要素にカスタムクラスを追加する
addCustomClasses(".wp-menu-name", "custom-class");
// メニュー画像要素にカスタムクラスを追加する
addCustomClasses(".wp-menu-image", "custom-img");
});/---------------------------------------------------------------
// 管理画面のjavascriptを適用
//---------------------------------------------------------------
function enqueue_custom_admin_script()
{
// 管理画面のみにスクリプトをエンキュー
wp_enqueue_script('admin-custom-script', get_template_directory_uri() . '/admin-custom-script.js', array('jquery'), '1.0.0', true);
}
add_action('admin_enqueue_scripts', 'enqueue_custom_admin_script');CSSの記述
CSSの記述では、WordPressの管理画面のメニューアイコンをカスタマイズを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
admin-custom.css デベロッパーツールでカスタムしたいアイコンをクリックし、疑似要素を以下のように初期化します。#adminmenu .custom-img4::before,
#adminmenu .custom-img5::before,
#adminmenu .custom-img6::before,
#adminmenu .custom-img7::before,
#adminmenu .custom-img8::before {
content: "";
}.wp-menu-name {
position: relative;
}
#adminmenu .custom-class4::before {
content: "";
position: absolute;
top: 50%;
left: 7px;
transform: translateY(-50%);
background-image: url(./images/icon/html5-gray.png);
background-repeat: no-repeat;
background-size: contain;
width: 18px;
height: 18px;
}CSSの記述で押さえたいポイント
CSSの記述は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
CSSの記述の確認方法
ローカル環境で変更し、未ログイン状態と管理者状態の両方で表示を確認します。PHPを変更した場合は、エラーログ、権限、エスケープ処理も合わせて確認してください。
まとめ
- admin_headフックを使用して、管理画面にアクセスできる
- デベロッパーツールを使ってアイコンのスタイルに適用されているクラスを調べる
- 特定のクラスをJavaScriptを利用して追加し、独自のスタイルを適用することができる
- デザインの上書きは詳細度に注意する
- admin_enqueue_scriptsフックを使用して、管理画面にスクリプトやスタイルを読み込むことができる
- 独自のクラスでアイコンを追加し、または削除する
MEMBER COMMENTS
コメント（0件）