Hướng dẫn lập trình theme WordPress cơ bản

Trong bài viết này, chúng tôi sẽ chỉ cho các bạn cách lập trình theme WordPress cơ bản. Đây không phải là một hướng dẫn đầy đủ để bạn có thể tạo ra những bộ theme tuyệt vời., mà chỉ là những khái niệm rất cơ bản, những việc bạn sẽ phải làm để tạo ra được một theme WordPress cơ bản.

Để bắt đầu xây dựng theme cho WordPress, việc đầu tiên là hãy tạo thư mục mới trong wp-content/theme trong WordPress. Để phù hợp với tiêu chí bài viết này, chúng tôi tạm thời đặt tên nó là “beginner_theme”. Lưu ý, tên của thư mục phải giống với tên của theme mà bạn muốn hiển thị trên giao diện quản trị WordPress. Bạn có thể sử dụng ứng dụng FTP hoặc File Manager trong Cpanel để thay đổi tên thư mục.

Trước khi bắt tay vào việc xây dựng theme WordPress, bạn nên định nghĩa cấu trúc của website sẽ hiển thị. Trong hướng dẫn này, chúng tôi sẽ lập trình theme WordPress với bố cục bao gồm: header, sidebar, khu vực content, footer:

lập trình theme WordPress cơ bản

Bạn hãy tạo lần lượt những file dưới đây trong thư mục “beginner_theme”:

  • header.php – bao gồm toàn bộ code của phần header của theme.
  • index.php – file chính của giao diện. Bao gồm những đoạn code của phần “main area” và xác định vị trí của các file được sử dụng trong theme.
  • siderbar.php – Bao gồm toàn bộ thông tin phần sidebar.
  • footer.php – xử lý toàn bộ logic phần footer.
  • style.css – chứa toàn bộ giao diện của webiste

Bạn có thể tạo những file trên trong máy tính cá nhân, sử dụng một số công cụ lập trình như Notepad++, Sublime hay PHPStorm… và tải chúng lên máy chủ thông qua FTP hoặc Cpanel.

Tuy nhiên, nếu bạn có ý định thay đổi giao diện wordpress, thì hãy tham khảo bài viết:  làm thế nào thay đổi giao diện WordPress phù hợp nhé!

1. header.php

Đầu tiên, dán đoạn code dưới đây:

<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>

Đây là đoạn code HTML cơ bản chứa những thông tin cơ bản của WordPress. Trong file này, cần phải định nghĩa một số thẻ meta cho website như: title, description và keyword. Ngay bên dưới thẻ <title> là đoạn code:

&amp;amp;lt;link rel=&amp;amp;quot;stylesheet&amp;amp;quot; href=&amp;amp;quot;&amp;amp;lt;?php bloginfo('stylesheet_url'); ?&amp;amp;gt;&amp;amp;quot;&amp;amp;gt;

Thông báo với WordPress rằng hãy tải file stye.css và xử lý hiển thị cho website.

Tiếp đến là thẻ div, chứa toàn bộ nội dung chính của trang web.

2. index.php

&amp;amp;lt;?php get_header(); ?&amp;amp;gt;
&amp;amp;lt;div id=&amp;amp;quot;main&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;div id=&amp;amp;quot;content&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;h1&amp;amp;gt;Main Area&amp;amp;lt;/h1&amp;amp;gt;
&amp;amp;lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&amp;amp;gt;
&amp;amp;lt;h1&amp;amp;gt;&amp;amp;lt;?php the_title(); ?&amp;amp;gt;&amp;amp;lt;/h1&amp;amp;gt;
&amp;amp;lt;h4&amp;amp;gt;Posted on &amp;amp;lt;?php the_time('F jS, Y') ?&amp;amp;gt;&amp;amp;lt;/h4&amp;amp;gt;
&amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;?php the_content(__('(more...)')); ?&amp;amp;gt;&amp;amp;lt;/p&amp;amp;gt;
&amp;amp;lt;hr&amp;amp;gt; &amp;amp;lt;?php endwhile; else: ?&amp;amp;gt;
&amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;?php _e('Sorry, no posts matched your criteria.'); ?&amp;amp;gt;&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;?php endif; ?&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;?php get_sidebar(); ?&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;div id=&amp;amp;quot;delimiter&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;?php get_footer(); ?&amp;amp;gt;

Đoạn code trên bắt đầu với

&amp;amp;lt;?php get_header(); ?&amp;amp;gt;

Sẽ bao gồm toàn bộ nội dung trong file header.php và các đoạn code trong hiển thị trong trang chủ. Chúng tôi sẽ giới thiệu chi tiết hơn trong phần cuối của bài viết này. Tiếp đó, chúng ta sẽ hiển thị nội dung “Main Area” để xác định vị trị thông tin hiển thị trên WordPress theme.

Những đoạn code tiếp theo bao gồm những chức năng cơ bản của WordPress. Đoạn code sẽ kiểm tra có bài viết nào trong hệ thống và hiển thị chúng ra bên ngoài giao diện.

Tiếp theo, chúng ta sẽ gọi đến file sidebar.php bởi dòng code:

&amp;amp;lt;?php get_sidebar(); ?&amp;amp;gt;

Trong file này, bạn có thể hiển thị chuyên mục, thông tin đăng nhập, công cụ tìm kiếm….

Ngay bên dưới, chúng ta thêm một thẻ div trống để phân tách giữa phần nội dung chính và sidebar với footer.

Cuối cùng, chúng ta thêm đoạn code sau vào cuối file:

&amp;amp;lt;?php get_footer(); ?&amp;amp;gt;

3. sidebar.php

&amp;amp;lt;div id=&amp;amp;quot;sidebar&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;h2 &amp;amp;gt;&amp;amp;lt;?php _e('Categories'); ?&amp;amp;gt;&amp;amp;lt;/h2&amp;amp;gt;
&amp;amp;lt;ul &amp;amp;gt;
&amp;amp;lt;?php wp_list_cats('sort_column=name&amp;amp;amp;optioncount=1&amp;amp;amp;hierarchical=0'); ?&amp;amp;gt;
&amp;amp;lt;/ul&amp;amp;gt;
&amp;amp;lt;h2 &amp;amp;gt;&amp;amp;lt;?php _e('Archives'); ?&amp;amp;gt;&amp;amp;lt;/h2&amp;amp;gt;
&amp;amp;lt;ul &amp;amp;gt;
&amp;amp;lt;?php wp_get_archives('type=monthly'); ?&amp;amp;gt;
&amp;amp;lt;/ul&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;

Trong file này, chúng ta sẽ sử dụng những chức năng có sẵn trong WordPress để hiển thị chuyên mục và lưu trữ của bài viết. WordPress sẽ hiển thị chúng như một danh sách, tuy nhiên chúng ta sẽ phải hiển thị chúng trong thẻ <ul>

4. footer.php

&amp;amp;lt;div id=&amp;amp;quot;footer&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;h1&amp;amp;gt;FOOTER&amp;amp;lt;/h1&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;/body&amp;amp;gt;
&amp;amp;lt;/html&amp;amp;gt;

Với đoạn code trên, chúng ta đơn giản là hiển thị chữ “FOOTER” trong phần footer của giao diện. Bạn có thể thay thế bằng đường dẫn, hoặc bất kỳ nội dung nào mà bạn muốn hiển thị.

5. style.css

Thêm đoạn code bên dưới đây vào file:

body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }

Sẽ giúp hiển thị website với giao diện đơn giản nhất, đoạn code sẽ hiển thị màu nền của trang web và các đường viền bao quanh các phần chính của giao diện.

Như đã đề cập, chúng ta sẽ sử dụng rất nhiều những chức năng sẵn có trong WordPress trong quá trình xây dựng giao diện.

Như vậy, chúng tôi đã giới thiệu xong những bước rất cơ bản để lập trình theme WordPress. Từ những file cơ bản này, bạn hãy thêm CSS, ảnh, hay các thuộc tính khác để làm phong phú hơn giao diện của blog.

Chúng tôi sẽ giới thiệu chi tiết hơn các thủ thuật wordpress và việc lập trình theme WordPress trong các bài viết tiếp theo.

Về tác giả

Duy Anh

Chào các bạn,

Mình là coder, đang sống và làm việc ở Mỹ. Mình thích viết lách nên muốn dành khoảng thời gian trống để chia sẻ các thủ thuật giúp các bạn xây dựng được trang web riêng của mình. Bạn nào cần xây dựng blog, web thì cứ ới, rảnh là mình giúp, tất cả FREE nhé!

Ý kiến cá nhân của bạn

bộ công cụ Wordpress hữu ích dành cho mọi website

Bộ công cụ hữu ích dành cho mọi website Wordpress

Bao gồm theme & plugin tốt nhất và được sử dụng nhiều nhất!

Xin vui lòng kiểm tra email để xác thực tài khoản!