រចនា​ទំព័រ​អត្ថបទនិងវីដេអូ

មុន​នឹង​អាច​ធ្វើការរចនា​ទំព័រ​អត្ថបទ​​និង​វីដេអូ​បាន​ យើង​ត្រូវ​សរសេរបន្ថែម​កូដ​មួយ​ចំនួន​ទៀត​ ចូល​ទៅ​ក្នុង​ឯកសារ​ឈ្មោះ script.js ជាមុន​សិន ដោយ​ធ្វើដូច​ខាង​ក្រោម​នេះ​៖

__KBclass__.prototype.setPostVid = function (postId,rootDir){
  var playlist = document.createElement( 'div' );
  var description = document.createElement( 'div');
  var post = document.getElementById(postId);
  var kbplayer = document.getElementById("KBPlayer");
  var Playlistt = [];
  
  var str = post.getElementsByClassName("__video-id__")[0].getAttribute("data-id");
  playlist.innerHTML = post.getElementsByClassName("__playlist__")[0].getAttribute("data-pl");
  description.innerHTML = post.getElementsByClassName("__description__")[0].innerHTML;
  
  kbplayer.parentElement.insertBefore(description, kbplayer.nextSibling);
  var startIndex = str.indexOf('{');
  var endIndex = str.indexOf('}');
  var vidId = str.slice(startIndex+1,endIndex);

  
  if(str.indexOf('googledrive') != -1){
    var iframeSrc = 'https://docs.google.com/file/d/'+vidId+'/preview';

  }
  
  else if(str.indexOf('youtube') != -1){
    var iframeSrc = '//www.youtube.com/embed/'+vidId;

  }

  else if(str.indexOf('dailymotion') != -1){
    var iframeSrc = '//www.dailymotion.com/embed/video/'+vidId+'?logo=0&info=0';

  }

  else if(str.indexOf('vimeo') != -1){
    var iframeSrc = '//player.vimeo.com/video/'+vidId;

  }

  else if(str.indexOf('facebookvid') != -1){
    var iframeSrc = 'https://www.facebook.com/video.php?v='+vidId;
    fbLink = 'https://www.facebook.com/video.php?v='+vidId;
    fbVid = true;
    
  }
   
  if(str.indexOf('facebookvid') != -1){
    var postContent = '
';
    postContent += '
';
    postContent += '
'; 
   }
    
  else{
    var postContent = '';
   }
   
  post.innerHTML = postContent;

  var Player = post.getElementsByTagName('iframe');
   
  if(str.indexOf('facebookvid') != -1){
    var vidWidth = post.getElementsByTagName('p');
    var Player = post.getElementsByTagName('div');
    Player[0].setAttribute("data-width", vidWidth[0].clientWidth);
  }
  else{
   var vidWidth = Player[0].clientWidth;
   Player[0].height = vidWidth / 16 * 9;
  } 
   
  str = playlist.innerHTML;
   if(str.indexOf('pl') != -1){
     var startIndex = str.indexOf('[');
     var endIndex = str.indexOf(']');
     this.pl = str.slice(startIndex+1,endIndex);

     $.ajax({url: rootDir+"/wp-json/wp/v2/posts?order=asc&tags="+this.pl, success: function(json){
      __KBobject__.getRelatedPost(json);    
     }});
   }   
}

__KBclass__.prototype.getRelatedPost  = function (json){
  var partTitle = document.getElementsByTagName('title');
  partTitle = partTitle[0].innerHTML;
  
  this.getPost(json);

  var html = '';
  var focusPart = '';

  html = ('
');
  for(var i=this.postList.length-1;i>-1; i--){
    html += ('');
    html += ('
');
    html += ('');
    html += (this.postTitle[i]);
    html += ('
');
    html += ('');
    if(partTitle.indexOf(this.postTitle[i]) != -1){
     focusPart = 'Part'+i;
    } 
  }  
  html += ('
');
  
    $('#KBPlayer').append(html);

    $('#'+focusPart).css('background-color', '#282828');
    $('#'+focusPart).css('color', 'orange');

    var Player = $("#relatedPosts  img").css("width");
    var playerHeight = parseInt(Player)/16*9;
    $("#relatedPosts  .thumb-part").css("height",playerHeight);
    $("#relatedPosts  .div-part").css("height",playerHeight+11);

    var container = $('#relatedPosts');
    var element = $('#'+focusPart);

    container.animate({
      scrollTop: container.scrollTop = container.scrollTop() + element.offset().top - container.offset().top
    }, {
      duration: 1000,
      specialEasing: {
        width: 'linear',
        height: 'easeOutBounce'
      },
      complete: function (e) {
        //console.log("animation completed");
      }
    });
}

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

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package Lotus_Blue
 */

get_header();
?>

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


  


    <?php
      while ( have_posts() ) :
        the_post();
        get_template_part( 'template-parts/content', get_post_type() );		
	    the_post_navigation();
		
	    // If comments are open or we have at least one comment, load up the comment template.
	    if ( comments_open() || get_comments_number() ) :
	      //comments_template();
	    endif;

      endwhile; // End of the loop.
    ?>
    

  



<?php
get_sidebar();
get_footer();

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

<?php
/**
 * Template part for displaying posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package Lotus_Blue
 */

?>


<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  

    <?php
      if ( is_singular() ) :
        the_title( '
', '
' );
      else :
        the_title( '
', '
' );
      endif;

      if ( 'post' === get_post_type() ) :
    ?>
      

        
      

      <?php endif; ?>
  


  <?php lotus_blue_post_thumbnail(); ?>
  

    

      <?php
        the_content( sprintf(
	  wp_kses(
	  /* translators: %s: Name of current post. Only visible to screen readers */
	  __( 'Continue reading "%s"', 'lotus-blue' ),
	    array(
	      'span' => array(
	        'class' => array(),
	      ),
	    )
	  ),
	  get_the_title()
	  ) );

	  wp_link_pages( array(
	    'before' => '
' . esc_html__( 'Pages:', 'lotus-blue' ),
			'after'  => '
',
	    ) );
       ?>
    

  

  <script>
    var str = $('.entry-content').html();
    if(str.indexOf('__video-id__') != -1){
    $('#__KBPlayer__').attr('id', 'KBPlayer');
    var rootDir = '<?php echo get_site_url();?>';
    __KBobject__.setPostVid('post-content',rootDir); 		}
  </script>
	
  

    ជំពូកៈ <?php the_category(', '); ?>
    
    
      Share
    
  

</article>