Question

所以我对Wordpress开发还很陌生，所以请不要生气，如果我做过一些愚蠢的事情，我感到抱歉。

所以我在使用CSS时遇到了麻烦，由于某种原因，它没有影响小部件内容的输出，这可以在movieposterdisplay-class文件中看到。我想做的是使用CSS使输出的youtube视频自动调整大小以适合容器。我想知道的是CSS为什么不影响HTML代码以及解决该问题的解决方案。

到目前为止，我尝试使用！important，以防wordpress主题覆盖CSS，但问题必须与其他问题有关。在此先感谢您的帮助。

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 !important;
  padding-bottom: 75% !important; 
  padding-top: 25px !important;
  height: 0 !important;
  border: 5px solid red !important;
}

.youtubeplayer iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

Answer 1

问题是由于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');，因此无法正确排队，并且我之前已更改了文件夹名称。

因此，我认为它可以正确加载并运行正常，但是它只能正确加载。

Wordpress CSS样式表不影响小部件的输出

1 个答案: