Clock

Khmer Web

Gateway to web application
រចនា​​របារមាតិកា
Edit


ដើម្បី​រចនា​របារ​មាតិកា (menu) យើង​ចាំបាច់​ត្រូវ​បើក​ឯកសារ​ឈ្មោះ 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;
}
/*ការរចនា​សំរាប់​ទូរស័ព្ទ​ដៃ*/
@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;
  }
}
</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">

ចាប់​ពី​បន្ទាត់​លេខ 62 ដល់​ 80 គឺ​ជា​កូដ CSS ចាំបាច់​សំរាប់​រចនា​របារ​មាតិកា។

ចាប់ពី​បន្ទាត់​លេខ 87 ដល់​បន្ទាត់​លេខ 95 គឺ​កូដ CSS ចាំបាច់​សំរាប់​រចនា​របារ​មាតិកាសំរាប់​ទូរស័ព្ទ​ដៃ​។