Question

我有一篇由WordPress用户创建的文章很长，我想在每个文章页面上显示一个导航，其中包含指向当前文章标题的链接。

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>

上面的例子是你如何硬编码，但我的文章文本显然是可变的，我的链接也是如此，用php解决这个问题的最佳方法是什么？

编辑：情况与示例不完全相同，用户将文本放入wordpress文本编辑器字段并且不想编写html标记，因此导航需要填写用户放置的标题在文本字段中，这些链接到页面上的变量标题。（我假设有一个锚）

功能类似Microsoft Word：

Answer 1

您可以filter the content为了定位不同的标题，在每个标题上使用sanitize_title以slug的形式添加ID，并构建这些标题的分层数组以显示在帖子顶部的锚点菜单。

我刚刚为此示例编写了此过滤器，但它完全没有经过测试，所以您可能需要稍微调试一下并根据您的需要进行更改。请注意，它最适用于3级层次结构。

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');

Answer 2

在你的标记中

<h1 id="<?php echo get_the_title(); ?>">Title 1</h1>
<a href="#<?php echo get_the_title(); ?>">Anchor link to title 1</a>

你也应该在href属性中使用esc_url（）。

变量后的变量锚标签Wordpress

2 个答案: