解决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 】

相关推荐： vivo手机视频通话美颜怎么设置_vivo视频通话美颜开启方法  虫虫助手如何更新游戏  《全民k歌》音乐怎么下载到本地2025  快递查询，一键速查  深入理解Python对象引用与链表属性赋值  晓晓优选app支付宝绑定方法  mysql怎么导入sql文件_mysql导入sql文件的方法与技巧  以下哪一项是古代兵书三十六计中的计谋  悟空浏览器如何恢复关闭的标签页 悟空浏览器撤销关闭网页快捷键设置  Composer reinstall命令重装损坏的包  PPT智能排版生成入口 免费PPT内容自动生成平台  MySQL多重JOIN技巧：高效关联同一表获取多角色信息  电脑从睡眠中被自动唤醒怎么办_Windows唤醒源事件查看与禁用【解决】  CDR如何复制交互式填充色  win11如何运行chkdsk命令 Win11检查和修复磁盘逻辑错误教程【修复】  Win10如何关闭操作中心通知 Win10免打扰设置全攻略【清爽】  sublime怎么快速在浏览器中预览HTML_sublime配置View in Browser教程  qq邮箱格式填写示例 qq邮箱标准填写规范  TikTok搜索结果不显示怎么办 TikTok搜索刷新与优化方法  抖音号显示企业机构号是什么意思？企业机构号申请条件是什么？  优酷官网登录入口电脑版 优酷官网网址入口  抖音猜你想搜能说明对方搜过吗  家里的小飞虫总是不断，用什么方法可以彻底根除？  《三角洲行动》战斗步枪与机枪类改装代码分享  抖音网页版官方链接 抖音网页版官网链接入口  多闪APP官方下载安装入口_多闪最新版本获取入口  繁花漫画使用教程  《兴业银行》注册登录方法  小米手机截图后如何查看历史_小米手机截图历史记录查看方法  手机雨课堂网页版入口免登录 雨课堂网页版可点击直接进入  Python中深度嵌套字典与列表的数据提取与条件过滤指南  小红书网页版在线直达 小红书网页版免费登录入口  Chart.js 教程：自定义插件实现图表与图例间距调整  哈尔滨城市通昵称修改方法  在Peewee中处理PostgreSQL记录重复：一站式数据摄取教程  mysql镜像配置如何恢复数据_mysql镜像配置数据恢复详细流程  鸣潮历史学家灯塔位置一览  mysql导入sql文件能分批导入吗_mysql分批次导入大sql文件的实用技巧  iPhone14开启Apple TV遥控设置  Excel怎么用XLOOKUP函数实现双向查找_ExcelXLOOKUP替代VLOOKUP+HLOOKUP的高级用法  优化Google Charts Gauge：在数据库无数据时显示默认值  iPhone14无法连接蓝牙设备如何解决  解决Pandas DataFrame高度碎片化警告：高效创建多列的策略  Python中对象引用与链表属性赋值的机制解析  Go语言反射机制下访问嵌入结构体中的被遮蔽方法  追剧达人如何发弹幕  《单词速记宝》设置学习计划方法  《暗黑破坏神4》国服回归送狂欢礼包 价值6916元  暴风影音官网正式版_暴风影音手机版官网下载安卓  食品生产用水只要符合国家规定的生活饮用水卫生标准就可以吗 

 2025-11-03