Home>Coding>Wordpress>สร้างธีมเวิร์ดเพรส (WordPress) แบบโครตง่าย อัพเดทปี 2020 !!!

สร้างธีมเวิร์ดเพรส (WordPress) แบบโครตง่าย อัพเดทปี 2020 !!!

Categories:CodingWordpressUpdated on:

สำหรับ Web Developer แล้วการเขียน  HTML, CSS หรือ Javascript เป็นเรื่องที่ง่ายดายมากมาย แต่การเขียนธีมเวิร์ดเพรสเพื่อสร้างเว็บไซต์ แบบ custom ก็เหมือนจะเป็นเรื่องที่เหมือนจะยุ่งยาก แม้กระทั่งคนที่เขียน PHP ระดับโครตเทพแล้วก็ตาม ซึ่งตัวผมเองครั้งแรกที่พยายามเปิดดูโค้ด wordpress เองก็รู้สึกเช่นนั้น ทางออกส่วนมากจึงได้แต่ซื้อธีมจาก themeforest แล้วมาปรับแต่งเพิ่มเติม แต่ปัญหาคือธีมที่ซื้อมาไม่เคยได้ฟีเจอร์ที่ครบอย่างต้องการสักครั้งทั้งงานเว็บไซต์ตัวเองหรือที่ลูกค้าจ้างก็ตาม

ทางออกของ Web Developer อย่างเราๆคือ เขียนหน้าเว็บและระบบจัดการ content มันซะเอง ซึ่งแน่นอนมันค่อนข้างจะเสียเวลามากและได้ผลไม่ค่อยดีเท่าที่ควร จนผมลองกลับมาที่เวิร์ดเพรสและได้อ่านบทความ Developing a WordPress Theme from Scratch ทำให้ผมอุทานเบาๆว่า “อี เ…ย เอ้ยยย ทำไมมันง่ายอย่างนี้”

ก่อนหน้าผมเคยโปรแกรมสร้าง theme wordpress อย่าง Artisteer มาบ้างแต่ยังรู้สึกว่ายังมีความยุ่งยากซ่อนอยู่นิดหน่อย และตัวโปรแกรมก็ซัพพอร์ตแต่บนวินโดว์เท่านั้น

บทความนี้ผมจะสรุปง่ายๆเป็นภาษาไทยให้หวดกันแบบ fast track กันเลยนะครับ

6 ขั้นตอนง่ายๆในการสร้าง WordPress Theme

  1. เข้าใจโครงสร้าง Directory ของ Theme
  2. จัดการ css directory
  3. Index.php
  4. การเรียกใช้ CSS path
  5. จัดการ Header
  6. จัดการ Footer

 

Kick Off !!

ผมคงไม่ต้องอธิบายว่าลง PHP หรือ Setup WordPress ให้ใช้งานยังไง ผมขอข้าม!!!

เพื่อให้ง่ายต่อการสร้างธีม ผมแนะนำให้โหลดธีมที่สร้าง HTMLและ CSS ไว้แล้วนะครับ ถ้าหาไม่ได้ลงวาร์ปนี้เลยครับ startbootstrap.com

บทความนี้เพื่อความรวดเร็วทันใจดั่งบะหมี่กึ่งสำเร็จรูป เราจะสร้าง theme wordpress ด้วย bootstrap นะครับ

สร้าง Directory ของธีม

สร้างไดเรคทอรี่เป็นชื่อธีมของคุณและสร้างไฟล์พวกนี้ขึ้นมา

[]  <ชื่อธีมที่ต้องการสร้าง>
|-- style.css
|-- index.php
|-- screenshot.png

เพิ่มโค้ดใน style.css ดังนี้

 /*
Theme Name: Start WordPress
Author: John Farmer
Description: Bootstrap template converted to WordPress
Version: 0.0.1
Tags: bootstrap
*/

ถ้าคุณสร้างไดเรคทอรี่ไว้ใน wp-content/themes/ เวิร์ดเพรสจะสามารถมองเห็นธีมของคุณ แล้วจะสามารถ activate ใช้งานได้ทันที

จัดการ CSS และ asset

สเต็ปต่อไป copy ไดเรคทอรี่ vendor และ css มาไว้ที่โปรเจคเรา

[]  <ชื่อธีมที่ต้องการสร้าง>
|-- style.css
|-- index.php
|-- screenshot.png
|-- [] vendor
|-- [] css

Index.php

ก็อปต่อยาวๆ เอาโค้ด index.html มาใส่ใน index.php (จะก็อปโค้ดหรือเปลี่ยนชื่อไฟล์แล้วแต่เลย)

index.php
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Business Frontpage - Start Bootstrap Template</title>
  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="css/business-frontpage.css" rel="stylesheet">
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Start Bootstrap</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Header -->
  <header class="bg-primary py-5 mb-5">
    <div class="container h-100">
      <div class="row h-100 align-items-center">
        <div class="col-lg-12">
          <h1 class="display-4 text-white mt-5 mb-2">Business Name or Tagline</h1>
          <p class="lead mb-5 text-white-50">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non possimus ab labore provident mollitia. Id assumenda voluptate earum corporis facere quibusdam quisquam iste ipsa cumque unde nisi, totam quas ipsam.</p>
        </div>
      </div>
    </div>
  </header>

  <!-- Page Content -->
  <div class="container">

    <div class="row">
      <div class="col-md-8 mb-5">
        <h2>What We Do</h2>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deserunt neque tempore recusandae animi soluta quasi? Asperiores rem dolore eaque vel, porro, soluta unde debitis aliquam laboriosam. Repellat explicabo, maiores!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis optio neque consectetur consequatur magni in nisi, natus beatae quidem quam odit commodi ducimus totam eum, alias, adipisci nesciunt voluptate. Voluptatum.</p>
        <a class="btn btn-primary btn-lg" href="#">Call to Action &raquo;</a>
      </div>
      <div class="col-md-4 mb-5">
        <h2>Contact Us</h2>
        <hr>
        <address>
          <strong>Start Bootstrap</strong>
          <br>3481 Melrose Place
          <br>Beverly Hills, CA 90210
          <br>
        </address>
        <address>
          <abbr title="Phone">P:</abbr>
          (123) 456-7890
          <br>
          <abbr title="Email">E:</abbr>
          <a href="mailto:#">[email protected]</a>
        </address>
      </div>
    </div>
    <!-- /.row -->

    <div class="row">
      <div class="col-md-4 mb-5">
        <div class="card h-100">
          <img class="card-img-top" src="http://placehold.it/300x200" alt="">
          <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque sequi doloribus.</p>
          </div>
          <div class="card-footer">
            <a href="#" class="btn btn-primary">Find Out More!</a>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-5">
        <div class="card h-100">
          <img class="card-img-top" src="http://placehold.it/300x200" alt="">
          <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque sequi doloribus totam ut praesentium aut.</p>
          </div>
          <div class="card-footer">
            <a href="#" class="btn btn-primary">Find Out More!</a>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-5">
        <div class="card h-100">
          <img class="card-img-top" src="http://placehold.it/300x200" alt="">
          <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
          </div>
          <div class="card-footer">
            <a href="#" class="btn btn-primary">Find Out More!</a>
          </div>
        </div>
      </div>
    </div>
    <!-- /.row -->

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

  <!-- Footer -->
  <footer class="py-5 bg-dark">
    <div class="container">
      <p class="m-0 text-center text-white">Copyright &copy; Your Website 2019</p>
    </div>
    <!-- /.container -->
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

</body>

</html>

แต่เด๋วก่อนแม่สาวน้อย !!! เปลี่ยน path เรียก asset เราให้ถูกต้องก่อน

จาก

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/business-frontpage.css" rel="stylesheet">
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

เพิ่ม <?php echo get_template_directory_uri(); ?> เข้าไปข้างหน้าพาธปกติ เพื่อให้เข้าไฟล์ asset จากธีมของเรา

<link href="<?php echo get_template_directory_uri(); ?>/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri(); ?>/css/business-frontpage.css" rel="stylesheet">
<script src="<?php echo get_template_directory_uri(); ?>/vendor/jquery/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

Refactor ให้ถูกหลักกันหน่อย

ตามหลักโครงสร้างของเวิร์ดเพรสแล้ว เราต้องแยกส่วน header , main content และ footer ออกจากกัน  ……..ลุย !!!

จัดการ Header

สร้างไฟล์  header.php แล้วเอาโค้ดส่วน header ทั้งหมดย้ายมาไว้ในนี้ทั้งหมดและเพิ่ม

<?php wp_head();?>

ไว้ก่อนแท็ก </head> (ไม่เข้าใจดูโค้ดตัวสีแดงด้านล่าง)

header.php
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Business Frontpage - Start Bootstrap Template</title>

  <!-- Bootstrap core CSS -->
  <link href="<?php echo get_template_directory_uri(); ?>/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="<?php echo get_template_directory_uri(); ?>/css/business-frontpage.css" rel="stylesheet">

 <?php wp_head();?>
</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Start Bootstrap</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

จัดการ Footer

เหมือนเดิมสร้างไฟล์  footer.php แล้วเอาโค้ดส่วน footer ทั้งหมดย้ายมาไว้ในนี้ทั้งหมดและเพิ่ม

<?php wp_footer(); ?>

ไว้ก่อนแท็ก </body>  (ไม่เข้าใจดูโค้ดตัวสีแดงด้านล่าง)

footer.php
<!-- Footer -->
  <footer class="py-5 bg-dark">
    <div class="container">
      <p class="m-0 text-center text-white">Copyright &copy; Your Website 2019</p>
    </div>
    <!-- /.container -->
  </footer>
  <!-- Bootstrap core JavaScript -->
  <script src="<?php echo get_bloginfo(‘template_directory’); ?>/vendor/jquery/jquery.min.js"></script>
  <script src="<?php echo get_bloginfo(‘template_directory’); ?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 <?php wp_footer(); ?>
</body> 
</html>

Index.php

โค้ดส่วน main content ที่เหลือจะเก็บไว้ index.php จากนั้น ให้เพิ่ม

<?php get_header(); ?> // ไว้บรรทัดบนสุด
<?php get_footer(); ?> // ไว้บรรทัดล่างสุด

จบ !!! ได้ธีมเวิร์ดเพรสที่เป็นเนื้อหา static แล้ว

part หน้า เรามาต่อเรื่องการดึงข้อมูลเนื้อหาจากเวิร์ดเพรสมาแสดงที่หน้าเว็บ

Click to rate this post!
[Total: 4 Average: 4.8]
แชร์บทความนี้

Arnon P

I'm web-based application developer.
I'm looking for new inspiration everyday.
Yesterday is History, Tomorrow a Mystery, Today is a Gift.