变量后的变量锚标签Wordpress

Question

i have a very long article created by a user in Wordpress , i want to show a navigation on every article page with links to the titles of the current article.

e.g: 
<h1 id='title1'>Title 1</h1>
bla bla bla
<h1 id='title2'>Title 2</h1>
bla bla

my navigation on this page would be <a href="#title1">Anchor link to title 1</a>

The example above is how you would hardcode it, but my article text is obviously variable and so are my links, what is the best way to tackle this with php?

Edit: the situation is not exactly like the example, the user puts text into a wordpress text editor field and doesnt want to write html tags, so the navigation needs to be filled with the titles that the user has put in the text field and those link to the variable titles on the page. (with an anchor i assume)

the functionality would be something like Microsoft word:

Answer 1

You can filter the content in order to target the different titles, add an ID in a form of a slug using sanitize_title on each of them and build a hierarchical array of those titles in order to display the anchor menu on top of the post.

I just wrote this filter for the example, but it is totally not tested so you may have to debug it a bit and change it depending of your needs. Please note that it works for a 3 level hierarchy maximum.

function add_anchor_menu($content) {
    // First you may want to do some check here to see if this filter should be trigger on the current post...

    $arrayTitles = array();

    // Generate the ids...
    $content = preg_replace_callback(
        '#<h([1-3])>(.*?)<\/h[1-3]>#',
        function($matches) {
            $id = sanitize_title($matches[2]);
            $meta = array('id' => $id, 'title' => $matches[2], 'childs' => array());
            if((int)$matches[1] == 1) {
                array_push($arrayTitles, $meta);
            } elseif((int)$matches[1] == 2) {
                end($arrayTitles);
                array_push($arrayTitles[key($arrayTitles)]['childs'], $meta);
            } else {
                end($arrayTitles);
                end($arrayTitles[key($arrayTitles)]['childs']);
                array_push($arrayTitles[key($arrayTitles)]['childs'][key($arrayTitles[key($arrayTitles)])], $meta);
            }
            return '<h' . $matches[1] . ' id="' . $id . '">' . $matches[2] . '</h' . $matches[1] . '>';
        },
        $content
    );

    // And generate the menu...
    if(count($arrayTitles) > 0) {
        $menu = '<ul id="anchor-menu">';
        foreach($arrayTitles as $level1) {
            $menu .= '<li>';
            $menu .= '<a href="#' . $level1['id'] . '">' . $level1['title'] . '</a>';
            if(count($level1['childs']) > 0) {
                $menu .= '<ul>';
                foreach($level1['childs'] as $level2) {
                    $menu .= '<li>';
                    $menu .= '<a href="#' . $level2['id'] . '">' . $level2['title'] . '</a>';
                    if(count($level2['childs']) > 0) {
                        $menu .= '<ul>';
                        foreach($level2['childs'] as $level3) {
                            $menu .= '<li><a href="#' . $level3['id'] . '">' . $level3['title'] . '</a></li>';
                        }
                        $menu .= '</ul>';
                    }
                    $menu .= '</li>';
                }
                $menu .= '</ul>';
            }
            $menu .= '</li>';
        }
        $menu .= '<ul>';
        $content = $menu . $content;
    }

    return $content;
}
add_filter('the_content', 'add_anchor_menu');