Witam
Mam problem z dodaniem skryptu do wordpress:
https://www.jqueryscript.net/animation/multiple-images-cz-parallax.html
samego obrazka chmury png wraz ze skryptem headera wordpress
Oto link do mojej strony: 'klm.nazwa.pl/klm'
KOD chmury "demo.html":
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>CZ-Parallax jQuery Plugin Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/CZ-Parallax_jQuery-min.js"></script>
</head>
<body style="margin: 0">
<div id="test" style="width: 100vw; height: 100vh; padding: 20px;"><h1></div>
<script>
$('#test').CZParallax({
fg: 'fg.png',
bgs: [
'',
'',
''
]
});
</script>
</body>
</html>
KOD HEADER:
<?php
/**
* Homepage parallax section Widget
* Shapely Theme
*/
class Shapely_Home_Parallax extends WP_Widget {
private $defaults = array();
function __construct() {
add_action( 'admin_init', array( $this, 'enqueue' ) );
add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue' ) );
add_action( 'customize_preview_init', array( $this, 'enqueue' ) );
$widget_ops = array(
'classname' => 'shapely_home_parallax',
'description' => esc_html__( 'Shapely FrontPage Parallax Section', 'shapely-companion' ),
'customize_selective_refresh' => true,
);
parent::__construct( 'shapely_home_parallax', esc_html__( '[Shapely] Parallax Section For FrontPage', 'shapely-companion' ), $widget_ops );
$this->defaults = array(
'title' => '',
'image_src' => '',
'image_pos' => esc_html__( 'left', 'shapely-companion' ),
'body_content' => '',
'button1' => '',
'button2' => '',
'button1_link' => '',
'button2_link' => '',
'border_bottom' => '',
);
}
public function enqueue() {
if ( is_admin() && ! is_customize_preview() ) {
wp_enqueue_style( 'epsilon-styles', get_template_directory_uri() . '/inc/libraries/epsilon-framework/assets/css/style.css' );
}
}
/**
* @param array $args
* @param array $instance
*/
function widget( $args, $instance ) {
$allowed_tags = wp_kses_allowed_html( 'post' );
$allowed_tags['iframe'] = array(
'width' => array(),
'height' => array(),
'src' => array(),
'frameborder' => array(),
'allowfullscreen' => array(),
);
$instance = wp_parse_args( $instance, $this->defaults );
echo $args['before_widget'];
/* Classes */
$class1 = ( 'background-full' == $instance['image_pos'] ) ? 'cover fullscreen image-bg' : ( ( 'background-small' == $instance['image_pos'] ) ? 'small-screen image-bg p0' : ( ( 'right' == $instance['image_pos'] ) ? 'bg-secondary' : ( ( 'bottom' == $instance['image_pos'] ) ? 'bg-secondary pb0' : '' ) ) );
$class2 = ( ( 'background-full' == $instance['image_pos'] ) || ( 'background-small' == $instance['image_pos'] ) ) ? 'top-parallax-section' : ( ( 'right' == $instance['image_pos'] ) ? 'col-md-4 col-sm-5 mb-xs-24' : ( ( 'left' == $instance['image_pos'] ) ? 'col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-1' : ( ( 'bottom' == $instance['image_pos'] ) ? 'col-sm-10 col-sm-offset-1 text-center' : ( ( 'top' == $instance['image_pos'] ) ? 'col-sm-10 col-sm-offset-1 text-center mt30' : '' ) ) ) );
$class3 = ( ( 'background-full' == $instance['image_pos'] ) || ( 'background-small' == $instance['image_pos'] ) ) ? 'col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center' : '';
$class4 = ( 'left' == $instance['image_pos'] || 'right' == $instance['image_pos'] ) ? 'row align-children' : 'row';
$class5 = ( 'right' == $instance['image_pos'] ) ? 'col-md-7 col-md-offset-1 col-sm-6 col-sm-offset-1 text-center' : '';
$class6 = ( 'left' == $instance['image_pos'] ) ? 'col-md-7 col-sm-6 text-center mb-xs-24' : '';
$class7 = ( 'background-full' == $instance['image_pos'] ) ? 'fullscreen' : '';
if ( 'on' == $instance['border_bottom'] ) {
$class1 .= ' border-bottom';
}
/**
* Widget Content
*/
?>
<section class="<?php echo esc_attr( $class1 ); ?>">
<?php
if ( ( 'background-full' == $instance['image_pos'] || 'background-small' == $instance['image_pos'] ) && '' != $instance['image_src'] ) {
?>
<div class="parallax-window <?php echo esc_attr( $class7 ); ?>" data-parallax="scroll" data-image-src="<?php echo esc_url( $instance['image_src'] ); ?>" data-ios-fix="true" data-over-scroll-fix="true" data-android-fix="true">
<div class="<?php echo ( 'background-full' == $instance['image_pos'] ) ? 'align-transform' : ''; ?>">
<?php } else { ?>
<div class="container">
<?php } ?>
<div class="<?php echo esc_attr( $class4 ); ?>">
<?php
if ( ( 'left' == $instance['image_pos'] || 'top' == $instance['image_pos'] ) && '' != $instance['image_src'] ) {
?>
<div class="<?php echo esc_attr( $class6 ); ?>">
<img class="img-responsive" alt="<?php echo esc_attr( $instance['title'] ); ?>" src="<?php echo esc_url( $instance['image_src'] ); ?>">
</div>
<?php
}
?>
<div class="<?php echo esc_attr( $class2 ); ?>">
<div class="<?php echo esc_attr( $class3 ); ?>">
<?php
echo ( '' != $instance['title'] ) ? ( ( 'background-full' == $instance['image_pos'] ) || ( 'background-small' == $instance['image_pos'] ) ) ? '<h1>' . wp_kses_post( $instance['title'] ) . '</h1>' : '<h3>' . wp_kses_post( $instance['title'] ) . '</h3>' : '';
if ( '' != $instance['body_content'] ) {
echo '<div class="mb32">';
echo apply_filters( 'the_content', wp_kses( $instance['body_content'], $allowed_tags ) );
echo '</div>';
}
echo ( '' != $instance['button1'] && '' != $instance['button1_link'] ) ? '<a class="btn btn-lg btn-filled" href="' . esc_url( $instance['button1_link'] ) . '">' . wp_kses_post( $instance['button1'] ) . '</a>' : '';
echo ( '' != $instance['button2'] && '' != $instance['button2_link'] ) ? '<a class="btn btn-lg btn-white" href="' . esc_url( $instance['button2_link'] ) . '">' . wp_kses_post( $instance['button2'] ) . '</a>' : '';
?>
</div>
</div>
<!--end of row-->
<?php
if ( ( 'right' == $instance['image_pos'] || 'bottom' == $instance['image_pos'] ) && '' != $instance['image_src'] ) {
?>
<div class="<?php echo esc_attr( $class5 ); ?>">
<img class="img-responsive" alt="<?php echo esc_attr( $instance['title'] ); ?>" src="<?php echo esc_url( $instance['image_src'] ); ?>">
</div>
<?php
}
?>
</div>
</div>
<?php if ( 'background-full' == $instance['image_pos'] || 'background-small' == $instance['image_pos'] ) { ?>
</div>
<?php } ?>
</section>
<div class="clearfix"></div>
<?php
echo $args['after_widget'];
}