WordPress: Thiết Kế Theme (P7: Single.php)

Chào các bạn đến với series WordPress: Thiết Kế Theme. Ở phần 7 của series này mình sẽ hướng dẫn các bạn tạo file Blog cho mình hay còn được gọi là single.php. file có tác dụng load thông tin bài viết của bạn lên site của mình. Bên cạnh đó mình sẽ hướng dẫn các bạn tạo sidebar trong theme WordPress. Giờ thì mình bắt đầu nhé.

single.php WordPress

Trước hết các bạn cần phải tạo file single.php trong thư mục theme của mình. 

Ở file single.php bạn cần thao tác như bao thư mục khác, đó là thêm 2 dòng get_header() và get_footer() vào bài viết. 

<?php get_header();?><br />--code here--<br /><?php get_footer();?>

Bây giờ chúng ta sẽ tạo cấu trúc file single.php nhé. Bên dưới mình sẽ có đoạn code như sau:

<div class="singlePost margin-50" id="PostWrapper">
    <div class="singlePost__container container">
      <div class="singlePost__wrapper row-divide">
        <div class="col-divide-8 singlePost__background">
          <?php while(have_posts()):the_post(); ?>
            <div class="singlePost__content">
              <div class="singlePost__main-picture">
                <?php echo get_the_post_thumbnail(); ?>
              </div>
              <div class="singlePost__text-contain">
                <div class="singlePost__date-time">
                  <i class="far fa-calendar-alt"></i> <?php the_date()?>
                </div>
                <div class="singlePost__title-post">
                  <h2><?php echo get_the_title();?></h2>
                </div>
                <div class="singlePost__text">
                  <?php the_content(); ?>
                </div>
              </div>
            </div>
          <?php endwhile; ?>
        </div>
        <div class="col-divide-4 singlePost__sidebar">
          
        </div>
      </div>
    </div>
  </div>

Khi các bạn click vào bài viết trên site của mình thì nó sẽ dẫn đến file single.php. Tại file single.php nó sẽ chạy vòng lặp while để kiểm tra bài viết. Nếu bài viết có tồn tại (have_posts();) thì sẽ lấy thông tin thông qua hàm the_posts();.

Kế tiếp get_the_posts_thumbnail(); sẽ có nhiệm vụ lấy ảnh đại diện từ bài viết của bạn mà bạn đã cài đặt trước đó trong admin. Dòng code the_date() chắc các bạn cũng đã hiểu khi nhìn thấy tên hàm rồi nhỉ. Hàm này có tác dụng xuất ra ngày, tháng, năm tạo bài viết, ngoài ra cón có hàm the_author() cho bạn nào cần để xuất ra tên người viết của bài post.

Cuối cùng là hai dòng code get_the_title() và the_content(). Như ở các bài mình viết lúc trước get_the_title() có tác dụng lấy tên của bài viết. Còn the_content() sẽ có nhiệm vụ là lấy nội dung bài viết và kết thúc vòng lặp.

Style lại cho đẹp nhé:

/*Col row divide*/
.row-divide {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.row-flex-start{
	justify-content: flex-start;
}
.col-divide-1 {
    flex: 0 0 7%;
    max-width: 7%;
    width: 100%;
}

.col-divide-2 {
    flex: 0 0 14%;
    max-width: 14%;
    width: 100%;
}

.col-divide-3 {
    flex: 0 0 23%;
    max-width: 25%;
    width: 100%;
}

.col-divide-4 {
    flex: 0 0 33.33%;
    max-width: 32%;
    width: 100%;
}

.col-divide-5 {
    flex: 0 0 40%;
    max-width: 40%;
    width: 100%;
}

.col-divide-6 {
    flex: 0 0 50%;
    max-width: 48%;
    width: 100%;
}

.col-divide-7 {
    flex: 0 0 57%;
    max-width: 57%;
    width: 100%;
}

.col-divide-8 {
    flex: 0 0 65%;
    max-width: 65%;
    width: 100%;
}

.col-divide-9 {
    flex: 0 0 73%;
    max-width: 73%;
    width: 100%;
}

.col-divide-10 {
    flex: 0 0 81%;
    max-width: 81%;
    width: 100%;
}

.col-divide-11 {
    flex: 0 0 90%;
    max-width: 90%;
    width: 100%;
}

.col-divide-12 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
/*---Row---*/
.margin-50{
  margin:50px 0;
}<br />.singlePost{
  font-family: BalooThambi2;
}
.singlePost__content{
  background-color:#fff;
}
.singlePost__text-contain{
  padding:20px;
}

Kết Quả:

sidebar.php WordPress

Bây giờ mình sẽ hướng dẫn các bạn tạo sidebar trong WordPress. Tương tự như file single.php trước hết các bạn cần tạo file sidebar.php ( bạn có thể không cần tạo cũng được tuy nhiên mình khuyến khích các bạn nên tạo để dễ quản lí hơn).

Trước tiên bạn cần vào file function của bạn và add đoạn code sau để tạo sidebar trên WordPress:

function arphabet_widgets_init(){
            // Sidebar
            register_sidebar(array(
                'name'          => 'Sidebar',
                'id'            => 'sidebar',
                'before_widget' => '<div class="my-10">',
                'after_widget'  => '</div>',
                'before_title'  => '<h2 class="title--section text--upcase">',
                'after_title'   => '</h2>',
            ));
        }
    add_action( 'widgets_init', 'arphabet_widgets_init' );

Sau đó bạn vào file mình muốn hiển thị sidebar trên theme của bạn hoặc trên file sidebar.php add đoạn code sau:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar')) : ?><?php endif; ?>

Đoạn code trên có nhiệm vụ kiểm tra xem có sidebar nào bạn đã đăng kí hay không? nếu có thì nó sẽ hiển thị sidebar cho bạn.

Trường hợp bạn add đoạn code trên vào vào file sidebar.php thì bạn dùng hàm sau để include file của bạn vào:

<?php get_template_part('/sections/sidebar'); ?>

Hàm get_template_part() mà WordPress cung cấp cho bạn có nhiệm vụ lấy file theo đường dẫn của bạn. Ở đây file sidebar của mình đặt trong folder sections do đó đi từ folder theme là newswolfactive >> sections >> sidebar.php. 

Sau khi tạo xong sidebar bạn có thể tùy chỉnh chúng trên giao diện admin WordPress tại mục Appearance > Widget.

Customize Widget WordPress

Ở đây bạn sẽ thấy có mục Widget là Recents Posts. Nó có tác dụng hiển thị các bài viết mới nhất. Tuy nhiên nó chỉ có thể hiển thị ra tên bài viết, ngày xuất. Để custom thêm bạn vào wp-include / widget / class-wp-recent-post.php để custom lại.

Mình đã custom lại code trong này. Bạn thay thế chúng với toàn bộ code từ mở thẻ li đến đóng thẻ nhé.

<li class="widget__recent-post-item margin-bot-20">
	<div class="widget__recent-post-image">
		<?php echo get_the_post_thumbnail($recent_post->ID); ?>
	</div>
		<?php if ( $show_date ) : ?>
	<div class="widget__recent-post-date">
		<span class="post-date"> <i class="far fa-calendar-alt"></i> <?php echo get_the_date( '', $recent_post->ID ); ?></span>
	</div>
		<?php endif; ?>
	<div class="widget__recent-post-title">
		<a href="<?php the_permalink( $recent_post->ID ); ?>"<?php echo $aria_current; ?>><?php echo $title; ?></a>
	</div>
</li>

giờ thì mình style lại nữa là xong nhé:

.title--section{
  font-weight:600;
  font-size:25px;
  margin-top:0;
  border-left: 3px solid #1c6182;
  padding-left:10px;
}
.sidebar .sidebar__cotent{
  margin:20px 0;
}
.social--sidebar {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.social--icon{
  font-size:40px;
}
.social--icon.social--facebook i{
  color:#4267b2;
}
.social--icon.social--instagram i{
  color:#cc3d65;
}
.social--icon.social--behance i{
  color:#0057ff;
}
.social--icon.social--pinterest i{
  color:#cb1b26;
}
.fa, .fas{
  color:#1c6182;
}
.widget__recent-post-title a{
  font-size:20px;
  font-weight: 600;
}

Và cuối cùng là thành phẩm của chúng ta:

Như vậy ở phần 7 của series WordPress Thiết Kế Theme của mình hôm nay, mình đã hướng dẫn các bạn gồm những nội dung như sau: tạo file single.php, lấy bài viết, tạo sidebar, customize sidebar và 1 chút chỉnh sửa widget trong WordPress. Chúc các bạn thành công. Mọi thắc mắc các bạn cứ liên hệ fanpage tụi mình. Hoặc để lại comment + tên bài viết ở dưới kèm hỏi đáp của mình nhé.