រចនា​កាផ្សាយ​ចុង​ក្រោយ

នៅ​លើ​ទំព័រ​មុខ​ យើង​អាច​​ធ្វើការ​រចនា​នូវ​អ្វី​ៗ​បាន​គ្រប់​យ៉ាង​ទាំងអស់ មាន​ដូច​ជាការបង្កើត​ផ្នែក​នៃ​ការផ្សាយ​ចុងក្រោយ​នៅ​ផ្នែក​ខាង​លើ​គេជាដើម​។ លើស​ពី​នេះ​ទៀត ក្រៅ​ពី​ភាសា PHP យើង​ក៏​អាច​ប្រើប្រាស់​ភាសា​ JavaScript ក្នុង​គោល​បំណង​​បង្កើត​ផ្នែក​នៃ​ការផ្សាយ​ចុង​ក្រោយ​គេ​នេះ​បាន​ដែរ​។

ដើម្បី​បង្កើត​ផ្នែក​នៃ​ការផ្សាយ​ចុង​ក្រោយ​​មួយ ដោយ​ប្រើប្រាស់​ភាសា JavaScript យើង​ចាំ​ត្រូវ​បង្កើត​ឯកសារ​ js មួយ​ មាន​ឈ្មោះ​​ជា​ឧទាហរណ៍​ដូច​ជា script.js ជា​ដើម ដែល​នៅ​ក្នុងនោះ យើង​ត្រូវ​សរសេរ​កូដ​មួយ​ចំនួន​ដូច​ខាង​ក្រោម​នេះ៖

function __KBclass__(){
  this.today = this.srvTime();
  this.playIcon = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR2UeE7iPZFtkNE7wC38Febfs2JMyy-0C-vrOGKlMmjNw-oo-1io9yGChDBg1UzBy-2NXsajoBrSmiA5m1cRKqZcDuWD7ToRJd85Woes7h5x4xMr4wvJ_nptXtv1J-O0hD6DyYn7w1BQA/s1600/play.png";
  this.noPost = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhblCOrPueEj9giHUNqD6KrzqdCTRuyMIxJbKaEwiEH2-o_fBcQ2RIt0jM6MBEJCzlAeh88WLsVfSN2ODT-nPkkca5oSz4pgR9mEnJ7DtNrrHGJ_GiU0JmDxjAtaT9L0LtGkb1tgqBArAQ/s1600/no_post.png";
}

__KBclass__.prototype.toKhNum = function (number) {
  this.khNum = {'0':'០', '1':'១', '2':'២', '3':'៣', '4':'៤', '5':'៥', '6':'៦', '7':'៧', '8':'៨', '9':'៩'};
  var stringNum = number.toString();
  var khString = '';
 
  for(var i in stringNum){
    var char = stringNum.charAt(i);
    khString += this.khNum[char];
  }
 
  return khString;
}

__KBclass__.prototype.srvTime = function(){
  var xmlHttp;
  try {
    //FF, Opera, Safari, Chrome
    xmlHttp = new XMLHttpRequest();
  }
  catch (err1) {
    //IE
    try {
      xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
    }
    catch (err2) {
      try {
        xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      catch (eerr3) {
        //AJAX not supported, use CPU time.
        alert("AJAX not supported");
      }
    }
  }
  xmlHttp.open('HEAD',window.location.href.toString(),false);
  xmlHttp.setRequestHeader("Content-Type", "text/html");
  xmlHttp.send();
  return xmlHttp.getResponseHeader("Date");
}

__KBclass__.prototype.elapTime = function(rawDate){
  var seconds = 1000;
  var minutes = seconds * 60;
  var hours = minutes * 60;
  var days = hours * 24;
  var weeks = days * 7;
  var months = days * 30.5;
  var years = days * 365;
  var todayDate = new Date(this.today);
  var t = todayDate.getTime();

  var publishedDate = new Date(rawDate);
  var pt = publishedDate.getTime();
  var time = t - pt;
      
  if((time / years)>1){
    var ptime = Math.round(time / years);
    ptime = __KBobject__.toKhNum(ptime)+' '+'ឆ្នាំ​មុន';
  }else if((time / months)>1){
    var ptime = Math.round(time / months);
    ptime = __KBobject__.toKhNum(ptime)+' '+'ខែ​មុន';
  }else if((time / weeks)>1){
    var ptime = Math.round(time / weeks);
    ptime = __KBobject__.toKhNum(ptime)+' '+'សប្តាហ៍​មុន';
  }else if((time / days)>1){
    var ptime = Math.round(time / days);
    ptime = __KBobject__.toKhNum(ptime)+' '+'ថ្ងៃមុន';
  }else if((time / hours)>1){
    var ptime = Math.round(time / hours);
    ptime = __KBobject__.toKhNum(ptime)+' '+'ម៉ោង​មុន';
  }else if((time / minutes)>1){
    var ptime = Math.round(time / minutes);
    ptime = __KBobject__.toKhNum(ptime)+' '+'នាទី​មុន';
  }else{
    var ptime = Math.round(time / seconds);
    ptime = __KBobject__.toKhNum(ptime)+' '+'វិនាទី​មុន';
  }
  return ptime;
}

__KBclass__.prototype.createThumb = function (postContent){
  var div = document.createElement( 'div' );
  div.innerHTML = postContent;
  var img = div.getElementsByTagName("img");
  
  if(img.length>=1) {
    return img[0].src;
  }else{
    return (this.noPost);
  }   
}

__KBclass__.prototype.getPost =  function (json){
  this.postUrl = [];
  this.postTitle = [];
  this.postThumb = [];
  this.postDate = [];
  this.postIdList = [];
  this.postData = [];

  var postList = json;

  this.postList = postList;
  for(var i =0; i<postList.length; i++){
    this.postUrl.push(postList[i].link);
    var postContent = postList[i].content.rendered;
    this.postData.push(postContent);
    this.postIdList.push(this.postList[i].id);
    this.postTitle.push(postList[i].title.rendered);
    this.postThumb.push(this.createThumb(postContent));
    this.postDate.push(postList[i].date);
  }
}

__KBclass__.prototype.setPostCategory = function(){
  var html = '
';
  for (var i=0; i<this.postData.length; i++){
    var str = this.postData[i];
    
      if(str.indexOf('__video-id__') != -1){ 
        html += '';
        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 += '
';
  
  $('.post-category').html(html);
  if(!this.categoryHeight){
    var width = $('.post-category .img-frame').css('width');
    this.categoryHeight = parseInt(width)/16*9;
  }
}

__KBclass__.prototype.adjustFrames = function(){
  $('.post-category .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;

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

var __KBobject__ = new __KBclass__();

បន្ទាប់​មកទៀត ដើម្បី​អាច​យក​កូដ​ JavaScript នៅ​ក្នុងឯកសារ script.js ខាងលើ​មកប្រើ​នៅ​ក្នុង​គេហទំព័រ​របស់​យើងបាន យើង​ត្រូវត្រូវ​សសេរ​បន្ថែម​នៅ​ក្នុង​ឯកសារ header.php ដូច​ខាង​ក្រោម​នេះ​៖

<head>
  
  
  
  
  
  

  <?php wp_head(); ?>
</head>

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

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

get_header();
?>

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


  

  
  



<?php
get_sidebar();
get_footer();

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