l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在WordPress文章中添加作者信息框（5种方法）

如何在WordPress文章中添加作者信息框（5种方法）

Bug编译狮

Bug编译狮

在WordPress的文章页面上添加作者信息框是一个常见的需求，可以帮助用户了解文章的来源和作者背景。以下是五种不同的方法来实现这一功能：

方法一：使用插件“Author Box”

  1. 安装插件：

    • 登录到您的WordPress后台。
    • 找到“插件”部分，点击“安装新插件”，搜索并选择“Author Box”。
    • 安装完成后，启用该插件。

  2. 配置插件：

    • 在插件设置中，您可以调整显示位置、样式等选项。

  3. 添加到文章：

    • 当您编辑文章时，只需在适当的位置插入<div class="author-box">标签即可。

示例代码：

<div class="author-box">
    <h4>作者名</h4>
    <span>作者描述或链接</span>
</div>

方法二：手动创建HTML元素

  1. 编辑模板文件：

    • 寻找与文章相关的内容区域，如single.php或page.php。
    • 插入以下HTML代码：
    <div class="author-info">
   <img src="{{ author.image }}" alt="{{ author.name }}">
   <p>{{ author.bio }}</p>
</div>

  2. 替换占位符：

    • 将{{ author.image }}, {{ author.name }}, 和{{ author.bio }}替换为实际的值。

方法三：使用PHP函数输出作者信息

  1. 编辑文章模板：

    • 找到与文章相关的模板文件，例如single.php或page.php。
    • 添加如下PHP代码：
    <?php if (is_single()) : ?>
   <div class="author-info">
       <?php the_author_meta('display_name'); ?> | 
       <?php the_author_meta('description'); ?>
   </div>
<?php endif; ?>

  2. 查看效果：

    • 这样，当文章单页打开时，会自动显示作者的名字和简介。

方法四：使用自定义字段

  1. 添加自定义字段：

    • 登录到WordPress管理后台，进入“帖子”或“页面”列表，找到您想添加作者信息的页面。
    • 点击“编辑”按钮，然后转到“文本”区域。
    • 为每个作者添加一个自定义字段，例如“作者姓名”和“作者描述”。

  2. 获取字段数据：

    • 使用PHP获取这些自定义字段的数据并在文章中显示。

示例代码：

<?php $authorName = get_field('author_name', 'post'); ?>
<?php echo $authorName . ' ' . get_field('author_description', 'post'); ?>

方法五：使用短代码

  1. 创建短代码：

    • 创建一个新的短代码，例如[author_info]。
    • 编辑这个短代码以提取作者信息并显示。

  2. 应用短代码：

    • 在文章中插入[author_info]短代码。

结论

以上五种方法各有优缺点，可以根据具体需求和网站布局灵活选择适合的方法。通过这种方式，不仅能够提升用户体验，还能增强网站的专业感和个性化体验。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

在WordPress中添加作者信息框是一种常见的需求，它可以让访客了解作者是谁以及他们的身份背景等信息。以下是我将介绍的五种方法来实现这一功能：

方法一：使用author标签

示例代码：

<?php the_author_meta('display_name'); ?>

解释：

这个简单的示例代码通过the_author_meta()函数获取当前文章的作者姓名并显示出来。

方法二：自定义主题插件

示例代码：

  1. 创建一个名为 add_author_info.php 的文件。
  2. 在其中添加以下代码：
function add_author_info() {
    $author = get_the_author();
    if (is_user_logged_in()) {
        echo '<div class="author-info">';
        echo '<img src="' . get_avatar(get_current_user_id(), 30) . '" alt="' . esc_html($author->display_name) . '">';
        echo '<h3>' . esc_html($author->display_name) . '</h3>';
        echo '<p>' . esc_html($author->name) . '</p>';
        echo '</div>';
    }
}
add_action('wp_head', 'add_author_info');
  1. 在WordPress安装目录下的functions.php文件中启用该插件，如：
require_once ABSPATH . 'wp-admin/includes/plugin.php';
register_activation_hook(__FILE__, 'uninstall_author_info');
register_deactivation_hook(__FILE__, 'deactivate_author_info');
register_script('author_info', plugin_dir_url(__FILE__) . 'js/add_author_info.js', array('jquery'));
add_action('admin_init', 'enable_author_info');
  1. 激活此插件后，在WordPress顶部菜单栏或设置 > 首页和搜索 > 站点标题和描述处启用“显示用户头像”。

方法三：使用第三方库

示例代码：

  1. 使用 wp-author-box 和 wp-custom-meta。
  2. 在HTML模板文件中添加以下代码：
<div id="author-box">
    <?php the_author_meta( 'display_name' ); ?>
</div>
  1. 在您的主题或其他自定义样式中引入 wp-author-box 和 wp-custom-meta CSS类以调整外观。

方法四：使用自定义模块

示例代码：

  1. 创建一个名为 author-info-module.php 的文件。
  2. 在其中添加以下代码：
function custom_module() {
    wp_register_script(
        'custom-author-info',
        plugins_url('/js/custom-author-info.js', __FILE__),
        array(),
        '1.0'
    );
    wp_enqueue_script('custom-author-info');

    register_block_type(
        BLOCK_ID,
        [
            'editor_style' => false,
            'render_callback' => function () {
                return '<div class="author-info"><img src="' . get_avatar(get_current_user_id(), 30) . '" alt="' . esc_html(get_the_author_meta('display_name')) . '">' . esc_html(get_the_author_meta('display_name')) . '</div>';
            },
        ]
    );
}
add_action('init', 'custom_module');
  1. 启用此模块并在WordPress顶部菜单栏启用“显示用户头像”。

方法五：利用自定义插件

示例代码：

  1. 创建一个名为 author_info_shortcode.php 的文件。
  2. 在其中添加以下代码：
function author_info_shortcode() {
    $args = array(
        'title' => 'Author Info',
        'fields' => array(
            'display_name' => array(
                'label' => __('Name'),
                'type' => 'text',
            ),
            'job_title' => array(
                'label' => __('Job Title'),
                'type' => 'text',
            ),
            'bio' => array(
                'label' => __('Bio'),
                'type' => 'textarea',
            ),
        ),
    );

    ob_start();
    do_shortcode('[author_info]');
    $content = ob_get_clean();

    // Replace shortcode with your own content.
    return $content;
}
add_shortcode('author_info', 'author_info_shortcode');
  1. 将上述代码保存为 author_info_shortcode.php 并将其放在 WordPress主题的 inc/shortcodes/author_info 文件夹下。

结论

以上五种方法展示了如何在WordPress文章中添加作者信息框。每种方法都有其适用场景和优缺点，请根据实际需求选择最适合的方法。

最新更新