آموزش طراحی قالب وردپرس

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

طراحی قالب برای وردپرس
طراحی قالب برای وردپرس


پیش نیازهای توسعه تم

در توسعه تم وردپرس به موارد زیر نیاز داریم:

1. وردپرس باید نصب بشه برای کار در توسعه تم نیاز به نصب وردپرس داریم. همچنین ما به یک تم اصلی HTML نیاز داریم تا بتوانیم صفحات آن را به فایل های تم تبدیل کنیم.

2. برای دانلود تم HTML اینجا را کلیک کنید.

مقدمه ای از راه اندازی تم سفارشی در وردپرس

به منظور کار با توسعه تم، حوزه کاری ما در پوشهwp-content خواهد بود. در پوشه محتوای wp باید پوشه themes را داشته باشیم. گام به گام ما تم سفارشی را در اینجا تنظیم می کنیم.

مرحله شماره 1

پوشه ایجاد کنید ما باید یک پوشه تم سفارشی با هر نامی که می خواهیم باشد ایجاد کنیم. این پوشه باید در داخل /wp-content/themes/custom-theme ایجاد شود به عنوان مثال "موضوع وبلاگ من" که من ایجاد کرده ام.

مرحله شماره ۲

معرفی تم ما اکنون یک پوشه تم برای کار ایجاد کرده ایم. بنابراین، طبق قرارداد موضوع در وردپرس، ما در مرحله اول توسعه به فایل های اولیه نیاز داریم. این مجموعه اصلی از کدها، موضوع را به وردپرس معرفی می کنند. بیایید این فایل ها را ایجاد کنیم - فایل های معرفی تم صفحه سبک (style.css) این اولین فایلی است که در پوشهmy-blog-theme ایجاد می کنیم. در داخل این فایل ما نظرات را اضافه خواهیم کرد. در این نظرات ما همه اطلاعاتی مانند نام تم، URL تم، نویسنده، URI نویسنده و غیره را ارسال می کنیم. 

/*
Theme Name: My Blog Theme
Theme URI: https://onlinewebtutorblog.com
Author: Online Web Tutor Blog
Author URI: https://onlinewebtutorblog.com
Description: This is sample theme we have developed to learn.
Version: 1.0
Requires at least: 4.5
Tested up to: 5.5
Requires PHP: 7.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl.html
Text Domain: myblogtheme
*/

پیش نمایش تم (screenshot.png) ما یک فایل پیش نمایش تم قرار می دهیم. وردپرس به طور پیش فرض یک فایل تصویری به نام screenshot.png می گیرد که یک فایل پیش نمایش برای یک موضوع است. من یک تصویر ساختگی با نام screenshot.png قرار می دهم. پس از قرار دادن این دو فایل style.css و screenshot.png، به پنل مدیریت وردپرس برگردید ورود به WP Admin >> نمایش >> تم ها >> روی سفارشی سازی تم کلیک کنید تمام کاری که ما تا قبل از معرفی موضوع به وردپرس انجام داده ایم. اکنون باید فایل های کاربردی تم بسازیم.

فهرست تم (index.php)

اگر تم HTML را از لینک داده شده قبلی دانلود کرده اید، باید ببینید که حاوی فایلی به نام index.html در ریشه است. یک فایل index.php در پوشه تم سفارشی ایجاد کنید. تمام مطالب را از index.html کپی کنید و در index.php پیست کنید. بعد، فایل index.php را می توان بیشتر به header.php و footer.php تقسیم کرد. ساختار صفحه به این صورت باشد. <!– header.php –> محتویات صفحه <!– footer.php –> فایل های جزئی را با کمک برخی از توابع کمکی در وردپرس فراخوانی می کنیم. فایل هدر (header.php) این فایل شامل تمام کد قسمت سربرگ است. این شامل تگ عنوان، تگ سر، متا تگ و غیره است. در داخل کد فایل header.php می بینید که ما از بسیاری از توابع کمکی helper استفاده کرده ایم


<!DOCTYPE html>
<html <?php echo language_attributes() ?>>

<head>
  <meta charset=&quot<?php echo bloginfo('charset') ?>&quot>
  <!-- Other meta tags-->
  <title><?php echo bloginfo('title') ?></title>
  <?php wp_head() ?>

</head>
<body>
  <!-- Navigation -->
  <nav class=&quotnavbar navbar-expand-lg navbar-dark bg-dark fixed-top&quot>
    <div class=&quotcontainer&quot>
      <a class=&quotnavbar-brand&quot href=&quot#&quot><?php echo bloginfo('title') ?></a>
      <button class=&quotnavbar-toggler&quot type=&quotbutton&quot data-toggle=&quotcollapse&quot data-target=&quot#navbarResponsive&quot aria-controls=&quotnavbarResponsive&quot aria-expanded=&quotfalse&quot aria-label=&quotToggle navigation&quot>
        <span class=&quotnavbar-toggler-icon&quot></span>
      </button>
      <div class=&quotcollapse navbar-collapse&quot id=&quotnavbarResponsive&quot>
         <!-- Navigation -->
      </div>
    </div>
  </nav>

چندین توابع کمکی وردپرس وجود دارد که می‌توانیم از آنها برای توسعه تم وردپرس استفاده کنیم. فایل پاورقی (footer.php) این فایل حاوی تمام کدهای پاورقی است. 

<!-- Footer -->
  <footer class=&quotpy-5 bg-dark&quot>
    <div class=&quotcontainer&quot>
      <p class=&quotm-0 text-center text-white&quot>Copyright © My Blog Theme 2020</p>
    </div>
    <!-- /.container -->
  </footer>
        
  <?php wp_footer(); ?>
        
</body>

</html>

در داخل کد بالا صفحه، تابع ()wp_footer را فراخوانی کرده ایم. این یک تابع وردپرس است که همه ثبت اسکریپت ها را در فوتر بازتاب می دهد یا شامل می شود. حالا بالاخره index.php به چند فایل تقسیم می شود. محتویات این فایل جدا شده است. برای گنجاندن این فایل‌های جزئی header.php و footer.php در فهرست، چند توابع کمکی داریم. get_header() برای header.php و get_footer() برای footer.php است. کد کامل فایل index.php 

<?php get_header(); ?>

  <!-- Page Content -->
  <div class=&quotcontainer&quot>

    <div class=&quotrow&quot>

      <!-- Post Content Column -->
           <?php

            if (have_posts()) {

                while (have_posts()) {

                    the_post();

                    $url = wp_get_attachment_url(get_post_thumbnail_id(get_the_ID(), &quotthumbnail&quot));
            ?>
                    <!-- Blog Post -->
                    <div class=&quotcard mb-4&quot>
                        <img class=&quotcard-img-top&quot src=&quot<?php echo $url ?>&quot alt=&quotCard image cap&quot>
                        <div class=&quotcard-body&quot>
                            <h2 class=&quotcard-title&quot><?php the_title(); ?></h2>
                            <p class=&quotcard-text&quot><?php the_content(); ?></p>
                            <a href=&quot<?php the_permalink() ?>&quot class=&quotbtn btn-primary&quot>Read More →</a>
                        </div>
                    </div>
            <?php
                }
            }

            ?>
  
    </div>
    <!-- /.row -->

  </div>
  <!-- /.container -->

<?php echo get_footer(); ?>

همانطور که در کد بالا می بینید که ما کد فایل index.php کاملی داریم. در داخل این فایل، get_header شامل header.php و get_footer شامل footer.php را قرار داده ایم. به غیر از گنجاندن فایل، باید شاهد استفاده از حلقه پست نیز باشیم. این حلقه یک حلقه پست استاندارد وردپرس است. Loop تمام مطالب پست یا صفحه هر صفحه یا پست را می خواند. حلقه پست را در یک قطعه کد جداگانه نگاه کنید.

if (have_posts()) {

   while (have_posts()) {

     the_post(); // post incremental

     the_title(); // to get title of current post

     the_content(); // get content of current post
   }

}

بنابراین، در نهایت اکنون چندین فایل در فهرست تم سفارشی داریم. فایل ها عبارتند از – style.css – نظرات معرفی تم screenshot.png – پیش نمایش تم index.php – فایل اصلی header.php – کد حاوی قسمت هدر (فایل جزئی برای هدر) است. footer.php – کد حاوی قسمت پاورقی (فایل جزئی پاورقی) است امیدواریم این مقاله به شما کمک کرده باشد تا با آموزش ساخت قالب وردپرس به روشی بسیار دقیق آشنا شوید.