分析情况

当您查看（原始）示例“GitHub”及其源代码时，您会看到以下内容：

<a name="updating-submodules" class="anchor" href="#updating-submodules">
    <span class="octicon octicon-link"></span>
</a>

先决条件基本上这是可能的（甚至很容易），但你必须有正确使用WordPress模板标签的主题模板。所需的功能包括the_permalink() 或基础get_the_permalink() 以及对该筛选器的操作/回调。

样式/图标首先，WordPressregisters dashicons 默认情况下，这样他们就可以排队了。因此，我们只需要：

add_action( \'wp_enqueue_scripts\', \'wpseDashiconsFrontEnd\' );
function wpseDashiconsFrontEnd()
{
    wp_enqueue_style( \'dashicons\' );
}

为了使用它们，我们传递它的CSS类dashicons-[name] 到我们要使用它的任何元素。看看Dashicons site, 单击图标并查看name 因为它在上面。

添加锚定链接：

现在，当WordPress将永久链接调用到帖子时，通常会出现以下情况：

the_title(
    sprintf(
        \'<h2><a href="%s" title="%s">\',
        get_the_permalink(),
        get_the_title()
    ),
    \'</a></h2>\',
);

然后我们要将其转换为如下内容：

the_title(
    sprintf(
        \'<h3><a href="#%1$s" name="%1$s" class="anchor"><span class="anochor-icon dashicons-admin-links"></span>\',
        get_the_title()
    ),
    \'</a></h3>\',
);

显然你想要.anchor span 具有display: none; 主样式表中的默认值，并且仅在h3:hover .anchor .anchor-icon 具有display: inline-block;.

其他信息

如果这不是关于帖子、页面或任何其他自定义帖子类型的标题列表，那么您需要在内容过滤器上执行一个操作，使DOMDocument::XPath 搜索以添加所需的标记。

您也可以编写一个10行自定义插件，将get_the_title() 并添加所需的输出。

我同意Mayeenul的观点，但问题是如何从Wordpress主题中规范书签的创建。这将很容易用文章标题来完成，但子标题是在写文章时手动生成的。如果没有JavaScript，就无法获取文章子标题的内容。尝试以下操作：

 <script type="text/javascript" src="http://www.google.com/jsapi"></script>         
 <script type="text/javascript">
        google.load("jquery", "1.3.2");

        google.setOnLoadCallback(function() {
            // initalize variable
            var $menu = \'\';
            // select all the page headings, assuming that h1 is only used once (for the main page title)
            $("h2, h3, h4, h5, h6").each(function () {
                // Dirify heading text to create the anchor
                $anchor = dirify($(this).text());
                };
                // Append anchor to heading
                $(this).append(\'<a title="Link to this section" class="anchor" href="#\' + $anchor + \'"> ¶</a>\').attr(\'id\', $anchor);
            });
        });
    </script>

如果不在此处包含dirify（）函数，则无法执行此操作：

http://www.beausmith.com/mt/2009/07/dirify-function-in-javascript.php

这是工作小提琴：

http://jsfiddle.net/7Tj2v/

链接到副标题称为书签。它可以使用一个简单的锚标记来完成，但其中没有实际的http链接。

<a href="#my-sub-heading">My Sub Heading</a>

因此，完整的链接将是：

http://example.com/main-heading#my-sub-heading

希望它能回答你。

如果the plugin 手动执行此操作，您可以将其修改为适用于页面和自定义帖子类型。只是你必须处理\'post_type\' = \'page\' 或\'your-custom-post-type\'.