Cách Thêm Mục Lục (table Of Content) Cho Mô Tả Danh Mục Sản Phẩm

Cách thêm mục lục (table of content) cho mô tả danh mục sản phẩm

Đa số các plugin toc+ hay table of content đang có đều không hỗ trợ mục lục cho mô tả danh mục sản phẩm nên mình đã tự viết + tham khảo thêm chat GPT, cuối cùng đã viết được mục lục cho mô tả danh mục sản phẩm rồi. AZ9S Chia sẻ cùng các bạn sử dụng luôn nếu cần nhé

Các bạn chỉ cần copy đoạn code sau vào functions.php của theme đang sử dụng (wp-content/themes/{your-theme}/functions.php) là được. Áp dụng cho mô tả danh mục sản phẩm với mọi theme có sử dụng Woocommerce nhé

<br />
/*<br />
* Thêm mục lục cho mô tả danh mục sản phẩm<br />
* Author: az9s.com<br />
*/<br />
add_action(‘wp_footer’, ‘devvn_add_heading_style’);<br />
function devvn_add_heading_style(){<br />
?&gt;<br />
&lt;style&gt;<br />
.devvn_heading_wrap {<br />
background: rgba(243,243,243,0.95);<br />
border: 1px solid rgb(197 197 197);<br />
width: 100%;<br />
color: #333;<br />
margin: 0 0 20px 0;<br />
padding: 0;<br />
}<br />
.devvn_heading_title {<br />
padding: 10px 15px;<br />
background: #c5c5c5;<br />
position: relative;<br />
cursor: pointer;<br />
}<br />
.devvn_heading_wrap &gt; ol {<br />
margin: 10px 0 10px 33px;<br />
}<br />
.devvn_heading_wrap &gt; ol &gt; li {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
.devvn_heading_wrap &gt; ol &gt; li ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
.devvn_heading_wrap &gt; ol &gt; li ul li {<br />
margin: 0;<br />
padding: 0;<br />
list-style: none;<br />
}<br />
.devvn_heading_wrap &gt; ol {<br />
counter-reset: List;<br />
}<br />
.devvn_heading_wrap &gt; ol &gt; li {<br />
counter-increment: List;<br />
}<br />
.devvn_heading_wrap &gt; ol &gt; li ul {<br />
counter-reset: List;<br />
}<br />
.devvn_heading_wrap &gt; ol &gt; li ul li {<br />
counter-increment: List;<br />
}<br />
.devvn_heading_wrap &gt; ol &gt; li ul li:before {<br />
content: counters(List,”.”);<br />
}<br />
.devvn_heading_title strong {<br />
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgEAQAAACJ4248AAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAAAqo0jMgAAAAlwSFlzAAAAYAAAAGAA8GtCzwAAAAd0SU1FB+cJBA8RMDu7ID0AAAKXSURBVFjD7ZVNSBtBGIa/mV1Nfw6BtgoVidp6KPbSZj20CppCL6WHeqhgTDZGCIJSUGOQlGiagElIicHUQ+qaQGx0D+mp0EOhPyAoQssuCqXXUkIoVKWtFamszfQQTKKbg4fJyTynmXkG3vmGbxiACqcd1PxMo9EmfD4Y6+kBRlGIThDktmAQIJsFAGhJVVef/eHxkOs8jxz19VRS7ZkM3BfF3y8mJ5H+y/Q04u32Yk+CIyPy3UgEAED/aGoKrblcZSnfEgphaO7tVV3LX7M5P+lSe1qQQbMZw+rBgcowipI/zM8SntoJFAUjQzyuuoFALJaf7Kk9NTZiMdTdzTBf342NEavJRAz7+8grCJIcjwMQktuFcWvd8HBWsFjQdkMDleD1dJp8W1y8yoTDZSuuwklBnL6qCgYmJuCi0QiMohBhfl5+E4kc9kAnYdnduNNJdDyPvtfUUEk9t7UFD0UROJ8PcVwgAOB0Ht0xNCRJ0SgAgP6j240Gvd6ylL/q92OAvr7j6+SD1Zqf7BSNadPe34/h9uFzK4DuFNbQeO5PKAv2bBbDtYUFlXiSSBROU8JTgqwlErkmlFwu8tZohH+KglyCIMmzs8VN+IcfHwfBYkEva2upBF/e3ISUKCLZ7y9XcRVODOokLLvb6nBAh9EIWFFIx9yc/CAWK/6MOG50FNw8D790Oiqp6+k03BDFK69DIcQ993ph3u0+smHKZpPu5b5hjnM6AQKBclRPbno8GD7bbCrzvmiNlPC0MNlsmIQxVgkDy+bzn5bwtGhnWYxuLS2phDuZzI8vlPCUQHvJJHP+8fLymbBGA5caG0nX9jZqCQal6MzMYRPWfVpZIW0YQ6qpCcW1WirJ9kyGDESjO6+O9V6FU8l/eGH2Ze896egAAAAASUVORK5CYII=) no-repeat left center;<br />
background-size: 22px 22px !important;<br />
padding-left: 32px;<br />
text-transform: uppercase;<br />
}<br />
.devvn_heading_title::after {<br />
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgEAQAAACJ4248AAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAAAqo0jMgAAAAlwSFlzAAAAYAAAAGAA8GtCzwAAAAd0SU1FB+cJBA8REu7bYdkAAAHLSURBVFjD7ZS9S8NAGId/l0a0QaiuDl3cXIScg2CrRQhSuruKf4GggthSN1P6KYKTi7vtVmIpQehgFzHFycmPQfBjakGpIsI5SEtr05qmaQXJD27J+949T94jAezYsQNggfE8FV2uQfGm2djYAuN5AOBoRZJeis/PIJWK+JBOUyoI/QJTKgjiYSbDz5TLL59PT7QiSYSK19cgk5O1JqYWCkQKBDStWrUazlRFIZLPV3/Ibm44oHn0RPL5mKooVk5CFw4AcLk4cheP/9xgpUR7OIC1RIK7KMdiKMqyngSQz08dj472AoeUzerB2dLenrYSjZJ68/vuLuaCwdZjzs7etvz+q+XXVzNwqIuLevCSvL4OAKRpk0USRuEtAlZIdAPXFehFolt4WwEzEmbgAMC1E9BGQiGsRiKtFY/HGc3lGr8Os3AAcKBDHk9OTydCw8O49HqbK273UHF+fnw/nXbf8rxZeMcraBqvmEiAbGy0ANRCAaj9M34Wk0mttLn529mGBACAHsgyjra3jfQaefNaHEaagE7XYR7elYARiW7hpkMPZJlSxhqXGEyl+g5ujHi+s0Ppx8f3CocHCq9PggrC7L3T+SdwO3b+Tb4AHn8FI1FdY6oAAAAASUVORK5CYII=) no-repeat center center;<br />
width: 12px;<br />
height: 12px;<br />
background-size: 100% 100%;<br />
right: 15px;<br />
top: 50%;<br />
margin-top: -6px;<br />
content: “”;<br />
position: absolute;<br />
transition: all .3s linear;<br />
-moz-transition: all .3s linear;<br />
-webkit-transition: all .3s linear;<br />
}<br />
.devvn_heading_wrap.active .devvn_heading_title::after {<br />
transform: rotate(180deg);<br />
-moz-transform: rotate(180deg);<br />
-webkit-transform: rotate(180deg);<br />
}<br />
&lt;/style&gt;<br />
&lt;script&gt;<br />
(function ($){<br />
$(‘body’).on(‘click’, ‘.devvn_heading_title’, function (){<br />
let thisBox = $(this).closest(‘.devvn_heading_wrap’);<br />
if(thisBox.hasClass(‘active’)){<br />
$(‘&gt; ol’, thisBox).slideUp();<br />
}else{<br />
$(‘&gt; ol’, thisBox).slideDown();<br />
}<br />
thisBox.toggleClass(‘active’);<br />
});<br />
$(‘.devvn_heading_wrap a’).on(‘click’, function (){<br />
let idElement = $(this).attr(“href”);<br />
let top = $(idElement).offset().top;<br />
$(‘html, body’).animate({scrollTop:top-44}, 500 );<br />
return false;<br />
})<br />
})(jQuery);<br />
&lt;/script&gt;<br />
&lt;?php<br />
}<br />
add_filter(‘woocommerce_taxonomy_archive_description_raw’, ‘devvn_auto_add_heading_ids’);<br />
function devvn_auto_add_heading_ids($content) {<br />
$content = wp_kses_post( $content );<br />
$dom = new DOMDocument();<br />
if(!$content) return $content;<br />
$dom-&gt;loadHTML(mb_convert_encoding( $content, ‘HTML-ENTITIES’, ‘UTF-8’));<br />
$xpath = new DOMXPath($dom);<br />
$headings = $xpath-&gt;query(‘//h2|//h3’);<br />
$table_content = array();<br />
$h2 = 0;<br />
foreach ($headings as $index =&gt; $heading) {<br />
$headingText = $heading-&gt;textContent;<br />
$id = sanitize_title($headingText);<br />
$id = ensure_unique_id($id, $xpath, $index);<br />
$heading-&gt;setAttribute(‘id’, $id);<br />
if($heading-&gt;tagName == ‘h2’) {<br />
$h2++;<br />
$table_content[$h2] = array(<br />
‘title’ =&gt; $headingText,<br />
‘href’ =&gt; ‘#’.$id,<br />
);<br />
}elseif($heading-&gt;tagName == ‘h3’) {<br />
$table_content[$h2][‘child’][] = array(<br />
‘title’ =&gt; $headingText,<br />
‘href’ =&gt; ‘#’.$id,<br />
);<br />
}<br />
}<br />
$newContent = $dom-&gt;saveHTML();<br />
$table_content_out=””;<br />
if($table_content){<br />
ob_start();<br />
?&gt;<br />
&lt;div class=”devvn_heading_wrap active”&gt;<br />
&lt;div class=”devvn_heading_title”&gt;<br />
&lt;strong&gt;&lt;?php _e(‘Mục lục’, ‘devvn’);?&gt;&lt;/strong&gt;<br />
&lt;/div&gt;<br />
&lt;ol&gt;<br />
&lt;?php foreach ($table_content as $item):?&gt;<br />
&lt;?php<br />
$title = isset($item[‘title’]) ? sanitize_text_field($item[‘title’]) : ”;<br />
$href = isset($item[‘href’]) ? esc_attr($item[‘href’]) : ”;<br />
$child = isset($item[‘child’]) ? (array) $item[‘child’] : array();<br />
if(!$title) continue;<br />
?&gt;<br />
&lt;li&gt;&lt;a href=”https://blog.az9s.com/cach-tao-muc-luc-cho-danh-muc-san-pham/&lt;?php echo $href;?&gt;” title=”&lt;?php echo $title;?&gt;”&gt;&lt;?php echo $title;?&gt;&lt;/a&gt;&lt;?php if($child){?&gt;&lt;ul&gt;&lt;?php foreach ($child as $child_item):?&gt;<br />
&lt;?php<br />
$child_title = isset($child_item[‘title’]) ? sanitize_text_field($child_item[‘title’]) : ”;<br />
$child_href = isset($child_item[‘href’]) ? esc_attr($child_item[‘href’]) : ”;<br />
if(!$child_title) continue;<br />
?&gt;<br />
&lt;li&gt;<br />
&lt;a href=”&lt;?php echo $child_href;?&gt;” title=”&lt;?php echo $child_title;?&gt;”&gt;&lt;?php echo $child_title;?&gt;&lt;/a&gt;<br />
&lt;/li&gt;<br />
&lt;?php endforeach;?&gt;&lt;/ul&gt;&lt;?php }?&gt;&lt;/li&gt;<br />
&lt;?php endforeach;?&gt;<br />
&lt;/ol&gt;<br />
&lt;/div&gt;<br />
&lt;?php<br />
$table_content_out = ob_get_clean();<br />
}<br />
return $table_content_out . $newContent;<br />
}<br />
if(!function_exists(‘ensure_unique_id’)) {<br />
function ensure_unique_id($id, $xpath, $index)<br />
{<br />
$existingIds = [];<br />
$existingHeadings = $xpath-&gt;query(‘//h2[@id] | //h3[@id]’);<br />
foreach ($existingHeadings as $existingHeading) {<br />
$existingId = $existingHeading-&gt;getAttribute(‘id’);<br />
$existingIds[] = $existingId;<br />
}<br />
if (in_array($id, $existingIds)) {<br />
$i = 1;<br />
$newId = $id . ‘-‘ . $i;<br />
while (in_array($newId, $existingIds)) {<br />
$i++;<br />
$newId = $id . ‘-‘ . $i;<br />
}<br />
return $newId;<br />
}<br />
return $id;<br />
}<br />
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

* Thêm mục lục cho mô tả danh mục sản phẩm

* Author: az9s.com

add_action(‘wp_footer’, ‘devvn_add_heading_style’);

function devvn_add_heading_style(){

<style>

.devvn_heading_wrap {

background: rgba(243,243,243,0.95);

border: 1px solid rgb(197 197 197);

width: 100%;

color: #333;

margin: 0 0 20px 0;

padding: 0;

}

.devvn_heading_title {

padding: 10px 15px;

background: #c5c5c5;

position: relative;

cursor: pointer;

}

.devvn_heading_wrap > ol {

margin: 10px 0 10px 33px;

}

.devvn_heading_wrap > ol > li {

margin: 0;

padding: 0;

}

.devvn_heading_wrap > ol > li ul {

margin: 0;

padding: 0;

}

.devvn_heading_wrap > ol > li ul li {

margin: 0;

padding: 0;

list–style: none;

}

.devvn_heading_wrap > ol {

counter–reset: List;

}

.devvn_heading_wrap > ol > li {

counter–increment: List;

}

.devvn_heading_wrap > ol > li ul {

counter–reset: List;

}

.devvn_heading_wrap > ol > li ul li {

counter–increment: List;

}

.devvn_heading_wrap > ol > li ul li:before {

content: counters(List,“.”);

}

.devvn_heading_title strong {

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgEAQAAACJ4248AAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAAAqo0jMgAAAAlwSFlzAAAAYAAAAGAA8GtCzwAAAAd0SU1FB+cJBA8RMDu7ID0AAAKXSURBVFjD7ZVNSBtBGIa/mV1Nfw6BtgoVidp6KPbSZj20CppCL6WHeqhgTDZGCIJSUGOQlGiagElIicHUQ+qaQGx0D+mp0EOhPyAoQssuCqXXUkIoVKWtFamszfQQTKKbg4fJyTynmXkG3vmGbxiACqcd1PxMo9EmfD4Y6+kBRlGIThDktmAQIJsFAGhJVVef/eHxkOs8jxz19VRS7ZkM3BfF3y8mJ5H+y/Q04u32Yk+CIyPy3UgEAED/aGoKrblcZSnfEgphaO7tVV3LX7M5P+lSe1qQQbMZw+rBgcowipI/zM8SntoJFAUjQzyuuoFALJaf7Kk9NTZiMdTdzTBf342NEavJRAz7+8grCJIcjwMQktuFcWvd8HBWsFjQdkMDleD1dJp8W1y8yoTDZSuuwklBnL6qCgYmJuCi0QiMohBhfl5+E4kc9kAnYdnduNNJdDyPvtfUUEk9t7UFD0UROJ8PcVwgAOB0Ht0xNCRJ0SgAgP6j240Gvd6ylL/q92OAvr7j6+SD1Zqf7BSNadPe34/h9uFzK4DuFNbQeO5PKAv2bBbDtYUFlXiSSBROU8JTgqwlErkmlFwu8tZohH+KglyCIMmzs8VN+IcfHwfBYkEva2upBF/e3ISUKCLZ7y9XcRVODOokLLvb6nBAh9EIWFFIx9yc/CAWK/6MOG50FNw8D790Oiqp6+k03BDFK69DIcQ993ph3u0+smHKZpPu5b5hjnM6AQKBclRPbno8GD7bbCrzvmiNlPC0MNlsmIQxVgkDy+bzn5bwtGhnWYxuLS2phDuZzI8vlPCUQHvJJHP+8fLymbBGA5caG0nX9jZqCQal6MzMYRPWfVpZIW0YQ6qpCcW1WirJ9kyGDESjO6+O9V6FU8l/eGH2Ze896egAAAAASUVORK5CYII=) no–repeat left center;

background–size: 22px 22px !important;

padding–left: 32px;

text–transform: uppercase;

}

.devvn_heading_title::after {

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgEAQAAACJ4248AAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAAAqo0jMgAAAAlwSFlzAAAAYAAAAGAA8GtCzwAAAAd0SU1FB+cJBA8REu7bYdkAAAHLSURBVFjD7ZS9S8NAGId/l0a0QaiuDl3cXIScg2CrRQhSuruKf4GggthSN1P6KYKTi7vtVmIpQehgFzHFycmPQfBjakGpIsI5SEtr05qmaQXJD27J+949T94jAezYsQNggfE8FV2uQfGm2djYAuN5AOBoRZJeis/PIJWK+JBOUyoI/QJTKgjiYSbDz5TLL59PT7QiSYSK19cgk5O1JqYWCkQKBDStWrUazlRFIZLPV3/Ibm44oHn0RPL5mKooVk5CFw4AcLk4cheP/9xgpUR7OIC1RIK7KMdiKMqyngSQz08dj472AoeUzerB2dLenrYSjZJ68/vuLuaCwdZjzs7etvz+q+XXVzNwqIuLevCSvL4OAKRpk0USRuEtAlZIdAPXFehFolt4WwEzEmbgAMC1E9BGQiGsRiKtFY/HGc3lGr8Os3AAcKBDHk9OTydCw8O49HqbK273UHF+fnw/nXbf8rxZeMcraBqvmEiAbGy0ANRCAaj9M34Wk0mttLn529mGBACAHsgyjra3jfQaefNaHEaagE7XYR7elYARiW7hpkMPZJlSxhqXGEyl+g5ujHi+s0Ppx8f3CocHCq9PggrC7L3T+SdwO3b+Tb4AHn8FI1FdY6oAAAAASUVORK5CYII=) no–repeat center center;

width: 12px;

height: 12px;

background–size: 100% 100%;

right: 15px;

top: 50%;

margin–top: –6px;

content: “”;

position: absolute;

transition: all .3s linear;

–moz–transition: all .3s linear;

–webkit–transition: all .3s linear;

}

.devvn_heading_wrap.active .devvn_heading_title::after {

transform: rotate(180deg);

–moz–transform: rotate(180deg);

–webkit–transform: rotate(180deg);

}

</style>

(function ($){

$(‘body’).on(‘click’, ‘.devvn_heading_title’, function (){

let thisBox = $(this).closest(‘.devvn_heading_wrap’);

if(thisBox.hasClass(‘active’)){

$(‘> ol’, thisBox).slideUp();

}else{

$(‘> ol’, thisBox).slideDown();

}

thisBox.toggleClass(‘active’);

});

$(‘.devvn_heading_wrap a’).on(‘click’, function (){

let idElement = $(this).attr(“href”);

let top = $(idElement).offset().top;

$(‘html, body’).animate({scrollTop:top–44}, 500 );

return false;

})

})(jQuery);

</script>

<?php

}

add_filter(‘woocommerce_taxonomy_archive_description_raw’, ‘devvn_auto_add_heading_ids’);

function devvn_auto_add_heading_ids($content) {

$content = wp_kses_post( $content );

$dom = new DOMDocument();

if(!$content) return $content;

$dom–>loadHTML(mb_convert_encoding( $content, ‘HTML-ENTITIES’, ‘UTF-8’));

$xpath = new DOMXPath($dom);

$headings = $xpath–>query(‘//h2|//h3’);

$table_content = array();

$h2 = 0;

foreach ($headings as $index => $heading) {

$headingText = $heading–>textContent;

$id = sanitize_title($headingText);

$id = ensure_unique_id($id, $xpath, $index);

$heading–>setAttribute(‘id’, $id);

if($heading–>tagName == ‘h2’) {

$h2++;

$table_content[$h2] = array(

‘title’ => $headingText,

‘href’ => ‘#’.$id,

);

}elseif($heading–>tagName == ‘h3’) {

$table_content[$h2][‘child’][] = array(

‘title’ => $headingText,

‘href’ => ‘#’.$id,

);

}

$newContent = $dom–>saveHTML();

$table_content_out = ”;

if($table_content){

ob_start();

</div>

<ol>

<?php foreach ($table_content as $item):?>

<?php

$title = isset($item[‘title’]) ? sanitize_text_field($item[‘title’]) : ”;

$href = isset($item[‘href’]) ? esc_attr($item[‘href’]) : ”;

$child = isset($item[‘child’]) ? (array) $item[‘child’] : array();

if(!$title) continue;

<li><a href=“https://blog.az9s.com/cach-tao-muc-luc-cho-danh-muc-san-pham/<?php echo $href;?>” title=“<?php echo $title;?>”><?php echo $title;?></a><?php if($child){?><ul><?php foreach ($child as $child_item):?>

<?php

$child_title = isset($child_item[‘title’]) ? sanitize_text_field($child_item[‘title’]) : ”;

$child_href = isset($child_item[‘href’]) ? esc_attr($child_item[‘href’]) : ”;

if(!$child_title) continue;

<li>

<a href=“<?php echo $child_href;?>” title=“<?php echo $child_title;?>”><?php echo $child_title;?></a>

</li>

<?php endforeach;?></ul><?php }?></li>

<?php endforeach;?>

</ol>

</div>

<?php

$table_content_out = ob_get_clean();

}

return $table_content_out . $newContent;

}

if(!function_exists(‘ensure_unique_id’)) {

function ensure_unique_id($id, $xpath, $index)

{

$existingIds = [];

$existingHeadings = $xpath–>query(‘//h2[@id] | //h3[@id]’);

foreach ($existingHeadings as $existingHeading) {

$existingId = $existingHeading–>getAttribute(‘id’);

$existingIds[] = $existingId;

}

if (in_array($id, $existingIds)) {

$i = 1;

$newId = $id . ‘-‘ . $i;

while (in_array($newId, $existingIds)) {

$i++;

$newId = $id . ‘-‘ . $i;

}

return $newId;

}

return $id;

}

Tuỳ chỉnh thẻ Canonical cho WordPress và Woocommerce

Làm trang web nhanh hơn với PHP OPcache

Lợi Ích Của ChatGPT Trong Lĩnh Vực Kinh Doanh

Một số hook thông dụng trong woocommerce nên biết

CÁCH NGHIÊN CỨU TỪ KHÓA SEO CHO WEB ON TOP 2025

Tin tức

Cách thêm mục lục (table of content) cho mô tả danh mục sản phẩm

Cách thêm mục lục (table of content) cho mô tả danh mục sản phẩm

HÌNH ẢNH TRONG CONTENT QUAN TRỌNG NHƯ THẾ NÀO?

Quy trình tự động đăng video lên Youtube từ Google Sheet

Hướng Dẫn Viết Bài Trên Website (Chuẩn SEO)

8 cách giúp người giàu càng giàu hơn

CÁC BƯỚC KINH DOANH QUÁN CÀ PHÊ THÀNH CÔNG

Quy trình tạo đề xuất bán hàng tự động hóa hiệu quả với nền tảng n8n