web-dev-qa-db-ja.com

プラグインCSSがエンキューされていない

私の謝罪これが既に重複した質問になっているこの答えがあるならば、私はWordPressが許すような方法でCSSスタイルを適用させようとしている最後の3日を過ごしました。 -ブラインド'

ユーザーが生成したコンテンツと提供されるサービスの平均評価を表示するためのプラグインに取り組んでいます。データはすべて他の場所でホストされているXMLファイルから取得され、すべてがうまく機能しています。今、私がWordPressにプラグインをリリースして他の人がそれを使えるようにしたかったとき、私はコードにいくつかの変更をしなければなりませんでした、彼らはCSSの<style>と<link>タグを使わせません。

CSSのオプションの中には、プラグインのオプションページで設定したユーザー設定に基づいているものがあります。それを機能させる方法をいくつか試してみましたが、スタイルが正しく読み込まれません。

ユーザーが設定できるので、CSSファイルをPHPファイルにしました（これにより、すべて同じ場所に保存できます）。

メインプラグインファイルには、次の行があります。add_action( 'admin_enqueue_scripts', 'kvssm_enqueue_styles' );スタイリングが適用されないのと同じ結果になるように、wp_enqueue_scriptsでこれを試しました。

呼び出されている関数：

function kvssm_enqueue_styles(  ) {
    wp_enqueue_style( 'reviewCSS', plugins_url( '/review-style.php', __FILE__ ), array(), null );
    wp_enqueue_style( 'widgetCSS', plugins_url( '/widget-style.php', __FILE__ ), array(), null );
}

wp_register_styleの有無にかかわらず、この関数を何度か繰り返してみました。

私が試みた最後の方法は、css.phpで次の行を追加することでした。

<?php
header( 'Content-type: text/css' );
header( 'Cache-control: must-revalidate' );

include( 'ssm-klantenvertellen.php' );

$dir       = kvssm_get_directory(  );
$kvOptions = kvssm_get_options_kvssm(  );
$pvOptions = kvssm_get_options_pvssm(  );
?>

私は次のようにCSSを適用しようとしています：

color: <?php echo $kvOptions[ 'kvssm_color_field_2' ]; ?>;

しかし、この最後の方法は、includeが引き起こす致命的なエラーのために機能しません。add_actionが関数として認識されません。私がincludeを使用する唯一の理由は、これらの関数を必要な設定を取得するためです。代わりにcss.phpは致命的なエラーを引き起こします。今度はplugins_url()が認識されていないためです。

3つの機能

function kvssm_get_directory(  ) {
    $dir     = plugins_url( __DIR__ );
    $dirA    = explode( 'public_html', $dir );
    $dir     = $dirA[ 1 ];
    return $dir;
}

function kvssm_get_options_kvssm(  ) {
    $options = get_option( 'kvssm_settings' );
    return $options;
}

function kvssm_get_options_pvssm(  ) {
    $options = get_option( 'pvssm_settings' );
    return $options;
}

正しく表示されるようにCSSを設定する方法を知っている人はいますか？重要かもしれないいくつかの機能：

  • プラグインはショートコードを追加します
  • ショートコードはCSSを付けなければならない結果を返します
  • バックエンドの設定ページにはdo_shortcode()を使ったショートコードのプレビューがあります。
phpplugin-developmentshortcodecsswp-enqueue-style
1
Development SideShow Media

インラインCSSを追加する場合は、 wp_add_inline_style() を使用してください。

<?php
/**
 * Plugin Name: WPSE 257470
 * Description: WordPress StackExchange question 257470
 * Plugin URI: https://wordpress.stackexchange.com/questions/257470/
 * Author: Nathan Johnson
 * Licence: GPL2+
 * Licence URI: https://www.gnu.org/licenses/gpl-2.0.en.html
 */

//* Don't access this file directly
defined( 'ABSPATH' ) or die();

if( ! class_exists( 'wpse_257470' ) ):
  class wpse_257470 {
    public function plugins_loaded() {
      add_action( 'wp_enqueue_scripts', [ $this, 'wp_enqueue_scripts' ] );
    }

    public function wp_enqueue_scripts() {
      //* It's necessary to have a 'base' CSS file that we can attach to
      wp_enqueue_style( 'wpse-257470', plugin_dir_url( __FILE__ ) . 'style.css' );
      $color = '#257470';
      $custom_css = ".custom_color { color: $color };";
      wp_add_inline_style( 'wpse-257470', $custom_css );
    }
  }
  add_action( 'plugins_loaded', [ new wpse_257470(), 'plugins_loaded' ] );
endif;
1
Nathan Johnson