کد نویسی هدر

کد نویسی هدر

برای کد نویسی هدر نیز راه حل کوتاهی را به شما آموزش می دهیم. در قسمت هدر بسیاری از کارهای مهم سایت انجام می گیرد. در این  قسمت تعیین می کنید که سایت زبانهای مختلف و البته فارسی را پشتیبانی کند، عنوان سایت را به طور دینامیک نشان دهد، متاهای مختلف را وارد می کنید.به طور مثال  ما می خواهیم هدر ما دارای  فهرست برگه ها و جستجو  باشد و البته تنظیمات  دیگر را نیز انجام دهیم .

قطعه کد زیر یک مثال از هدر را نشان می دهد. که به توضیح آنها می پردازیم.

اگر میخواهید سایت شما ازفارسی هم  پشتیبانی کند <?php language_attributes(); ?> در تگ html بنویسید.

اگر می خواهید که عنوانی را که در سفارشی سازی سایت (در پیشخوان وردپرس)وارد می کنید به طور دینامیک برای سایت شما و عنوان سایت شما شناخته شود و بعد ها در جستجوی گوگل و سایر موتورهای جستجو شناخته شود <?php bloginfo( ‘name’ ); wp_title( ‘-‘ ); ?> را در تگ title قرار دهید. با این کار در نتایج جستجوی گوگل نام سایت شما و عنوان سایت کنار هم نشان داده می شود. به عنوان مثال نام سایت ما: تارا وب و عنوان: طراحی سایت با وردپرس است که ایندو در کنار هم در عنوان سایت قرار می گیرد. البته برای صفحات مختلف به طور اتوماتیک عنوان صفحه چایگزین خواهد شد و نشان داده خواهد شد.

متاهای مختلف را هم میتوان وارد کرد . در متای  keywords می توانید کلمات کلیدی سایت خود را وارد کنید که البته این متا تا حدودی منسوخ شده است. در متای description توضیح مختصری از سایت خود را وارد نمایید که باید حداکثر تعداد کاراکتر ها را رعایت کنید که برای سئوی سایت مهم است. معمولا حدود 60 کاراکتر است. نوشتن <?;()php wp_head ?> نیز الزامی است

نمونه کد نویسی هدر

<pre>
<html <?php language_attributes(); ?> xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title> <?php bloginfo( 'name' ); wp_title( '-' ); ?> </title>

<meta charset="<?php bloginfo( 'charset' ); ?>">
  <?php 
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
      wp_enqueue_script( 'comment-reply' );
    }
  ?>
<?php wp_head(); ?>

<meta name="keywords" content="طراحی سایت وردپرسی، طراحی سایت ارزان">
<meta name="description" content="تارا وب خدمات طراحی سایت ارزان، با کیفیت و سفارشی ازائه می دهد.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<pre>

در تگ body نیز برای شناسایی کلاسهای مختلف بدنه حتما کد <?php body_class(); ?> را وارد نمایید.

یک نمونه navbar که از کتابخانه های بوت استرپ است را قرار داده ایم تا فهرست برگه های سایت را در آن نمایش دهیم . با این کار در حالت موبایل نیز به زیبایی نشان داده خواهد شد. که البته شما باید از قبل فایل های css , js مورد نظر خود را enquee در فایل فانکشن کرده باشید. در ادامه این قسمت چند نمونه از enquee ها را قرار داده ام که توضیح مختصری از آنها را نیز بیان می کنیم.

ادامه کد نویسی هدر سایت

<pre>
<body <?php body_class(); ?> >
<header>
 <div class="blog-masthead" >
   <div class="container" >
    <div class="row" > 
     <div id="header" class="row" >

          <nav class="navbar navbar-inverse navbar-fixed-top"   >
                <div class="container-fluid">
                  <!-- Brand and toggle get grouped for better mobile display -->
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-   example-navbar-collapse-1" aria-expanded="false">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand"  href=<?php bloginfo( 'url' ); ?>><?php bloginfo( 'name' ); ?></a>
                  </div>
              
                  <!-- Collect the nav links, forms, and other content for toggling -->
                  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
                    <ul class="nav navbar-nav navbar-right" >
                            <li <?php if(is_home()) { ?> class="current_page_item" <?php } ?>>
     <a  class="active" href="<?php bloginfo('home'); ?>">خانه </a>
                            </li>
                            <li>
                                 <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
                            </li> 
                    </ul>
                    <form class="navbar-form navbar-left" role="search"  >
                       <form method="get" id="searchbar" action="<?php echo home_url( '/' ); ?>">
                         <div class="form-group">
                             <input type="text" class="form-control" id="search" size="18" name="s" placeholder="جستجو" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> 
                         </div> 
                       </form> 
                    </form>
                  </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
              </nav>
 
     </div> <!--end header -->
     </div><!--end row -->
     </div><!--end container -->
    </div><!--end blog-masthead -->
</header>


<pre>

با استفاده از کد زیر:

<pre>
<ul class="nav navbar-nav navbar-right" >
   <li <?php if(is_home()) { ?> class="current_page_item" <?php } ?>>
     <a  class="active" href="<?php bloginfo('home'); ?>">خانه </a>
           </li>
           <li>
             <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
           </li> 
</ul>

<pre>

لیست برگه های سایت به همراه صفحه خانه را در یک  لیست افقی نشان داده ایم و در navbar قرار داده  ایم.

جستجوی سایت را تعریف کرده ایم که این کد تست شده است و شما می توانید برای جستجو از آن استفاده نمایید.

خروجی :

کد نویسی هدر 1

نتیجه کد نویسی هدر

در مقاله بعدی نیز کد نویسی فوتر را با مثال توضیح خواهیم داد.



درباره نویسنده
افسانه نامور هستم مدیر تارا وب. فوق لیسانس مهندسی کامپیوتر گرایش نرم افزار دارم. اگر نیاز به طراحی قالب وردپرس اختصاصی دارید ما در تارا وب این کار را با بهترین کیفیت برایتان انجام می دهیم.

  • دیدگاه خود را در مورد این محصول یا مطلب وارد کنید
  • ایمیل شما منتشر نخواهد شد، با خیال آسوده آن را به درستی وارد کنید
  • امکاناتی که قصد دارید به محصول اضافه شوند را در نظرات همین صفحه وارد کنید تا بررسی شوند
  • پیشنهادات و انتقادات خود را برای ما بنویسید

تعداد دیدگاه ها برای این مطلب: 2 دیدگاه