[WordPress] WordPressで自作プラグインに独自のCSSを読み込ませたい

Question

現在やろうとしてること

WordPressで自作プラグインにその中で適用できるcssを読み込ませたい。

こちらの記事には答えらしきものがありますが、これ通りにしてもスタイルが当たってくれません。

ディレクトリ構成

custom-field
    |- custom-field.php
    |- css
        |- form.css

<?php
/*
Plugin Name: custom-field
Plugin URI: http://www.example.com/plugin
Description: This is Plugin Test.
Author: Name
Version: 1.0
Author URI: http://www.example.com
*/

if (! defined('ABSPATH')) {
    exit;
}

// 記事通りに記述
// 本来ならこれでスタイルが読み込まれるはず
add_action('wp_enqueue_script','register_my_scripts');
function register_my_scripts(){
    $dir = plugin_dir_path( __FILE__ );
    wp_enqueue_style( $dir . 'css/form.css');　// ここは変更
}

// カスタムフィールドのメタボックス
function add_custom_fields() {
    add_meta_box('id', '独自カスタムフィールド(通常投稿)', 'insert_custom_fields', 'post', 'normal'); // postにすると通常投稿に追加
}
add_action('admin_menu', 'add_custom_fields');

// post投稿の入力エリア
function insert_custom_fields() {
    global $post;

    // テキスト　この場所に独自のスタイルを当てたい
        echo '
            <div>
                <p>タイトル</p> 
                <input type="text" name="title" value="'.get_post_meta($post->ID, 'title', true).'" />
            </div>';
}

// カスタムフィールドの値を保存
function save_custom_fields($post_id) {
    if (!empty($_POST['title'])) {
        update_post_meta($post_id, 'title', $_POST['title']);
    }
}
add_action('save_post', 'save_custom_fields');

Answer 1

内容が不明ですので、form.css のなかの CSS は正しいと仮定します。

---

$dir = plugin_dir_path( FILE );
wp_enqueue_style( $dir . 'css/form.css');　// ここは変更

まず、ここが間違っています。

wp_enqueue_style のパラメータは
１つめのパラメータが「スタイルシートのハンドル」
２つ目のパラメータが「CSSファイルの URL 」
です。（３つ目以降省略）

質問のコードでは、１つのパラメータしか指定していませんので、「$dir . 'css/form.css'」という「スタイルシートのハンドル」で、wp_register_style 関数で事前に登録されているスタイルシートを読み込もうとします。

また、第２パラメータは、 URL を与える必要がありますが、 plugin_dir_path( __FILE__ ) で取得できるのは、 /var/www/html/wp-content/plugins/myplugin/ のような OS 上のディレクトリパスになりますので、URL としてアクセスしてもファイルが存在しないので、404 で読み込まれないと思います。

おそらく、下記のようにする必要があるのではないでしょうか。

$dir = plugin_dir_url( __FILE__ );
wp_enqueue_style( 'my_plugin_style', $dir . 'css/form.css');

Comments

[DaisukeMori]

ありがとうございました。

あとadd_action('wp_enqueue_script','register_my_scripts');　ではできなくて、
普通に関数実行すれば適用されました。
register_my_scripts();

これはWordPressのルール上大丈夫でしょうか？