Chia sẻ 20 mẫu HTML template đơn giản cho các bạn tập cắt CSS 
Bài 04: Tìm hiểu Hooks , Action và Filter trong WordPress 
Download Astra Pro Add-On và Astra Premium Sites miễn phí 
Bài 06: Tạo menu trong Admin WordPress 
Bài 01: WordPress là gì? Nên làm website bằng WordPress? 
Download theme Newspaper WordPress Pro miễn phí 
Bài 03: Các bước tạo plugin trong WordPress (căn bản) 
Bài 02: WordPress API là gì? Danh sách API trong WordPress 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Cách tạo Theme WordPress từ Scratch từ A-Z
Cách tạo một Theme WordPress hoàn toàn mới từ đầu bằng cách sử dụng các công nghệ như HTML, CSS, PHP và các chức năng của WordPress để tùy chỉnh giao diện và tính năng cho trang web của bạn.
Tại sao nên sử dụng Theme WordPress?
Có rất nhiều lý do để sử dụng theme WordPress cho trang web của bạn, dưới đây là những lý do quan trọng nhất:
-
Dễ sử dụng: Theme WordPress được thiết kế để dễ sử dụng và có thể được cấu hình bởi người dùng không cần có kinh nghiệm về mã hóa hoặc thiết kế web.
-
Tiết kiệm thời gian: Sử dụng theme WordPress giúp bạn tiết kiệm thời gian trong việc thiết kế và phát triển trang web của mình. Với nhiều theme có sẵn, bạn có thể nhanh chóng tạo ra một trang web chuyên nghiệp và đẹp mắt chỉ trong vài giờ đồng hồ.
Bài viết này được đăng tại [free tuts .net]
-
Tùy chỉnh dễ dàng: Mặc dù theme WordPress có sẵn nhưng bạn vẫn có thể tùy chỉnh nó để phù hợp với yêu cầu của trang web của mình. Bạn có thể thay đổi màu sắc, phông chữ, bố cục, phần đầu trang, phần chân trang, v.v.
-
Responsive Design: Các theme WordPress hiện đại thường được thiết kế với Responsive Design, tức là nó sẽ hiển thị đẹp trên mọi thiết bị như máy tính, điện thoại và máy tính bảng.
-
Hỗ trợ tốt: Với nhiều theme WordPress, bạn có thể được hỗ trợ bởi các nhà phát triển, cộng đồng hoặc các trang web hỗ trợ khác. Điều này giúp bạn giải quyết vấn đề và học hỏi từ người khác.
-
SEO tốt: Một số theme WordPress đã được tối ưu hóa cho SEO, giúp trang web của bạn dễ dàng được tìm kiếm trên các công cụ tìm kiếm như Google.
-
Bảo mật tốt: Các theme WordPress thường được cập nhật thường xuyên để đảm bảo tính bảo mật cho trang web của bạn.
Tóm lại, sử dụng theme WordPress có nhiều lợi ích, giúp bạn tiết kiệm thời gian, dễ dàng tùy chỉnh và thiết kế trang web chuyên nghiệp và bảo mật.
Các bước tạo Theme WordPress từ Scratch
Để phát triển một Theme WordPress, bạn có thể thực hiện các bước sau:
Tạo thư mục cho Theme
Đầu tiên, bạn cần tạo một thư mục mới trong thư mục wp-content/themes/ của WordPress và đặt tên cho thư mục đó. Tên của thư mục sẽ là tên của Theme mà bạn đang phát triển.
Tạo file style.css
Trong thư mục mới, bạn cần tạo một file style.css và thêm các thông tin cơ bản về Theme như tên, phiên bản, tác giả và mô tả. Bạn có thể sử dụng đoạn mã sau để bắt đầu:
/* Theme Name: Tên Theme của bạn Theme URI: URL của trang web liên quan đến Theme Author: Tên tác giả Author URI: URL của trang web của tác giả Description: Mô tả ngắn gọn về Theme Version: Phiên bản của Theme License: Giấy phép sử dụng (nếu có) License URI: URL của giấy phép sử dụng (nếu có) Tags: Danh sách các từ khóa liên quan đến Theme */
Bạn cần cập nhật thông tin cho mỗi trường dữ liệu để phù hợp với Theme của bạn.
Tạo file functions.php
Bạn cần tạo một file functions.php để thêm các chức năng và tính năng cho Theme của bạn. File này sẽ được gọi khi Theme của bạn được kích hoạt. Bạn có thể sử dụng đoạn mã sau để bắt đầu:
<?php // Thêm các chức năng và tính năng cho Theme của bạn ở đây ?>
Bạn có thể sử dụng file này để đăng ký các widget, menu, custom post type, taxonomies, shortcode, enqueue scripts và styles,...
Xây dựng cấu trúc của Theme
Tạo các file header.php, footer.php, sidebar.php và index.php để xác định cấu trúc của trang web.
Tạo file header.php
Để thêm mã HTML và CSS vào file header.php để định dạng header của trang web, bạn có thể sử dụng các thẻ HTML và CSS thông thường. Dưới đây là một ví dụ về cách thêm mã HTML và CSS để định dạng header của trang web:
<!DOCTYPE html> <html> <head> <title><?php wp_title(); ?></title> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> <?php wp_head(); ?> </head> <body> <header> <div class="logo"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a> </div> <nav> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </nav> </header>
Trong đoạn mã trên, ta đã sử dụng một số thẻ HTML như <html>, <head>, <meta>, <link> và <body>. Để thêm CSS cho header, ta có thể sử dụng thuộc tính class hoặc id của các thẻ HTML để áp dụng CSS vào các phần khác nhau của header. Ví dụ:
<header> <div class="logo"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a> </div> <nav> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </nav> </header>
Ở đây, ta đã sử dụng class logo để định dạng phần logo của trang web và sử dụng hàm wp_nav_menu để hiển thị menu điều hướng của trang web.
Tạo file footer.php
Để thêm mã HTML và CSS vào file footer.php để định dạng footer của trang web, bạn có thể sử dụng các thẻ HTML và CSS thông thường. Dưới đây là một ví dụ về cách thêm mã HTML và CSS để định dạng footer của trang web:
<footer> <div class="footer-widget"> <?php dynamic_sidebar( 'footer-1' ); ?> </div> <div class="footer-widget"> <?php dynamic_sidebar( 'footer-2' ); ?> </div> <div class="footer-widget"> <?php dynamic_sidebar( 'footer-3' ); ?> </div> </footer>
Trong đoạn mã trên, ta đã sử dụng các thẻ HTML như <footer>, <div> và các hàm WordPress như dynamic_sidebar để hiển thị các phần widget trong footer của trang web. Để thêm CSS cho footer, ta có thể sử dụng thuộc tính class hoặc id của các thẻ HTML để áp dụng CSS vào các phần khác nhau của footer. Ví dụ:
<footer> <div class="footer-widget"> <?php dynamic_sidebar( 'footer-1' ); ?> </div> <div class="footer-widget"> <?php dynamic_sidebar( 'footer-2' ); ?> </div> <div class="footer-widget"> <?php dynamic_sidebar( 'footer-3' ); ?> </div> </footer>
Ở đây, ta đã sử dụng class footer-widget để định dạng các phần widget trong footer của trang web. Bạn có thể thêm CSS vào class footer-widget trong file style.css để tùy chỉnh định dạng cho footer của trang web.
Tạo file sidebar.php
Để thêm mã HTML và CSS vào file sidebar.php để định dạng sidebar của trang web, bạn có thể sử dụng các thẻ HTML và CSS thông thường. Dưới đây là một ví dụ về cách thêm mã HTML và CSS để định dạng sidebar của trang web:
<aside> <?php dynamic_sidebar( 'sidebar-1' ); ?> </aside>
Trong đoạn mã trên, ta đã sử dụng thẻ HTML <aside> và hàm WordPress dynamic_sidebar để hiển thị các phần widget trong sidebar của trang web. Để thêm CSS cho sidebar, ta có thể sử dụng thuộc tính class hoặc id của thẻ HTML <aside> để áp dụng CSS vào sidebar. Ví dụ:
<aside class="sidebar"> <?php dynamic_sidebar( 'sidebar-1' ); ?> </aside>
Ở đây, ta đã sử dụng class sidebar để định dạng sidebar của trang web. Bạn có thể thêm CSS vào class sidebar trong file style.css để tùy chỉnh định dạng cho sidebar của trang web.
Tạo file index.php
Trong file index.php, bạn cần thêm các mã HTML và CSS để hiển thị nội dung của trang web. Các mã HTML và CSS này sẽ được áp dụng cho tất cả các trang web trong Theme của bạn.
Dưới đây là một ví dụ về cách thêm mã HTML và CSS để hiển thị nội dung của trang web:
<?php get_header(); ?> <main> <section> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article> <h2><?php the_title(); ?></h2> <?php the_content(); ?> </article> <?php endwhile; endif; ?> </section> <aside> <?php get_sidebar(); ?> </aside> </main> <?php get_footer(); ?>
Trong đoạn mã trên, ta đã sử dụng các thẻ HTML như <main>, <section>, <article> để tạo cấu trúc cho nội dung của trang web. Ta đã sử dụng hàm WordPress get_header và get_footer để lấy các file header.php và footer.php
Thêm chức năng vào Theme
Sử dụng các hàm WordPress để thêm chức năng như đăng ký và cấu hình menu, đăng ký các widget, đăng ký các shortcode, tùy chỉnh hình ảnh đại diện, tạo trang cấu hình Theme.
Để thêm chức năng vào Theme của WordPress, bạn có thể sử dụng các hàm WordPress để đăng ký và cấu hình menu, đăng ký các widget, đăng ký các shortcode và tùy chỉnh hình ảnh đại diện.
Đăng ký và cấu hình menu
Để đăng ký menu, bạn có thể sử dụng hàm register_nav_menus() trong file functions.php của Theme. Ví dụ:
function my_theme_setup() {
register_nav_menus( array(
'primary' => esc_html__( 'Primary Menu', 'my_theme' ),
'footer' => esc_html__( 'Footer Menu', 'my_theme' ),
) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
Trong đó, bạn định nghĩa các vùng menu bằng mảng và đăng ký chúng bằng hàm register_nav_menus(). Hàm esc_html__() sẽ giúp bạn tránh được các lỗi bảo mật.
Đăng ký các widget
Để đăng ký widget, bạn có thể sử dụng hàm register_sidebar() trong file functions.php của Theme. Ví dụ:
function my_theme_widgets_init() {
register_sidebar( array(
'name' => esc_html__( 'Sidebar', 'my_theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'my_theme' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );
Trong đó, bạn định nghĩa các thông tin về widget bằng mảng và đăng ký chúng bằng hàm register_sidebar(). Mỗi widget được định nghĩa bằng các phần tử của mảng.
Đăng ký các shortcode
Để đăng ký shortcode, bạn có thể sử dụng hàm add_shortcode() trong file functions.php của Theme. Ví dụ:
function my_theme_shortcode( $atts, $content = null ) {
return '<div class="my-theme-shortcode">' . $content . '</div>';
}
add_shortcode( 'my-theme-shortcode', 'my_theme_shortcode' );
Trong đó, bạn định nghĩa chức năng của shortcode bằng hàm my_theme_shortcode(), và đăng ký chúng bằng hàm add_shortcode(). Shortcode được định nghĩa bằng tên được truyền vào phần đầu của hàm.
Tùy chỉnh hình ảnh đại diện
Để tùy chỉnh hình ảnh đại diện, bạn có thể sử dụng hàm add_theme_support() trong file functions.php của Theme. Ví dụ:
add_theme_support( 'post-thumbnails' );
Tạo trang cấu hình Theme
Để tạo trang cấu hình Theme, bạn có thể sử dụng hàm add_theme_page() hoặc add_submenu_page() trong file functions.php của Theme. Ví dụ:
function my_theme_options_page() {
add_theme_page(
'My Theme Options', // Tên trang
'Theme Options', // Tên menu
'manage_options', // Quyền truy cập
'my-theme-options', // ID của trang
'my_theme_options' // Hàm hiển thị nội dung trang
);
}
add_action( 'admin_menu', 'my_theme_options_page' );
function my_theme_options() {
// Hiển thị nội dung trang
}Trong đó, bạn định nghĩa thông tin về trang cấu hình bằng hàm add_theme_page() hoặc add_submenu_page(), và hiển thị nội dung trang bằng hàm my_theme_options().
Ngoài ra, bạn cũng có thể sử dụng các hàm khác như add_image_size() để đăng ký kích thước hình ảnh mới, hoặc add_filter() để thay đổi các hành vi mặc định của WordPress.
Hy vọng những thông tin trên sẽ giúp bạn thêm chức năng vào Theme của mình một cách dễ dàng hơn. Nếu bạn có thắc mắc hoặc câu hỏi nào khác, hãy đặt chúng ở phần comment bên dưới.
Sử dụng các action hook để đăng ký các tùy chọn cấu hình cho Theme
WordPress cung cấp rất nhiều action hook để cho phép các Theme hoặc Plugin tương tác với hệ thống WordPress. Trong đó, có các action hook được sử dụng phổ biến để đăng ký các tùy chọn cấu hình cho Theme như sau:
after_setup_theme: Action hook này được sử dụng để thực hiện các công việc khởi tạo cho Theme sau khi nó được kích hoạt. Đây là nơi lý tưởng để đăng ký các tùy chọn cấu hình cho Theme.
Ví dụ:
function my_theme_setup() {
add_theme_support( 'custom-logo' ); // Đăng ký hỗ trợ logo tùy chỉnh
add_theme_support( 'post-thumbnails' ); // Đăng ký hỗ trợ hình đại diện cho bài viết
}
add_action( 'after_setup_theme', 'my_theme_setup' );
admin_init: Action hook này được sử dụng để thực hiện các công việc khởi tạo cho trang quản trị WordPress, bao gồm cả trang cấu hình Theme.
Ví dụ:
function my_theme_options_init() {
register_setting( 'my-theme-options', 'my_theme_options' ); // Đăng ký tùy chọn cấu hình cho Theme
add_settings_section( 'my-theme-options-section', 'My Theme Options', 'my_theme_options_section_callback', 'my-theme-options' ); // Thêm phần để hiển thị tùy chọn cấu hình
add_settings_field( 'my-theme-options-logo', 'Logo', 'my_theme_options_logo_callback', 'my-theme-options', 'my-theme-options-section' ); // Thêm trường để hiển thị tùy chọn logo
}
function my_theme_options_section_callback() {
// Hiển thị thông tin về phần cấu hình Theme
}
function my_theme_options_logo_callback() {
// Hiển thị trường để cấu hình logo
}
add_action( 'admin_init', 'my_theme_options_init' );
Trong đó, bạn sử dụng hàm register_setting() để đăng ký các tùy chọn cấu hình cho Theme, và sử dụng các hàm add_settings_section() và add_settings_field() để thêm phần và trường để hiển thị thông tin cấu hình.
Với việc sử dụng các action hook này, bạn có thể tùy chỉnh và cấu hình Theme của mình một cách dễ dàng hơn.
Kết bài viết
Phát triển một Theme WordPress đòi hỏi bạn có kiến thức về HTML, CSS, PHP và các hàm và chức năng của WordPress. Tuy nhiên, việc phát triển một Theme riêng cho trang web của bạn sẽ giúp nó trở nên độc đáo và phù hợp với mục đích sử dụng của bạn. Điều này có thể giúp nâng cao trải nghiệm người dùng, cải thiện tính tương thích và đáp ứng của trang web và đồng thời giúp bạn kiểm soát tối đa quy trình phát triển và bảo trì của trang web của mình.
Khi phát triển một Theme WordPress, bạn có thể bắt đầu bằng việc tạo một mẫu thiết kế cho trang web của bạn. Sau đó, bạn có thể bắt đầu phát triển Theme bằng cách tạo các tệp mã HTML, CSS và PHP cần thiết. Ngoài ra, bạn cũng cần phải hiểu cách WordPress hoạt động và sử dụng các hàm và chức năng cần thiết để tích hợp chúng vào Theme của mình.
Một số kỹ năng cần thiết để phát triển một Theme WordPress bao gồm:
- Kiến thức về HTML và CSS: Để thiết kế giao diện trang web của bạn.
- Kiến thức về PHP: Để phát triển các tệp mã và tích hợp chúng vào WordPress.
- Hiểu về hệ thống Theme của WordPress: Để biết cách tổ chức các tệp và thư mục, tạo các file mẫu cho các trang và chức năng khác.
- Sử dụng các trình biên tập mã như Visual Studio Code hoặc Sublime Text: Để phát triển Theme một cách dễ dàng và hiệu quả hơn.
Nếu bạn không có đủ kỹ năng để phát triển một Theme WordPress từ đầu, bạn có thể sử dụng các Theme có sẵn và tùy chỉnh chúng để phù hợp với trang web của bạn. Tuy nhiên, nếu bạn muốn kiểm soát tối đa quy trình phát triển và bảo trì của trang web của mình, việc phát triển một Theme riêng là một lựa chọn tốt để xem xét.
