Проблема работы с частицами.js в теме WordPress - PullRequest
Новая
       1

Проблема работы с частицами.js в теме WordPress

0 голосов
/ 04 ноября 2019

Я пытаюсь включить частицу.js в локальную дочернюю тему WordPress (Иллиди является родителем), и мне удалось добиться появления частиц, но у меня возникают проблемы с их размещением. См. Изображение: Частицы под заголовком

У меня такое ощущение, что это проблема CSS / HTML, но я до сих пор не могу ее решить. Я использовал библиотеку и документацию Vincent Garreau частиц.js . Я могу заставить работать простую страницу, но одностраничная тема WordPress, над которой я работаю, оказалась более сложной. Я хочу, чтобы у всего заголовка был фон частицы, но все, что отображается, - это расширенная нижняя часть в заголовке, которой нет, когда отсутствует

<div id="particles-js"></div>

.

Я пробовал несколько решений, в том числе:

  • Изменение значений z-индекса
  • Перемещение id = "частицы-js" в файле header.php
  • Изменение свойств файла style.css (положение, ширина, высота и т. Д.)
  • Редактирование свойств холста (я думаю, это может быть основной проблемой)

К сожалению, ничего из этого не сработало. Я просмотрел раздел вопросов GitHub частицы.js и все вопросы, связанные с переполнением стека, как только смог найти, но ни одно из этих решений не помогло мне. Я думаю, что решение будет довольно простым, но я изо всех сил пытаюсь найти его. Обратите внимание, что сценарии загружаются в файл footer.php перед закрывающим тегом body: 

<script src="<?php echo get_template_directory_uri(); ?>/layout/js/particle/particles.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/layout/js/particle/app.js"></script>

Буду очень признателен за любые рекомендации, которые вы можете дать! Пожалуйста, дайте мне знать, если вам нужна дополнительная информация!

HTML из файла header.php: 

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" media="screen" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">

    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php if ( 1 == $preloader_enable && ! is_customize_preview() ) : ?>
    <div class="pace-overlay"></div>
<?php endif; ?>
<header id="header" class="<?php echo $header_class; ?>" style="<?php echo $style; ?>">
    <div id="particles-js">
        <div class="top-header">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4 col-xs-8">

                        <?php if ( ! empty( $logo_image ) ) : ?>
                        <a href="<?php echo esc_url( home_url() ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
                            <img class="header-logo-img" src="<?php echo esc_url( $logo_image[0] ); ?>" width="<?php echo $logo_width ? esc_attr( $logo_width ) : ''; ?>"/>
                        </a>
                        <?php else : ?>
                        <?php if ( get_option( 'show_on_front' ) == 'page' ) { ?>
                        <a href="<?php echo esc_url( home_url() ); ?>" title="<?php echo esc_attr( $text_logo ); ?>" class="header-logo"><?php echo esc_html( $text_logo ); ?></a>
                        <?php } else { ?>
                        <a href="<?php echo esc_url( home_url() ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" class="header-logo"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a>
                        <?php } ?>
                        <?php endif; ?>

                    </div><!--/.col-sm-2-->
                    <div class="col-sm-8 col-xs-4">
                        <nav class="header-navigation">
                            <?php
                            wp_nav_menu(
                                array(
                                    'theme_location' => 'primary-menu',
                                    'menu'           => '',
                                    'container'      => false,
                                    'menu_class'     => 'clearfix',
                                    'menu_id'        => '',
                                )
                            );
                            ?>
                        </nav>
                        <button class="open-responsive-menu"><i class="fa fa-bars"></i></button>
                    </div><!--/.col-sm-10-->
                </div><!--/.row-->
            </div><!--/.container-->
        </div><!--/.top-header-->
        <nav class="responsive-menu">
            <ul>
                <?php
                wp_nav_menu(
                    array(
                        'theme_location'  => 'primary-menu',
                        'menu'            => '',
                        'container'       => '',
                        'container_class' => '',
                        'container_id'    => '',
                        'menu_class'      => '',
                        'menu_id'         => '',
                        'items_wrap'      => '%3$s',
                    )
                );
                ?>
            </ul>

        </nav><!--/.responsive-menu-->
        <?php
        if ( get_option( 'show_on_front' ) == 'page' && is_front_page() ) {
            if ( 'video' == $jumbotron_type ) {
                get_template_part( 'sections/front-page', 'header-video' );
            } elseif ( 'slider' == $jumbotron_type ) {
                get_template_part( 'sections/front-page', 'header-slider' );
            }
            get_template_part( 'sections/front-page', 'bottom-header' );
        } else {
            get_template_part( 'sections/blog', 'bottom-header' );
        }
        ?>  
    </div>
</header><!--/#header-->

style.css: 

/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}


/* =============================================================================
   My CSS
   ========================================================================== */

/* ---- base ---- */


/* ---- particles.js container ---- */

canvas {
    display: block; 
}

#particles-js { 
    width: 100%; 
    height: 100%; 
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -50; 
    background: -webkit-linear-gradient(top, #000000 1%, #0c0c24 100%);
}

beans.js:см https://github.com/VincentGarreau/particles.js/blob/master/particles.js

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...