😄Layload ajax && background 2

Ajax

C:\xampp82\htdocs\wp1\wp-content\themes\twentyseventeen\single-post-hello-world.php

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since Twenty Seventeen 1.0
 * @version 1.0
 */
get_header(); ?>
<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main">
			<?php
			// Start the Loop.
			while ( have_posts() ) :
				the_post();
				get_template_part( 'template-parts/post/content', get_post_format() );
			endwhile; // End the loop.
			?>
      <div class="lazyload" data-ajax="my-url"></div>
		</main><!-- #main -->
	</div><!-- #primary -->
	<?php get_sidebar(); ?>
</div><!-- .wrap -->
<?php
get_footer();

C:\xampp82\htdocs\wp1\wp-content\themes\twentyseventeen\page-my-url.php

<?php
echo "ID Page: " . get_the_ID();

C:\xampp82\htdocs\wp1\wp-content\themes\twentyseventeen\functions.php

// Start wp_enqueue_scripts
add_action('wp_enqueue_scripts', 'add_theme_scripts', 99);
function add_theme_scripts()
{
	wp_enqueue_style('styleathomecss', get_stylesheet_directory_uri() . '/assets/css/dev-custom.css', array(), '0.1.0', 'all');
	wp_enqueue_script('lazysizesjs', get_stylesheet_directory_uri() . '/assets/js/lazysizes.min.js', array(), '1.0.1', 'true');
	wp_enqueue_script('unveilhooksjs', get_stylesheet_directory_uri() . '/assets/js/ls.unveilhooks.min.js', array('lazysizesjs'), '1.0.1', 'true');
	wp_enqueue_script('styleathomejs', get_stylesheet_directory_uri() . '/assets/js/dev-custom.js', array('jquery-core'), '1.0.1', 'true');
}
// End wp_enqueue_scripts

C:\xampp82\htdocs\wp1\wp-content\themes\twentyseventeen\assets\js\dev-custom.js

var $ = jQuery;
$(document).on('lazybeforeunveil', function (e) {
  var ajax = $(e.target).data('ajax');
  if (ajax) {
    $(e.target).load(ajax);
  }
});

Background

C:\xampp82\htdocs\wp1\wp-content\themes\twentyseventeen\single-post-hello-world.php

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since Twenty Seventeen 1.0
 * @version 1.0
 */
get_header(); ?>
<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main">
			<?php
			// Start the Loop.
        while ( have_posts() ) :
          the_post();
          get_template_part( 'template-parts/post/content', get_post_format() );
        endwhile; 
      // End the loop.
			?>
      <div class="lazyload" data-bg="<?php echo get_stylesheet_directory_uri() . '/assets/images/header.jpg'; ?>">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, modi. Mollitia ipsa error in sunt?</p>
      </div>
      <div class="lazyload" data-ajax="my-url"></div>
		</main><!-- #main -->
	</div><!-- #primary -->
	<?php get_sidebar(); ?>
</div><!-- .wrap -->
<?php
get_footer();

C:\xampp82\htdocs\wp1\wp-content\themes\twentyseventeen\page-my-url.php

<div class="lazyload" data-bg="<?php echo get_stylesheet_directory_uri() . '/assets/images/sandwich.jpg'; ?>">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, modi. Mollitia ipsa error in sunt 2?</p>
</div>

Scripts

C:\xampp82\htdocs\wp1\wp-content\themes\twentyseventeen\single-post-hello-world.php

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since Twenty Seventeen 1.0
 * @version 1.0
 */
get_header(); ?>
<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main">
			<?php
			// Start the Loop.
        while ( have_posts() ) :
          the_post();
          get_template_part( 'template-parts/post/content', get_post_format() );
        endwhile; 
      // End the loop.
			?>
      <div class="lazyload" data-script="<?php echo get_stylesheet_directory_uri() . '/assets/js/module-name.js'; ?>"></div>
      <div class="lazyload" data-bg="<?php echo get_stylesheet_directory_uri() . '/assets/images/header.jpg'; ?>">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, modi. Mollitia ipsa error in sunt?</p>
      </div>
      <div class="lazyload" data-ajax="my-url"></div>
		</main><!-- #main -->
	</div><!-- #primary -->
	<?php get_sidebar(); ?>
</div><!-- .wrap -->
<?php
get_footer();

C:\xampp82\htdocs\wp1\wp-content\themes\twentyseventeen\assets\js\module-name.js

$('body').css('background','green');

Styles

C:\xampp82\htdocs\wp1\wp-content\themes\twentyseventeen\single-post-hello-world.php

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since Twenty Seventeen 1.0
 * @version 1.0
 */
get_header(); ?>
<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main">
			<?php
			// Start the Loop.
        while ( have_posts() ) :
          the_post();
          get_template_part( 'template-parts/post/content', get_post_format() );
        endwhile; 
      // End the loop.
			?>
      <!-- Styles -->
      <div class="lazyload" data-link="<?php echo get_stylesheet_directory_uri() . '/assets/css/my-style.css'; ?>"></div>
      <div class="lazyload" data-script="<?php echo get_stylesheet_directory_uri() . '/assets/js/module-name.js'; ?>"></div>
      <div class="lazyload" data-bg="<?php echo get_stylesheet_directory_uri() . '/assets/images/header.jpg'; ?>">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, modi. Mollitia ipsa error in sunt?</p>
      </div>
      <div class="lazyload" data-ajax="my-url"></div>
		</main><!-- #main -->
	</div><!-- #primary -->
	<?php get_sidebar(); ?>
</div><!-- .wrap -->
<?php
get_footer();

C:\xampp82\htdocs\wp1\wp-content\themes\twentyseventeen\assets\css\my-style.scss

body {
  color: red !important;
}