Hướng dẫn xử lý trang chủ, từ trên xuống dưới, trái qua phải
1. Sửa logo Vào file header.php,
– Thay link trang chủ <?php bloginfo(‘url’); ?> vào đường dẫn logo.
– Thay link tiêu đề <?php bloginfo(‘name’); ?> vào thẻ <h1>
2. Xử lý phần menu
– Để xử lý phần menu ta phải vào admin tạo 1 menu, tuy nhiên trong phần admin chưa có phần menu, tai phải khai báo menu trong file function.php, thêm đoạn mã sau để tạo menu trong admin.
<?php
function theme_settup(){
register_nav_menu(‘topmenu’,__( ‘Menu chính’ ));
}
add_action(‘init’, ‘theme_settup’);
?>
– Vào giao diện admin tạo menu là Top menu
– Thêm các chuyên mục vào Top menu, chọn là menu chính
3. Get menu ra giao diện
Copy đoạn code get menu ra ngoài giao diện sau vào phần menu trong file header.php, xóa bỏ phần ul (menu) trong html đi vào thay vào đoạn code sau
<?php wp_nav_menu(
array(
‘theme_location’ => ‘topmenu’,
‘container’ => ‘false’,
‘menu_id’ => ‘top-menu’,
‘menu_class’ => ‘top-menu’
)
); ?>
Vậy là ok, F5 lại trang chủ để kiểm tra.
– Tạo page giới thiệu, liên hệ trong admin
– Điều chỉnh active menu cho trang chủ: đổi class active trong style.css bằng class current-menu-item mặc định trong wordpress, Vậy là get xong menu.
4. Get bài viết nổi bật
– Tạo chuyên mục Bài viết nổi bật
– Viết một số bài trong chuyên mục bài viết nổi bật
– Vào file noibat.php để cấu hình get bài viết nổi bật phun ra giao diện
+ Tìm code, seach Hướng dẫn lấy bài viết trong wordpress (Vòng lặp get post và Wp_query). Sử dụng đoạn code new Wp_query để get bài viết nổi bật
<?php
$args = array(
‘post_status’ => ‘publish’, // Chỉ lấy những bài viết được publish
‘post_type’ => ‘post’, // Lấy những bài viết thuộc post, nếu lấy những bài trong ‘trang’ thì để là page
‘showposts’ => 1, // số lượng bài viết
‘cat’ => 8, // lấy bài viết trong chuyên mục có id là 8
);
?>
<?php $getposts = new WP_query($args); ?>
<?php global $wp_query; $wp_query->in_the_loop = true; ?>
<?php while ($getposts->have_posts()) : $getposts->the_post(); ?>
<div class=”content-nb”>
<a href=”<?php the_permalink(); ?>”>
<img src=”<?phpbloginfo(‘template_directory’) ?>/images/noibat.jpg” alt=”Bai viet noibat”></a>
<h4><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h4>
<div class=”meta”>
<span><?php echo get_the_date(‘d-m-Y’); ?></span>
<span>Lượt xem: 2344 Lượt</span>
</div>
<?php the_excerpt(); ?>
</div>
<?php endwhile; wp_reset_postdata(); ?>
1. Ta sửa số lượng bài viết theo yêu cầu và kiểm tra xem id trong chuyên mục là bao nhiêu bằng cách mở chuyên mục ấy.
2. Ta cắt nội dung phần bài viết nổi bật vào vòng lặp have_post (phần chữ đỏ), đặt trước dòng lệnh endwhile.
3. Cấu hình để lấy đường dẫn, tiêu đề bài viết, ngày đăng, đoạn mô tả nhỏ của bài viết
<?php the_permalink(); ?> // để lấy link
<?php the_title(); ?> // để lấy tiêu đề bài viết
<?php echo get_the_date(‘d-m-Y’); ?> hoặc <?php echo get_the_date(); ?> // lấy ngày đăng của bài viết.
<?php the_excerpt();?> // để lấy đoạn mô tả nhỏ của bài viết
4. Lấy hình ảnh bài viết
Search Hướng dẫn lấy hình đại diện bài viết (thumbnail) trong wordpress, copy đoạn mã dán vào phần hình ảnh bài viết
<?php echo get_the_post_thumbnail( $get_the_id, ‘full’, array( ‘class’ =>’thumnail’) ); ?>
5. Hiển thị khu vực post ảnh thumbnail (hình đại diện).
Copy đoạn code sau vào trong file function, đặt ngay dưới file register_nav_menu
add_theme_support( ‘post-thumbnails’ );
6. Chỉnh ảnh bài viết khỏi méo
– Thêm thuộc tính css: object-fit: cover vào dòng 81 file style.css
7. Lấy thông tin của 3 bài viết
– Làm tương tự như lấy bài viết ở trên
+ Copy đoạn code ở trên xuống vào phần 3 bài viết và cấu hình thêm phần chữ bôi mầu, copy 1 trong 3 đoạn code bài viết bỏ vào đoạn mã bài viết trước để thay thế.
<?php
$args = array(
‘post_status’ => ‘publish’, // Chỉ lấy những bài viết được publish
‘post_type’ => ‘post’, // Lấy những bài viết thuộc post, nếu lấy những bài trong ‘trang’ thì để là page
‘showposts’ => 3, // số lượng bài viết là 3
‘cat’ => 8, // lấy bài viết trong chuyên mục có id là 8 (bài viết nổi bật)
‘offset’ => 1, //bỏ đi 1 bài viết đầu tiên
);
?>
<?php $getposts = new WP_query($args); ?>
<?php global $wp_query; $wp_query->in_the_loop = true; ?>
<?php while ($getposts->have_posts()) : $getposts->the_post(); ?>
<div class=”col-xs-4 col-sm-4 col-md-4 style-box”>
<div class=”list-post”>
<a href=”<?php the_permalink(); ?>”><?php echo get_the_post_thumbnail( $get_the_id, ‘full’, array( ‘class’ =>’thumnail’) ); ?></a>
<h4>
<a href=”#”><?php the_title(); ?></a>
</h4>
<div class=”meta”>
<span><?php echo get_the_date(‘d-m-Y’); ?></span>
</div>
</div>
</div>
<?php endwhile; wp_reset_postdata(); ?>
8. Chỉnh sửa CSS hình ảnh cho đẹp
Thêm thuộc tính hight:150px; và object-fit:cover; vào dòng 114
