Category: WordPress开发

  • 在 WooCommerce 中创建自定义 Gutenberg 块:完整开发指南

    在 WooCommerce 中创建自定义 Gutenberg 块:完整开发指南

    WordPress 最近推出了 @wordpress/scripts npm 包,它为 WordPress 开发提供了一组可重用的脚本。本文将详细介绍如何使用 ES6JSX@wordpress/scripts创建一个自定义的 Gutenberg,并将其集成到 WooCommerce 中。

    图片[1]-361Sale WordPress Care

    开始前

    在开始开发之前,我们需要配置一些必要的开发环境:

    • WordPress 开发环境:确保你已经安装并运行了 WordPress。
    • JavaScript 构建工具(Node/npm):我们将使用 React JSX,因此需要配置 JavaScript 构建工具。
    • WooCommerce 插件:如果你还没有安装 WooCommerce 插件,需要先安装。

    步骤 1:创建插件目录和安装依赖

    首先,需要在 wp-content/plugins 目录下创建一个插件目录,并安装所需的 @wordpress/scripts 包。

    图片[2]-361Sale WordPress Care

    具体步骤如下:

    1. 创建插件目录:在 wp-content/plugins 目录下创建一个名为 myFirst-block 的文件夹。
    2. 安装依赖:进入 myFirst-block 目录,并使用 npm 安装 @wordpress/scripts 包:
    cd wp-content/plugins
    mkdir myFirst-block
    cd myFirst-block
    npm init
    npm install --save-dev --save-exact @wordpress/scripts

    安装完成后,所有依赖包会被保存在 node_modules 目录下。

    图片[3]-361Sale WordPress Care

    步骤 2:配置 package.json

    myFirst-block 目录中,打开 package.json 文件,并添加以下脚本配置:

    "scripts": {
    "start": "wp-scripts start",
    "build": "wp-scripts build"
    }
    • npm run start:启动开发服务器并进入监听模式,实时更新代码。
    • npm run build:打包构建文件,准备发布。

    步骤 3:创建插件文件以注册 Gutenberg 块

    我们需要创建一个插件文件,在该文件中注册并加载我们自定义的 Gutenberg 块。

    图片[4]-361Sale WordPress Care

    myFirst-block 目录下创建一个 myFirst-block.php 文件,并添加以下代码:

    /*
    Plugin Name: myFirst-block
    Author: webkul
    */
    function myFirst_block() {
    $styleURI = plugin_dir_url( __FILE__ ) . '/src/style.css';
    // Enqueue styles
    wp_enqueue_style(
    'myFirst-block-style',
    $styleURI
    );

    // Register JavaScript file (build/index.js)
    wp_register_script(
    'myFirst-block-script',
    plugins_url( 'build/index.js', __FILE__ ),
    array( 'wp-blocks', 'wp-element', 'wp-editor' )
    );

    // Register editor styles
    wp_register_style(
    'myFirst-block-editor-style',
    plugins_url( 'src/editor.css', __FILE__ )
    );

    // Register the block
    register_block_type( 'myCustomBlock/myFirst-block', array(
    'editor_script' => 'myFirst-block-script',
    'editor_style' => 'myFirst-block-editor-style',
    ) );
    }
    add_action( 'init', 'myFirst_block' );

    该代码完成了以下工作:

    • 加载自定义样式和 JavaScript 文件。
    • 注册了一个新的 Gutenberg 块。

    步骤 4:编写 JavaScript 代码注册块

    接下来,需要在 myFirst-block/src/index.js 文件中编写 JavaScript 代码,注册我们的 Gutenberg 块。首先,创建 src/index.js 文件,并添加以下内容:

    import { registerBlockType } from '@wordpress/blocks';
    import { RichText } from '@wordpress/block-editor';

    // 注册第一个自定义块
    registerBlockType( 'myCustomBlock/my-first-block', {
    title: '我的第一个自定义块',
    icon: 'smiley',
    category: 'common',
    attributes: {
    content: {
    type: 'string',
    source: 'html',
    selector: 'p',
    },
    },
    edit: (props) => {
    const { attributes: { content }, setAttributes } = props;

    const onChangeContent = (newContent) => {
    setAttributes({ content: newContent });
    };

    return (

    tagName="p"
    value={ content }
    onChange={ onChangeContent }
    placeholder="请输入内容"
    />

    );
    },
    save: (props) => {
    return (



    );
    }
    });

    步骤 5:添加样式文件

    图片[5]-361Sale WordPress Care

    我们还需要为 Gutenberg 块定义样式。创建两个 CSS 文件:src/editor.css 用于编辑器中的样式,src/style.css 用于前端展示的样式。

    1. 编辑器样式(src/editor.css)
    .my-first-block {
    color: blue;
    background-color: #f0f0f0;
    padding: 20px;
    }
    1. 前端样式(src/style.css)
    .my-first-block {
    color: green;
    padding: 20px;
    background-color: #e0e0e0;
    }

    步骤 6:构建和运行

    当所有文件创建完成后,使用以下命令来启动开发服务器:

    npm run start

    该命令会在 src/index.js 文件发生更改时自动构建并更新 build/index.js 文件。现在,你的自定义 Gutenberg 块应该可以在编辑器中使用了。

    图片[6]-361Sale WordPress Care

    步骤 7:进一步的功能扩展(可选)

    你还可以创建更复杂的 Gutenberg 块。例如,我们可以创建一个卡片组件块,其中允许用户添加图像、标题和描述。通过使用 useBlockPropsInnerBlocks API,允许在卡片块内部添加其他块。

    以下是一个简单的卡片组件块的示例:

    import { registerBlockType } from '@wordpress/blocks';
    import { MediaUpload, RichText, InnerBlocks, useBlockProps } from '@wordpress/block-editor';

    registerBlockType( 'myCustomBlock/card-block', {
    title: '卡片组件',
    icon: 'grid-view',
    category: 'widgets',
    attributes: {
    title: { type: 'string' },
    description: { type: 'string' },
    imageUrl: { type: 'string' },
    },
    edit: (props) => {
    const { attributes, setAttributes } = props;
    const blockProps = useBlockProps();

    return (

    onSelect={(media) => setAttributes({ imageUrl: media.url })}
    render={({ open }) => (

    )}
    />
    tagName="h3"
    value={attributes.title}
    onChange={(newTitle) => setAttributes({ title: newTitle })}
    placeholder="标题"
    />
    tagName="p"
    value={attributes.description}
    onChange={(newDescription) => setAttributes({ description: newDescription })}
    placeholder="描述"
    />


    );
    },
    save: (props) => {
    const { attributes } = props;
    return (






    );
    }
    });
    图片[7]-361Sale WordPress Care

    总结

    通过以上步骤,我们创建了一个简单的自定义 Gutenberg 块,并添加了前端和编辑器样式。你可以根据需要进一步扩展块的功能,例如支持更多的块内元素,添加自定义控件等。

  • 如何使用 WordPress get_post_meta 函数:完整指南与实用案例

    如何使用 WordPress get_post_meta 函数:完整指南与实用案例

    在 WordPress 中,get_post_meta 函数是一个极为强大的工具,它可以帮助开发者轻松检索与特定帖子相关的自定义字段数据。这种功能在定制网站功能和展示动态内容方面显得尤为重要。本文将详细介绍 get_post_meta 函数的工作原理、基本语法及参数,并提供实际的使用案例和最佳实践。

    图片[1]-361Sale WordPress Care

    什么是 WordPress 自定义字段?

    在 WordPress 中,自定义字段是为特定帖子或页面存储额外数据的一种方法。除了标准字段(如标题、内容、分类等),自定义字段可以保存额外的信息,例如电话号码、地址、价格等。使用 get_post_meta 函数,可以方便地从数据库中检索这些自定义字段的数据,并在前端页面上展示。

    get_post_meta 函数的工作原理

    图片[2]-361Sale WordPress Care
    1. 自定义字段
      • 自定义字段可以为帖子或页面附加额外的数据。
      • 这些字段通过 WordPress 后端的“自定义字段”功能或插件(如 ACF)创建。
    2. get_post_meta 函数
      • 通过提供帖子 ID 和自定义字段的键值(Meta Key),get_post_meta 函数从数据库中获取数据。
      • 函数可以选择返回单个值或值的数组,具体取决于参数设置。
    3. 检索数据
      • 通过调用函数,开发者可以将数据直接输出到页面模板中,帮助网站实现更多动态功能。

    get_post_meta 函数的基本语法

    图片[3]-361Sale WordPress Care

    语法结构

    get_post_meta( $post_id, $key, $single );

    参数详解

    1. $post_id
      • 要从中检索数据的帖子的 ID。
      • 例如,get_the_ID() 可以获取当前帖子的 ID。
    图片[4]-361Sale WordPress Care
    1. $key
      • 自定义字段的名称(Meta Key)。
      • 例如,'phone_number' 表示获取电话字段。
    2. $single
      • 布尔值,指定是否返回单个值。
        • true:返回单个值。
        • false:返回值的数组。

    get_post_meta 函数的使用示例

    以下代码演示如何在模板文件中使用 get_post_meta 函数:

    示例 1:获取单个值

    // 获取当前帖子的 ID
    $post_id = get_the_ID();

    // 获取自定义字段 'phone_number' 的值
    $phone_number = get_post_meta( $post_id, 'phone_number', true );

    // 显示电话号码
    if ( $phone_number ) {
    echo '

    Phone Number: ' . $phone_number . '

    ';
    }

    示例 2:获取数组值

    // 获取所有的自定义字段值
    $custom_fields = get_post_meta( $post_id, 'gallery_images', false );

    if ( !empty($custom_fields) ) {
    foreach ( $custom_fields as $field ) {
    echo '';
    }
    }

    示例 3:与 WordPress 循环结合使用





    如何使用 get_post_meta 自定义 WordPress 网站

    方法一:手动方式

    通过直接编辑主题文件,可以使用 get_post_meta 函数显示自定义字段的值。

    步骤:

    1. 登录到 WordPress 管理仪表板。

    2. 导航到 外观 > 主题文件编辑器

      图片[5]-361Sale WordPress Care

      3. 找到需要编辑的模板文件(例如 single.phppage.php)。

      图片[6]-361Sale WordPress Care

      4. 在模板文件中插入以下代码:

        echo get_post_meta( get_the_ID(), 'custom_field_key', true );

        5. 保存更改并刷新页面。

        假设你的文章有一个自定义字段,键名为 phone_number,值为 123-456-7890,你可以将代码替换为:

        echo get_post_meta( get_the_ID(), 'phone_number', true );

        在前端页面上,用户会看到以下内容:

        123-456-7890

          方法二:使用插件

          如果不熟悉编码,可以通过插件(如 Advanced Custom Fields,简称 ACF)来创建和显示自定义字段。

          步骤:
          1. 安装并激活 ACF 插件
          2. 转到 字段组 > 添加新字段组
          图片[7]-361Sale WordPress Care
          1. 设置字段组名称,并选择适用的帖子类型(如帖子或页面)。
          2. 创建字段(如文本、选择框或图像)。
          图片[8]-361Sale WordPress Care
          图片[9]-361Sale WordPress Care
          1. 使用 get_field() 函数显示字段值:
          $phone_number = get_field('phone_number');
          if ( $phone_number ) {
          echo '

          Phone Number: ' . $phone_number . '

          ';
          }

          通过这种方式,可以轻松管理和展示各种类型的自定义字段。

          使用 get_post_meta 的注意事项

          1. 性能优化
            • 避免在一个页面中多次调用 get_post_meta,建议结合缓存技术减少数据库查询。
          2. 数据验证与清理
            • 使用 sanitize_text_fieldesc_html 等函数对数据进行清理,确保安全性。
          3. 与自定义帖子类型配合
            • get_post_meta 函数完全支持自定义帖子类型,只需提供帖子 ID
          4. 兼容性
            • 确保在正确的上下文中使用(如 WordPress 循环内),避免调用未定义的帖子 ID。
          图片[10]-361Sale WordPress Care

          常见问题解答

          1. 我可以将 get_post_meta 与自定义帖子类型一起使用吗?

          是的,get_post_meta 可以与任何帖子类型一起使用。只需提供对应的帖子 ID。

          2. 使用 get_post_meta 是否会影响网站性能?

          频繁调用 get_post_meta 会增加数据库查询次数,可能影响性能。建议结合缓存技术优化。

          3. 可以在插件或自定义函数中使用 get_post_meta 吗?

          可以。get_post_meta 可在任何支持 $post_id 的上下文中使用,例如插件或自定义函数。

          结论

          get_post_meta 是 WordPress 开发者手中不可或缺的工具。通过合理使用此函数,可以增强网站功能,为用户提供更个性化的体验。如果希望进一步扩展 WordPress 网站功能,结合 ACF 插件等工具,让网站更具动态性和灵活性。

        1. 使用 Python 与 WordPress REST API 实现内容自动化与集成:全面操作指南

          使用 Python 与 WordPress REST API 实现内容自动化与集成:全面操作指南

          图片[1]-361Sale WordPress Care

          Python 和 WordPress 虽然来自不同的开发生态系统,但它们结合在一起可以提供强大的内容自动化、数据操作和应用集成工具。本指南将向你展示如何使用 WordPress REST API 设置并使用 Python 与 WordPress 交互,包括 requestsBeautifulSoupxmlrpc.clientpandas 等库。

          1. 理解 WordPress REST API

          WordPress REST API 为应用程序提供了一种与 WordPress 内容交互的接口。通过向特定端点发送 HTTP 请求,你可以检索、创建、更新和删除内容。REST API 在 WordPress 4.4 及更高版本中默认启用。

          REST API 示例端点:
          https://your-wordpress-site.com/wp-json/wp/v2/

          其中:

          • http://yourwebsite.com 是你的 WordPress 网站的基础网址。
          • /wp-json/ 是 WordPress REST API 的通用前缀。
          • /wp/v2/ 是 WordPress 版本 2 的 API 路径,用于访问标准的 WordPress 数据(如帖子、页面、用户等)。

          例如,访问所有文章的端点为:

          http://yourwebsite.com/wp-json/wp/v2/posts
          

          2. 准备 WordPress 进行 API 集成

          要启用 API 访问,请按照以下步骤操作:

          1. 确保 WordPress 已激活:登录 WordPress 仪表板。
          2. 配置固定链接:转到 设置 > 固定链接,选择除“纯文本”以外的结构,例如“文章名称”。
          图片[2]-361Sale WordPress Care

          3. 在 WordPress 中设置 REST API 身份验证

          安装并配置 REST API 插件

          虽然 REST API 默认启用,但你可以通过插件来增加功能和安全性:

          1. 安装 WordPress REST API Authentication 插件以增强安全性。
          2. 激活该插件。
          图片[3]-361Sale WordPress Care

          创建 API 用户

          1. 用户 > 添加新用户 中创建一个用于 API 访问的新用户,赋予 管理员 角色。
          图片[4]-361Sale WordPress Care
          1. 添加用户后,用该账号登录并生成应用程序密码:
            • 进入 个人资料 > 应用程序密码
            • 输入应用程序名称并点击 添加新应用程序密码
            • 复制并安全保存该密码,因为它仅会显示一次,以便标记此密码的用途。
          图片[5]-361Sale WordPress Care

          4. 配置 Python 环境并安装所需库

          安装 Requests 库

          图片[6]-361Sale WordPress Care

          Pythonrequests 库对向 REST API 发送 HTTP 请求至关重要,使用pip安装“requests”库,打开终端或命令提示符并运行:

          bashCopy code

          pip install requests

          5. 使用 Python 检索 WordPress 数据

          为了测试 API 的身份验证和连接性,可以使用 Python 检索最新的 WordPress 帖子列表:

          pythonCopy code

          import requests

          url = "https://your-wordpress-site.com/wp-json/wp/v2/posts"
          auth = ("your_username", "your_application_password")
          response = requests.get(url, auth=auth)
          posts = response.json()

          for post in posts:
          print(f"Title: {post['title']['rendered']}")
          print(f"Content: {post['content']['rendered']}\n")

          6. 创建和更新 WordPress 内容

          创建新帖子

          使用 Python 发布帖子:

          import requests
          from requests.auth import HTTPBasicAuth

          url = "https://your-wordpress-site.com/wp-json/wp/v2/posts"
          headers = {"Content-Type": "application/json"}
          auth = HTTPBasicAuth("your_username", "your_application_password")
          post_data = {
          "title": "New Post from Python",
          "content": "This is a post created via Python and the WordPress REST API!",
          "status": "publish"
          }

          response = requests.post(url, headers=headers, auth=auth, json=post_data)
          if response.status_code == 201:
          print("Post created successfully:", response.json())
          else:
          print("Failed to create post:", response.status_code, response.text)

          更新现有帖子

          使用帖子的 ID 更新其标题或内容:

          post_id = 123
          url = f"https://your-wordpress-site.com/wp-json/wp/v2/posts/{post_id}"
          data = {
          "title": "Updated Title from Python",
          "content": "This content has been updated using Python."
          }

          response = requests.post(url, headers=headers, auth=auth, json=data)
          print(response.json())

          7. 高级 WordPress 操作

          图片[7]-361Sale WordPress Care

          删除帖子

          要删除指定的帖子,可以向特定帖子 ID 发送 DELETE 请求:

          pythonCopy code

          post_id = 123
          url = f"https://yourwordpresssite.com/wp-json/wp/v2/posts/{post_id}?force=true"
          response = requests.delete(url, headers=headers)
          print(response.json())

          8. 增强集成的库

          1. Requests:简化向 REST API 端点发送 HTTP 请求。
          2. BeautifulSoup:解析和抓取 HTML 内容,用于处理网页内容。
          3. WordPress XML-RPC:适用于旧版 WordPress,使用 XML-RPC 协议进行内容管理。
          4. Pandas:分析和处理从 WordPress 收集的数据,例如用户数据和内容绩效。

          9. 使用 Python 自动化 WordPress 任务

          图片[8]-361Sale WordPress Care

          通过这种集成,可以自动执行以下任务:

          • 内容发布:使用 Python 定时发布基于外部数据的内容。
          • 分析:自动化数据检索,以获得用户分析见解。
          • 内容更新:定期更新特定页面或帖子。

          示例:使用 CSV 文件自动发布内容。

          10. 常见问题排查

          若遇到问题,请检查以下几点:

          1. 身份验证错误:仔细检查 API 用户名和应用程序密码。
          2. 端点访问:确保 URL 结构正确。
          3. 请求频率限制:REST API 可能会限制频繁请求。

        2. 如何使用 GitHub 和 Deploy 自动部署 WordPress 主题更改

          如何使用 GitHub 和 Deploy 自动部署 WordPress 主题更改

          为什么要使用版本控制系统进行 WordPress 主题开发?

          在 WordPress 主题开发中,使用版本控制系统(VCS)可以显著提高开发效率、团队协作能力以及项目的稳定性。版本控制系统允许记录对文件或文件组的一段时间内的所有更改,使开发人员可以轻松调用特定版本、回滚错误、更好地协作和管理代码库。

          为什么要使用部署系统?

          图片[1]-361Sale WordPress Care

          与 GitHub 等服务集成的部署系统允许自动或手动上传对 WordPress 主题所做的更改。这种集成提供了单向同步系统,使代码的更新更加高效和安全。

          1. 自动化部署

          当代码提交到 GitHub 等代码托管平台时,部署系统可以自动将这些更改部署到生产环境。这消除了手动上传文件的麻烦,确保所有更改都被正确地部署。

          2. 增强的可靠性

          部署系统可以减少人为错误,确保所有文件都正确上传并配置。通过自动化流程,可以减少遗漏文件或配置错误的风险。

          3. 提高效率

          自动化部署节省了时间,使开发人员可以专注于编写代码和开发新功能,而不是手动管理部署过程。

          如何使用 Git 和部署系统进行 WordPress 主题开发

          以下是使用 Git 和部署系统进行 WordPress 主题开发的详细步骤:

          1. 设置 GitHub 存储库

          首先,需要在 GitHub 上创建一个新存储库来存储 WordPress 主题的代码。

          1. 创建 GitHub 账户: 访问 GitHub 网站并注册一个新帐户。
          图片[2]-361Sale WordPress Care
          1. 创建新存储库: 登录后,点击顶部的“+”图标并选择“新存储库”选项。设置存储库名称,并选择是公共还是私有存储库,最后点击“创建存储库”按钮。
          图片[3]-361Sale WordPress Care

          2. 安装适用于 Windows 或 Mac 的 GitHub 客户端

          使用 GitHub 客户端可以方便地管理本地和远程存储库。

          1. 下载 GitHub 客户端: 访问 GitHub Desktop 网站并下载适用于 Windows 或 Mac 的桌面客户端。
          图片[4]-361Sale WordPress Care
          1. 登录 GitHub 客户端: 启动客户端后,使用 GitHub 帐户登录。
          2. 克隆存储库: 在客户端中选择从互联网克隆存储库,选择刚刚创建的存储库并将其克隆到本地。

          3. 添加 WordPress 主题代码

          将 WordPress 主题代码添加到本地存储库文件夹中,并将这些更改提交到 GitHub。

          1. 将代码复制到存储库文件夹: 找到本地存储库文件夹,将 WordPress 主题代码复制并粘贴到该文件夹中。
          2. 提交更改: 打开 GitHub 客户端,看到添加的文件后,在“摘要”框中输入更改说明,并点击“提交到主版本”按钮。
          图片[5]-361Sale WordPress Care
          1. 推送更改: 点击“推送原点”按钮,将更改上传到 GitHub。

          4. 设置部署

          使用部署系统(例如 DeployHQ)将 GitHub 存储库上的更改自动或手动上传到 WordPress 网站。

          图片[6]-361Sale WordPress Care
          1. 注册 DeployHQ 帐户: 访问 DeployHQ 网站并注册一个新帐户。
          2. 创建项目: 登录后,点击“创建项目”按钮,输入项目名称,并选择 GitHub 作为代码托管平台。
          图片[7]-361Sale WordPress Care
          1. 配置服务器信息: 输入 FTP 凭据和部署路径,保存配置。
          2. 手动部署: 完成配置后,点击“部署”按钮,将 GitHub 文件上传到 WordPress 网站。

          5. 设置自动部署

          为了简化流程,可以设置自动部署,使提交到 GitHub 的任何更改都会自动部署到网站。

          1. 启用自动部署: 在 DeployHQ 仪表板中,转到“自动部署”选项卡,启用服务器旁边的自动部署选项。
          2. 添加 Webhook 到 GitHub: 在 GitHub 仪表板的 Webhook 部分,添加从 DeployHQ 复制的 Webhook URL。这样,GitHub 每次有新的更改时,DeployHQ 都会自动部署这些更改。
          图片[8]-361Sale WordPress Care

          结论

          在WordPress主题开发中,使用版本控制和部署系统可以显著提高开发效率和项目稳定性。版本控制系统,如Git,可以记录文件的更改历史,允许开发人员轻松恢复到特定版本,并促进团队协作。部署系统,如DeployHQ,与GitHub集成,能够自动或手动将代码更改部署到生产环境,减少人为错误,提高可靠性和效率。通过这些工具,开发人员可以专注于编写代码和创新,而不必担心手动部署的繁琐过程,从而确保项目的成功和高效运行。

        3. 选择正版插件和主题:确保WordPress网站安全与性能的最佳策略

          选择正版插件和主题:确保WordPress网站安全与性能的最佳策略

          选择正版插件及主题:是确保安全和性能的最佳选择

          图片[1]-361Sale WordPress Care

          WordPress 生态系统中有大量的免费和商业插件和主题,可以增强你的网站功能和设计。不过,这些资源的丰富性也带来了潜在的风险,比如下载无效的插件、被修改过的插件,或者感染恶意软件的插件。因此,确保这些插件和主题的真实性和安全性对你的网站安全和性能至关重要。

          为什么真实性很重要

          使用未经授权或修改过的插件和主题可能带来以下风险:

          1. 安全漏洞:恶意代码可能导致安全漏洞、数据被盗或网站被黑客攻击。
          2. 性能问题:无效或修改不当的插件可能会使你的网站变慢或行为异常。
          3. 法律问题:使用盗版软件可能会导致法律问题和处罚。

          如何验证插件和主题的真实性和安全性

          1. 从信誉良好的来源下载:始终直接从开发者或可靠的来源下载插件和主题。比如,光子波动网合法分发未经修改的正版 WordPress 插件和主题,这些插件和主题都经过GNU 公共许可证的许可。其他来源可能提供无效或被修改过的文件,这些文件通常包含恶意软件。确保你下载的是原始的、未经修改的产品,并且能够享受更新的好处。
          1. 检查开发者声誉:在安装插件或主题之前,先了解一下开发者的声誉。查看评论、评分和活跃的支持论坛。强大、积极的社区支持通常是插件可靠性和安全性的良好指标。
          2. 定期更新:开发者会定期更新插件和主题,以修补安全漏洞并增强功能。始终保持WordPress、主题和插件为最新版本,以确保最大安全性和性能。
          3. 使用安全插件:考虑使用WordPress安全插件来扫描恶意软件并监控你的网站是否有任何可疑活动。这些插件可以提供额外的保护,抵御潜在的威胁。
          4. 备份你的网站:定期备份网站可以防止出现问题。使用可靠的备份解决方案可确保在网站受到攻击时可以快速恢复。

          为什么不使用 VirusTotal 来监控 WordPress 脚本

          尽管VirusTotal是一个强大的工具,可以扫描文件和URL以检测恶意软件,但它并不是监控WordPress脚本的最佳选择。以下是一些原因:

          1. 实时监控不足: VirusTotal主要用于扫描单个文件或URL,并不能实时监控你的网站。WordPress网站需要持续的安全监控,以防止和检测任何实时的威胁,而不是仅仅依赖于一次性的扫描。
          2. 插件和主题复杂性: WordPress插件和主题通常包含大量文件和复杂的代码结构。VirusTotal可能无法全面分析这些复杂的文件体系结构,特别是当它们是动态生成或相互依赖时。
          3. 误报和漏报: VirusTotal依赖于多个防病毒引擎来检测恶意软件,这可能会导致误报(即将良性的代码误认为是恶意的)或漏报(即未能检测到真正的威胁)。在WordPress环境中,这种情况可能导致不必要的混乱和麻烦。
          4. 自动化和集成挑战: 虽然VirusTotal提供API,但将其与WordPress集成进行自动化扫描和监控可能比较复杂,而且需要额外的开发工作。相比之下,专门为WordPress设计的安全插件能够更容易地集成和使用。

          更好的替代方案

          为了更好地保护你的WordPress网站,以下是一些更有效的方法:

          1. 使用WordPress安全插件: 使用专门的WordPress安全插件(如Wordfence、Sucuri、iThemes Security)提供实时监控、恶意软件扫描、防火墙保护和漏洞修复等功能。这些插件可以自动扫描网站文件和数据库,并提供即时警报和修复建议。
          1. 定期更新和备份: 确保你的WordPress核心、插件和主题始终是最新版本,以修补已知漏洞。定期备份网站可以在遭受攻击后快速恢复。
          2. 启用Web应用防火墙(WAF): 使用Web应用防火墙可以在恶意流量到达网站之前进行过滤和阻止。许多WordPress安全插件都提供WAF功能。
          1. 使用安全托管服务: 选择一个提供增强安全性的托管服务商,会提供包括恶意软件扫描、DDoS保护和安全补丁在内的服务。

          总结:

          未经授权或修改过的插件和主题可能带来严重的安全漏洞、性能问题和法律风险。为了保障网站的安全和稳定,建议从信誉良好的来源下载插件和主题,定期更新,并使用安全插件进行监控和保护。还有定期备份网站数据也是预防和应对突发问题的关键措施。

          欢迎关注我们https://www.361sale.com/了解更多。

        4. WordPress 标签、类别和分类管理器 – AI Autotagger

          WordPress 标签、类别和分类管理器 – AI Autotagger

          通过 axoPress,可以创建和管理标签、类别以及所有 WordPress 分类术语。TaxoPress可以帮助管理WordPress的所有内容,从为页面添加标签和分类,到管理WooCommerce产品类别和bbPress主题标签。

          TaxoPress与人工智能工具集成,包括OpenAI、IBM Watson、Dandelion、LSEG / Refinitiv等。可以使用这些服务为网站内容找到最佳分类术语。

          图片[1]-361Sale WordPress Care

          使用 TaxoPress,可以组织、优化和展示所有 WordPress 内容:

          • 组织:在 TaxoPress 中,可以管理分类标准和术语。使用一些工具来添加、重命名、移除、删除甚至合并术语。可以在任何帖子类型中添加任何术语或分类法。
          • 优化:TaxoPress可以通过自动术语管理改善搜索引擎优化。TaxoPress可以让内容自动推荐相关术语,并将这些术语链接到正确的存档页面。
          • 展示:TaxoPress可以在相关帖子和标签云等高级功能中使用术语。

          TaxoPress 的 10 个主要功能

          1. 管理术语和分类法:可以创建新的分类法并编辑每个分类法的所有设置。
          2. 术语显示:这个功能可让你创建一个分类法中所有术语的自定义显示。
          3. 当前帖子的术语:通过该功能,可以自定义显示分配给当前文章的所有术语。
          4. 相关文章:显示具有类似标签和类别的帖子列表。
          5. 自动链接:如果您有一个名为 “WordPress “的术语,自动链接功能会在您的内容中找到 “WordPress “的任何实例,并为该标签添加指向存档页面的链接。
          6. 自动条款:如果有一个名为 “WordPress “的术语,自动术语可以分析文章,当它找到 “WordPress “一词时,就会将该术语添加到文章中。
          7. TaxoPress AI:该功能可以更轻松地为内容查找或创建最佳分类术语。
          8. 术语同义词:该功能可以将多个词与一个词关联起来。
          9. 链接术语:可以连接术语。当主要术语被添加到帖子中时,链接术语也会被添加。
          10. 管理术语:添加、重命名、合并、删除、删除甚至删除未使用的术语。

          功能 1. 创建和管理分类法

          TaxoPress 可以管理 WordPress 以及插件和主题创建的所有分类标准。可以更改每个分类法的设置。例如,更改视觉标签,控制分类法是否按父子关系组织。还可以将分类法分配给不同的文章类型。例如,你可以使用 TaxoPress 为页面添加分类,或为帖子添加 WooCommerce 标签。

          功能2. 条款显示

          TaxoPress 的 “术语显示 “功能可以显示网站上使用的术语云或列表。例如,创建一个 “标签云”,显示 WooCommerce 的所有产品类别,或者创建一个 bbPress 主题的所有标签列表。

          TaxoPress 可以轻松定制术语格式,并添加自定义 CSS 样式。术语可以通过简码、小工具显示,TaxoPress 也可以尝试将术语自动添加到你的内容中。

          特征 3. 当前帖子的条款

          TaxoPress 的 “当前帖子术语 “功能允许您自定义显示单个帖子的术语。这种显示方式与主题中的默认显示方式是分开的,可以用该功能轻松地在网站的任何地方显示术语。

          TaxoPress 可以轻松定制术语格式,并添加自定义 CSS 样式。条款可以通过简码、小工具或 TaxoPress 自动添加到您的内容中。

          功能4.相关文章

          TaxoPress 可以显示与当前帖子相关的帖子。该功能通过检查共享的分类术语来实现。如果帖子中包含 “蔬菜 “和 “食品 “这两个词,那么该功能就有可能显示同样包含 “蔬菜 “和 “食品 “这两个词的其他帖子。共享的术语越多,帖子显示的可能性就越大。

          相关帖子可以通过简码、小工具显示,TaxoPress 也可以尝试将相关帖子自动添加到内容中。

          功能 5. 自动链接

          TaxoPress 的自动链接功能会自动为内容添加链接。如果有一个名为 “WordPress “的术语,自动链接功能就会在内容中找到 “WordPress “的任何实例,并为该标签添加一个指向存档页面的链接。因此,任何 “WordPress “实例都将链接到/tag/wordpress。

          特性 6. 自动条款

          该功能允许 WordPress 检查文章内容和标题中的指定术语,并自动将这些术语添加为标签。下面举例说明其工作原理:

          • 在 TaxoPress 的关键字列表中添加 “WordPress”。
          • 如果帖子内容或标题包含 “WordPress “一词,TaxoPress 就会自动将 “WordPress “添加为该帖子的一个术语。

          特性 7.TaxoPress AI

          这个功能可以更轻松地为内容查找或创建最佳分类术语。TaxoPress AI 可以在帖子编辑界面显示一个元方框,其中包含所有这些选项:.

          • 管理帖子条款:这个功能可以管理当前附加到帖子的所有术语。
          • 建议现有术语:该功能使用 TaxoPress 插件中的一个工具,可以扫描帖子,并建议网站上已有的相关术语。
          • 显示所有现有术语:这个功能可浏览分类法中的所有术语。
          • OpenAI / IBM Watson / Dandelion / LSEG:通过这些集成,可以连接到外部服务。这些服务将扫描内容并推荐相关术语。它们可以推荐现有术语,也可以推荐新术语。

          特征 8. 术语同义词

          同义词是 TaxoPress Pro 的一项功能,可以将多个词与一个词关联起来。如果 TaxoPress 扫描了内容并找到了同义词,它就会像找到了主词一样。

          每个术语屏幕上都提供同义词。例如,如果您的术语是“Apple”,您可以创建同义词,例如“Apples”、“Golden Delicious”、“Granny Smith”、“Pink Lady”、“Honeycrisp”、“Red Delicious”、“Braeburn”和“格拉文斯坦”。

          特征 9. 链接术语

          链接术语是 TaxoPress Pro 的一项功能,连接术语。当主要术语被添加到帖子中时,链接术语也会被添加到帖子中。

          对于术语较多的网站,这项功能可以让用户更方便快捷地添加正确的术语。例如,如果在文章中添加了 “WordPress “一词,TaxoPress 就会自动添加包括 “内容管理系统”、”网站 “和 “网站设计 “在内的链接术语。

          功能 10. 管理条款

          TaxoPress 的 “管理条款 “界面提供了几个有用的工具来管理网站上的条款。这些工具可用于任何分类法。下面是 “管理条款 “界面的一些工具:

          • 添加术语:在内容中快速添加术语。
          • 重命名术语:批量更改术语名称。
          • 合并术语:将现有术语合并在一起。这对于修正术语中的错别字非常有用。
          • 删除未使用的术语:删除很少使用的所有术语。
        5. 推测性加载如何提高 WordPress 网站的页面速度

          如今,网页中充斥着旨在增强用户体验的图片、视频和互动元素。然而,这些东西会拖慢网页的加载时间。虽然技术一直在进步,有一个目标始终不变:性能。每个人都希望自己的网页能以闪电般的速度加载。让网页加载速度更快的一种方法是在用户浏览网页之前进行预渲染或预获取。

          预渲染简史

          2011 年,Chromium 团队 通过标签向 Chrome 浏览器引入了早期的预渲染形式<link rel="prerender" … >

          这样,开发人员就可以向浏览器提示用户下一步可能访问的页面。然后,浏览器会在后台静默地获取并呈现这些页面,从而大大缩短了用户浏览这些页面时的加载时间。

          尽管好处多多,但这种早期的预渲染功能会占用大量带宽和 CPU 资源,而且如果用户不访问预渲染的页面,还可能导致隐私问题。此外,你还必须手动选择要预演的链接,这并不总是有效或可行的。

          为了解决其中一些问题,Chrome 弃用了使用链接rel=prerender提示的预渲染,转而使用NoState Prefetch 方法,该方法涉及在不执行 JavaScript 或其他潜在侵犯隐私的操作的情况下获取页面资源。NoState Prefetch 方法改进了资源加载,但无法像完整预渲染那样提供即时页面加载。

          推测规则 API 简介

          推测规则 API是 一个新的实验性 JSON 定义的 API,它在导航到 URL 之前推测性地预加载 URL,从而缩短渲染时间并改善用户体验。

          该 API 使开发人员能够使用 JSON 格式定义的结构来配置规则,script type="speculationrules"浏览器可以使用该结构来决定应预渲染哪些 URL。

          <script type="speculationrules">
          {
            "prerender": [
              {
                "source": "list",
                "urls": ["firstpage.html", "secondpage.html"]
              }
            ]
          }
          </script>

          在预取时也是如此,预取通常是预渲染的第一步:

          <script type="speculationrules">
          {
            "prefetch": [
              {
                "urls": ["firstpage.html", "secondpage.html"]
              }
            ]
          }
          </script>

          上面的代码片段显示了推测规则 API 如何通过指定要预取或预渲染的 URL 列表来工作。最近,Google 宣布了对推测规则 API 的新改进,现在提供了使用文档规则自动查找链接的选项。这是通过根据条件从文档中获取 URL 来实现的where

          <script type="speculationrules">
          {
            "prerender": [
              {
                "source": "document",
                "where": {
                  "and": [
                    {
                      "href_matches": "/*"
                    },
                    {
                      "not": {
                        "href_matches": [
                          "/wp-login.php",
                          "/wp-admin/*"
                        ]
                      }
                    }
                  ]
                },
                "eagerness": "moderate"
              }
            ]
          }
          </script>

          在此代码片段中,页面上的所有 URL 都被考虑进行预渲染,除了那些指向WordPress 登录和管理页面的 URL。还可以指定级别eagerness– eager(立即)、moderate(悬停 200 毫秒)和conservative(鼠标或触地时)。

          CSS选择器也可以用作替代方案或与匹配项结合href使用来查找当前页面上的链接:

          <script type="speculationrules">
          {
            "prerender": [{
              "source": "document",
              "where": {
                "and": [
                  { "selector_matches": ".prerender" },
                  { "not": {"selector_matches": ".do-not-prerender"}}
                ]
              },
              "eagerness": "moderate"
            }]
          }
          </script>

          使用 “推测规则 API “时,可以在检查页面时使用 Chrome 浏览器应用程序选项卡中的 “推测负载 “后台服务进行检查。

          还有更多内容,我们将在调试部分进行研究。

          浏览器支持

          从特定版本开始, 基于Chromium 的现代浏览器(包括 Chrome 和 Edge)都支持推测规则 API

          图片[4]-361Sale WordPress Care

          由于 API 是渐进式增强工具,因此可确保使用受支持浏览器的用户受益于更快的加载时间,而使用其他浏览器的用户则不会受到任何负面影响。

          推测性加载 WordPress 插件

          为了享受 WordPress 中推测规则 API 的优势,WordPress 性能团队 (包括来自 Google 的开发人员)最近发布了推测加载插件。该插件支持推测加载页面上链接的前端 URL。

          到目前为止,由于应用程序接口仍处于早期阶段,该插件的采用率较低,但也获得了一些好评。

          默认情况下,该插件配置为当用户将鼠标悬停在相关链接上时预呈现 WordPress 前端 URL。这可以通过设置 >阅读 下的推测加载部分进行自定义。

          这意味着页面上链接的任何 URL 都会使用eagerness的配置进行预渲染moderate,该配置通常在将鼠标悬停在链接上时触发。因此,激活插件后您无需执行任何操作;它开箱即用

          例如,如果已 在 WordPress 网站上安装了推测性加载插件。使用Chrome DevTools 检查站点并单击Elements 选项卡。当您向下滚动时,注意到已经script type="speculationrules"为你添加了各种推测规则。

          它使用 Regex 来指定应该预渲染的链接,指定不预渲染的链接,并设置渴望程度。下文将详细解释这些规则。

          防止某些 URL 预获取和预呈现

          需要注意的是, 默认情况下, WP-admin路由被排除在预渲染和预取之外。作为一名WordPress 开发人员,可以决定想要优先考虑的路线。

          可以使用plsr_speculation_rules_href_exclude_paths过滤器自定义推测预加载的 URL 类型的规则。

          以下代码示例确保 URL 类似https://wordpresssite.com/cart/https://wordpresssite.com/cart/book/将被排除在预取和预渲染之外:

          <?php
           
          add_filter(
              'plsr_speculation_rules_href_exclude_paths',
              function ( $exclude_paths ) {
                  $exclude_paths[] = '/cart/*';
                  return $exclude_paths;
              }
          );

          调试 WordPress 网站的推测规则

          由于预渲染页面是在单独的渲染器中渲染的,就像一个隐藏的背景标签页,激活后会取代当前标签页,因此调试推测规则可能会很棘手。Chrome 浏览器团队在 DevTools 方面做了大量工作,让你可以使用它们进行调试。

          在 Chrome DevTools 中,导航到“应用程序” 选项卡,然后向下滚动到“推测性加载” 选项卡。这为开发人员提供了有关推测、预渲染 URL、失败 URL 等的详细信息。

          在这里,可以看到页面上的五个链接可以根据与在 Speculative rules JSON 中设置的规则相匹配的 URL 进行预渲染,如下所示。注意,我们不需要列出所有 URL;文档规则允许浏览器从页面上的相同来源链接中获取这些 URL。

          一些链接的 “状态 “显示为 “未触发”这些链接的预渲染过程尚未开始。不过,当我们将鼠标悬停在页面上的链接上时,就会看到状态随着每个 URL 的预渲染而改变。

          Chrome 浏览器对预渲染设置了限制,包括中度急切最多只能预渲染两次,因此在将鼠标悬停在第三个链接上后,我们会看到该 URL 的失败原因:

          还可以使用右上角的下拉菜单或选择面板顶部的 URL 并选择Inspect来切换 DevTools 面板使用的渲染器:

          下拉列表(以及所选的值)在所有其他面板(例如“网络” 面板)之间共享,可以在其中看到正在请求的页面是预渲染的页面:

          或者Elements 面板,可以看到页面内容:

          就像你能够调试预渲染页面一样,也可以预取页面。对于“推测性加载”插件,请确保选择“预取” 作为“推测模式”

          现在,使用 DevTools 检查页面并导航到“推测性加载”选项卡时,操作 针对各种 URL 进行预取,并且规则也会发生变化。

          将鼠标悬停在链接后导航到“网络”选项卡时,预取的资源将显示在最后,如“类型”列 所示 。这些资源以最低优先级获取,因为它们是为了将来的导航,并且 Chrome 会优先考虑当前页面的资源。

          推测规则 API 对分析的影响

          分析对于通过页面浏览量和事件跟踪网站使用情况以及通过真实用户监控 (RUM) 评估性能至关重要。重要的是要知道预渲染会影响分析。

          例如,使用推测规则 API 可能需要额外的代码才能仅在实际访问预渲染页面时激活分析。尽管Google Analytics、Google 发布商代码 (GPT) 和Google AdSense 会延迟跟踪直至页面处于活动状态,但并非所有提供商默认都会这样做。

          为了解决这个问题,可以设置 Promise 来仅在页面激活时初始化分析:

          // Promise to activate analytics on page activation for prerendered pages
          const whenActivated = new Promise((resolve) => {
            if (document.prerendering) {
              document.addEventListener('prerenderingchange', resolve);
            } else {
              resolve();
            }
          });
          
          async function initAnalytics() {
            await whenActivated;
            // Initialize analytics
          }
          
          initAnalytics();

          总结

          本文解释什么是 Speculative Rules API、它是如何工作的,以及如何在 WordPress 网站上使用它。它仍是一项试验性功能,但已逐渐得到广泛采用。推测规则仍然仅限于同一标签页中的页面,但正在努力减少这些限制。

        6. 如何将 JavaScript 添加到 WordPress 页面和帖子

          如何将 JavaScript 添加到 WordPress 页面和帖子

          JavaScript 是一种编程语言,可以为网站添加互动功能。学习如何在 WordPress 网站(包括特定部分)上使用 JavaScript,可以帮助你更有效地利用代码。有多种方法可以在 WordPress 页面和文章中添加 JavaScript。无论是使用插件、函数和钩子(hooks),还是编辑主题文件,都可以获得想要的自定义功能。

          图片[1]-361Sale WordPress Care

          可以在 WordPress 中使用 JavaScript 吗? 

          JavaScript 是一种编程语言,可用于改善网站的用户体验(UX),使其更具交互性和响应性。例如,当访问者点击一个按钮时,可以使用 JavaScript 创建一个弹出窗口。当有人将鼠标悬停在页面上的某个元素时,还可以显示一条信息。

          JavaScript 可以为 WordPress 页面和文章添加计算器、视频播放器和其他工具。虽然在 WordPress 中添加 JavaScript 需要一些基本的 HTML 和 CSS 知识,这是一个相对简单的过程。

          在 WordPress 中添加 JavaScript 代码前的注意事项

          在WordPress网站中添加JavaScript代码时,请务必记住,代码中的错误可能会破坏整个网站。最好的方法是在进行任何更改之前有站点备份。这样,如果出现问题,可以随时恢复网站。

          在添加任何自定义功能之前,需要备份 WordPress 网站的两个部分:

          1. 数据库:存储所有帖子、页面、设置和配置的位置。
          2. 文件:图像、视频、主题和插件。

          可以使用 Jetpack 等插件快速轻松地备份您的 WordPress 网站。另一种选择是手动备份文件。还应该考虑创建一个子主题来添加自定义代码。

          子主题是当前主题的复制品,可以在不影响原始代码的情况下对其进行自定义。如果错了,只需激活原主题即可恢复任何更改。这样还可以更新父主题,而不会丢失所做的代码更改。

          如何将 JavaScript 添加到整个 WordPress 网站

          如果想在整个 WordPress 网站中添加 JavaScript,有几种不同的方法。一种方法是在主题中添加自定义 HTML 文件,然后在该文件中插入 JavaScript 代码。

          另一种方法是创建一个包含 JavaScript 代码的 WordPress 插件。也可以简单地编辑 functions.php 文件并在其中插入代码。

          或者,对整个 WordPress 网站进行更改,也可以将 JavaScript 添加到页眉或页脚。最简单的方法是安装并激活插入页眉和页脚插件。

          在 WordPress 中添加自定义 JavaScript 的四种方法

          在网站上添加自定义 WordPress JavaScript 的方法有很多种:

          方法一:使用插件

          在 WordPress 中添加 JavaScript 的最简单方法是使用插件。这种方法比直接在主题中添加代码更灵活,也更容易管理。

          如果不擅长编码,或者想要一个更友好的解决方案,建议使用众多可用于在 WordPress 中添加 JavaScript 的插件之一。

          在本文中,我们将使用插入页眉和页脚

          激活插件后,导航至“设置” → “在 WordPress 仪表盘中插入页眉和页脚” 。

          你会看到两个方框,分别标记为Scripts in HeaderScripts in Footer。添加到这两个框中的任何代码都将插入到网站的页眉或页脚。这就是您要添加 JavaScript 的地方。

          如果你想添加一个JavaScript 确认框。在“标题中的脚本” 框中,插入以下代码:

          <!DOCTYPE html>
          <html>
          <body>
          <h2>JavaScript Confirm Box</h2>
          <button onclick="myFunction()">Try it</button>
          <p></p>
          <script>
          function myFunction() {
           var txt;
           if (confirm("Press a button!")) {
            txt = "You pressed OK!";
           } else {
            txt = "You pressed Cancel!";
           }
           document.getElementById("demo").innerHTML = txt;
          }
          </script>
          </body>
          </html>

          这段代码将在标题中显示一个 “尝试 “按钮。当你选择该按钮时,它会确认你按下了该按钮。

          可以登录自己的网站,点击 “试用 “按钮来测试这一功能。

          方法 2:在主题中添加 JavaScript

          在主题中直接添加 JavaScript 是最简单的方法之一。在主题目录下创建一个新文件,并将其命名为 “custom.js”。

          然后,将 JavaScript 代码添加到该文件中并保存。最后,编辑 header.php 文件并添加一行代码来加载新的 JavaScript 文件:

          ?php%20bloginfo('template_directory');%20?/custom.js

          记住用文件名替换 “custom.js”。添加完这行代码后,保存 header.php 文件并上传到服务器。现在,你的 JavaScript 代码应该就可以在整个 WordPress 网站上运行了。

          方法 3:使用 WordPress 函数和钩子

          还可以使用WordPress 函数和挂钩添加自定义代码。函数是一段执行特定操作的代码。例如,wp_enqueue_script() 函数用于加载 JavaScript 文件。

          钩子是 WordPress 的一种功能,可以在不编辑任何核心文件的情况下添加代码。钩子有两种类型:动作和过滤器。

          操作是在页面加载期间在特定点触发的 PHP 函数。例如,wp_head 操作挂钩在主题的header.php文件中的 </head> 标记之前触发。可以使用此挂钩将自定义代码或脚本添加到标头。

          过滤器可修改现有代码或数据。例如,the_content 过滤器可以在显示文章之前修改其内容。要使用函数和钩子为 WordPress 网站添加自定义 JavaScript,你需要将代码插入到子主题的 functions.php 文件中。

          在 WordPress 目录中添加一个新文件夹,创建一个子主题。然后创建一个包含子主题样式的 style.css 文件。接下来,你需要在 style.css 文件中添加以下代码:

          /*
          Theme Name: Twenty Twenty-Two Child
          Template: twentytwentytwo
          */

          创建好子主题后,你可以从 WordPress 面板进入外观 → 主题文件编辑器来激活它。导航至 functions.php 文件,然后添加以下代码:

          function ti_custom_javascript() {
              ?>
                  <script>
                    // your javascript code goes here
                  </script>
              <?php
          }
          add_action('wp_head', 'ti_custom_javascript');

          完成后,保存更改。 

          方法4:创建插件

          如果想将 JavaScript 代码与主题分开,可以创建一个 WordPress 插件来包含 JavaScript 代码。与直接将代码添加到主题中相比,创建插件的工作量更大。不过,这种方法更加灵活,也更易于管理。

          要创建插件,首先需要在 WordPress 安装的 wp-content/plugins 目录中新建一个目录。将该目录命名为 “my-javascript-plugin”。

          然后,在该目录中新建一个文件,并命名为 “my-javascript-plugin.php”。该文件的内容应如下所示:

          <?PHP 
          /* 
          Plugin Name: My JavaScript Plugin 
          Plugin URI: http://example.com/ 
          Description: This plugin contains my JavaScript code. 
          Version: 1.0 
          Author: Jane Doe 
          Author URI: http://example.com/ 
          */  
          ?>

          将Plugin NamePlugin URIDescriptionAuthorAuthor URI字段替换为你的值。这些只是描述插件的一般信息字段。

          接下来,需要在文件中添加 JavaScript 代码。代码应放在初始插件信息的下方,但要在关闭的 PHP 标记 (?>) 之前。添加代码后,保存文件并上传到服务器。

          现在,插件应该已经安装并激活。可以进入 WordPress 管理面板中的插件页面,验证插件是否正常工作。应该会看到你的插件在那里列出。

          如何将 JavaScript 添加到特定 WordPress 页面或帖子

          如果想在特定 WordPress 页面或文章中添加 JavaScript,可以直接在主题编辑器中插入代码。找到functions.php 文件,然后添加以下代码:

          function ti_custom_javascript() {
            if (is_single ('1')) { 
              ?>
                  <script type="text/javascript">
                    // your javascript code goes here
                  </script>
              <?php
            }
          }
          add_action('wp_head', 'ti_custom_javascript');

          需要将上述代码中的 “1 “改为帖子或页面 ID。从仪表板打开帖子,然后在浏览器栏中找到 URL,就能找到这个编号。ID 号就在 “post=”旁边:

          替换该数字并添加自定义 JavaScript 后,记得保存文件。 

          如何在 WordPress 菜单中添加 JavaScript

          要在 WordPress 菜单中添加 JavaScript,需要创建一个自定义菜单项。首先,使用 “开发工具”(Developer Tools)找到菜单项的ID号,然后使用jQuery以该ID为目标。会在访客点击菜单项时触发脚本。

          如何将 JavaScript 添加到 WordPress 页脚

          将 JavaScript 添加到 WordPress 页脚的最简单方法是使用插入页眉和页脚等插件。该工具可以将代码插入 WordPress 网站的页眉和页脚,而无需编辑任何主题文件。

          要使用插入页眉和页脚,只需安装并激活该插件即可。然后,转到设置插入页眉和页脚。 在设置页面上,会看到三个框,用于将代码添加到网站的页眉、正文和页脚。只需将 JavaScript 代码粘贴到页脚 框中相应的脚本中,然后单击“保存”按钮即可。

          另一种方法是编辑functions.php文件。可以在网站的页脚中插入以下代码来运行 JavaScript:

          function wpb_hook_javascript_footer() {
              ?>
                  <script>
                    // your javascript code goes here
                  </script>
              <?php
          }
          add_action('wp_footer', 'wpb_hook_javascript_footer');

          此代码将挂钩到 wp_footer。完成后记得保存文件以更新更改。

          如何将 JavaScript 添加到 WordPress 小部件

          要将 JavaScript 添加到 WordPress 小部件,需要编辑小部件的代码。单击小部件的菜单并选择“编辑为 HTML”

          在块的代码编辑器中,添加 <script> 标签和 JavaScript 代码。完成后,选择“更新”按钮。

          如何将“onclick”JavaScript 添加到 WordPress 按钮

          向 WordPress 按钮添加“onclick”事件是向网站添加额外功能的好方法。可以使用 onclick 事件来触发弹出窗口或在单击按钮时显示消息。

          要将onclick 事件添加到 WordPress 按钮,需要编辑按钮的代码并添加以下属性:onclick=”your_function()”。务必将“your_function()”替换为单击按钮时要运行的 JavaScript 代码。添加 onclick 属性后,点击“保存”按钮。按钮现在应该添加了 onclick 事件。

          如何查找和调试 WordPress 页面上的 JavaScript 错误

          要查找和调试 JavaScript 错误,可以在站点的wp-config.php文件中启用脚本调试。 

          通过文件传输协议 (FTP) 客户端或文件管理器打开文件。然后插入以下代码:

          define('SCRIPT_DEBUG', true);

          记住将此代码放在 “就这样,停止编辑!祝你写博愉快 “一行。

          要查找和调试 WordPress 页面上的 JavaScript 错误,可以使用浏览器。在谷歌浏览器中,点击右上角的菜单图标(三个竖点)。然后,从下拉菜单中选择更多工具 开发人员工具

          还可以通过按Ctrl + Shift + J (Windows/Linux) 或Cmd + Option + J (Mac) 来访问开发人员工具。

          打开开发人员工具后,单击“控制台”选项卡。在这里,吧会看到 WordPress 网站上发生的所有 JavaScript 错误。

          如果不确定错误的含义或如何修复,可以上网搜索。只需将错误信息复制并粘贴到搜索引擎中,就能找到一些有用的结果。还可以尝试停用所有 WordPress 插件,看看这种方法是否能解决问题。如果可以,就说明是其中一个插件导致了问题。可以逐个重新激活插件,直到找到问题插件,从而缩小导致问题的工具范围。

          结论

          在 WordPress 网站中添加 JavaScript 可以创建交互功能,改善页面的用户体验(UX)。添加 JavaScript 有几种不同的方法。最适合你的方法取决于你的喜好和所添加代码的性质。如果只是插入少量代码,直接使用主题可能最简单。但如果要添加大量代码,使用插件或编辑 functions.php 可能会更好。

        7. 给 WooCommerce 商店创建高级报告应用程序

          给 WooCommerce 商店创建高级报告应用程序

          WordPress 的 WooCommerce 插件可以高效地创建和管理电子商务平台,并提供内置通知功能,提醒你新订单或已完成订单、库存量不足以及付款成功等信息。这些功能非常重要,但对 WooCommerce 收集到的宝贵数据的深入了解却非常有限。

          这些限制是在 WordPress 环境中运行的传统插件的特性。通过与 WooCommerce API 集成并使用外部资源,托管应用程序可以提供高级报告、定制警报以及对电子商务交易的详细了解。

          图片[1]-361Sale WordPress Care

          现有的报告和通知功能

          WooCommerce 的内置警报和状态更新有助于进行基本的店铺管理,但可能无法满足所有业务需求。因此,许多用户转而使用第三方插件来增强通知和报告功能。

          其中最受欢迎的插件包括:

          借助这些插件,WooCommerce 可提供报告和警报选项,包括订单摘要、低库存警报、库存管理,以及通过与 Google Analytics 等工具的集成进行深入分析。

          当前报告系统的局限性

          当前的报告系统虽然有益,但功能有限,并引入了一些限制:

          • 定制:通用报告工具和插件限制了从数据中获得深入而具体的见解。需要专门的指标、独特的可视化、与专有分析工具的集成,或某些通用报告工具和插件无法提供的数据过滤器。
          • 可扩展性: 现有的报告系统在处理大型数据集时可能会面临可扩展性问题。缓慢的性能和数据处理瓶颈会阻碍高效的数据分析,导致决策和响应时间的延迟。
          • 对 WordPress 的依赖:由于与 WordPress 的集成限制了独立性、自定义和可扩展性,可能会面临与服务器资源、插件兼容性和安全漏洞相关的限制。这种集成还可能阻碍企业采用更先进的技术和解决方案。

          高级报告应用程序

          本指南中设想的高级报告应用程序具有以下功能:

          • 当客户下新订单时,会通过电子邮件向店主发送详细的交易提醒。该应用程序还有一个仪表板,显示所有订单及其详细信息。
          • 库存更新会在仪表盘上显示商店库存详情。在这里,可以轻松跟踪每种产品的库存水平。
          • 总销售额报告可让分析一段时间内的收入趋势。

          与通用插件或默认的 WooCommerce 通知和警报系统不同,该应用程序提供有关剩余库存和总销售额的详细和可定制的警报。

          如何开发高级报告应用程序

          在本节中,让我们使用 Node.js 以及WooCommerce REST API 和Webhook一起构建一个报告应用程序,以检索商店数据。

          要求:

          配置入门模板

          按照下面步骤配置入门模板:

          1. 记下你的 Mailgun API 密钥和沙箱域 ,并将它们的值 与相应的变量一起粘贴到.env文件中。对于MAILGUN_SENDER_EMAIL变量,提供用于创建 Mailgun 帐户的电子邮件作为值。
          2. 在 WordPress 管理仪表板上,选择WooCommerce  >设置 >高级 > REST API
          1. 单击添加密钥 创建 API 密钥以对来自应用程序的请求进行身份验证。
          2. 打开密钥详细信息 部分并提供说明和用户,选择读/写 权限,然后单击生成 API 密钥
          1. 确保 从结果页面复制消费者密钥 和消费者密钥,因为无法再次看到它们。
          2. 打开.env 文件并将在上一步中复制的值分配给各自的变量。提供变量的商店 URL WOOCOMMERCE_STORE_URL (类似于http://localhost/mystore/index.php)。
          3. 通过在终端中执行以下命令来安装所有项目依赖项:
          npm i express @woocommerce/woocommerce-rest-api dotenv ejs mailgun.js
          
          npm i -D nodemon

          这些依赖关系的作用如下:

          • express:用于创建 API 的 Node.js 框架。
          • @woocommerce/woocommerce-rest-api:对WooCommerce REST API进行网络调用。
          • dotenv:从.env文件加载环境变量 。
          • ejs:创建 JavaScript 模板。
          • mailgun.js:使用 Mailgun 发送电子邮件。
          • nodemon:检测到文件更改时自动重新启动服务器。

          实现应用功能

          起始模板包含用于呈现视图文件夹中的嵌入式 JavaScript (EJS) 模板的代码 。这样,可以专注于服务器逻辑,该逻辑从 WooCommerce API 获取必要的数据并将其传递到 EJS 模板以显示在用户界面 (UI) 上。

          要实现应用程序的功能,请执行以下步骤:

          1. 在项目的根文件夹中创建一个名为server.js 的文件。该文件充当 Express 服务器的入口点。
          2. server.js 文件中粘贴以下代码:
          const express = require('express')
          const WooCommerceRestApi = require("@woocommerce/woocommerce-rest-api").default;
          require('dotenv').config();
          
          const app = express()
          const port = 3000
          
          const WooCommerce = new WooCommerceRestApi({
           url: process.env.WOOCOMMERCE_STORE_URL,
           consumerKey: process.env.WOOCOMMERCE_CONSUMER_KEY,
           consumerSecret: process.env.WOOCOMMERCE_SECRET_KEY,
           version: "wc/v3"
          });
          
          app.set('view engine', 'ejs')
          
          // endpoint to check if the application is up and running
          app.get('/', (req, res) => {
             res.send('The application is up and running!')
          })
          
          // retrieve all products in the store
          app.get('/products', (req, res) => {
             WooCommerce.get("products")
                 .then((response) => {
                     res.render('pages/inventory', {
                         products: response.data,
                         currentPage: req.originalUrl
                     });
                 })
                 .catch((error) => {
                     console.log(error.response.data);
                 });
          })
          
          app.listen(port, () => {
           console.log(`App listening on port ${port}`)
          })

          上面的代码使用 Express.js 创建一个 Web 服务器。首先需要导入所需的软件包,配置 WooCommerce 客户端以与WooCommerce REST API交互,并将应用程序设置为使用 EJS 模板。

          首先,定义一个/ 端点,用于检查应用程序是否正常运行。然后,定义一个/products 从 WooCommerce 商店检索所有产品的路由。如果成功,此路由将inventory 使用获取的数据呈现模板。

          注意,代码还将currentPage所有路由的模板传递给模板,这有助于识别仪表盘上的活动页面。

          1. 运行命令npm run dev 并http://localhost:3000/products 在浏览器中打开查看结果:

          商店库存页面显示商店中的所有产品及其详细信息。这些信息可帮助跟踪可用产品并进行相应的库存管理。

          1. 要处理销售报告,请在 server.js 文件中添加以下路由:
          // retrieve monthly sales report
          app.get('/sales', (req, res) => {
             WooCommerce.get("reports/sales", {
                 		period: "month"
             })
                 .then((response) => {
                     res.render('pages/sales', {
                         sales: response.data,
                         currentPage: req.originalUrl
                     })
                 })
                 .catch((error) => {
                   console.log(error.response.data);
                 });
          })

          此代码定义一个/sales 端点,用于从 WooCommerce 销售报告 API 检索每月销售报告。 API 调用包含period 值为 的参数month,该参数指定当月的销售报告。请求成功后,代码会使用获取的数据渲染销售 EJS 模板。

          1. 在浏览器中导航至http://localhost:3000/sales 查看结果:
          图片[7]-361Sale WordPress Care

          本页显示全面的销售总额报告,帮助分析每月收入趋势。

          实施订单管理

          1. 将以下路由添加到server.js 文件中。
          // retrieve all orders
          app.get('/orders', (req, res) => {
             WooCommerce.get("orders")
                 .then((response) => {
                     res.render('pages/orders', {
                         orders: response.data,
                         currentPage: req.originalUrl
                     })
                 })
                 .catch((error) => {
                     console.log(error.response.data);
                 });
          })
          

          这段代码将检索 WooCommerce 商店中的所有订单,并使用获取的数据渲染订单模板。

          1. 在浏览器中导航至http://localhost:3000/orders 查看结果。此页面显示订单管理信息:

          自定义综合交易报告的警报

          要实现当客户在网站上订购时向你发送定制电子邮件提醒的功能,按照下面步骤操作:

          1. 打开终端窗口并运行ngrok http 3000 以建立 Web 服务器连接的隧道。该命令生成一个 HTTPS 链接,WooCommerce 可使用该链接发送 webhook 数据。复制生成的转发链接。
          2. 在 server.js 文件中添加以下路由:
          app.post('/woocommerce-webhook/new-order', (req, res) => {
             const data = req.body; // Received data from the WooCommerce webhook
             console.log('New order:', data);
          
             if(data?.id){
                 mg.messages.create(process.env.MAILGUN_SANDBOX_DOMAIN, {
                     from: `WooCommerce Store <${process.env.MAILGUN_SENDER_EMAIL}> `,
                     to: [process.env.MAILGUN_SENDER_EMAIL],
                     subject: "New Order Created",
                     html: newOrderEmail(data.order_key, `${data.billing.first_name} ${data.billing.last_name}`, data.billing.email, data.total, data.status, data.payment_method_title, data.line_items)
                 })
                 .then(msg => console.log(msg)) // logs response data
                 .catch(err => console.log(err)); // logs any error
             }
          
             res.status(200).send('Webhook received successfully'); // Send a response to WooCommerce
          });

          这段代码定义了一个路由,用于处理客户创建新订单时触发的 WooCommerce 网络钩子传入的数据。如果接收到的数据包含 id 属性(表示订单有效),它就会使用 Mailgun API 向指定的电子邮件地址发送电子邮件通知。

          电子邮件包括各种订单详细信息,如客户姓名、电子邮件、总金额、状态、付款方式和已购商品列表。

          代码使用 utils/new-order-email.js 文件中定义的 newOrderEMail() 函数编写电子邮件,该函数会返回一个自定义电子邮件模板。处理数据并发送电子邮件后,服务器会响应状态代码 200,表示成功收到网络钩子和相应的消息(”成功收到网络钩子”)。

          1. 添加以下语句来导入newOrderEmail() 函数:
          const { newOrderEmail } = require('./utils/new-order-email');
          1. 运行命令npm run start 来启动服务器。
          2. 在 WordPress 管理仪表板上,选择WooCommerce  >设置 >高级 > Webhooks
          图片[9]-361Sale WordPress Care
          1. 单击添加 Webhook并在Webhook 数据表单 中提供以下信息:
          • 名称: 新订单提醒
          • 状态:活跃
          • 主题:订单已创建
          • 传送 URL:粘贴您在步骤 1 中复制的 ngrok 转发 URL。确保附加/woocommerce-webhook/new-order 到 URL。这是新定义的用于接收 Webhook 负载的端点。
          • 秘密Secret):留空。默认为当前 API 用户的消费者秘密。该秘密会在请求头中生成已交付网络钩子的哈希值。接收方可使用该秘密验证传入数据的真实性。如果签名与预期值相符,就能确认数据是由 WooCommerce 发送的,从而提供信任和安全性。
          • API 版本:WP REST API 集成 v3。
          1. 单击保存 webhook
          2. 访问商店并下订单。应该会看到一封如下所示的电子邮件:

          总结

          创建了一个高级报告应用程序,可更新剩余库存水平并提供全面的销售总额报告。它还提供详细的交易提醒,让你实时了解具体交易,包括产品详情、数量和客户信息,从而主动管理库存,了解销售趋势和收入模式。

        8. 如何在静态网站中实现表单

          如何在静态网站中实现表单

          网站的设计、目的和复杂程度各不相同,但一般分为静态和动态两种。静态网站预先渲染,向所有访问者提供相同的内容。它们结构简单,通常易于管理,加载速度快。另一方面,动态网站使用服务器端编程语言即时生成内容。

          静态网站通常不支持直接在网站上处理表单等互动元素,因为这类操作需要服务器来存储和处理数据。但这里有个问题:表单是用户与我们交流的重要桥梁。通过表单,我们可以获取用户的宝贵建议或询问,从而根据这些反馈来优化我们的网站内容,为用户带来更好的体验。不过,静态网站无法直接完成这一任务,所以我们可以通过定制内容来改善用户体验。

          图片[1]-361Sale WordPress Care

          选择表单处理服务

          表单处理服务是为静态网站收集和处理表单数据的第三方。它们提供处理表单提交所需的服务器端基础设施,在保持静态网站优势的同时增强网站的功能和互动性。

          当用户提交表单时,数据会被发送到表单处理服务的端点。然后,服务会对数据进行处理、安全存储,并向适当的接收者发送通知。表单处理服务有很多。让我们来了解一下最流行的表单处理服务。

          1.  Formspree

          Formspree 是一种用户友好的表单处理服务,可简化静态站点中添加表单和管理表单提交的过程。它提供具有基本功能(例如每月 50 份表单提交)的免费版,以及具有更高级功能(包括安全列表和垃圾邮件防护)的付费版。

          2. Formbucket

          FormBucket 提通过将表单保存到 “桶 “中,为收集和管理表单提交提供了一种便捷的方式,每个 “桶 “都有一个唯一的 URL。你可以通过 Formbucket 用户友好的仪表板页面为表单定义字段和设置验证规则,使其与你的网站品牌相一致。

          3.  Getform

          Getform 是一个表单后端平台,为处理表单提交提供了一种简单而安全的方式。Getform 提供直观的用户界面,用于管理表单提交、电子邮件通知以及与 Slack 和 Google Sheets 等流行服务的集成。

          使用 Getform 设置表单处理服务

          使用 Getform 等表单处理服务可以大大简化网站上的表单提交管理。当用户提交表单时,Getform 会接管整个过程,无需后台 API 来处理和存储这些提交。

          通过这种无缝集成,你可以在专用的消息收件箱中有效地管理所有回复。要开始使用,要对HTMLCSSJavaScript有基本的了解,并按照以下步骤操作:

          1. 注册 Getform 帐户。
          2. 到你的 Getform 帐户仪表盘并单击+ 创建 按钮。
          3. 在出现的对话框中,确保 选择“表单” 。提供描述性端点名称并选择适当的时区。然后,单击“创建”
          图片[3]-361Sale WordPress Care

          Getform 将生成表单提交端点 URL,必须将其添加到表单元素的 action 属性中。

          使用 HTML 和 CSS 创建表单

          设置好表单处理服务后,就可以使用 HTML、CSS 和 JavaScript 创建表格了。

          1.在终端中,创建一个名为forms的项目文件夹 ,并将当前目录更改为项目目录:mkdir forms

          mkdir forms
          cd forms

            2.添加以下项目文件:

            #unix-based systems
            touch index.html styles.css script.js 
            
            #windows
            echo. > index.html & echo. > styles.css & echo. > script.js

            3.接下来,创建一个 HTML 表单。在本指南中,下面提供的代码将帮助你创建一个表单,其中包括姓名和电子邮件地址输入框、信息文本区和提交按钮。可以将此代码添加到你的 index.html 文件中:

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Contact Form</title>
                <link rel="stylesheet" href="styles.css">
            </head>
            <body>
                <div class="container">
                    <h1 class="form-title">Contact Us</h1>
                    <form class="contact-form" name="contactForm" action="<Getform URL>" method="POST">
                        <div class="input-group">
                            <label for="name" class="form-label">Name:</label>
                            <input type="text" id="name" name="name" class="form-input" required>
            
                            <label for="email" class="form-label">Email:</label>
                            <input type="email" id="email" name="email" class="form-input" required>
            
                            <label for="message" class="form-label">Message:</label>
                            <textarea id="message" name="message" class="form-textarea" rows="4" required>
                            </textarea>
                        </div>
            
                        <div class="form-control">
                            <button type="submit" id="submitBtn" class="form-submit">Submit</button>
                        </div>  
                    </form>
                </div>
                <script src="script.js"></script>
            </body>
            </html>

            4.导航至 Getform 面板并复制端点 URL。然后,将此 URL 粘贴到 HTML 代码中表单开头标签内的 action 属性中。
            5.最后,在 styles.css 文件中添加 CSS 样式,自定义表单的设计和外观。

            图片[4]-361Sale WordPress Care

            使用 JavaScript 实现数据验证

            在处理或存储之前,数据验证会检查用户输入是否符合特定的标准和验证规则。执行数据验证有助于避免提交错误或恶意数据,为用户提供输入错误的即时反馈,并确保只有有效数据才能得到进一步处理。它在维护数据完整性和准确性方面起着至关重要的作用。

            实现数据验证有几种方法,包括使用 JavaScript 执行客户端验证、服务器端验证或两种方法的结合。在本文中,我们将对联系表单实施客户端验证,以确保用户不会提交空字段,并确保所提供的电子邮件格式正确。

            1.首先,通过将以下代码添加到script.js 文件来定义验证函数:

            function validateForm() {
                const name = document.getElementById('name').value;
                const email = document.getElementById('email').value;
                const message = document.getElementById('message').value;
                if (name.trim() === '' || message.trim() === '') {
                    alert('Please fill out all fields.');
                    return false;
                }
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email)) {
                    alert('Please enter a valid email address.');
                    return false;
                }
                return true;
            }

            validateForm() 函数有两个作用:首先,它检查姓名和信息字段是否为空,然后使用正则表达式验证电子邮件字段,并检查电子邮件地址是否为有效格式。

            如果字段为空或电子邮件格式无效,函数将触发并显示一条警报信息。反之,如果所有表单字段都通过了这些验证检查,则函数返回 true,表单提交。

            图片[5]-361Sale WordPress Care

            还可以添加其他验证规则,以确保提交数据的准确性和完整性。例如,可以验证用户输入的长度,或限制用户在信息中提交某些字符,从而帮助防止潜在的安全漏洞(如注入攻击)。

            2.接下来,调用上面的函数,使用点击事件监听器回调启用验证。每次用户点击提交按钮时,该回调都会触发函数。要调用该函数,请在 script.js 文件中添加以下代码:

            document.addEventListener('DOMContentLoaded', function () {
            	const submitButton = document.getElementById('submitBtn');
            
            	if (submitButton) {
            		submitButton.addEventListener('click', function (event) {
            			event.preventDefault();
            			if (validateForm()) {
            				document.forms['contactForm'].submit();
            				resetFormAfterSubmission();
            			}
            			return false;
            		});
            	}
            });
            
            function resetFormAfterSubmission() {
            	setTimeout(function () {
            		const contactForm = document.forms['contactForm'];
            		contactForm.reset();
            	}, 500);
            }

            注意,代码中包含 preventDefault() 函数,用于阻止默认表单提交操作。这样,你就可以在向 Getform 提交信息之前验证表单。

            在成功验证和提交后,会触发 resetFormAfterSubmission() 函数,在半秒延迟后重置表单,以便允许更多提交。

            总结

            现在,已经成功实施了表单,有无数机会可以对其进行自定义。例如,可以使用 CSS 或你喜欢的预处理器语言进一步设计表单样式,并实施高级验证技术,从而增强表单的设计和功能。