我的小部件插件打破了我的自定义主题，它没有显示错误

Question

我正在做一个幻灯片窗口小部件，当代码位于我的自定义主题的模板内时，它效果很好，但是，当它放置在窗口小部件上时，它会使我的其余代码的其余部分。

幻灯片没有在我的home.php（博客）模板上显示或执行，但在我的首页和自定义器视图上都可以使用。同样，我主题的脚本停止工作，只拍摄了幻灯片的脚本。

我会在这里让我的代码，我跳来跳去，有人可以帮助我找到自己的错误。

谢谢。

PHP

<?php
/*
Plugin Name: Slideshow de Posts
Plugin URI:
Description:
Version: 1.0.0
Author: Arturo Valverde
Author URI:
Text Domain:
*/

if (!defined('ABSPATH')) die();

function slideshow_posts_scripts_styles()
{
  wp_enqueue_style('styles', plugins_url() . '/SlideShow/styles/styles.css', '1.0.0');
  wp_enqueue_script('scripts',  plugins_url() . '/SlideShow/scripts/scripts.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'slideshow_posts_scripts_styles');

add_action('widgets_init', function () {
  register_widget('slideshow_posts');
});

class slideshow_posts extends WP_Widget
{

  function __construct()
  {

    $widget_ops = array(
      'classname' => 'slideshow_posts',
      'description' => 'Añade Slideshow de los Posts elegidos',
    );
parent::__construct(
  'slideshow_posts',
  'Slideshow Posts',
  $widget_ops
);
}

public function widget($args, $instance)
{

wp_reset_postdata();
if (post_type_exists('page')) : ?>
  <div class="container">
    <div class="slider full-width">

      <div id="arrow-left" class="arrow overlay-dark">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
          <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
          <path d="M192 448c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l137.4 137.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448z" />
        </svg>
      </div>

      <div class="slide-gallery">

        <!-- Cover -->

        <div id="<?php $firstSlide = "slide-1"; echo $firstSlide; ?>" class="slide pageTitle cover full-height full-width" style="background-image: url('<?php echo get_template_directory_uri(); ?>/img/cover.jpg')">

          <div class="overlay-blue full-width padding-5 centrar-flex">

            <div class="contenedor text-center">
              <h1> Fundación Javier Barros Sierra</h1>
            </div>

          </div>

        </div>

        <!-- News -->
        <?php
        isset($firstSlide) ? $i = 1 : $i = 0;
        $query = array(
          'post_type' => 'post',
          'posts_per_page' => 4,
          'orderby' => 'post_date',
          'order' => 'DESC',
          'post_status' => 'publish',
          'category_name' => 'Noticia',
        );

        $wp_query = new WP_Query($query);

        if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post();
            has_post_thumbnail() ? $featured_img = get_the_post_thumbnail_url() : $featured_img = " / "; ?>

            <div id="slide-<?php echo ++$i; ?>" class="slide full-width" style="background-image: url('<?php echo esc_url($featured_img); ?>')">

              <div class="overlay-dark full-width">

                <div class="contenido-slide">
                  <a href="<?php the_permalink(); ?>">
                    <h3><?php the_title(); ?></h3>
                  </a>

                  <span>
                    <?php the_time('l d, F, Y'); ?>
                  </span>

                  <?php the_excerpt(); ?>
                </div>

              </div>

            </div>

        <?php
          endwhile;
        endif;
        ?>

        <div class="slide-selector full-width">
          <ul>
            <!-- Función JS para SlideShow -->
          </ul>
        </div>

      </div>

      <div id="arrow-right" class="arrow overlay-dark">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
          <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
          <path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z" />
        </svg>
      </div>

    </div>
  </div>
<?php
endif;
wp_reset_query(); //reset back to original query
 }
}
?>

CSS

.full-width {
    width: 100%;
    max-width: 100%;
}

.overlay-dark {
    height: 100%;
    max-height: 100%;
    background: rgb(29, 36, 46, .5);
}

.container {
    height: 88vh;
}

.slider {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: rgb(var(--colorPrimario));
}

.slider .slide-gallery {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.slider .slide-gallery .slide {
    height: 100%;
    max-height: 100%;
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: no-repeat center center;
    background-size: cover;
    opacity: 0;
    transition: opacity .5s ease-in-out .2s;
}

.slider .slide-gallery .slide .overlay-dark {
    height: 40%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.slider .slide-gallery .slide .overlay-dark .contenido-slide {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
}

@media(max-width:768px) {
    .slider .slide-gallery .slide .overlay-dark .contenido-slide {
        width: 80%;
    }
}

.slider .slide-gallery .slide .overlay-dark .contenido-slide h3,
.slider .slide-gallery .slide .overlay-dark .contenido-slide p {
    margin: 1rem 0;
    color: rgb(var(--blanco));
    line-height: 1.2;
    transition: .3s ease;
}

.slider .slide-gallery .slide .overlay-dark .contenido-slide a:hover h3,
.slider .slide-gallery .slide .overlay-dark .contenido-slide a:focus h3,
.slider .slide-gallery .slide .overlay-dark .contenido-slide a:active h3 {
    color: rgb(var(--colorComplementario));
    transition: .3s ease;
}

.slider .slide-gallery .slide .overlay-dark .contenido-slide span {
    font-size: 1.4rem;
    text-transform: capitalize;
    color: rgb(var(--colorComplementario2));
}

.slider .slide-gallery .slide .overlay-dark .contenido-slide p {
    margin: 1rem 0;
}

.slider .slide-gallery .slide.active {
    z-index: 3;
    opacity: 1;
    transition: opacity .5s ease-in-out .2s;
}

/* Slider Dots */
.slider .slide-selector {
    width: 15%;
    height: 5rem;
    position: absolute;
    bottom: 0;
    z-index: 4;
    align-self: center;
    opacity: .2;
    transition: opacity .3s ease;
}

@media(max-width:768px) {
    .slider .slide-selector {
        width: 30%;
    }
}


.slider .slide-selector:hover,
.slider .slide-selector:focus,
.slider .slide-selector:active {
    opacity: 1;
    transition: opacity .3s ease;
}

.slider .slide-selector ul {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.slider .slide-selector ul .crumb-slide {
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid rgb(var(--blanco));
    border-radius: 50%;
    background-color: transparent;
}

.slider .slide-selector ul .crumb-slide:hover,
.slider .slide-selector ul .crumb-slide:focus,
.slider .slide-selector ul .crumb-slide.active {
    background-color: rgb(var(--blanco));
    transition: background-color ease-in-out .2s;
    cursor: pointer;
}

/* Slideshow Arrows */
.slider .arrow {
    width: 5%;
    max-width: 5%;
    height: 100%;
    max-height: 100%;
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .2;
}

@media(max-width:768px) {
    .slider .arrow {
        width: 15%;
        max-width: 15%;
        height: 25%;
        max-height: 25%;
        top: 50;
    }
}

.slider .arrow svg {
    width: 5rem;
    height: 5rem;
    fill: rgba(255, 255, 255, .5);
}

.slider #arrow-left {
    left: 0;
}

.slider #arrow-right {
    right: 0;
}

.slider .arrow:hover,
.slider .arrow:focus {
    opacity: 1;
}

.slider .arrow svg:hover,
.slider .arrow svg:focus {
    cursor: pointer;
    fill: rgb(var(--blanco));
}

JS

const slides = document.querySelectorAll('.slide');
const firstSlide = document.querySelector('.slide');
const slidesCrumbs = document.querySelector('.slide-selector ul');
const leftArrow = document.getElementById('arrow-left');
const rightArrow = document.getElementById('arrow-right');

document.addEventListener('DOMContentLoaded', function () {

eventListeners();

});

function eventListeners() {

/* SlideShow */
if (slides) {
    sliderInit();
    rightArrow.addEventListener('click', goNextSlide);
    leftArrow.addEventListener('click', goPreviousSlide);
}

firstSlide ? console.log("existe") : console.log("no existe");
/*  slider ? console.log("existe") : console.log("no existe"); */
}

/* Funciones */
/* Slideshow */
var index = 1;

/*Inicialización de elementos del SlideShow*/
function sliderInit() {

let i = 0;
for (let index = 0; index < slides.length; index++) {

    const crumb = document.createElement('li');
    crumb.setAttribute('class', 'crumb-slide');
    crumb.setAttribute('id', 'crumb-' + ++i);
    slidesCrumbs.appendChild(crumb);

    if (crumb.id == 'crumb-1') {
        const firstCrumb = crumb;
        firstCrumb.setAttribute('class', 'crumb-slide active');
    }

    crumb.addEventListener('click', slideSelector);
};

firstSlide.classList.add('active');
setInterval(slideShowTimer, 6000);
}

/*Temporizador del SlideShow*/
function slideShowTimer() {

let nextIndex = ++index;
let lastIndex = nextIndex - 1;

if (nextIndex < slides.length + 1) {

    let nextSlide = document.getElementById('slide-' + nextIndex.toString());
    let nextCrumb = document.getElementById('crumb-' + nextIndex.toString());
    nextSlide.classList.add('active');
    nextCrumb.classList.add('active');

    if (lastIndex != 0) {
        let lastSlide = document.getElementById('slide-' + lastIndex.toString());
        let lastCrumb = document.getElementById('crumb-' + lastIndex.toString());
        lastSlide.classList.remove('active');
        lastCrumb.classList.remove('active');
    }

}

if (nextIndex == slides.length + 1) {
    index = 1
    let lastSlide = document.getElementById('slide-' + lastIndex.toString());
    let lastCrumb = document.getElementById('crumb-' + lastIndex.toString());
    lastSlide.classList.remove('active');
    lastCrumb.classList.remove('active');
    document.getElementById('slide-' + index.toString()).classList.add('active');
    document.getElementById('crumb-' + index.toString()).classList.add('active');
}

}

/*Navegación de SlideShow*/
 function slideSelector(e) {

 document.querySelector('.slide.active').classList.remove('active');
 document.querySelector('.crumb-slide.active').classList.remove('active');

 let crumbId = e.target.id;
 let idArray = crumbId.split('-');
 let idIndex = idArray[1];

 index = idIndex;

 document.getElementById('slide-' + index.toString()).classList.add('active');
 document.getElementById('crumb-' + index.toString()).classList.add('active');

}

function goNextSlide() {

const currentSlide = document.querySelector('.slide.active');

let slideId = currentSlide.id;
let idArray = slideId.split('-');
let idIndex = idArray[1];

let nextId = Number(idIndex) + 1;
let lastId = Number(nextId) - 1;

if (nextId != slides.length + 1) {

    document.getElementById('slide-' + lastId.toString()).classList.remove('active');
    document.getElementById('crumb-' + lastId.toString()).classList.remove('active');

    document.getElementById('slide-' + nextId.toString()).classList.add('active');
    document.getElementById('crumb-' + nextId.toString()).classList.add('active');

    index = nextId;

} else {

    document.getElementById('slide-' + lastId.toString()).classList.remove('active');
    document.getElementById('crumb-' + lastId.toString()).classList.remove('active');

    document.getElementById('slide-' + 1).classList.add('active');
    document.getElementById('crumb-' + 1).classList.add('active');

    index = 1;

}

}

function goPreviousSlide() {

const currentSlide = document.querySelector('.slide.active');

let slideId = currentSlide.id;
let idArray = slideId.split('-');
let idIndex = idArray[1];

let previousId = Number(idIndex) - 1;
let nextId = Number(previousId) + 1;

if (previousId != 0) {

    document.getElementById('slide-' + nextId.toString()).classList.remove('active');
    document.getElementById('crumb-' + nextId.toString()).classList.remove('active');

    document.getElementById('slide-' + previousId.toString()).classList.add('active');
    document.getElementById('crumb-' + previousId.toString()).classList.add('active');

    index = previousId;

} else {

    document.getElementById('slide-' + nextId.toString()).classList.remove('active');
    document.getElementById('crumb-' + nextId.toString()).classList.remove('active');

    document.getElementById('slide-' + slides.length).classList.add('active');
    document.getElementById('crumb-' + slides.length).classList.add('active');

    index = slides.length;

}

}

Answer 1

我发现这个问题，我不知道为什么，但是显然是因为我将小部件区域命名为“ slideshow_widget”，这导致我的插件未执行。
还导致我的脚本没有获取的问题是，我的插件的脚本表的名称与我的自定义主题的脚本表相同，而且我的JS的这条线导致，尽管我的两个脚本已经执行，插件脚本没有工作：

document.addEventListener('DOMContentLoaded', function () {}

我重复说我不知道​​为什么会发生这种情况，但是，我只是更改了小部件区域和脚本表的名称，问题就解决了。