آموزش ساخت قالب وردپرس - قسمت سوم

This entry is part [part not set] of 8 in the series آموزش طراحی قالب وردپرس

سازماندهی فایل index.php و معرفی فایل single.php

در قسمت قبل یا قسمت دوم آموزش ساخت قالب های وردپرس از پایه و به صورت استاندارد ، در مورد فایل index.php و حلقه ها در وردپرس و نمایش محتوا در صفحه ی اصلی وب سایت صحبت کردیم.

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

اما یک ایده …

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

و این، مکان و زمانی است که وردپرس فایل single.php را معرفی کرده است و دلیل وجود این فایل نظم بخشیدن به هر نوشته ی سایت شماست .

پس در این آموزش به موارد زیر می پردازیم:

نحوه ی نمایش خلاصه ای از هر پست در صفحه ی اصلی یا index.php
اضافه کردن Bootstrap CSS 3 به قالب برای زیبا کردن ظاهر وب سایت
لینک دادن متن کوتاه هر نوشته در فایل index.php به متن و صفحه ی اصلی آن نوشته در فایل single.php
معرفی کوتاه single.php
نمایش محتوای هر پست به صورت کامل در single.php

1. نحوه ی نمایش خلاصه ای از هر پست در صفحه ی اصلی یا index.php

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

در آموزش قبل دیدیم که یک چرخه یا حلقه یا loop وردپرس اطلاعات زیادی در مورد پست ها به ما می دهد و یکی از آن ها ()the_excerpt بود. با استفاده از این تابع می توانیم خلاصه ای از هر پست را به نمایش بگذاریم.

خب بیایید یک مثال از این تابع را در صفحه ی اصلی قالبی که ساختیم به نمایش بگذاریم.

ابتدا کدهای فایل index.php را پاک کنید، و کد استاندارد زیر را در آن قرار بدهید و ذخیره کنید، در ضمن نگران ظاهر وب سایت نباشید در مرحله 2 در چند قدم ساده ظاهر وب سایت را زیبا می کنیم.

<!DOCTYPE html>
<htmL dir="rtl">
  <head>
 
  </head>
<body>
<?php 
if ( have_posts() ) {
  while ( have_posts() ) {
    the_post(); 
?>
      <h3><?php the_title(); ?></h3>
      <div> 
          <?php the_excerpt(); ?>
      </div>
      <hr>
 
<?php
  }  // end while
}  // end if
?>
 
</body>
</htmL>

بعد از ذخیره کردن فایل index.php به صفحه ی اصلی می رویم که مانند تصویر زیر می باشد:

همان طور که می بینید عنوان هر پست با استفاده از تابع ()the_title و خلاصه ای از هر پست با استفاده از تابع ()the_excerpt در صفحه ی اصلی به نمایش گذاشته شد، اگر همه ی پست های وب سایت شما با استفاده از کد بالا نمایش داده نشد نگران نباشید این موضوع به صورت کامل در آموزش های بعدی توضیح داده خواهد شد . حالا که خلاصه مطالب را در صفحه اصلی نمایش دادیم به مرحله 2 می رویم تا با اضافه کردن مقداری کد CSS ظاهر صفحه ی اصلی را مرتب کنیم.

2. اضافه کردن Bootstrap CSS 3 به قالب برای زیبا کردن ظاهر وب سایت

قبل از اینکه این قسمت را ادامه دهیم ذکر 2 نکته الزامی است :

در این سری آموزشی نحوه ی طراحی گرافیک و ظاهر قالب به صورت حرفه ای آموزش داده نمی شود و باید در یک مبحث جداگانه در مورد آن صحبت شود چرا که مبحث گرافیک و ظاهر وب سایت به اندازه ی کافی طولانی می باشد، اما در طول آموزش ظاهر وب سایت ما به اندازه ی قابل قبول زیبا خواهد بود.
اگر با css bootstrap 3 آشنا نیستید اصلا مشکلی وجود ندارد. این مطلب را در کم تر از 10 دقیقه در آموزش Bootstrap 3 یاد خواهید گرفت.

با توجه به 2 نکته ی بالا ظاهر صفحه ی وب سایت را کمی مرتب می کنیم.

ابتدا به اینترنت متصل شوید و سپس کد زیر را در تگ head فایل index.php قرار دهید:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

که بعد از اضافه کردن کد بالا فایل index.php باید شبیه به زیر باشد:

<!DOCTYPE html>
<htmL dir="rtl">
  <head>
 
 			<meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  </head>
<body>
<?php 
if ( have_posts() ) {
  while ( have_posts() ) {
    the_post(); 
?>
      <h3><?php the_title(); ?></h3>
      <div> 
          <?php the_excerpt(); ?>
      </div>
      <hr>
 
<?php
  }  // end while
}  // end if
?>
 
</body>
</htmL>

بس از این که چند تکه کد CSS به صفحه برای ظاهر زیباتر اضافه کردیم، کد نهایی به صورت زیر می باشد:

<!DOCTYPE html>
<htmL dir="rtl">
  <head>
 
 			<meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
      <style>
          body{
            background-color: #eee;
          }
           .container {
           		margin-top:30px;
           		background-color: white;
           		padding: 25px;
           		border-radius: 15px;
           }
           .post-box {
           		padding:10px;
           		font-family: "sans-serif","tahoma";
           }
      </style>
  </head>
<body>
    <div class="container" >
      <div class="row">
<?php
        if ( have_posts() ) {
          while ( have_posts() ) {
            the_post(); 
?>
              <div class="col-md-12 col-sm-12 post-box" >
                <h3><?php the_title(); ?></h3>
                <div> 
                <?php the_excerpt(); ?>
                </div>
              
                <p> 
                  <span class="btn btn-md btn-success"> 
                    read more 
                  </span>
                </p>
              </div>
              <hr>

<?php
          }  // end while
        }  // end if

?>
      </div>
    </div>
 
</body>
</htmL>

که ظاهر سایت ما شبیه تصویر زیر می شود:

همانطور که ملاحظه می کنید ظاهر صفحه کمی بهتر و زیبا تر شد.

حال که خلاصه ای از هر پست در صفحه ی اصلی داریم باید هر پست را بوسیله ی یک لینک به متن اصلی آن در صفحه ی single.php وصل کنیم که در مرحله ی بعدی به آن پرداحته ایم.

لینک دادن متن کوتاه هر نوشته در فایل index.php ، به صفحه ی آن نوشته در فایل single.php

در آموزش قبلی یکی از اطلاعاتی که Loop وردپرس در مورد هر پست به ما می داد تابع ()the_permalink بود که لینک اصلی هر مطلب در وردپرس را به ما نشان می داد. پس برای رفتن به صفحه و متن کامل هر نوشته کافی است در فایل index.php لینک اصلی هر مطلب را به خلاصه هر نوشته بدهیم تا کاربر با کلیک بر روی آن به صفحه single.php برود.

با اصلاح کد بالا به شکل زیر لینک اصلی هر نوشته را با استفاده از تابع ()the_permalink به آن می دهیم.

به قسمتی که در زیر آن خط قرمز کشیدیم توجه کنید. همان طور که گفتیم این تابع لینک اصلی هر مطلب را به ما می دهد پس کافی است آن را در ویژگی href یک تگ <a> قرار دهیم تا به هدف خود برسیم.

که کد نهایی مطلب ما در این مرحله به شکل زیر می باشد:

<!DOCTYPE html>
<htmL dir="rtl">
  <head>
 
 			<meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
      <style>
          body{
            background-color: #eee;
          }
           .container {
           		margin-top:30px;
           		background-color: white;
           		padding: 25px;
           		border-radius: 15px;
           }
           .post-box {
           		padding:10px;
           		font-family: "sans-serif","tahoma";
           }
      </style>
  </head>
<body>
    <div class="container" >
      <div class="row">
<?php
        if ( have_posts() ) {
          while ( have_posts() ) {
            the_post(); 
?>
              <div class="col-md-12 col-sm-12 post-box" >
                <h3><?php the_title(); ?></h3>
                <div> 
                <?php the_excerpt(); ?>
                </div>
              
                <p> 
                  <span class="btn btn-md btn-success"> 
                    <a href="<?php the_permalink(); ?>"> read more </a> 
                  </span>
                </p>
              </div>
              <hr>

<?php
          }  // end while
        }  // end if

?>
      </div>
    </div>
 
</body>
</htmL>

قبل از اینکه کد بالا را امتحان کنید ، به فایل های قالب بازگردید و یک فایل جدید به نام single.php بسازید.

با اضافه کردن این فایل قالب ما اکنون شامل 4 فایل به شکل زیر می باشد:

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

ما بر روی read more در پایین نوشته ی سلام دنیا کلیک کردیم که به یک صفحه ی سفید با آدرس نوشته سلام دنیا می رود .

برای اینکه پروسه ی کاری که انجام شد را درک کنید لازم است ادامه ی آموزش را بخوانید:

معرفی کوتاه single.php

ساده توضیح می دهیم. دقت کنید شاید به این سادگی حتی در خود سایت وردپرس هم چیزی پیدا نکنید.

به داشبورد وردپرس منوی نوشته ها / همه نوشته ها بروید و در یکی از نوشته ها بر روی ویرایش کلیک کنید تا به صفحه ی ویرایش متن نوشته ، منتقل شوید که در عکس زیر همه نکات را توضیح می دهیم.

ما صفحه ی ویرایش همین نوشته را مثال قرار می دهیم، البته فرقی ندارد. در صفحه ی ویرایش هر آن چه که شما بنویسید و یا تغییر دهید در صفحه ی single.php قابل نمایش است. پس فایل single.php نحوه ی نمایش نوشته ها در وردپرس را اجرا می کند.

و یا به عبارتی دیگر هر گاه شما بر روی لینک اصلی هر نوشته ، که توسط تابع ()the_permalink به دست می آید در هر جایی کلیک کنید، شما به فایل single.php هدایت خواهید شد و این فایل single.php می باشد که محتوانی آن نوشته را به نمایش می گذارد.

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

حال که کاربرد فایل single.php را می دانیم کافی است در این فایل کدی بنویسیم که هر گاه کاربر بر روی لینک اصلی ( the_permalink ) هر مطلب کلیک می کند محتوای آن مطلب به صورت کامل در فایل single.php نمایش داده شود. که این موضوع در مبحث آخر این آموزش در زیر آورده شده است.

نمایش محتوای هر پست به صورت کامل در single.php

پس پروسه کار به این صورت است:

شما خلاصه ای از هر مطلب را در صفحه ی اصلی وب سایت ( index.php ) قرار می دهید و آن را به فایل single.php با استفاده از تابع ()the_permalink و یک تگ <a> وصل می کنید تا وقتی کاربر بر روی آن کلیک کند وارد صفحه ی single.php شود. در مرحله آخر می خواهیم محتوای کامل هر مطلب را در صفحه single.php نمایش بدهیم.

با اجرا شدن فایل single.php روند کار در وردپرس بر اساس این قانون استوار است که شما در این فایل هم از یک حلقه ( the loop ) برای نمایش تمام محتوای پست استفاده کنید، البته خیلی ساده تر از آن است که تصورش را بکنید کافی است کد زیر را در فایل single.php قرار بدهید.

برای زیبا تر شدن چند کد CSS به آن اضافه کردیم:

()the_title برای نمایش عنوان پست
()the_content متن کامل پست
()the_category نمایش دسته های پست
()the_tags برچسب ها
لیست کامل توابع در پست قبلی

<!DOCTYPE html>
<htmL dir="rtl">
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
      <style>
          body{
            background-color: #eee;
            font-family:  Arial, Helvetica, sans-serif;
            font:caption;
            font-size:14px;
          }
          .container{
            margin-top:15px;
            background-color: white;
            padding: 15px;
          }
          h1 {
            font-size:23px;
          }
          h2 {
            font-size:22px;
          }
      </style>
  </head>
<body>		
    <div class="container">
      <div class="post-content">
    <?php

          /* Start the Loop */
          while ( have_posts() ) {
            the_post();
    ?>
              <h1> <?php the_title() ?></h1>       <!--  show the title of post  -->
              <span> <?php the_date(); ?> </span>  <!--  show the time post published  -->
              <p>  <?php the_category(); ?></p>    <!--  show the post categories  -->
              <div>

                <?php the_content(); ?>          <!--  show the post content   -->
              </div>
              <p> <?php the_tags(); ?> </p>        <!--  show the post tags  -->


    <?php
          }  /* end loop */
    ?>
      </div>
  </div>
</body>
</htmL>

که نتیجه ی کد بالا برای نمایش نوشته ی ما به صورت تصویر زیر می باشد:

همان طور که می بینید با استفاده از توابعی که در حلقه وردپرس ( the Loop ) به کار می بریم، می توان تمام اطلاعات یک پست را از دیتابیس استخراج کرد. برای مشاهده لیست کامل این توابع به قسمت دوم این سری آموزش بروید.

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

جمع بندی این قسمت آموزش

برای نمایش محتوای مربوط به هر پست به صورت کامل در وردپرس فایلی مجزا به نام single.php در نظر گرفته شده است که برای هر کدام از این محتوا تابع خاصی وجود دارد و کافی است آن تابع را درون حلقه وردپرس ( the Loop ) فراخوانی کنید.

برای وصل شدن به صفحه مخصوص هر مطلب در وردپرس کافی است لینک اختصاصی آن مطلب را با استفاده از تابع ()the_permalink درون ویژگی href یک تگ لینک <a> فراخوانی کنید تا با کلیک بر روی آن وارد صفحه ی آن مطلب شوید.

و این را به یاد داشته باشید که با کلیک بر روی ()the_permalink هر مطلب همیشه فایل single.php در وردپرس اجرا می شود و محتوای آن را نمایش می دهد اما آدرس بار مرورگر the_permalink را نشان می دهد نه single.php را.

Series Navigation