Hướng dẫn tùy chỉnh trang bài viết bằng code

Hướng dẫn tùy chỉnh trang bài viết bằng code

    5 / 5 ( 1 votes )

Hiện nay có khá nhiều plugin giúp chúng ta có thể tùy chỉnh trang bài viết trong việc thiết kế website, không thể kể hết các ưu điểm mà plugin đem lại tiện ích cho việc thiết kế website, tuy nhiên bên cạnh đó cũng còn nhiều nhược điểm mà plugin để lại.

1. Tại sao nên tùy chỉnh trang bài viết bằng code?
Giả sử một ngày không đẹp trời, plugin tùy chỉnvh trang bài viết bị lỗi do xung đột với các plugin khác, hoặc bạn lỡ tay xóa mất plugin này, thì hầu như toàn bộ hệ thống website ban đầu không còn nữa. Việc tùy chỉnh code trang bài viết giúp chúng ta không còn phụ thuộc nhiều vào các plugin. Nhưng trước khi thao tác với code bạn nên có phương án backup dữ liệu lại nhé.

2. Cách tùy chỉnh trang bài viết bằng code
Đây là hình ảnh trang bài viết trước khi chỉnh sửa, bạn thấy ảnh thumbnail bị chia cột riêng cho các bài viết, để tùy chỉnh trang bài viết này, WordPress thường cho phép chúng ta tùy chỉnh trong file code tên là blog-content hoặc tùy vào theme tùy biến mà bạn đang sử dụng, bạn truy cập vào đường dẫn Appearance > Theme Editor > sau đó chỉnh sửa file blog-content.

Ở ví dụ bên dưới chúng ta thấy cấu trúc file ban đầu được chia làm 2 cột với 3 thẻ div, trong đó thẻ div đầu tiên đóng vai trò như 1 dòng như sau:“>

<div class="row"><?php
			$col = 12;
			....
			$col = 7; ?>
		<div class="col-sm-5 col-md-5">
			...
			</figure>
		</div><?php
			} ?>
		<div class="col-sm-<?php echo absint($col); ?> col-md-<?php echo absint($col); ?>">
			<header class="entry-header">
				...
						echo get_the_category_list(__( ', ', 'fortune' )); ?>
					</span><?php
					} if(has_tag()){ ?>
					..
					} ?>
					<span class="e....uthor_meta('ID'))); ?>"><?php the_author(); ?></a></span>
				</div>
			</header>
            <?php 
            	the_content();
            	wp_link_pages( array(
					'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'fortune' ),
					'after'  => '</div>',
				) );
            ?>		</div>
	</div>
Hình ảnh trang bài viết trước khi tùy chỉnh

Ở đây giả sử bạn chỉ cần hiển thị hình ảnh và tiêu đề, meta và không muốn hiển thị hình nội dung bài viết ở trang này, bạn có thể xóa nội dung bài viết bằng cách xóa đoạn code sau:



<?php 
            	the_content();
            	wp_link_pages( array(
					'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'fortune' ),
					'after'  => '</div>',
				) );
            ?>

Đây là hình ảnh trang bài viết mà bạn nhận được, sau khi xóa content trên:

Ngoài ra, trong phần này bạn có thể tùy chỉnh colum, hoặc dữ liệu meta, author, title..trong thẻ span cho bài viết của mình.

Đôi dòng trên bài viết này hy vọng hữu ích giúp bạn trong việc tùy chỉnh post page cho bài viết của mình!

Bài viết liên quan
2 Cách kiểm tra domain đã trỏ về hosting hay chưa? Hướng dẫn trỏ tên miền về hosting cho người mới bắt đầu Top 3 theme miễn phí dành cho website bán hàng Xóa hình ảnh không sử dụng trong website với 5 cách Cách trỏ domain pointer về website trên DirectAdmin. Top 2 cách tắt RSS Feed trong WordPress Cấu hình WP Mail SMTP và Contact Form 7