Khmer Web: រចនាក្បាលគេហទំព័រ

នៅក្នុងប្រព័ន្ធ WordPress ដើម្បីរចនាក្បាលគេហទំព័ររ យើងចាំបាច់ត្រូវបើកឯកសារឈ្មោះ header.php នៅក្នុងថតដែលជាគំរូគេហទំព័រ Underscores របស់យើង។ បន្ទាប់មកទៀត យើងត្រូវសរសេរកូដ CSS នៅក្នុងឯកសារ header.php នោះដូចខាងក្រោមនេះ៖

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the  section and everything up until 
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Lotus_Blue
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
  
  
  
  <link href='https://fonts.googleapis.com/css?family=Oswald|Bokor|Bayon|Koulen|Moul|Nokora|Hanuman|Metal' rel='stylesheet'>
  

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

<body <?php body_class(); ?>>

<style>
a:link {
 text-decoration:none;
}
.region{
 width: 950px;
 margin: 20px auto 0;
}
body{
 font: 14px/1.5 Hanuman;
 background: #bbbfc4;
}
.site{
 background: #dde2eb;
 padding: 20px;
 border-radius: 4px;
}
.site-branding{
 background: #124094;
 padding: 25px 15px 20px;
 text-align: center;
}
.site-title{
 margin:0;
}
.site-title a{
  font: 36px/1.5 Moul;
  color: white;
}
.site-description{
 color: white;
 font: italic 18px/1.5 Nokora;
 margin-bottom:0;
}
/*ការរចនាសំរាប់ទូរស័ព្ទដៃ*/
@media only screen and (max-width : 768px) {
  .region{
    width: 100%;
    margin: 0;
  }
}
</style>

<div id="page" class="site region">
  <?php esc_html_e( 'Skip to content', 'lotus-blue' ); ?>

  <header id="masthead" class="site-header">
    <div class="site-branding">
      <?php
        the_custom_logo();
        if(is_front_page() && is_home()):
      ?>
      <?php bloginfo( 'name' ); ?>
      <?php
        else :
      ?>
      <?php bloginfo( 'name' ); ?>
      <?php
        endif;
        $lotus_blue_description = get_bloginfo( 'description', 'display' );
        if( $lotus_blue_description || is_customize_preview() ) :
      ?>
      <?php echo $lotus_blue_description; /* WPCS: xss ok. */ ?>
      <?php endif; ?>
    


    
    
    <?php
      wp_nav_menu( array(
       'theme_location' => 'menu-1',
       'menu_id'        => 'primary-menu',
       ) );
    ?>
    

  </header>

<div id="content" class="site-content">

នៅលើបន្ទាប់ 19 គឺជាការដាក់តំណរភ្ជាប់ទាញយកពុម្ពអក្សរខ្មែរមួយចំនួនពីប្រព័ន្ធ Google Fonts មកប្រើការ។ ចំណែកឯនៅលើបន្ទាត់លេខ 20 វិញ គឺជាការដាក់តំណរភ្ជាប់ទាញយកកញ្ចប់ jQuery មកប្រើការ។

ហើយកូដ CSS ចាប់ពីបន្ទាត់លេខ 27 ដល់ 61 គឺជាការរចនាក្បាលគេហទំព័រ អោយមានរូបរាងដូចរូបខាងលើ។

ចាប់ពីបន្ទាត់លេខ 62 ដល់ 67 គឺជាការរចនាក្បាលគេហទំព័រសំរាប់ទូរស័ព្ទដៃ។

នៅលើបន្ទាត់លេខ 63 ការសរសេរថា class="site region" គឺជាការបន្ថែមថ្នាក់ region មួយទៀតអោយធាតុ div ដែលមានថ្នាក់ជា site មួយរួចទៅហើយ៕