Hướng dẫn tạo website bằng Theme Wordpress từ Bootstrap 4 [2019] - Phần 2
Ở phần 2 mình sẽ đi từng file header.php, footer.php, sidebar.php, content.php. index.php
Bạn sẽ tìm hiểu các hàm cần thiết khi thiết kế theme wordpress. Nó không hề khó, bạn chịu khó đọc đi đọc lại nếu không hiểu nhé, cần gì thì hãy comment dưới bài viết cho mình.
Header.php
Các hàm cần thiết trong file header.php
language_attributes() // Ngôn ngữ
bloginfo('name') // Tiêu đề chính
wp_head() // Chứa các hàm, style, javascript của WP
get_template_directory_uri() // Gọi đường dẫn đến theme
Mở file header.php thêm các hàm sau vào
bloginfo('name') sẽ lấy nội dung phần backend WP
Cài đặt -> Tổng quan -> Tên website
Footer.php
Thêm hàm trước
Sau khi đã chèn wp_head và wp_footer bạn sẽ được thanh công cụ sau khi ra ngoài frontend
Sidebar.php
Tạo file sidebar.php trong thư mục theme
- wp-content/themes/logicviet/sidebar.php
Mở file index.php chọn cut toàn bộ nội dung class .col-md-4 vào sidebar.php
Trong file index.php dùng hàm để gọi file sidebar.php đã tách
Index.php
Đây là file quan trọng nhất trong theme wordpress, nó sẽ gánh cho mọi cấp trên nó nếu cấp trên nó không tồn tại, có thể xem nó như trang mặc định.
Mở file index.php và xóa các * div Blog Post* dư chỉ để lại 1 cái duy nhất, mục đích là sẽ lặp các bài viết.
Tạo một folder tên: template-parts
- wp-content/themes/logicviet/template-parts
Tạo file content.php trong thư mục template-parts
- wp-content/themes/logicviet/template-parts/content.php
Copy nội dung Blog Post trong index.php vào content.php
Tại file index.php
Bạn tiến thực hiện hàm sau
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'template-parts/content', get_post_format() ); ?>
<?php endwhile; ?>
<?php endif; ?>
Template-parts/content.php
Các hàm chính sẽ sử dụng trong content.php
the_post_thumbnail('option') // Ảnh đại diện
the_title() // Tiêu đề
the_excerpt() // Mô tả ngắn
the_permalink() // Đường dẫn
the_author() // Tác giả
get_the_date() // Ngày/tháng/năm
Mặc định wordpress sẽ không cho thêm ảnh đại diện vào bài viết vì thế bạn cần tạo 1 hàm cho phép chúng ta chèn ảnh đại diện
Tạo file functions.php
- wp-content/themes/logicviet/functions.php
Hàm cho phép theme hỗ trợ ảnh đại diện
add_theme_support( 'post-thumbnails' );
Vào backend kiểm tra xem đã hỗ trợ chưa nhé.
Như vậy mặc định ảnh đại diện bài viết của theme Boostrap này là 700px x 350px, ta sẽ viết hàm resize hình theo kích thước như vậy.
Mở file functions.php
Chèn 2 hàm sau, tôi sẽ đặt tên là blog-thumbnail
add_image_size('blog-thumbnail',700, 350, true);
và:
set_post_thumbnail_size( 700, 350 );
Chọn kích thước 700, 350 là ảnh đại diện
Cách gọi hàm trên:
the_post_thumbnail('blog-thumbnail')
Tổng hợp các dữ liệu trên ta mở file content.php trong template-parts và chèn các hàm sau:
<div class="card mb-4">
<?php the_post_thumbnail('blog-thumbnail', ['class' => 'card-img-top' ]) ?>
<div class="card-body">
<h2 class="card-title"><?php the_title() ?></h2>
<p class="card-text"><?php the_excerpt() ?></p>
<a href="<?php the_permalink() ?>" class="btn btn-primary">Read More →</a>
</div>
<div class="card-footer text-muted">
Posted on <?php echo get_the_date() ?> by
<a href="#"><?php the_author() ?></a>
</div>
</div>
Ra ngoài Frontend bạn sẽ thấy được kết quả sau:
Vì chúng ta custom hình ảnh dạng 700x x 350px thế nên chúng ta cần dùng regenerate thumbnails để đưa tất cả các hình về 700x x 350px
Bạn vào backend phần plugin search và cài đặt regenerate thumbnails
Sau khi cài đặt bạn vào công cụ -> Regenerate thumbnails -> và click vào bước 3
Quay trở lại trang chủ, bạn sẽ thấy hình ảnh đã fix theo đúng kích thước theo yêu cầu.
Chúc các bạn thành công. Hẹn gặp bạn ở phần 3
0 Comments
no comments!
![Hướng dẫn tạo website bằng Theme Wordpress từ Bootstrap 4 [2019] - Phần 9](https://logicviet.com/images/posts/45344338.PNG)
![Hướng dẫn tạo website bằng Theme Wordpress từ Bootstrap 4 [2019] - Phần 1](https://logicviet.com/images/posts/50286915.PNG)
Theo Dõi Trang
- Bài Viết Mới
- Tags
Các cách xóa và giảm dung lượng ổ C win 10 hiệu quả nhất
2 năm trước
Ổ cứng của máy tính, laptop bị đầy sau một thời gian dài sử dụng là vấn đề thường gặp của nhiều người. Nếu dung lượng ổ cứng quá lớn có thể ảnh hưởng đến tốc độ xử lý của nhiều ứng dụng và hoạt động của bạn. Vì vậy, việc quản lý, dọn dẹp ổ cứng nói chung và ổ đĩa C nói riêng nên thực hiện thường xuyên
Các website chuyển văn bản thành giọng nói online tốt nhất
2 năm trước
Bạn đang tìm kiếm các trang web giúp bạn chuyển văn bản thành giọng nói online trên máy tính một cách chính xác và nhanh chóng nhất. Bài viết dưới đây sẽ tổng hợp cho các bạn TOP 8 trang web chuyển văn bản thành giọng nói online tốt nhất.
UTM Tracking là gì? Hướng dẫn tạo UTM vào quản lý hiệu quả Marketing
2 năm trước
UTM (viết tắt cho Urchin tracking module), hay UTM code là một đoạn mã đơn giản được gắn vào các đường dẫn URL tùy chỉnh của bạn, giúp theo dõi các nguồn, phương tiện trung gian, hoặc tên các chiến dịch của bạn.
Cách sử dụng hàm Query trong Google Sheet
2 năm trước
Bạn làm việc với lượng lớn dữ liệu trên Google Sheet, việc lọc và tìm kiếm dữ liệu theo cách thủ công sẽ tốn rất nhiều thời gian. Hàm QUERY trong Google Sheet giúp bạn có thể tra cứu và lọc dữ liệu theo bất kỳ định dạng nào bạn muốn. Cùng tìm hiểu cách dùng hàm QUERY nhé!
Cách tính lãi suất vay mua nhà và số tiền phải trả hàng tháng
2 năm trước
Hiện nay, hầu hết những người có thu nhập thấp hoặc trung bình sẽ lựa chọn phương án vay vốn ngân hàng để mua nhà. Tuy nhiên, bạn có biết để có thể làm thủ tục vay vốn người mua cần đáp ứng được những điều kiện gì? Các mức lãi suất? Số tiền trả hàng tháng?
Hướng dẫn cách sử dụng và cài đặt Google Tag Manager
2 năm trước
Trình quản lý thẻ của Google – Google Tag Manager là một công cụ được thiết lập để giải quyết các vấn đề của doanh nghiệp giữa các phòng ban, theo dõi chiến dịch marketing, quản lý thẻ JavaScript và HTML, chủ động cập nhật website,…