如何编辑原始wordpress HTML源代码并添加图标？

Question

你好，我想知道如何编辑wordpress html和添加自定义html，例如，我想在链接旁边添加html元素，比如图标。以下是代码：

wordpress原始源代码：

<a rel="nofollow" class="comment-reply-link"> Reply </a>

我想编辑这个wordpress html代码来添加这个图标如下：

<a rel="nofollow" class="comment-reply-link">
<i class="material-icons"> Reply </i>
</a>

更新:另一个需要澄清的例子:我想在链接中添加自定义id，这是wordpress博客评论元素源代码，而不是主题源代码。拜托，怎么做？并提前表示感谢

Answer 1

HTML是在get_comment_reply_link函数中生成的：

https://github.com/WordPress/WordPress/blob/0418dad234c13a88e06f5e50c83bcebaaf5ab211/wp-includes/comment-template.php#L1654

这给了我们所需要的。以下是三种选择：

1. 函数接受一个参数数组，reply_text是其中一个选项，所以只需将这个值设置为您想要的(例如，'reply_text' => '<i class="material-icons"> Reply </i>' )
2. 函数的末尾有一个过滤器，使您有机会修改名为comment_reply_link的整个链接，查找该过滤器的文档以获得详细信息
3. 您根本不需要修改HTML标记，这可以用CSS来完成

更改对get_comment_reply_link的调用将需要更改主题，可能需要创建注释模板。您将需要调整wp_list_comments以接受一个带有函数的callback参数来显示注释，从而允许您更改其HTML。

使用过滤器可以在主题functions.php或插件中完成。

使用CSS将要求您查询您所选择的材料设计库。

Answer 2

TL:DR;

快速回答是，您不能添加文本到自定义图标库html标记。下面是如何对其进行格式化。

根据来自Material的文档，您需要这样的内容：

<a rel="nofollow" class="comment-reply-link">
<span class="material-icons">reply</span> Reply 
</a>

文档：http://google.github.io/material-design-icons/#using-the-icons-in-html

长答案

您可以使用自定义图标库，如Material Icons或Font Awesome。

让我们假设您想使用Font。

转到https://fontawesome.com/start开始创建一个自我托管的图标工具包。在创建工具包之前，您可能需要创建一个免费帐户。

只需给出您的项目名称，并单击Create & Use。

一旦您创建了您的工具包，您将有一个如下所示的工具包链接：

<script src="https://kit.fontawesome.com/XXXXXXXXX.js" crossorigin="anonymous"></script>

复制此代码并在您的header.php项目中查看您的WordPress文件。

一旦进入，请进入<head>部分并将代码粘贴到其中。

<!doctype html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="profile" href="https://gmpg.org/xfn/11" />
    <?php wp_head(); ?>

    <script src="https://kit.fontawesome.com/XXXXXXXXX.js" crossorigin="anonymous"></script>

</head>

<body>
  ...

注意:建议使用wp_enqueue_script()函数。您可以在WordPress Codex：https://developer.wordpress.org/reference/functions/wp_排队_脚本/上找到文档

您可以保存您的文件，现在进入您想要编辑HTML的模板文件。

你可以浏览字体的免费图标，并找到一个符合你的需要的图标：https://fontawesome.com/icons?d=gallery&m=free

一旦您有了图标，只需将html标签复制到您的WordPress模板文件中即可。

<a rel="nofollow" class="comment-reply-link">
<i class="fas fa-reply fa-flip-horizontal"></i> Reply
</a>

重新加载页面时，您将能够看到图标。