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

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

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

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

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

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

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

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

مرحله شماره 1

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

برای شما

کسب وکار فریلنسری

طراحی سایت با وردپرس و مزایای آن در سال 2022

مرحله شماره ۲

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

1/*

1Theme Name: My Blog Theme

1Theme URI: https://onlinewebtutorblog.com

1Author: Online Web Tutor Blog

1Author URI: https://onlinewebtutorblog.com

1Description: This is sample theme we have developed to learn.

1Version: 1.0

1Requires at least: 4.5

1Tested up to: 5.5

1Requires PHP: 7.0

1License: GNU General Public License v3 or later

1License URI: http://www.gnu.org/licenses/gpl.html

1Text Domain: myblogtheme

1*/

پیش نمایش تم (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 استفاده کرده ایم

1234567891011121314151617181920212223<!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) این فایل حاوی تمام کدهای پاورقی است.

12345678910111213<!-- 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

12345678910111213141516171819202122232425262728293031323334353637383940<?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  data-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 تمام مطالب پست یا صفحه هر صفحه یا پست را می خواند. حلقه پست را در یک قطعه کد جداگانه نگاه کنید.

123456789101112if (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 – کد حاوی قسمت پاورقی (فایل جزئی پاورقی) است امیدواریم این مقاله به شما کمک کرده باشد تا با آموزش ساخت قالب وردپرس به روشی بسیار دقیق آشنا شوید.

نویسنده مطلب: مهناز فاخر

منبع مطلب