はじめに
WordPressのカスタム投稿タイプ news の編集ページにおいて、パーマリンク（スラッグ入力欄）のすぐ上に赤字の注意メッセージを表示 したい場合があります。
本記事では、PHPとJavaScriptを組み合わせて、パーマリンクの上に注意メッセージを追加する方法 を解説します。
実装方法
以下のコードを functions.php に追加してください。
// WordPress管理画面で「news」の編集ページに注意メッセージを表示する関数
function custom_news_admin_notice_script($hook) {
global $post;
// 'post.php' (投稿編集ページ) と 'post-new.php' (新規作成ページ) のみ適用
if (($hook === 'post.php' || $hook === 'post-new.php') && isset($post->post_type) && $post->post_type === 'news') {
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
// パーマリンクの要素を取得（タイトルを入力すると表示される部分）
let permalinkElement = document.getElementById("edit-slug-box");
// パーマリンク要素が存在する場合のみ実行
if (permalinkElement) {
// メッセージ用の要素を作成
let messageDiv = document.createElement("div");
messageDiv.innerHTML = "※ このニュースは公開前に内容をよく確認してください！";
messageDiv.style.color = "red"; // 赤字に設定
messageDiv.style.fontWeight = "bold"; // 太字に設定
messageDiv.style.fontSize = "14px";
messageDiv.style.marginBottom = "10px";
// パーマリンクの前にメッセージを挿入
permalinkElement.parentNode.insertBefore(messageDiv, permalinkElement);
}
});
</script>
<?php
}
}
// WordPress管理画面のスクリプトを追加
add_action('admin_enqueue_scripts', 'custom_news_admin_notice_script');
コードの解説
admin_enqueue_scriptsフックを使用- WordPressの管理画面でスクリプトを読み込むために
admin_enqueue_scriptsを利用。 post.php（編集ページ）とpost-new.php（新規作成ページ）のみに適用。
- WordPressの管理画面でスクリプトを読み込むために
- 現在の投稿タイプを取得し、
newsの場合のみ処理を実行global $post;で現在の投稿情報を取得。$post->post_type === 'news'の場合のみスクリプトを動作。
- JavaScript で
edit-slug-box要素を取得し、メッセージを追加document.getElementById("edit-slug-box")でパーマリンクの要素を取得。createElement("div")でメッセージ用の<div>を作成。insertBefore()を使い、パーマリンクの前にメッセージを挿入。
- メッセージのスタイリング
color: red;で赤字に設定。font-weight: bold;で太字に設定。font-size: 14px;で文字サイズを設定。margin-bottom: 10px;で余白を追加し、読みやすく。
実行結果
newsの 投稿編集ページ にアクセス。- タイトルを入力すると、パーマリンクが表示される。
- パーマリンクのすぐ上に、赤字の注意メッセージが表示される 🎉。
まとめ
本記事では、WordPressのカスタム投稿タイプ news のパーマリンクの上に注意メッセージを表示する方法 を解説しました。
admin_enqueue_scriptsフックでスクリプトを管理画面に追加- JavaScript で
edit-slug-boxの上にメッセージを挿入 - スタイルを適用して赤字・太字で強調
この方法を使えば、特定の投稿タイプにのみ注意メッセージを表示 でき、重要な注意事項を編集者に明示 できます。
コメント