web-dev-qa-db-ja.com

CSSがウィジェットの出力に影響しない

だから私はまだワードプレスの開発にかなり慣れていないので激怒しないでください、そして私が本当にばかなことをしたならば申し訳ありません。

だから私は私のCSSに問題を抱えています、それは何らかの理由でそれがmovieposterdisplayクラスファイルに見られることができるウィジェットコンテンツ出力に影響を及ぼさないということです。私がやろうとしているのは、出力されたYouTubeビデオの自動サイズをCSSを使用してコンテナに合わせて調整することです。私が知りたいのは、CSSがHTMLコードに影響を与えていない理由とその解決策です。ご協力ありがとうございます。

movieposterdisplayfile

require_once(plugin_dir_path(__FILE__).'/includes/movieposterdisplay- 
  scripts.php');

require_once(plugin_dir_path(__FILE__).'/includes/movieposterdisplay- 
  class.php');

function register_movieposterdisplay(){
  register_widget('Movie_Poster_Display_Widget');
}

add_action('widgets_init', 'register_movieposterdisplay');

movieposterdisplay-scriptsファイル

<?php
function mpd_add_scripts(){

wp_enqueue_style('mpd-main-style', plugins_url().'/movieposterdisplay/css/style.css');

wp_enqueue_script('mpd-main-style', plugins_url().'/movieposterdisplay/js/main.js');
}

add_action('wp_enqueue_scripts', 'mpd_add_scripts');

movieposterdisplay-classファイル（ファイルはウィジェットの出力を含みます）

<?php
class Movie_Poster_Display_Widget extends WP_Widget {

function __construct() {

parent::__construct(
  'movieposterdisplay_widget', // Base ID
  esc_html__( 'Movie Widget', 'mpd_domain' ), // Name  
  array( 'description' => esc_html__( 'Displays Movie/TV posters, overviews and trailers.', 'mpd_domain' ), ) 
  );
}

public function widget( $args, $instance) {
echo $args['before_widget']; 

  $trailer_key ="http://www.youtube.com/embed/" .$this->display_trailer($instance, $first_movie_result)."?enablejsapi=1";
  ?>

  <div class="youtubeplayer">
    <iframe 
    id="player" type="text/html"
    src="<?php echo $trailer_key;?>"
    frameborder="0" allowfullscreen="allowfullscreen">
    </iframe>
  </div>
  <?php 
echo $args['after_widget'];
}

style.css

.youtubeplayer {
  position: relative;
  padding-bottom: 75%; 
  padding-top: 25px;
  height: 0;
  border: 5px solid red;
}

.youtubeplayer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
plugin-developmentwidgetscsshtmlwp-enqueue-style
1
Dev john

問題は、movieposterdisplay-scriptsファイル内の誤ったファイルパスが原因でした。ファイルはメインのphpファイルrequire_once(plugin_dir_path(__FILE__).'/includes/movieposterdisplay- class.php');に正しくロードされていますが、すでに正しいプラグインフォルダ名が割り当てられています。コードがwp_enqueue_style('mpd-main-style', plugins_url().'/movieposterdisplay/css/style.css');で、以前にフォルダ名を変更したため、正しくエンキューされませんでした。

それゆえ、私はそれが正しくロードされて、うまく動いていると思いました、しかし、それはただ正しくロードしていました。

0
Dev john