Use pure code to add article directory function to WordPress, supporting fast positioning and multi-level directories

Last update at ：2024-01-30，Edit by888u

Wordpress is a powerful blog system that supports various DIYs. Today I will show you the function of adding an article directory to WordPress using pure code, making it easier to read articles! It also supports clicking the catalog title to quickly locate the specified content point on the article page.

1. Article directory code

Add the following code to your theme’s Functions.php file

//us-www.zhujizhen.com //Article directory function article_index($content) { $matches = array(); $ul_li = ''; $r = '/(.*?)<\/h[2-6]>/is'; if(is_single() && preg_match_all($r, $content, $matches)) { foreach($matches[1] as $key => $value) { $title = trim(strip_tags($matches[2][$key])); $content = str_replace($matches[0][$key], ''.$title.'', $ content); $ul_li .= '

'.$title."

\n "; } $content = "\n

Article Table of Contents

\n" . $ul_li . "

\n" . $content; } return $content; } add_filter( 'the_content', 'article_index' );

2. CSS style code

Add the following code to the bottom of the theme's "main.css" file

#article-index { -moz-border-radius: 6px 6px 6px 6px; border: 1px solid #DEDFE1; float: right; margin: 0 0 15px 15px; padding: 0 6px; width: 200px; line-height: 23px; } #article-index strong { border-bottom: 1px dashed #DDDDDD; display: block; line-height: 30px; padding: 0 4px; } #index-ul { margin: 0; padding-bottom: 10px; } #index-ulli { background: none repeat scroll 0 0 transparent; list-style-type: disc; padding: 0; margin-left: 20px; }

3. Final effect

You can check the article on this site for the final effect

Recommended site searches: domain name query, Singapore server, Hong Kong server defense, virtual host Hong Kong host, US host network, apply for free space and domain name, qq proxy server ip, virtual host space, proxy server ip,

Use pure code to add article directory function to WordPress, supporting fast positioning and multi-level directories

Use pure code to add article directory function to WordPress, supporting fast positioning and multi-level directories

1. Article directory code

2. CSS style code

3. Final effect

Related

888uV

Populare

Random Tags