Clock

Khmer Web

Gateway to web application
រចនា​ទំរង់​គេហទំព័រ
Edit


ដើម្បី​រចនា​ទំរង់គេហទំព័រ​អោយ​ចែក​ជា​ ៣ ផ្នែក យើង​ចាំបាច់​ត្រូវ​បើក​ឯកសារ​ឈ្មោះ 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;
}
/*ការរចនារបារ​មាតិកា*/
.main-navigation{
 background: #3973db;
}
ul.nav-menu{
 padding: 8px 0;
 font: 14px/1.5 Bayon;
}
ul.nav-menu li {
 display: inline-block;
 float: none;
 position: relative;
 margin-left: 10px;
}
ul.nav-menu a{
 color: lavender;
}
ul.nav-menu a:hover{
 color: white;
}
/*ការរចនា​ទំរង់​គេហទំព័រ*/
.content-area {
 float: left;
 margin: 0 -30% 0 0;
 width: 100%;
}
.site-main {
 margin: 0 30% 0 0;
}
.site-content .widget-area {
 float: right;
 overflow: hidden;
 width: 30%;
}
.site-footer {
 clear: both;
 width: 100%;
}
/*ការរចនា​សំរាប់​ទូរស័ព្ទ​ដៃ*/
@media only screen and (max-width : 768px) {
  .region{
   width: 100%;
   margin: 0;
  }
  ul.nav-menu li{
   display: block;
   margin-right: 0px;
   padding: 3px 0;
  }
  ul.nav-menu{
   padding: 8px 0;
   font: 14px/1.5 Hanuman;
  }
  .content-area {
   margin: 0;
  }
  .site-main {
   margin: 0;
  }
  .site-content .widget-area {
   width: 100%;
  }
}
</style>

<div id="page" class="site region">
  

  <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; ?>
    


    
  </header>

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

ចាប់​ពី​បន្ទាត់​លេខ 82 ដល់​ 98 គឺ​ជា​កូដ CSS ចាំបាច់​សំរាប់​រចនា​ទំរង់​គេហទំព័រ​ អោយ​ចែក​ជា​ ៣ ផ្នែក​គឺ​ផ្នែក​ខាង​ស្តាំ (sidebar) ផ្នែក​ប៉ុស្តិ៍ និង​ ផ្នែក​ជើង​ឬ​ផ្នែក​ខាង​ក្រោម​គេហទំព័រ (footer) ។

ចាប់ពី​បន្ទាត់​លេខ 114 ដល់​បន្ទាត់​លេខ 122 គឺ​កូដ CSS ចាំបាច់​សំរាប់​រចនា​រទំរង់គេហទំព័រ​សំរាប់​ទូរស័ព្ទ​ដៃ​៕