Tùy biến header bài viết giống với theme99k

Chào bạn! trong bài viết này mình chia sẻ cho bạn cách tùy biến header của bài viết giống như theme99k. Theme99k đang sử dụng Flatsome theme, nên chỉ áp dụng khi bạn đang sử dụng theme này nhé. Ngoài ra, khuyến cáo nên sử dụng child theme để tùy biến.

Ok! vào việc.

Bạn truy cập Flatsome > Theme Options > Blog > Blog Single Post. Tại phần Blog Single Post bạn chọn Title Layout: Top Full

Bước tiếp theo mình sẽ sửa code trong thư mục template-parts > posts > partials. 2 file mình sẽ tùy biến là entry-title.php và single-featured.php

Khuyến nghị: bạn nên copy thư mục và 2 file này vào child theme, để sau này có cập nhật phiên bản mới cho Flatsome thì các tùy biến của mình không bị ảnh hưởng.

Bạn copy code dưới đây và ghi đè vào từng file tương ứng.

<?php while ( have_posts() ) : the_post(); ?>
  <div class="page-title blog-featured-title">
<div class="tk99-blog-title text-center">
        <?php get_template_part( 'template-parts/posts/partials/entry', 'title');  ?>
              </div>
      <div class="area" >
            <ul class="circles">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
            </ul>
    </div >
  </div>
<?php endwhile; ?>

<div><?php do_action( 'tk99_after_entry_title');?></div>
<?php
if ( is_single() ) {
	echo '<h1 class="entry-title">' . get_the_title() . '</h1>';
} else {
	echo '<h2 class="entry-title"><a href="' . get_the_permalink() . '" rel="bookmark" class="plain">' . get_the_title() . '</a></h2>';
}
?>
<div><?php do_action( 'tk99_before_entry_title');?></div>
<?php
$single_post = is_singular( 'post' );
if ( $single_post && get_theme_mod( 'blog_single_header_meta', 1 ) ) : ?>
	<div class="entry-meta uppercase is-xsmall">
		<?php flatsome_posted_on(); ?>
	</div>
<?php elseif ( ! $single_post && 'post' == get_post_type() ) : ?>
	<div class="entry-meta uppercase is-xsmall">
		<?php flatsome_posted_on(); ?>
	</div>
<?php endif; ?>

Tiếp theo bạn dán code dưới đây vào functions.php

function tk99_add_meta_post()
{
    $avatar = get_avatar(get_the_author_meta('ID'));
    $name_author = get_the_author_meta('display_name', $author_id);
    $author_url = get_author_posts_url(get_the_author_meta('ID'));
    echo '<div class ="tk99-meta-post">';
    echo '<div class="author-avatar">';
    echo  $avatar;
    echo '<a href="' . $author_url . '">';
    echo $name_author;
    echo '</a>';
    if (is_singular('post')) {
        echo '<time class="entry-date published" datetime="' . get_the_date('c') . '" itemprop="datePublished"><span class="dashicons dashicons-clock"></span>' . get_the_date('d/m/Y') . ' </time>';
    }
    echo '</div>';
    echo '</div>';
}
add_action('tk99_before_entry_title', 'tk99_add_meta_post');

Và cuối cùng là thêm tý CSS cho vào style.css

.area {
  background: linear-gradient(45deg, #724bb7 0%, #4098d7 100%);
  width: 100%;
  height: 40vh;
}
.circles {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate 25s linear infinite;
  bottom: -150px;
}
.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}
.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}
.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}
.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}
.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}
.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}
.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}
.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}
.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}
.circles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}
@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }
  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}
.tk99-blog-title {
  width: 100%;
  position: absolute;
  top: 10vh;
}
.tk99-blog-title h1 {
  color: #fff;
}
.tk99-meta-post {
  display: flex;
  flex-direction: row;
  -webkit-box-pack: justify;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
}
.tk99-meta-post time.entry-date.published {
  margin-left: 10px;
  color: #efefef;
}
.author-avatar a {
  color: #efefef;
}
.author-avatar a:hover {
  color: var(--primary-color);
}
.author-avatar img {
  width: 25px;
  display: inline-block;
  vertical-align: bottom;
  border-radius: 50%;
  margin-right: 5px;
}

Chúc bạn thành công và có thắc mắc thì comment cho mình biết nhé.