Nội dung chính
Hướng dẫn Tab trong bài viết cho WordPress: Bài viết của bạn có nhiều nội dung và bạn muốn chia thành các Tab để người đọc có thể dễ dàng đọc và tìm nhanh nội dung mà họ cần, thì lúc đó việc hiển thị nội dung theo Tab sẽ rất hữu ích.
Trong bài viết này Blog thủ thuật máy tính f4vnn sẽ giúp và hướng dẫn thêm Tab trong bài viết cho WordPress của bạn. Các bạn có thể tham khảo và sử dụng nhé.
Hướng dẫn thêm Tab trong bài viết cho WordPress
Trước khi bắt đầu mình khuyên đối với những bạn chưa hoặc đang tìm hiểu về WordPress thì bạn nên cài đặt Plugin Custom CSS and JS để các bạn tiện sử dụng và thêm CSS và JS cho WordPress tránh làm hỏng website của bạn tránh trường hợp bạn xóa nhầm.
1. Thêm code Tab
Hướng dẫn thêm Tab trong bài viết cho WordPress này bạn có thể thêm vào bài viết hoặc page đều được nhé tùy bạn muốn hiển thị nó ở dạng bài viết hay page thôi. Sau đó thêm html vào và thêm đoạn code sau vào đó.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="tabs-container">
<div class="tab-headings-container">
<h2 class="tab-heading wordpress-btn active">WordPress</h2>
<h2 class="tab-heading blogger-btn">Blogger</h2>
<h2 class="tab-heading wix-btn">Xenforo</h2>
</div>
<div class="panels-container">
<div class="panel wordpress active">
<h2>WordPress</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos nobis
illo iste reiciendis, quam cupiditate, ipsum harum dolore eveniet
nemo consequuntur? Hic magni voluptatum doloribus error dolorum
labore, possimus soluta.
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi,
ratione!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
repellendus vero praesentium, quisquam corporis quos eius omnis unde
quibusdam voluptatem.
</p>
<a href="#">Learn More</a>
</div>
<div class="panel blogger">
<h2>Blogger</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos nobis
illo iste reiciendis, quam cupiditate, ipsum harum dolore eveniet
nemo consequuntur? Hic magni voluptatum doloribus error dolorum
labore, possimus soluta.
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi,
ratione!
</p>
<a href="#">Learn More</a>
</div>
<div class="panel wix">
<h2>Wix</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos nobis
illo iste reiciendis, quam cupiditate, ipsum harum dolore eveniet
nemo consequuntur? Hic magni voluptatum doloribus error dolorum
labore, possimus soluta.
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi,
ratione!
</p>
<a href="#">Learn More</a>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>Các bạn tùy chỉnh nội dung sao cho phù hợp với nội dung của bạn nhé.
2. Thêm CSS để làm đẹp tab
Sau khi đã tùy chỉnh nội dung cho các tab bây giờ làm làm cho nó đẹp và nhìn chuyên nghiệp hơn nhé. Các bạn thêm CSS cho nó vào custom css và js mà bạn vừa cài đoạn CSS sau.
body {
font-family: "Roboto", sans-serif;
}
.tabs-container {
padding: 16px;
max-width: 600px;
margin: 0 auto;
}
.tab-headings-container {
display: flex;
border-bottom: 1px solid #dee;
}
.tab-headings-container .tab-heading {
border: 1px solid #cacaca;
padding: 8px 24px;
font-size: 16px;
margin: 0 8px;
border-radius: 10px 10px 0 0;
cursor: pointer;
transition: 300ms;
font-weight: normal;
border-bottom: 0;
}
.tab-headings-container .tab-heading:hover {
background: #eee;
}
.tab-headings-container .tab-heading.active {
background: #353535;
color: #eee;
font-weight: bold;
}
.panels-container h2 {
color: #b92646;
}
.panels-container a {
background: #b92646;
padding: 10px 48px;
color: #fff;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
margin-top: 10px;
display: inline-block;
transition: 300ms;
}
.panels-container a:hover {
background: #83132b;
}
.panels-container {
position: relative;
}
.panels-container .panel {
position: absolute;
opacity: 0;
transform: translateX(100px);
padding: 20px;
line-height: 1.8;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
border-radius: 0 0 10px 10px;
transition: 500ms cubic-bezier(0.24, 1.57, 1, 1);
}
.panels-container .panel.active {
opacity: 1;
transform: translateX(0);
transition-delay: 100ms;
}3. Thêm JS
JS này nó sẽ làm cho chuyển động mượt mà và nhìn đẹp hơn khi bạn bấm sang tab khác nhé.
const wordpressPanel = document.querySelector(".panels-container .wordpress");
const bloggerPanel = document.querySelector(".panels-container .blogger");
const wixPanel = document.querySelector(".panels-container .wix");
const wordpressBtn = document.querySelector(".tabs-container .wordpress-btn");
const bloggerBtn = document.querySelector(".tabs-container .blogger-btn");
const wixBtn = document.querySelector(".tabs-container .wix-btn");
const tabsContainer = document.querySelector(".tabs-container");
let activePanel = wordpressPanel;
const calculateHeight = () => {
let panelHeight = activePanel.clientHeight;
tabsContainer.style.marginBottom = panelHeight + "px";
};
calculateHeight();
const removeActiveFromAllPanels = () => {
wordpressPanel.classList.remove("active");
bloggerPanel.classList.remove("active");
wixPanel.classList.remove("active");
};
const removeActiveFromAllBtns = () => {
wordpressBtn.classList.remove("active");
bloggerBtn.classList.remove("active");
wixBtn.classList.remove("active");
};
wordpressBtn.addEventListener("click", () => {
removeActiveFromAllPanels();
wordpressPanel.classList.add("active");
removeActiveFromAllBtns();
wordpressBtn.classList.add("active");
activePanel = wordpressPanel;
calculateHeight();
});
bloggerBtn.addEventListener("click", () => {
removeActiveFromAllPanels();
bloggerPanel.classList.add("active");
removeActiveFromAllBtns();
bloggerBtn.classList.add("active");
activePanel = bloggerPanel;
calculateHeight();
});
wixBtn.addEventListener("click", () => {
removeActiveFromAllPanels();
wixPanel.classList.add("active");
removeActiveFromAllBtns();
wixBtn.classList.add("active");
activePanel = wixPanel;
calculateHeight();
});Xong chỉ thế thôi các bạn sang bài viết hoặc page mà bạn thêm tab vào và load lại xem thành quả nhé.
Hy vọng với hướng dẫn thêm Tab trong bài viết cho WordPress mà Blog thủ thuật máy tính f4vnn vừa chia sẻ sẽ có ích với bạn. Chúc bạn thành công.
Bài Viết Cùng Chuyên MụcGame & Apk Mod Acapella Việt Template BLogspot Liên Kết URL
