Cấu trúc theme Wordpress

Trước khi tiến hành thay đổi nội dung theme Wordpress, ta cần biết cấu trúc theme Wordpres hoạt động ra sao, ta xem lại cấu trúc thư mục của Wordpress:

wp-project

wp-admin
- ...
wp-content
- languages
  - ...
- plugins
  - akismet
    - ...
  - hello.php
  - index.php
- themes
  - twentynineteen
    - ...
  - twentyseventeen
    - ...
  - twentysixteen
    - ...
  - index.php
- uploads
  - ...
- index.php
wp-includes
- ...
.htaccess
index.php
license.txt
readme.html
wp-activate.php
wp-blog-header.php
wp-comments-post.php
wp-config.php
wp-config-sample.php
wp-cron.php
wp-links-opml.php
wp-load.php
wp-login.php
wp-mail.php
wp-settings.php
wp-signup.php
wp-trackback.php
xmlrpc.php

2 folder plugins và themes là 2 folder làm việc chính của chúng ta.
Để tạo một theme mới, có nhiều cách, có thể xây dựng từ số 0 nếu bạn đã có kinh nghiệm, cách khác đơn giản hơn là copy từ theme đã có, sau đó điều chỉnh thành theme với giao diện tùy ý. Để cho các bạn dễ làm quen, Học Web Chuẩn sẽ hướng dẫn các bạn cách thứ hai nhé.
Copy thư mục twentynineteen và đặt tên theme mới là "rabbie", ta có:

wp-project

...
wp-content
- ...
- themes
  - twentynineteen
    - ...
  - twentyseventeen
    - ...
  - twentysixteen
    - ...
  - rabbie
    - ...
- ...
...

Nội dung file của thư mục rabbie lúc này như sau:

Wordpress theme

Chú ý là theme rabbie này chỉ tác động lên màn hình user thôi nhé, không ảnh hưởng màn hình quản trị Admin.
Nhìn vô nội dung các file trên thì rất nhiều, có những file thay đổi được, có những file không nên thay đổi, tuy nhiên theme này đã được copy ra rồi, nên các bạn cứ quậy tung lên cũng được nhé, cho quen dần với cấu trúc và cách sử dụng các file, không thì từng bước theo Học Web Chuẩn sẽ bày cho các bạn add một theme hoàn chỉnh.

Xét cấu trúc theme

Trước tiên ta xem cấu trúc code của file index.php bên trong thư mục rabbie:

index.php

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */

get_header();
?>

    <section id="primary" class="content-area">
        <main id="main" class="site-main">

        <?php
        if ( have_posts() ) {

            // Load posts loop.
            while ( have_posts() ) {
                the_post();
                get_template_part( 'template-parts/content/content' );
            }

            / Previous/next page navigation.
            twentynineteen_the_posts_navigation();

        } else {

            // If no content, include the "No posts found" template.
            get_template_part( 'template-parts/content/content', 'none' );

        }
        ?>

        </main><!-- .site-main -->
    </section><!-- .content-area -->

<?php
get_footer();

Nội dung file trên chia làm 3 phần:
- get_header();: phần này sẽ gọi nội dung của header, liên kết tới file header.php.
- <section id="primary">: Đây là phần nội dung, liên kết tới file template-parts/content/content.php.
- get_footer();: phần này sẽ gọi nội dung của footer, liên kết tới file footer.php.
Do đó để thay đổi giao diện theme, ta cần điều chỉnh trước tiên 2 file: header.php và footer.php

Wordpress bbb

Wordpress ccc