រចនា​ការផ្សាយ​ថ្មី​ៗ

ក៏​ដូច​ជា​ការរចនា​ការផ្សាយ​ផ្ទាល់​ដែរ មុន​គេ​បង្អស់ យើង​ត្រូវ​បង្កើត​កន្លែង​មួយ​នៅ​លើ​ទំព័រ​មុខ សំរាប់​ការផ្សាយ​ថ្មី​ៗ ដោយ​សរសេរកូដ​នៅ​ក្នុង​ឯកសារ​ home.php ​ខាង​ក្រោម​នេះ៖

<?php
/*
 *នេះ​ជា​ទំព័រ​មុខ​របស់​គំរូ​គេហទំព័រ Lotus Blue 
 */

get_header();
?>

<?php
  if(!wp_is_mobile()){
    get_template_part( 'template-parts/home', 'latest' );
    get_template_part( 'template-parts/home', 'ad' );
  }
?>


  

    <?php
      get_template_part( 'template-parts/home', 'live' );
      get_template_part( 'template-parts/home', 'recent' );
    ?>
  



<?php
get_sidebar();
get_footer();

នៅ​លើ​បន្ទាត់​លេខ 20 ការសរសេរថា get_template_part( 'template-parts/home', 'ad' ); គឺ​ជា​ការបង្កើត​កន្លែង​មួយ​នៅ​លើ​ទំព័រ​មុខ សំរាប់​ការផ្សាយ​ថ្មី​ៗ ដែល​នឹង​ជា​ឯក​សារ​មួយ​មាន​ឈ្មោះ​ថា home-recent.php ស្ថិត​នៅ​ក្នុង​ថត template-parts ។

បន្ទាប់មកទៀត យើង​ត្រូវ​បង្កើត​ឯកសារ​មាន​ឈ្មោះ​ថា home-recent.php ទុក​នៅ​ក្នុ​ថត template-parts ដោយ​សរសេរ​កូដ​មួយ​ចំនួន​ដូច​ខាង​ក្រោម​នេះ​៖

  <img onclick="addPost()" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_vCexVvH7KWYOYgf8cY3YsvvsMgpClXRaj8w28out8Q2x6NbRcwCFCs0ThVBXI6TQ-ufqUuEF_P28ght9gmwmTvDpiiTD_3NWNkFL8EXvuIT389aHDeedKXQMhhaDKYTTt-NJyvr9mgk/s1600/load_more.png" />


<script>
var __wrapper1__ = ".recent-outer";
__KBobject__.pageFeed = 1;
__KBobject__.getPostsByCategory({'category':false,'rootDir':__rootDir__,'posts':10,'wrapper':__wrapper1__});

function addPost(){
  $('.load-more img').attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0UcnaYU4Y6QvQL0ZHdGmvq1MKFSwJ_IRMuMNdrfAmvcdU1hdKgS7fdgYgti0k0WhPRLd_36F5ZJ4v0_1NNEPI3PLo2J_FozBOBxy0thmsNKzDStlXqAIXZisp89rZNx0_C-n_FgldVAQ/s1600/load_more.gif');
  var page =  ++__KBobject__.pageFeed;
  __KBobject__.getPostsByCategory({'page':page,'category':false,'rootDir':__rootDir__,'posts':10,'wrapper':__wrapper1__});
}
</script>

បន្ទាប់មកទៀត ដើម្បី​អោយ​​ការចុច​សញ្ញា​ព្រួញ​នៅខាង​ក្រោម​ការផ្សាយ​ថ្មី​ៗ អាច​ដំណើរការ​ទៅ​បាន យើង​ត្រូវ​ធ្វើ​ការកែតំរូវ​មួយ​ចំនួននៅ​ក្នុង​ឯកសារ script.js​ ដោយ​ធ្វើ​ដូច​ខាង​ក្រោម​នេះ៖

__KBclass__.prototype.setPostCategory = function(wrapper){
  var html = '
';
  for (var i=0; i';
        html += '';
        html += '';
        html += '
'+__KBobject__.elapTime(this.postDate[i])+'
';
        html += '
'+this.postTitle[i]+'
';
        html += '';
      }else{
        html += '';
        html += '';
        html += '
'+__KBobject__.elapTime(this.postDate[i])+'
';
        html += '
'+this.postTitle[i]+'
';
        html += '';
      }
    
  }
  html += '</div>';
  
  if(wrapper=='.post-category')
    $(wrapper).html(html);
  else{
    $(wrapper).append(html);
    $('.load-more img').attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_vCexVvH7KWYOYgf8cY3YsvvsMgpClXRaj8w28out8Q2x6NbRcwCFCs0ThVBXI6TQ-ufqUuEF_P28ght9gmwmTvDpiiTD_3NWNkFL8EXvuIT389aHDeedKXQMhhaDKYTTt-NJyvr9mgk/s1600/load_more.png');
  }
  var width = $(wrapper+' .img-frame').css('width');
  this.categoryHeight = parseInt(width)/16*9;
  
}

__KBclass__.prototype.adjustFrames = function(wrapper){
  $(wrapper+' .img-frame').css('height',this.categoryHeight);
}

__KBclass__.prototype.getPostsByCategory = function(options){
  var rootDir = options.rootDir || __rootDir__;
  var category = options.category || '';
  var posts = options.posts || 4;
  var page = options.page || 1;
  var wrapper = options.wrapper;

  $.ajax({url: rootDir+"/wp-json/wp/v2/posts?per_page="+posts+"&categories="+category+"&page="+page, success: function(json){
    __KBobject__.getPost(json);
    __KBobject__.setPostCategory(wrapper);
    __KBobject__.adjustFrames(wrapper);
    if(!options.posts)
      __KBobject__.currentPage = page;

  }});
}