Category: WordPress

很多 WordPress 网站常常忽略了登录页面的重要性，而登录页面是用户与网站的第一次互动。一个默认或设计不好的 WordPress 自定义登录页面可能会降低用户体验。

而一个设计良好的登录页面不仅能给客户留下深刻印象，还能增强安全性。本文会介绍两种自定义 WordPress 登录页面的有效方法：修改 functions.php 文件以及应用自定义 CSS。

为什么需要自定义 WordPress 登录页面？

有些人可能会有疑问，登录页面的自定义是否值得投入时间，尤其是在任务清单已经很长的情况下。关于这方面的优化有几个理由：

网站品牌与设计
登录页面是用户的第一印象，它应该与网站的整体外观和风格保持一致。通过自定义颜色、字体、Logo和布局，可以为用户（尤其是忠实客户）创造统一的品牌体验。

提升用户体验
设计良好的登录页面可以增强用户体验。简洁且易用的界面能够吸引用户参与，而杂乱或难以理解的页面可能会让用户离开。投入时间优化登录体验可以显著提升用户满意度。

提高网站安全性
保护网站安全至关重要。自定义登录页面是一个有效的安全措施，可以通过隐藏默认的 WordPress 登录页面并更改其 URL，降低网站受到攻击的可能性。这不仅能减少未经授权的访问，还能增强用户对网站的信任感。

自定义默认 wp-login.php 页面的方法

有多种方法可以修改 WordPress 的登录页面。如果不想创建单独的页面，我们重点介绍两种种简单的自定义方法：

通过 functions.php 文件自定义 wp-login.php 页面

用主题的 functions.php 文件修改默认的 WordPress 登录页面时，建议先创建一个测试环境，以避免影响线上网站的正常运行。

下面是具体步骤：

1. 进入测试环境
   通过 SSH 访问新应用程序，并确认当前使用的主题。在本示例中，我们用的是 twenty-twenty-four 主题。
2. 找到主题目录
   主题目录通常位于：
   /home/master/applications/appname/public_html/wp-content/themes/twentytwentyfour
3. 编辑 functions.php 文件
   用文本编辑器打开 functions.php 文件，在文件末尾添加需要的代码。

注意：直接编辑 functions.php 文件存在一定风险。建议创建子主题，将自定义代码隔离，避免主题更新时导致问题。

下面是functions.php文件的代码：

// Add custom CSS to the login page
function custom_login_styles() {
    ?>
    <style type="text/css">
        body.login {
            background-color: #141414; /* Dark background*/
            color: #ffffff; /* White text color */
            font-family: 'Arial', sans-serif; /* Font style */
        }
        .login h1 a {
            background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png'); /* Your logo if needed */
            background-size: contain;
            background-repeat: no-repeat;
            width: 100%;
            height: 80px; /* Adjust height */
            display: block; 
            margin: 0 auto; 
        }
        .login form {
            background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent white background */
            padding: 40px;
            border-radius: 10px; /* Rounded corners */
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Shadow for depth */
            margin: 0 auto; /* Center the form */
            max-width: 400px; /* Set a maximum width for the form */
        }
        .login label {
            color: #ffffff; /* White label text */
        }
        .login input[type="text"],
        .login input[type="password"] {
            border: 1px solid #ffffff; /* White border for inputs */
            border-radius: 5px; /* Rounded corners */
            padding: 10px; /* Padding for inputs */
            width: 100%; /* Full width */
            margin-bottom: 20px; /* Space between inputs */
            background-color: rgba(255, 255, 255, 0.2);
            color: #ffffff; /* White text color */
        }
        .login #wp-submit {
            background-color: #e50914; /* red */
            border: none; /* Remove border */
            color: #ffffff; /* White text color */
            cursor: pointer; /* Pointer on hover */
            padding: 10px; /* Padding for button */
            width: 100%; /* Full width */
            border-radius: 5px; /* Rounded corners */
        }
        .login #wp-submit:hover {
            background-color: #f40612; /* Red on hover */
        }
        #nav {
            text-align: center; /* Center the navigation links */
            font-size: 12px; /* Make the font smaller */
            margin-top: 20px; /* Space above the links */
        }
        #nav a {
            color: #e50914; /* Red */
            text-decoration: none; /* Remove underline */
        }
        #nav a:hover {
            text-decoration: underline; /* Underline on hover */
        }
    </style>
    <?php
}
add_action('login_head', 'custom_login_styles');

提供的代码会修改登录页面的默认外观。现在可以自定义 CSS 以实现想要的效果。

用自定义 CSS 修改 wp-login.php

通过向 wp-login.php 文件注入自定义 CSS，可以对 WordPress 登录页面进行高度定制。但需要谨慎使用此方法，直接修改 WordPress 核心文件可能会导致问题，尤其是当对 CSS 或 WordPress 开发不熟悉时。

为了安全地尝试此方法，建议创建一个测试环境。

具体步骤如下：

准备测试站点
创建测试站点后，访问并找到 wp-login.php 文件的准确路径。通常，该文件位于 WordPress 根目录中。

备份原文件
在进行修改之前，先备份 wp-login.php 文件，可以将其重命名为类似 wp-login-original.php 的名称。

测试修改
在测试环境中彻底测试你的修改，确保没有问题后，再应用到线上网站。

注意：直接修改核心文件风险较高，用这个方法前建议仔细权衡，还要确保修改后的网站功能和样式正常运行。

接下来，进入应用程序的 public_html 文件夹。在这里可以找到 wp-login.php 文件。

需要将提供的代码直接放置在 wp-login.php 文件的 <head> 标签的起始和结束标签之间。通常，这段代码应该位于文件的最顶部。

找到 wp-login.php 文件中 <head> 部分的现有代码，并将其完全替换为提供的新代码。

下面是代码：

        ?><!DOCTYPE html>                                                                                                                                               
        <html <?php language_attributes(); ?>>                                                                                                                          
<head>                                                                                                                                                                  
    <meta charset="<?php bloginfo('charset'); ?>" />                                                                                                                    
    <title><?php wp_title(); ?></title>                                                                                                                                 
    <link rel="stylesheet" href="<?php echo includes_url('css/login.css'); ?>" type="text/css" />                                                                       
<style>                                                                                                                                                                 
      body.login {                                                                                                                                                      
        background-color: #ffffff; /* Complete background white */                                                                                                      
        font-family: Arial, sans-serif; /* Change font */                                                                                                               
    }                                                                                                                                                                   
    .login h1 {                                                                                                                                                         
        text-align: center; /* Center the logo */                                                                                                                       
        margin-bottom: 20px; /* Space below the logo */                                                                                                                 
    }                                                                                                                                                                   
    .login h1 a {                                                                                                                                                       
        background-image: url('<?php echo get_stylesheet_directory_uri(); ?>'); /* Add your logo as required */                                                                     
        background-size: contain;                                                                                                                                       
        background-repeat: no-repeat;                                                                                                                                   
        width: 100%; /* Make the logo full width */                                                                                                                     
        height: 80px; /* Adjust height */                                                                                                                               
        display: block;                                                                                                                    
    }                                                                                                                                                                   
    .login form {                                                                                                                                                       
        background-color: #d3d3d3; /* Grey background for the form */                                                                                                   
        padding: 26px;                                                                                                                                                  
        border-radius: 5px; /* Rounded corners */                                                                                                                       
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add shadow */                                                                                                       
        margin: 0 auto; /* Center the form */                                                                                                                           
        max-width: 400px; /* Set a maximum width for the form */                                                                                                        
    }                                                                                                                                                                   
    .login label {                                                                                                                                                      
        font-weight: bold; /* Bold labels */                                                                                                                            
        color: orange; /* Change label color to orange */                                                                                                               
    }                                                                                                                                                                   
    .login input[type="text"],                                                                                                                                          
    .login input[type="password"] {                                                                                                                                     
        border: 1px solid #ddd; /* Border for inputs */                                                                                                                 
        border-radius: 3px; /* Rounded corners */                                                                                                                       
        padding: 10px; /* Padding for inputs */                                                                                                                         
        width: 100%; /* Full width */                                                                                                                                   
    }                                                                                                                                                                   
    .login #wp-submit {                                                                                                                                                 
        background-color: #007cba; /* Button color */                                                                                                                   
        border: none; /* Remove border */                                                                                                                               
        color: #fff; /* Text color */                                                                                                                                   
        cursor: pointer; /* Pointer on hover */                                                                                                                         
        padding: 10px; /* Padding for button */                                                                                                                         
        width: 100%; /* Full width */                                                                                                                                   
    }                                                                                                                                                                   
    .login #wp-submit:hover {                                                                                                                                           
        background-color: #006ba1; /* Darker button on hover */                                                                                                         
    }                                                                                                                                                                   
    .custom-message {                                                                                                                                                   
        color: orange; /* Change custom message font color to orange */                                                                                                 
        text-align: center; /* Center the message */                                                                                                                    
        margin-bottom: 20px; /* Space below the message */                                                                                                              
    }                                                                                                                                                                   
    #nav {                                                                                                                                                              
        text-align: center; /* Center the navigation links */                                                                                                           
        font-size: 12px; /* Make the font smaller */                                                                                                                    
        margin-top: 20px; /* Space above the links */                                                                                                                   
    }                                                                                                                                                                   
    #nav a {                                                                                                                                                            
        color: #007cba; /* Change link color */                                                                                                                         
        text-decoration: none; /* Remove underline */                                                                                                                   
    }                                                                                                                                                                   
    #nav a:hover {                                                                                                                                                      
        text-decoration: underline; /* Underline on hover */                                                                                                            
    }                                                                                                                                                                   
</style>                                                                                                                                                                
</head>

提供的代码会给网站登录页面生成一个基础样式。可以尝试不同的 CSS 属性和值，实现你想要的外观效果。

保护 WordPress 登录页面

在自定义登录页面时，安全性同样需要优先考虑。下面是一些保护 WordPress 登录页面的技巧：

1. 限制登录尝试次数：用插件限制单个 IP 地址的登录尝试次数。
2. 启用双因素身份验证：添加额外的安全层，可以有效防止未经授权的访问。
3. 更改登录 URL：考虑使用插件将默认的登录 URL 从 /wp-login.php 更改为其他地址。

总结

本文介绍了两种方法来自定义 WordPress 登录页面，而无需创建单独的页面或重定向的复杂操作。修改 functions.php 文件或应用自定义 CSS，可以让 WordPress 登录页面与网站品牌一致，提升整体用户体验。

我们前面提过很多次需要备份网站数据。比如：更新插件或主题、修改网站数据库、安装或更新 WordPress 核心文件、修改网站设计或CSS代码、修改域名或URL结构或者创建子主题等。为了防止操作失误，都会建议大家在操作之前，先对自己的WordPress网站进行备份。

常用的适合新手的方法有两种：

分别是手动备份，用FTP工具下载网站的文件，并通过phpMyAdmin导出数据库。和插件备份：用备份插件（如UpdraftPlus、All-in-One WP Migration等）定期备份网站。我们下面会详细讲解。

什么是WordPress备份？（重要性与数据丢失的原因）

作为一名WordPress网站管理员，了解备份网站的重要性以及常见的数据丢失原因是很有必要的。

备份WordPress网站是确保有网站数据、文件和内容副本的一种方式，防止意外。没有备份，一旦出现黑客攻击、服务器崩溃，甚至是人为错误（如误删文件或内容），就会面临丢失所有数据、文件和内容的风险。

此外，WordPress网站备份也是多一份心安，一旦发生问题，可以快速将网站恢复到正常。不用担心从头再来！

WordPress网站数据丢失的常见原因

下面是几种导致数据丢失常见的原因：

1. 服务器故障：崩溃和硬件问题
2. 人为错误：误删数据或文件
3. 插件/主题冲突：导致错误和崩溃

因此，了解这些常见原因，给网站制定备份计划可纳入正常工作范围。

如何备份 WordPress 网站

我们今天主要讲解手动备份和插件备份，可以选择其中一种适合自己的。

如何使用插件备份WordPress

WordPress社区的插件库中有许多备份插件，包括流行的插件如 BlogVault、BackWPup 和 BackupBuddy。为了节省时间，在本教程中，我用的是 UpdraftPlus 这一备份插件，它有超过三百万次的活跃安装并且评分很高。这个插件非常适合数据库和网站文件的备份，并且在发生意外时，可以通过一键恢复备份。

如何在 WordPress 网站上安装 UpdraftPlus 插件

在继续之前，WordPress网站要是正常运行的。

• 访问WordPress 后台管理面板。
• 导航到插件>添加新插件。
• 在右上角的搜索栏中，搜索UpdraftPlus。

• 找到插件后，单击立即安装按钮。
• 等待安装完成，然后单击”激活“按钮激活插件。

• 插件安装并激活后，点击“ UpdraftPlus 备份”选项卡，然后单击“备份/恢复”。

• UpdraftPlus 插件带有专用仪表盘，其中有多个选项分为选项卡，如下图所示：

• 点击“立即备份”来生成备份。
• 勾选所需选项并点击“立即备份”。

• 备份会在几分钟内完成，将来可以用来恢复网站。

备份WordPress网站，UpdraftPlus 插件是一个很好的选择。这个插件功能比较强大，可以简化备份过程，确保数据安全。也可以用其他免费的或付费的备份插件，过程对于所有WordPress备份插件来说都是类似的。

如何备份WordPress网站（手动方法）

不想用插件备份的话，还可以用FTP或者主机控制面板等进行手动备份。本文我们用FTP给大家演示，操作方法如下：

步骤 1：使用FTP客户端创建WordPress文件备份
步骤 2：备份WordPress数据库

通过FTP客户端备份WordPress文件

可以按照下面步骤通过FTP客户端备份WordPress文件：

1. 进入WordPress网站的根目录，该目录包含如 wp-admin、wp-content、wp-includes 等文件夹，以及 wp-config 和 .htaccess 等重要文件。

2. 在实时网站和想要存储备份文件的本地存储之间建立FTP连接。需要用FTP凭据（用户名和密码）、主机IP和端口登陆来完成操作。

3. 打开FTP客户端（如FileZilla），输入必要的信息以建立连接。

4. 点击“快速连接”按钮连接到服务器。

5. 连接后，选择要备份的所有文件和文件夹，并将它们从实时服务器下载到本地。

这就是通过FTP客户端备份WordPress文件的简单方法。

通过数据库管理器备份 WordPress 数据库

登录打开 phpMyAdmin 工具。

登录后，在仪表盘屏幕的左列中拥有所有表格。

接下来，用户必须从左侧为 WordPress 数据库选择 WP 前缀数据库选项。 选择数据库后，选择“导出”选项卡。

单击 WordPress 数据库或任何数据库名称，用户可以展开以列出该特定数据库中存在的所有表。 备份文件的导出有两种方法。它们如下：

• 快速 – 仅显示最小选项：

用户可以选择 SQL 格式的默认选项或选择任何其他格式，如 CSV、PDF 来保存 WordPress 数据库。 单击“开始”按钮，完成最后一步以存储备份文件。

• 自定义 – 显示所有可能的选项：用户可以在此自定义选项中选择格式特定选项和许多其他选项。

注意：如果主要目的是进行备份，那么 SQL、CSV、XML 是备份文件的首选格式。

WordPress备份的重要性：多久应该进行一次备份？

为了避免网站出现致命错误，始终保持一个最新的WordPress网站备份是很有必要的。可以选择提供自动备份的托管服务，或者使用插件定期安排备份，以确保备份的一致性。在进行重大更改、更换主机或更改网站域名之前，请备份整个网站。考虑自动化备份，以减少人为错误。

下面是一些在这些情况下拥有备份至关重要的场景：

1. 因软件或硬件故障导致网站崩溃 – 拥有最新备份可以帮助快速恢复网站。
2. 黑客攻击或安全漏洞 – 备份可以将网站恢复到之前的安全状态。
3. 内容误删或覆盖 – 通过备份，可以恢复丢失的内容。
4. 将网站迁移到新的托管提供商 – 备份可以简化迁移所有数据的过程。

一般来说，备份文件距现在不超过一天通常是安全的，但等待的时间越长，错过的更改也越多。因此，对于大多数网站来说，定期备份是至关重要的。

总结

现在已经掌握了备份WordPress网站的技巧！通过按照我们列出的步骤操作并选择合适的备份插件，即使是新手，也可以自己备份网站数据 。

使用短代码（Shortcode），你可以轻松地嵌入复杂功能，如表单、图库、按钮和动态内容，不用编写大量的 HTML、CSS 或 PHP 代码。所以短代码成为了即使是初学者也能方便使用的强大工具。

本文将详细介绍如何创建、使用和自定义 WordPress 短代码，帮助你简化工作流程并提升网站的互动性和功能性。

什么是 WordPress 短代码？

短代码是一个用方括号（[ ]）包围的简短代码片段，用来在 WordPress 内容中插入特定功能。例如：

该短代码告诉 WordPress 在前端显示一个图库，包含 ID 为 1、2 和 3 的图像。短代码通过简化代码的插入过程，使得复杂的任务变得简单直观。

短代码有许多优点，包括：

• 简洁性：无需编写复杂的 HTML、CSS 或 JavaScript，短代码简洁易懂。
• 灵活性：短代码可以在页面、帖子、小部件、甚至自定义帖子类型中使用。
• 可重复使用：创建一次短代码后，可以在网站的不同位置多次使用。
• 易于管理：使用短代码能保持页面和帖子整洁，不需要直接嵌入复杂的代码。

如何在 WordPress 中创建短代码

步骤 1：访问 functions.php 文件

创建短代码的第一步是打开主题的 functions.php 文件。这个文件是你向主题添加自定义功能和代码的地方，当你希望为网站添加自定义功能时，例如创建一个自定义短代码来显示特定内容或功能时，就需要在 functions.php 文件中添加代码。

按以下步骤操作：

1. 登录到 WordPress 仪表板。
2. 转到 外观 > 主题编辑器。
3. 在右侧找到并打开 functions.php 文件。

步骤 2：定义短代码函数

短代码的核心是你创建的 PHP 函数。以下是一个简单的短代码示例，它将在页面上显示一个消息：“Hello, World!”：

function hello_world_shortcode() {
    return 'Hello, World!';
}

这段代码定义了一个简单的 PHP 函数 hello_world_shortcode，它将返回一个字符串：“Hello, World!”。

步骤 3：注册短代码

创建完短代码函数后，接下来就是注册到 WordPress 中。可以使用 add_shortcode() 函数来注册短代码，并指定一个名称和对应的函数。例如：

add_shortcode('hello_world', 'hello_world_shortcode');

这行代码注册了一个短代码 [hello_world]，当它在页面或帖子中被插入时，WordPress 会调用 hello_world_shortcode() 函数并显示该函数返回的内容。

步骤 4：测试短代码

完成短代码的创建和注册后，你可以测试它。

以下是将整个过程整合在一起的完整代码：

// 定义短代码函数
function hello_world_shortcode() {
    return 'Hello, World!';
}

// 注册短代码
add_shortcode('hello_world', 'hello_world_shortcode');

在页面或帖子中插入 [hello_world]，然后查看前端页面。它应该显示出“Hello, World!”。

如果你未在 functions.php 文件中添加，在前端页面就应该显示[hello_world]

创建更多自定义短代码

示例 1：创建按钮短代码

按钮是网站交互的关键部分，可以用于号召行动（CTA）和导航。我们可以通过短代码创建一个简单的自定义按钮：

function custom_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Click Me',
            'url' => '#',
        ), $atts
    );

    return '' . esc_html($atts['text']) . '';
}

add_shortcode('custom_button', 'custom_button_shortcode');

在此例中，定义了一个短代码 [custom_button]，它接受两个参数：text（按钮文本）和 url（链接地址）。

例如，你可以这样使用它：

[custom_button text="Learn More" url="https://example.com"]

这将生成一个蓝色的按钮，点击后会跳转到指定的 URL。

示例 2：创建图库短代码

创建一个图库短代码也非常简单。通过指定图像 ID，WordPress 会自动生成一个图库：

function custom_gallery_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'ids' => ''
        ), $atts
    );

    $ids = explode(',', $atts['ids']);
    $output = '
';

    foreach ($ids as $id) {
        $image = wp_get_attachment_image_src($id, 'medium');
        $output .= '';
    }

    $output .= '
';
    return $output;
}

add_shortcode('custom_gallery', 'custom_gallery_shortcode');

创建一个 [custom_gallery] 短代码，它接受 ids 参数，你可以传入多个图像 ID 来生成图库。例如：

[custom_gallery ids="1,2,3"]

这将会在页面上显示 ID 为 1、2 和 3 的图像。

如何在 WordPress 页面和帖子中使用短代码

方法 1：使用经典编辑器

如果你使用的是 WordPress 经典编辑器，只需将短代码直接插入到编辑器中的文本框里。

例如：

[custom_button text="Buy Now" url="https://yourlink.com"]

更新或发布页面后，短代码会在前端被处理，显示出相应的内容。

方法 2：使用 Gutenberg 块编辑器

在 Gutenberg 编辑器中，你可以使用专用的“短代码”块来插入短代码。操作步骤如下：

1. 打开页面或帖子编辑器。
2. 点击 + 按钮添加新块。
3. 搜索并选择 Shortcode 块。

4. 在短代码块中输入你的短代码，例如：

[custom_button text="Sign Up" url="https://yourlink.com"]

然后保存或更新内容，短代码将在前端显示输出。

方法 3：使用页面编辑器

许多流行的页面编辑器，如 Elementor 和 WPBakery，提供了插入短代码的小部件或模块。只需要将短代码粘贴到相应的小部件中，构建器会实时显示其效果。

如何在 WordPress 小部件中使用短代码

你还可以将短代码用于小部件区域（例如侧边栏、页脚等）。以下是步骤：

1. 在仪表盘中，转到 外观 > 小部件。
2. 将 文本小部件 拖放到你希望显示短代码的小部件区域。

3. 在文本区域中输入短代码，例如：

[custom_button text="Contact Us" url="https://yourlink.com"]

保存并查看网站，短代码将在小部件区域中显示为按钮。

使用短代码生成器简化流程

对于不熟悉编写代码的用户，短代码生成器是一个非常实用的工具。通过这些工具，可以简单的使用表单生成短代码，无需手动编写代码。流行的短代码生成器插件包括：

• Shortcodes Ultimate：提供了一个全面的短代码库，支持滑块、手风琴等多种功能。
• MyThemeShop WP Shortcode：为按钮、选项卡、列等提供了易于使用的短代码生成器。
• Shortcoder：可以使用更高级的用户创建自定义短代码。

使用这些插件，可以快速生成短代码并将其插入到 WordPress 内容中，从而省去编写复杂代码的麻烦。

总结：

短代码在 WordPress 中可以帮助你轻松在页面、文章或小部件中插入复杂功能，如按钮、图库和动态内容，无需编写大量代码。通过简单的 [shortcode] 语法，你可以在不同位置重复使用这些功能，从而提升网站的效率和可维护性。本文详细讲解了如何在 WordPress 的 functions.php 文件中创建和注册短代码，并提供了按钮和图库短代码的实际示例。还介绍了在经典编辑器、Gutenberg 块编辑器以及小部件中使用短代码的方法，帮助你简化工作流程。

使用短代码（Shortcode），你可以轻松地嵌入复杂功能，如表单、图库、按钮和动态内容，不用编写大量的 HTML、CSS 或 PHP 代码。所以短代码成为了即使是初学者也能方便使用的强大工具。

本文将详细介绍如何创建、使用和自定义 WordPress 短代码，帮助你简化工作流程并提升网站的互动性和功能性。

什么是 WordPress 短代码？

短代码是一个用方括号（[ ]）包围的简短代码片段，用来在 WordPress 内容中插入特定功能。例如：

该短代码告诉 WordPress 在前端显示一个图库，包含 ID 为 1、2 和 3 的图像。短代码通过简化代码的插入过程，使得复杂的任务变得简单直观。

短代码有许多优点，包括：

• 简洁性：无需编写复杂的 HTML、CSS 或 JavaScript，短代码简洁易懂。
• 灵活性：短代码可以在页面、帖子、小部件、甚至自定义帖子类型中使用。
• 可重复使用：创建一次短代码后，可以在网站的不同位置多次使用。
• 易于管理：使用短代码能保持页面和帖子整洁，不需要直接嵌入复杂的代码。

如何在 WordPress 中创建短代码

步骤 1：访问 functions.php 文件

创建短代码的第一步是打开主题的 functions.php 文件。这个文件是你向主题添加自定义功能和代码的地方，当你希望为网站添加自定义功能时，例如创建一个自定义短代码来显示特定内容或功能时，就需要在 functions.php 文件中添加代码。

按以下步骤操作：

1. 登录到 WordPress 仪表板。
2. 转到 外观 > 主题编辑器。
3. 在右侧找到并打开 functions.php 文件。

步骤 2：定义短代码函数

短代码的核心是你创建的 PHP 函数。以下是一个简单的短代码示例，它将在页面上显示一个消息：“Hello, World!”：

function hello_world_shortcode() {
    return 'Hello, World!';
}

这段代码定义了一个简单的 PHP 函数 hello_world_shortcode，它将返回一个字符串：“Hello, World!”。

步骤 3：注册短代码

创建完短代码函数后，接下来就是注册到 WordPress 中。可以使用 add_shortcode() 函数来注册短代码，并指定一个名称和对应的函数。例如：

add_shortcode('hello_world', 'hello_world_shortcode');

这行代码注册了一个短代码 [hello_world]，当它在页面或帖子中被插入时，WordPress 会调用 hello_world_shortcode() 函数并显示该函数返回的内容。

步骤 4：测试短代码

完成短代码的创建和注册后，你可以测试它。

以下是将整个过程整合在一起的完整代码：

// 定义短代码函数
function hello_world_shortcode() {
    return 'Hello, World!';
}

// 注册短代码
add_shortcode('hello_world', 'hello_world_shortcode');

在页面或帖子中插入 [hello_world]，然后查看前端页面。它应该显示出“Hello, World!”。

如果你未在 functions.php 文件中添加，在前端页面就应该显示[hello_world]

创建更多自定义短代码

示例 1：创建按钮短代码

按钮是网站交互的关键部分，可以用于号召行动（CTA）和导航。我们可以通过短代码创建一个简单的自定义按钮：

function custom_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Click Me',
            'url' => '#',
        ), $atts
    );

    return '' . esc_html($atts['text']) . '';
}

add_shortcode('custom_button', 'custom_button_shortcode');

在此例中，定义了一个短代码 [custom_button]，它接受两个参数：text（按钮文本）和 url（链接地址）。

例如，你可以这样使用它：

[custom_button text="Learn More" url="https://example.com"]

这将生成一个蓝色的按钮，点击后会跳转到指定的 URL。

示例 2：创建图库短代码

创建一个图库短代码也非常简单。通过指定图像 ID，WordPress 会自动生成一个图库：

function custom_gallery_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'ids' => ''
        ), $atts
    );

    $ids = explode(',', $atts['ids']);
    $output = '
';

    foreach ($ids as $id) {
        $image = wp_get_attachment_image_src($id, 'medium');
        $output .= '';
    }

    $output .= '
';
    return $output;
}

add_shortcode('custom_gallery', 'custom_gallery_shortcode');

创建一个 [custom_gallery] 短代码，它接受 ids 参数，你可以传入多个图像 ID 来生成图库。例如：

[custom_gallery ids="1,2,3"]

这将会在页面上显示 ID 为 1、2 和 3 的图像。

如何在 WordPress 页面和帖子中使用短代码

方法 1：使用经典编辑器

如果你使用的是 WordPress 经典编辑器，只需将短代码直接插入到编辑器中的文本框里。

例如：

[custom_button text="Buy Now" url="https://yourlink.com"]

更新或发布页面后，短代码会在前端被处理，显示出相应的内容。

方法 2：使用 Gutenberg 块编辑器

在 Gutenberg 编辑器中，你可以使用专用的“短代码”块来插入短代码。操作步骤如下：

1. 打开页面或帖子编辑器。
2. 点击 + 按钮添加新块。
3. 搜索并选择 Shortcode 块。

4. 在短代码块中输入你的短代码，例如：

[custom_button text="Sign Up" url="https://yourlink.com"]

然后保存或更新内容，短代码将在前端显示输出。

方法 3：使用页面编辑器

许多流行的页面编辑器，如 Elementor 和 WPBakery，提供了插入短代码的小部件或模块。只需要将短代码粘贴到相应的小部件中，构建器会实时显示其效果。

如何在 WordPress 小部件中使用短代码

你还可以将短代码用于小部件区域（例如侧边栏、页脚等）。以下是步骤：

1. 在仪表盘中，转到 外观 > 小部件。
2. 将 文本小部件 拖放到你希望显示短代码的小部件区域。

3. 在文本区域中输入短代码，例如：

[custom_button text="Contact Us" url="https://yourlink.com"]

保存并查看网站，短代码将在小部件区域中显示为按钮。

使用短代码生成器简化流程

对于不熟悉编写代码的用户，短代码生成器是一个非常实用的工具。通过这些工具，可以简单的使用表单生成短代码，无需手动编写代码。流行的短代码生成器插件包括：

• Shortcodes Ultimate：提供了一个全面的短代码库，支持滑块、手风琴等多种功能。
• MyThemeShop WP Shortcode：为按钮、选项卡、列等提供了易于使用的短代码生成器。
• Shortcoder：可以使用更高级的用户创建自定义短代码。

使用这些插件，可以快速生成短代码并将其插入到 WordPress 内容中，从而省去编写复杂代码的麻烦。

总结：

短代码在 WordPress 中可以帮助你轻松在页面、文章或小部件中插入复杂功能，如按钮、图库和动态内容，无需编写大量代码。通过简单的 [shortcode] 语法，你可以在不同位置重复使用这些功能，从而提升网站的效率和可维护性。本文详细讲解了如何在 WordPress 的 functions.php 文件中创建和注册短代码，并提供了按钮和图库短代码的实际示例。还介绍了在经典编辑器、Gutenberg 块编辑器以及小部件中使用短代码的方法，帮助你简化工作流程。