Bảng cheat chủ đề WordPress cho người mới bắt đầu

Bạn đang tìm kiếm một bảng cheat chủ đề WordPress để nhanh chóng sửa đổi chủ đề của mình hoặc tạo một chủ đề tùy chỉnh mới? WordPress đi kèm với nhiều thẻ mẫu tích hợp mà bạn có thể sử dụng để bắt đầu. Trong bài viết này, chúng tôi sẽ chia sẻ bảng cheat chủ đề WordPress cho người mới bắt đầu.

Trước khi bắt đầu

WordPress đi kèm với một công cụ tạo khuôn mẫu mạnh mẽ cho phép các nhà phát triển chủ đề tạo ra các thiết kế đẹp mắt cho các trang web được cung cấp bởi WordPress. Có cả chủ đề WordPress cao cấp và miễn phí mà bạn có thể cài đặt trên trang web của mình.

Mỗi chủ đề WordPress đi kèm với một số tùy chọn tùy chỉnh. Các tùy chọn này cho phép bạn thay đổi màu sắc, thêm hình ảnh tiêu đề, thiết lập menu điều hướng, v.v.

Tuy nhiên, bạn vẫn bị giới hạn về những tính năng mà chủ đề của bạn hỗ trợ. Đôi khi bạn có thể muốn thực hiện những thay đổi nhỏ đối với chủ đề WordPress yêu cầu một số mã hóa. Để làm được điều đó, bạn sẽ cần biết một số PHP, HTML và CSS cơ bản.

Điều đầu tiên bạn muốn làm là làm quen với cách WordPress hoạt động đằng sau hậu trường và các mẫu chủ đề WordPress.

Sau đó, có một số phương pháp hay nhất mà bạn có thể muốn làm theo. Ví dụ: tạo một chủ đề con thay vì thực hiện các thay đổi trực tiếp vào các tệp chủ đề của bạn.

Bạn cũng có thể thực hành về chủ đề của mình bằng cách cài đặt WordPress trên máy tính.

Như đã nói, chúng ta hãy đi sâu vào bảng cheat chủ đề WordPress của chúng tôi dành cho người mới bắt đầu.

Mẫu chủ đề WordPress cơ bản

Mỗi chủ đề WordPress được tạo thành từ các tệp khác nhau được gọi là mẫu. Tất cả chủ đề WordPress đều phải có biểu định kiểu và tệp chỉ mục, nhưng thông thường chúng bao gồm rất nhiều tệp khác.

Dưới đây là danh sách các file cơ bản mà mọi theme đều có:

phong cách.css
tiêu đề.php
chỉ mục.php
thanh bên.php
chân trang.php
đơn.php
trang.php
bình luận.php
404.php
hàm.php
archive.php
searchform.php
tìm kiếm.php

Nếu bạn đang xây dựng chủ đề của riêng mình thì bạn có thể bắt đầu với một trong những chủ đề khởi đầu WordPress. Các chủ đề này đi kèm với các tệp mẫu WordPress và CSS sẵn sàng sử dụng, cung cấp cho bạn một khuôn khổ để xây dựng.

Thẻ mẫu trong tiêu đề

WordPress đi kèm với rất nhiều chức năng tiện dụng có thể được sử dụng để xuất ra những thứ khác nhau trong chủ đề của bạn. Các chức năng này được gọi là thẻ mẫu.

Chức năng đầu tiên và có lẽ là quan trọng nhất được yêu cầu trong tất cả các chủ đề WordPress tuân thủ tiêu chuẩn được gọi là wp_head và nó trông giống như sau:

<?php wp_head(); ?>

Mã này tìm nạp tất cả các HTML quan trọng mà WordPress cần thêm vào phần <head> của mỗi trang trên trang web của bạn. Nó cũng rất cần thiết để nhiều plugin WordPress hoạt động bình thường trên trang web của bạn.

Sau đây là danh sách các thẻ mẫu mà bạn thường tìm thấy và sử dụng trong tệp header.php của chủ đề. Tuy nhiên, chúng cũng có thể được sử dụng ở nơi khác trong chủ đề của bạn khi bạn cần.

// Title of the Blog, or Blog Name
<?php bloginfo('name'); ?> 

// Title of a Specific Page
<?php wp_title(); ?>

// Exact URL for the site
<?php bloginfo('url'); ?> 

// Site's Description
<?php bloginfo('description'); ?> 

// Location of Site’s Theme File
<?php bloginfo('template_url'); ?>

// Link to the Style.css location
<?php bloginfo('stylesheet_url'); ?>  

// RSS Feed URL for the site
<?php bloginfo('rss2_url'); ?> 

// Pingback URL for the site
<?php bloginfo('pingback_url'); ?>

// WordPress version number 
<?php bloginfo('version'); ?>

Thẻ mẫu được sử dụng trong các tệp chủ đề khác

Bây giờ chúng ta hãy xem một số thẻ mẫu thường được sử dụng khác và chức năng của chúng.

Các thẻ mẫu sau được sử dụng để gọi và bao gồm các mẫu khác. Ví dụ: tệp index.php của chủ đề của bạn sẽ sử dụng chúng để bao gồm các mẫu đầu trang, chân trang, nội dung, nhận xét và thanh bên.

//Displays Header.php file content
<?php get_header(); ?> 

// Displays Footer.php file content
<?php get_footer(); ?>

// Displays Sidebar.php file content
<?php get_sidebar(); ?>

// Displays Comment.php file content
<?php comments_template(); ?>

Các thẻ mẫu sau được sử dụng bên trong vòng lặp WordPress để hiển thị nội dung, đoạn trích và dữ liệu meta từ bài đăng của bạn.

// Displays the Content of the Post
<?php the_content(); ?>  

// Displays the excerpt that is used in Posts
<?php the_excerpt(); ?>

// Title of the Specific Post
<?php the_title(); ?>

// Link of the Specific Post
<?php the_permalink() ?>

// Category of a Specific Post
<?php the_category(', ') ?>

// Author of the Specific Post
<?php the_author(); ?> 

//ID of a Specific Post
<?php the_ID(); ?>

// Edit link for a Post 
// Oonly visible to logged in users with editing privileges
<?php edit_post_link(); ?>

// URL of the next page
<?php next_post_link(' %link ') ?>

// URL of the previous page
<?php previous_post_link('%link') ?>

Các chủ đề WordPress đi kèm với các khu vực sẵn sàng cho tiện ích được gọi là Thanh bên. Đây là những vị trí trong tệp chủ đề của bạn nơi người dùng có thể kéo và thả các tiện ích WordPress. Thông thường, một chủ đề có nhiều vị trí để người dùng có thể thêm tiện ích.

Tuy nhiên, thông thường nhất, các khu vực tiện ích này nằm ở thanh bên phải hoặc bên trái của bố cục chủ đề. Để tìm hiểu thêm, hãy xem hướng dẫn của chúng tôi về cách thêm các thanh bên sẵn sàng cho tiện ích động trong chủ đề WordPress của bạn.

Đây là mã được sử dụng để hiển thị thanh bên trong chủ đề của bạn.

<?php 
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
	return;
}
?>

<aside id="secondary" class="widget-area" role="complementary">
	<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->

Bạn sẽ cần thay thế sidebar-1 bằng tên được xác định theo chủ đề của bạn cho khu vực sẵn sàng cho tiện ích cụ thể đó hoặc thanh bên.

Thẻ mẫu để hiển thị menu điều hướng

WordPress đi kèm với một hệ thống quản lý menu mạnh mẽ cho phép người dùng tạo menu điều hướng cho trang web của họ. Một chủ đề WordPress có thể có nhiều vị trí menu điều hướng.

Xem hướng dẫn của chúng tôi về cách tạo menu điều hướng tùy chỉnh của riêng bạn trong chủ đề WordPress.

Sau đây là mã sẽ được sử dụng trong chủ đề của bạn để hiển thị menu điều hướng.

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

Vị trí chủ đề phụ thuộc vào tên chủ đề của bạn được sử dụng để đăng ký menu điều hướng. Lớp bộ chứa CSS có thể được gọi là bất kỳ tên nào bạn thích. Nó sẽ bao quanh menu điều hướng của bạn để bạn có thể tạo kiểu cho phù hợp.

Thẻ mẫu khác

Sau đây là một số thẻ mà bạn thường sử dụng trong chủ đề WordPress của mình.


// Displays the date current post was written
<?php echo get_the_date(); ?> 

// Displays the last time a post was modified
get_the_modified_time

// Displays the last modified time for a post
<?php echo the_modified_time('F d, Y'); ?>

// Displays post thumbnail or featured image
<?php the_post_thumbnail( ); ?>

// Displays monthly archives
<?php wp_get_archives( ); ?>

// Displays the list of categories
<?php wp_list_categories(); ?>

// Displays the gravatar of a user from email address
// 32 pixels is the size, you can change that if you need
<?php echo get_avatar( '[email ', 32 ); ?>

// Displays gravatar of the current post's author
<?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?>

Thẻ có điều kiện trong chủ đề WordPress

Thẻ có điều kiện là các hàm trả về kết quả Đúng hoặc Sai. Các thẻ có điều kiện này có thể được sử dụng trong toàn bộ chủ đề hoặc plugin của bạn để xem liệu các điều kiện nhất định có được đáp ứng hay không và sau đó thực hiện điều gì đó tương ứng.

Ví dụ: bài viết hiện tại có hình ảnh nổi bật hay không. Nếu nó không có hình ảnh nổi bật thì bạn có thể hiển thị hình ảnh nổi bật mặc định.

<?php
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}
else {
    echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) 
        . '/images/thumbnail-default.jpg" />';
}
?>

Sau đây là một số thẻ có điều kiện khác mà bạn có thể sử dụng.

// Checks if a single post is being displayed
is_single() 

// Checks if a page is being displayed
is_page() 

// Checks if the main blog page is displayed
is_home() 

// Checks if a static front page is displayed
is_front_page() 

// Checks if current viewer is logged in
is_user_logged_in()

Có nhiều thẻ có điều kiện hơn mà bạn có thể sử dụng. Danh sách đầy đủ các thẻ có điều kiện có thể được tìm thấy trong trang codex WordPress về các thẻ có điều kiện.

Vòng lặp WordPress

Vòng lặp hoặc vòng lặp WordPress là mã được sử dụng để tìm nạp và hiển thị các bài đăng trong WordPress. Nhiều thẻ mẫu WordPress có thể chỉ hoạt động bên trong vòng lặp vì chúng được liên kết với các đối tượng post hoặc post_type.

Sau đây là một ví dụ về một vòng lặp WordPress đơn giản.

<?php
 
// checks if there are any posts that match the query
if (have_posts()) :
 
  // If there are posts matching the query then start the loop
  while ( have_posts() ) : the_post();
 
    // the code between the while loop will be repeated for each post
    ?>
 
    <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
 
    <p class="date-author">Posted: <?php the_date(); ?> by <?php the_author(); ?></p>
 
    <?php the_content(); ?>
 
    <p class="postmetadata">Filed in: <?php the_category(); ?> | Tagged: <?php the_tags(); ?> | <a href="<?php comments_link(); ?>" title="Leave a comment">Comments</a></p>
 
    <?php
 
    // Stop the loop when all posts are displayed
 endwhile;
 
// If no posts were found
else :
?>
<p>Sorry no posts matched your criteria.</p>
<?php
endif;
?>

Để tìm hiểu thêm về vòng lặp, hãy xem Vòng lặp trong WordPress là gì (Infographic).

Chúng tôi hy vọng bài viết này sẽ giúp ích cho bạn với tư cách là bảng tóm tắt chủ đề WordPress cơ bản cho người mới bắt đầu. Bạn cũng có thể muốn xem danh sách các thủ thuật hữu ích nhất của chúng tôi dành cho tệp chức năng WordPress.

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.