解决WordPress自定义古腾堡区块不显示问题：脚本路径配置详解

---

本教程旨在解决wordpress自定义古腾堡区块在编辑器中不显示的问题。核心原因通常在于j*ascript脚本的加载路径配置不正确，特别是当开发者误用文件系统路径（如`wp_plugin_dir`）而非url路径（如`plugin_dir_url(__file__)`）来注册前端资源时。文章将详细阐述正确的资源注册方法，并提供示例代码，确保您的自定义区块能顺利加载并出现在古腾堡编辑器中。

在WordPress古腾堡编辑器中开发自定义区块时，一个常见且令人困扰的问题是：尽管代码看起来都正确无误，但自定义区块却无法在区块插入器中找到。这通常表明区块的J*aScript或CSS资源未能被编辑器正确加载。本文将深入探讨这一问题，并提供详细的解决方案。

理解古腾堡区块的资源加载机制

WordPress古腾堡区块的注册和渲染涉及前端（J*aScript、CSS）和后端（PHP）的协同工作。当您通过register_block_type函数在PHP中注册一个区块时，您需要指定其编辑脚本（editor_script）和样式（editor_style），这些通常是J*aScript和CSS文件的句柄。WordPress随后会根据这些句柄去加载对应的资源。

关键在于，wp_register_script和wp_register_style等函数在注册脚本和样式时，其第二个参数期望的是一个可由浏览器访问的URL路径，而非服务器上的文件系统路径。这是因为浏览器需要通过HTTP请求来获取这些文件。

常见问题：错误的脚本路径

许多开发者在初次开发自定义区块时，可能会错误地使用文件系统路径来构建脚本的URL。例如，使用WP_PLUGIN_DIR或ABSPATH等常量来拼接资源路径。虽然这些常量可以帮助您找到服务器上的文件，但它们并不能生成一个浏览器可以访问的URL。

考虑以下错误的PHP注册代码示例：

add_action('init', function() {
    $asset_file = include( WP_PLUGIN_DIR . '/ghs-custom-blocks/assets/js/landing-page-block.asset.php');

    // 错误：WP_PLUGIN_DIR 提供的是文件系统路径，而非URL
    wp_register_script('ghs-landing-page',
        WP_PLUGIN_DIR . '/ghs-custom-blocks/assets/js/landing-page-block.js',
        $asset_file['dependencies'],
        $asset_file['version']);

    register_block_type('ghs/landing-page-block', [
        'api_version' => 2,
        'editor_script' => 'ghs-landing-page',
    ]);
});

在这段代码中，WP_PLUGIN_DIR . '/ghs-custom-blocks/assets/js/landing-page-block.js'会生成类似/var/www/html/wp-content/plugins/ghs-custom-blocks/assets/js/landing-page-block.js这样的服务器文件路径。当WordPress尝试将其作为URL传递给浏览器时，浏览器会尝试从网站的根目录加载这个路径，导致404错误，从而使区块的J*aScript逻辑无法加载，最终区块也就不会出现在编辑器中。

解决方案：使用正确的URL函数

解决此问题的核心是使用WordPress提供的函数来获取插件或主题的URL路径。对于插件，最常用的函数是plugin_dir_url(__FILE__)。这个函数会返回当前插件目录的URL，例如http://yourdomain.com/wp-content/plugins/your-plugin/。

ViiTor AI

一个强大的多语言AI语音合成和视频转译平台

9414 查看详情

结合此函数，我们可以构建正确的脚本URL。

1. J*aScript区块定义 (示例)

首先，确保您的J*aScript区块定义是正确的。这部分代码通常通过Webpack等工具编译。

import { registerBlockType } from '@wordpress/blocks'

registerBlockType('ghs/landing-page-block', {
    title: 'Landing Page',
    apiVersion: 2,
    category: 'design',
    icon: 'smiley',
    description: 'Layout for the GHS landing page',
    keywords: ['GHS', 'landing', 'page', 'front'],
    edit: () => {
        return (<div>hello</div>)
    },
    s*e: () => {
        return (<div>hello</div>)
    }
});

2. PHP区块注册 (修正版)

接下来，修正PHP中的区块注册代码，使用plugin_dir_url(__FILE__)来构建脚本的URL。

add_action('init', function() {
    // 获取插件基础URL
    $plugin_base_url = plugin_dir_url(__FILE__);

    // 假设您的资产文件在插件根目录下的 'assets/js/' 文件夹中
    // 确保这里的路径与实际文件位置相符
    $asset_file_path = plugin_dir_path(__FILE__) . 'assets/js/landing-page-block.asset.php';
    if (file_exists($asset_file_path)) {
        $asset_file = include($asset_file_path);
    } else {
        // 如果 .asset.php 文件不存在，设置默认依赖和版本
        $asset_file = ['dependencies' => [], 'version' => filemtime(plugin_dir_path(__FILE__) . 'assets/js/landing-page-block.js')];
    }

    // 正确：使用 plugin_dir_url(__FILE__) 构建脚本的URL
    wp_register_script(
        'ghs-landing-page',
        $plugin_base_url . 'assets/js/landing-page-block.js', // 正确的URL路径
        $asset_file['dependencies'],
        $asset_file['version']
    );

    register_block_type('ghs/landing-page-block', [
        'api_version' => 2,
        'editor_script' => 'ghs-landing-page', // 确保句柄匹配
    ]);
});

代码说明：

• plugin_dir_url(__FILE__): 这个函数会返回当前PHP文件所在目录的URL。通过将其与脚本的相对路径拼接，我们得到了一个浏览器可以访问的完整URL。
• plugin_dir_path(__FILE__): 用于获取文件系统路径，在包含.asset.php文件时仍然适用，因为它需要文件系统路径。
• .asset.php文件：这是WordPress块开发中用于管理脚本依赖和版本号的推荐方式。确保其路径和内容正确。如果文件不存在，代码中也提供了回退方案。

额外注意事项与排查技巧

1. 浏览器开发者工具：
   • 网络 (Network) 标签页： 打开古腾堡编辑器，检查浏览器的网络请求。查找您的区块脚本文件（例如landing-page-block.js）。如果看到404错误，那么路径配置无疑是错误的。
   • 控制台 (Console) 标签页： 检查是否有J*aScript错误。有时，即使脚本加载了，但其中的错误也可能阻止区块的注册。
2. 缓存问题： 务必清除所有缓存，包括浏览器缓存、WordPress缓存插件缓存以及CDN缓存（如果使用）。缓存可能会导致旧的、错误的路径配置持续生效。
3. 句柄匹配： 确保wp_register_script中定义的脚本句柄（例如'ghs-landing-page'）与register_block_type中editor_script参数的值完全匹配。
4. 文件存在性： 仔细检查J*aScript文件和.asset.php文件在服务器上的实际位置，确保PHP代码中拼接的路径能够准确指向它们。
5. 插件/主题冲突： 尝试切换到默认主题（如Twenty Twenty-Four），并禁用其他所有插件，只保留您的自定义区块插件，以排除潜在的冲突。

总结

自定义WordPress古腾堡区块不显示在编辑器中，最常见的原因是J*aScript脚本的加载路径配置不正确。核心在于区分文件系统路径和URL路径，并始终使用plugin_dir_url(__FILE__)（对于插件）或get_template_directory_uri()（对于主题）等函数来生成浏览器可访问的资源URL。通过仔细检查代码并利用浏览器开发者工具进行排查，您可以有效地解决此类问题，确保您的自定义区块顺利集成到WordPress编辑器中。

以上就是解决WordPress自定义古腾堡区块不显示问题：脚本路径配置详解的详细内容，更多请关注php中文网其它相关文章！

# 句柄  # 嘉祥品牌seo策划招聘  # 衡水网站推广优化  # 建瓯seo优化软件  # 烟台网络营销推广平台  # 青海网站建设运营方案  # 安溪网站建设推广  # 中山seo教研  # 厦门抖音关键词排名提升  # 义乌网站海外推广  # 开封靠谱网站建设推荐  # 出现在  # 编辑器  # 而非  # 的是  # 器中  # css  # 文件系统  # 加载  # 您的  # 自定义  # 工具  # 浏览器  # wordpress  # go  # 前端  # js  # html  # java  # word  # javascript  # php 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】

相关推荐： 抖音号升级企业号怎么改名字？升级企业号有哪些好处？  解决 Vue 3 组件未定义错误：理解 createApp 与根组件的正确使用  如何用mysql实现客户反馈管理_mysql客户反馈数据库方法  掌握Go App Engine项目结构与GOPATH：包管理与导入实践  windows server2019显卡驱动怎么安装_winserver2019显卡驱动安装与远程桌面优化  《饿了么》拼好饭点外卖教程2025  mysql如何配置从库只读_mysql从库只读设置方法  《万兴喵影》导出视频方法  深入理解Python对象引用与链表属性赋值  B站怎么开|直播| B站|直播|申请需要什么条件【新手必看】  《随手记》关闭首页消息推送方法  Win10如何查看已安装的更新补丁 Win10卸载指定更新教程【教程】  Win10显卡驱动安装失败怎么办 Win10使用DDU彻底卸载驱动【解决】  德邦快递收费标准详解  视频转蓝光m2ts格式  秋风萧瑟洪波涌起中的萧瑟指的是什么  智慧职教mooc平台登录网址 智慧职教mooc官网直达  《猎聘》筛选猎头岗位方法  steam缓存文件在哪儿_steam缓存文件的路径查找方法与结构说明  从J*a应用程序中导出MySQL表数据的技术指南  《搜书吧》阅读书籍方法  《磁力猫》最好用的磁官网  漫蛙manwa漫画官网链接_漫蛙manwa最新可用网址推荐  电脑从睡眠中被自动唤醒怎么办_Windows唤醒源事件查看与禁用【解决】  中大网校app做题记录清除方法  餐馆菜篮选购指南  第五人格PC版怎么避免被封号_第五人格PC版防封号注意事项  优酷下载视频的清晰度怎么选_优酷缓存清晰度设置与选择指南  更换小红书群背景怎么换?小红书群规则怎么设置？  《金山词霸》语音翻译方法  《环球网校》设置报考省市方法  六级准考证号怎么查_四六级准考证查询入口官网  高德地图导航路线偏差报警频繁怎么办 高德地图路线偏差修复与优化方法  C++如何实现矩阵乘法_C++二维数组矩阵运算代码示例  荣耀Magic6 Pro拍照成像偏暗_荣耀Magic6 Pro夜景优化  J*aScript模块加载器_RequireJS原理分析  Cassandra中复合主键、二级索引与ORDER BY排序的限制与解决方案  背部总是隐隐作痛怎么回事 背痛如何改善  Flask 应用中图片动态更新与上传：实现客户端定时刷新与服务器端文件管理  C++ bind函数使用教程_C++参数绑定与函数适配器的应用  菜鸟驿站的取件码忘了怎么办 手机快速查询指南  漫蛙manwa2网页版书签同步链接_漫蛙manwa多设备登录入口  抖音作品被限流怎么办 抖音内容优化与流量恢复方法  使用AI在VS Code中将代码从一种语言翻译成另一种  修复UI元素交互障碍：从“开始”按钮到信息框的平滑过渡实现  windows10怎么开启wsl_windows10安装linux子系统教程  TikTok收藏夹无法删除视频如何解决 TikTok收藏管理优化方法  顺丰官方查单号入口 顺丰快递单号查询官网入口  OTT月报 | 2025年9月智能电视大数据报告  优化2xN网格最大路径和的动态规划算法实践 

 2025-11-03