😅Sử dụng ajax tạo popup cho các bài viết wordrpess mattervn.com (ok)

C:\xampp82\htdocs\testpro\wp-content\themes\gutener-child\functions.php

add_action('wp_enqueue_scripts', 'add_theme_scripts', 99);
function add_theme_scripts()
{
  wp_enqueue_style('carouselcss', get_stylesheet_directory_uri() . '/assets/css/owl.carousel.css', array(),  wp_generate_uuid4(), 'all');
  wp_enqueue_style('styleathomecss', get_stylesheet_directory_uri() . '/assets/css/dev-custom.css', array(),  wp_generate_uuid4(), 'all');
  wp_enqueue_script('lazysizesjs', get_stylesheet_directory_uri() . '/assets/js/lazysizes.min.js', array('jquery'),  wp_generate_uuid4(), 'true');
  wp_enqueue_script('carouseljs', get_stylesheet_directory_uri() . '/assets/js/owl.carousel.js', array('jquery'),  wp_generate_uuid4(), 'true');
  wp_enqueue_script('styleathomejs', get_stylesheet_directory_uri() . '/assets/js/dev-custom.js', array('jquery'),  wp_generate_uuid4(), 'true');
  wp_localize_script(
    'styleathomejs',
    'frontend_ajax_object',
    array(
      'ajaxurl'   => admin_url('admin-ajax.php'),
      'ajaxnonce' => wp_create_nonce('ajaxnonce'),
    )
  );
}
add_action('wp_ajax_func_knowledge_popup', 'func_knowledge_popup');
add_action("wp_ajax_nopriv_func_knowledge_popup", "func_knowledge_popup");
function func_knowledge_popup() {
  echo wp_json_encode(['status' => 'success']);
  wp_die();
}

C:\xampp82\htdocs\testpro\wp-content\themes\gutener-child\assets\js\dev-custom.js

var $ = jQuery;
jQuery(document).ready(function ($) {
  $('.knowledge-popup').click(function (e) {
    e.preventDefault(); // prevent
    let id = $(this).data('id');
    $.ajax({
      type: 'POST',
      url: frontend_ajax_object.ajaxurl,
      data: {
        action: 'func_knowledge_popup',
      },
      success: function (result) {
        var result = JSON.parse(result);
        if (result.status == 'success') {
          var html = '';
          html += '<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">';
          html += '<div class="modal-dialog">';
          html += '<div class="modal-content">';
          html += '<div class="modal-header">';
          html += '<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>';
          html += '<button type="button" class="close" data-dismiss="modal" aria-label="Close">';
          html += '<span aria-hidden="true">&times;</span>';
          html += '</button>';
          html += '</div>';
          html += '<div class="modal-body">';
          html += 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, libero?';
          html += '</div>';
          html += '<div class="modal-footer">';
          html += '<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>';
          html += '<button type="button" class="btn btn-primary">Save changes</button>';
          html += '</div>';
          html += '</div>';
          html += '</div>';
          html += '</div>';
          $('#knowledge-append').html(html);
          jQuery('#exampleModal').modal('show');
        }
      }
    });
  });
});

C:\xampp82\htdocs\testpro\wp-content\themes\gutener-child\category-kien-thuc-chung.php

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package Gutener
 */
get_header();
?>
<?php
if (is_home() && !get_theme_mod('disable_main_slider', false)) {
  if (get_theme_mod('main_slider_controls', 'slider') == 'slider') {
    if (get_theme_mod('display_slider_on', 'blog-page-below-header') == 'blog-page-below-header' || get_theme_mod('display_slider_on', 'blog-page-below-header') == 'front-blog-page-below-header') { ?>
      <section class="section-banner">
        <?php
        get_template_part('template-parts/slider/slider', '');
        ?>
      </section>
<?php }
  } elseif (get_theme_mod('main_slider_controls', 'slider') == 'banner') {
    if (get_theme_mod('display_banner_on', 'blog-page-below-header') == 'blog-page-below-header' || get_theme_mod('display_banner_on', 'blog-page-below-header') == 'front-blog-page-below-header') {
      gutener_banner();
    }
  }
} ?>
<div id="content" class="site-content">
  <div class="container">
    <?php
    //Highlighted Posts Section
    if (get_theme_mod('highlight_posts_section_layouts', 'highlighted_one') == '' || get_theme_mod('highlight_posts_section_layouts', 'highlighted_one') == 'highlighted_one') {
      get_template_part('template-parts/highlight-posts/highlight-posts', 'one');
    } ?>
    <!-- Latest Posts Section -->
    <?php
    $latest_posts_category = get_theme_mod('latest_posts_category', '');
    $query = new WP_Query(apply_filters('gutener_blog_args', array(
      'post_type'           => 'post',
      'post_status'         => 'publish',
      'cat'                 => $latest_posts_category,
      'paged'              => get_query_var('paged', 1),
    )));
    $posts_array = $query->get_posts();
    $show_latest_posts = count($posts_array) > 0;
    if (!get_theme_mod('disable_latest_posts_section', false) && $show_latest_posts) {
      $latest_title_desc_align = get_theme_mod('latest_posts_section_title_desc_alignment', 'left');
      if ($latest_title_desc_align == 'left') {
        $latest_title_desc_align = 'text-left';
      } else if ($latest_title_desc_align == 'center') {
        $latest_title_desc_align = 'text-center';
      } else {
        $latest_title_desc_align = 'text-right';
      } ?>
      <section class="section-post-area">
        <div class="row">
          <?php
          $sidebarClass = 'col-lg-8';
          $sidebarColumnClass = 'col-lg-4';
          $masonry_class = '';
          if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
            $masonry_class = 'grid';
          }
          if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
            $layout_class = 'grid-post-wrap';
          } elseif (get_theme_mod('archive_post_layout', 'grid') == 'single') {
            $layout_class = 'single-post';
          }
          if (get_theme_mod('sidebar_settings', 'right') == 'right') {
            if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
              if (!is_active_sidebar('right-sidebar')) {
                $sidebarClass = "col-12";
              }
            } else {
              if (!is_active_sidebar('right-sidebar')) {
                $sidebarClass = "col-lg-8 offset-lg-2";
              }
            }
          } elseif (get_theme_mod('sidebar_settings', 'right') == 'left') {
            if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
              if (!is_active_sidebar('left-sidebar')) {
                $sidebarClass = "col-12";
              }
            } else {
              if (!is_active_sidebar('left-sidebar')) {
                $sidebarClass = "col-lg-8 offset-lg-2";
              }
            }
          } elseif (get_theme_mod('sidebar_settings', 'right') == 'right-left') {
            $sidebarClass = 'col-lg-6';
            $sidebarColumnClass = 'col-lg-3';
            if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
              if (!is_active_sidebar('left-sidebar') && !is_active_sidebar('right-sidebar')) {
                $sidebarClass = "col-12";
              }
            } else {
              if (!is_active_sidebar('left-sidebar') && !is_active_sidebar('right-sidebar')) {
                $sidebarClass = "col-lg-8 offset-lg-2";
              }
            }
          }
          if (get_theme_mod('sidebar_settings', 'right') == 'no-sidebar' || get_theme_mod('disable_sidebar_blog_page', false)) {
            if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
              $sidebarClass = "col-12";
            } else {
              $sidebarClass = 'col-lg-8 offset-lg-2';
            }
          }
          if (!get_theme_mod('disable_sidebar_blog_page', false)) {
            if (get_theme_mod('sidebar_settings', 'right') == 'left') {
              if (is_active_sidebar('left-sidebar')) { ?>
                <div id="secondary" class="sidebar left-sidebar <?php echo esc_attr($sidebarColumnClass); ?>">
                  <?php dynamic_sidebar('left-sidebar'); ?>
                </div>
              <?php }
            } elseif (get_theme_mod('sidebar_settings', 'right') == 'right-left') {
              if (is_active_sidebar('left-sidebar') || is_active_sidebar('right-sidebar')) { ?>
                <div id="secondary" class="sidebar left-sidebar <?php echo esc_attr($sidebarColumnClass); ?>">
                  <?php dynamic_sidebar('left-sidebar'); ?>
                </div>
          <?php
              }
            }
          } ?>
          <div id="primary" class="content-area <?php echo esc_attr($sidebarClass); ?>">
            <?php if (is_home() && !get_theme_mod('disable_main_slider', false)) {
              if (get_theme_mod('main_slider_controls', 'slider') == 'slider') {
                if (get_theme_mod('display_slider_on', 'blog-page-below-header') == 'blog-page-above-latest-posts') { ?>
                  <section class="section-banner">
                    <?php
                    get_template_part('template-parts/slider/slider', '');
                    ?>
                  </section>
            <?php }
              } elseif (get_theme_mod('main_slider_controls', 'slider') == 'banner') {
                if (get_theme_mod('display_banner_on', 'blog-page-below-header') == 'blog-page-above-latest-posts') {
                  gutener_banner();
                }
              }
            } ?>
            <?php if ((!get_theme_mod('disable_latest_posts_section_title', true) && get_theme_mod('latest_posts_section_title', '')) || (!get_theme_mod('disable_latest_posts_section_description', true) && get_theme_mod('latest_posts_section_description', ''))) { ?>
              <div class="section-title-wrap <?php echo esc_attr($latest_title_desc_align); ?>">
                <?php if (!get_theme_mod('disable_latest_posts_section_title', true) && get_theme_mod('latest_posts_section_title', '')) { ?>
                  <h2 class="section-title"><?php echo esc_html(get_theme_mod('latest_posts_section_title', '')); ?></h2>
                <?php }
                if (!get_theme_mod('disable_latest_posts_section_description', true) && get_theme_mod('latest_posts_section_description', '')) { ?>
                  <p><?php echo esc_html(get_theme_mod('latest_posts_section_description', '')); ?></p>
                <?php } ?>
              </div>
            <?php } ?>
            <div class="row <?php echo esc_attr($masonry_class); ?>">
              <?php
              if ($query->have_posts()) :
                if (is_home() && !is_front_page()) :
              ?>
                  <header>
                    <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
                  </header>
              <?php
                endif;
                $i = 0;
                while ($query->have_posts()) :
                  $i++;
                  $query->the_post();
                  get_template_part('template-parts/content', 'kien-thuc', array('index'  => $i));
                endwhile;
              elseif (!is_sticky() && !$query->have_posts()) :
                get_template_part('template-parts/content', 'none');
              endif;
              ?>
            </div>
            <?php
            if (!get_theme_mod('disable_pagination', false)) :
              the_posts_pagination(array(
                'total'        => $query->max_num_pages,
                'next_text' => '<span>' . esc_html__('Next', 'gutener') . '</span><span class="screen-reader-text">' . esc_html__('Next page', 'gutener') . '</span>',
                'prev_text' => '<span>' . esc_html__('Prev', 'gutener') . '</span><span class="screen-reader-text">' . esc_html__('Previous page', 'gutener') . '</span>',
                'before_page_number' => '<span class="meta-nav screen-reader-text">' . esc_html__('Page', 'gutener') . ' </span>',
              ));
            endif;
            wp_reset_postdata();
            ?>
          </div><!-- #primary -->
          <?php
          if (!get_theme_mod('disable_sidebar_blog_page', false)) {
            if (get_theme_mod('sidebar_settings', 'right') == 'right') {
              if (is_active_sidebar('right-sidebar')) { ?>
                <div id="secondary" class="sidebar right-sidebar <?php echo esc_attr($sidebarColumnClass); ?>">
                  <?php dynamic_sidebar('right-sidebar'); ?>
                </div>
              <?php }
            } elseif (get_theme_mod('sidebar_settings', 'right') == 'right-left') {
              if (is_active_sidebar('left-sidebar') || is_active_sidebar('right-sidebar')) { ?>
                <div id="secondary-sidebar" class="sidebar right-sidebar <?php echo esc_attr($sidebarColumnClass); ?>">
                  <?php dynamic_sidebar('right-sidebar'); ?>
                </div>
          <?php
              }
            }
          }
          ?>
        </div>
      </section>
    <?php } ?>
    <?php
    //Featured Posts Section
    if (get_theme_mod('feature_posts_section_layouts', 'feature_one') == '' || get_theme_mod('feature_posts_section_layouts', 'feature_one') == 'feature_one') {
      get_template_part('template-parts/feature-posts/feature-posts', 'one');
    } ?>
  </div><!-- #container -->
</div><!-- #content -->
<div id="knowledge-append"></div>
<?php
get_footer();

C:\xampp82\htdocs\testpro\wp-content\themes\gutener-child\template-parts\content-kien-thuc.php

<?php
/**
 * Template part for displaying posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package Gutener
 */
$index =  $args['index'];
?>
<?php
$stickyClass = "col-12";
$layout_class = '';
if (get_theme_mod('sidebar_settings', 'right') == 'right') {
  if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
    $stickyClass = "col-sm-6 grid-post";
    if (!is_active_sidebar('right-sidebar')) {
      $stickyClass = "col-sm-6 col-lg-4 grid-post";
    }
  }
} elseif (get_theme_mod('sidebar_settings', 'right') == 'left') {
  if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
    $stickyClass = "col-sm-6 grid-post";
    if (!is_active_sidebar('left-sidebar')) {
      $stickyClass = "col-sm-6 col-lg-4 grid-post";
    }
  }
} elseif (get_theme_mod('sidebar_settings', 'right') == 'no-sidebar') {
  if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
    $stickyClass = "col-sm-6 col-lg-4 grid-post"; // default
  }
} elseif (get_theme_mod('sidebar_settings', 'right') == 'right-left') {
  if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
    $stickyClass = "col-sm-6 col-lg-6 grid-post";
    if (!is_active_sidebar('left-sidebar') && !is_active_sidebar('right-sidebar')) {
      $stickyClass = "col-sm-6 col-lg-4 grid-post";
    }
  }
}
if (get_theme_mod('disable_sidebar_blog_page', false) && get_theme_mod('archive_post_layout', 'grid') == 'grid') {
  $stickyClass = "col-sm-6 col-lg-4 grid-post";
}
if (!is_sticky() && get_theme_mod('archive_post_layout', 'grid') == 'list') {
  $layout_class = 'list-post';
} elseif (!is_sticky() && get_theme_mod('archive_post_layout', 'grid') == 'single') {
  $layout_class = 'single-post';
} elseif (is_archive() && is_sticky() && get_theme_mod('archive_post_layout', 'grid') == 'list') {
  $layout_class = 'list-post';
} elseif (is_archive() && is_sticky() && get_theme_mod('archive_post_layout', 'grid') == 'single') {
  $layout_class = 'single-post';
}
$layout_class .= 'knowledge-popup ';
$class = '';
if (!has_post_thumbnail()) {
  $class = 'no-thumbnail';
}
if ($index == 1) :
  $stickyClass = "col-sm-12 col-lg-12 grid-post grid-post--__image";
elseif ($index == 2 || $index == 3) :
  $stickyClass = "col-sm-6 col-lg-6 grid-post grid-post--__image";
else :
  $stickyClass = "col-sm-4 col-lg-4 grid-post grid-post--__image";
endif;
?>
<div class="<?php echo esc_attr($stickyClass); ?>">
  <article  id="post-<?php the_ID(); ?>" <?php post_class($class . ' ' . $layout_class) ?> data-id="<?php the_ID(); ?>">
    <?php
    if (has_post_thumbnail()) : ?>
      <figure class="featured-image">
        <a href="<?php the_permalink(); ?>">
          <?php
          if (get_theme_mod('sidebar_settings', 'right') == 'right') {
            if (get_theme_mod('archive_post_layout', 'grid') == 'grid' || get_theme_mod('archive_post_layout', 'grid') == 'list') {
              gutener_image_size('gutener-420-300');
            } elseif (get_theme_mod('archive_post_layout', 'grid') == 'single') {
              gutener_image_size('gutener-1370-550');
            }
          } elseif (get_theme_mod('sidebar_settings', 'right') == 'left') {
            if (get_theme_mod('archive_post_layout', 'grid') == 'grid' || get_theme_mod('archive_post_layout', 'grid') == 'list') {
              gutener_image_size('gutener-420-300');
            } elseif (get_theme_mod('archive_post_layout', 'grid') == 'single') {
              gutener_image_size('gutener-1370-550');
            }
          } elseif (get_theme_mod('sidebar_settings', 'right') == 'no-sidebar') {
            if (get_theme_mod('archive_post_layout', 'grid') == 'grid' || get_theme_mod('archive_post_layout', 'grid') == 'list') {
              gutener_image_size('gutener-420-300');
            } elseif (get_theme_mod('archive_post_layout', 'grid') == 'single') {
              gutener_image_size('gutener-1370-550');
            }
          } elseif (get_theme_mod('sidebar_settings', 'right') == 'right-left') {
            if (get_theme_mod('archive_post_layout', 'grid') == 'grid' || get_theme_mod('archive_post_layout', 'grid') == 'list') {
              gutener_image_size('gutener-420-300');
            } elseif (get_theme_mod('archive_post_layout', 'grid') == 'single') {
              gutener_image_size('gutener-1370-550');
            }
          }
          ?>
        </a>
      </figure><!-- .recent-image -->
    <?php
    endif;
    ?>
    <div class="entry-content">
      <header class="entry-header">
        <?php
        if (!get_theme_mod('hide_category', false)) {
          gutener_entry_header();
        }
        if (!get_theme_mod('hide_post_title', false)) {
          the_title('<h3 class="entry-title"><a href="' . esc_url(get_permalink()) . '" rel="bookmark">', '</a></h3>');
        }
        ?>
      </header><!-- .entry-header -->
      <div class="entry-meta">
        <?php gutener_entry_footer(); ?>
      </div><!-- .entry-meta -->
      <?php if (!get_theme_mod('hide_blog_page_excerpt', false) || !get_theme_mod('hide_post_button', true)) { ?>
        <div class="entry-text">
          <?php
          if (!get_theme_mod('hide_blog_page_excerpt', false)) {
            $excerpt_length = get_theme_mod('post_excerpt_length', 15);
            $sticky_simple_excerpt_length = get_theme_mod('sticky_simple_post_excerpt_length', 40);
            if (is_sticky()) {
              gutener_excerpt($sticky_simple_excerpt_length, true);
            } else {
              gutener_excerpt($excerpt_length, true);
            }
          } ?>
          <?php
          if (!get_theme_mod('hide_post_button', true) && get_theme_mod('post_button_text', '')) {
            $button_type = 'button-text';
            if (get_theme_mod('post_button_type', 'button-text') == 'button-primary') {
              $button_type = 'button-primary';
            } elseif (get_theme_mod('post_button_type', 'button-text') == 'button-outline') {
              $button_type = 'button-outline';
            } ?>
            <div class="button-container">
              <a href="<?php the_permalink(); ?>" class="<?php echo esc_attr($button_type); ?>">
                <?php
                $post_button_text = get_theme_mod('post_button_text', '');
                echo esc_html($post_button_text ? $post_button_text : "");
                ?>
              </a>
            </div>
          <?php }  ?>
        </div>
      <?php } ?>
    </div><!-- .entry-content -->
  </article><!-- #post-->
</div>