使用 Wordpress gutenberg wp 对象时如何获取站点根目录 URL

Question

我刚刚使用 npm 包创建了我的第一个 gutenberg 块插件 create-guten-block。

编辑功能类似于您在下面看到的代码。但它给出了 404 not found on the apiFetch() 调用，因为该网站位于文件夹中，而不是域的根目录中。换句话说：主机名的结构是 http://localhost/websitename/ 而不是 websitename.local.

edit: ( props ) => {
    if ( ! props.attributes.categories ) {
        wp.apiFetch( {
           url: '/wp-json/wp/v2/categories'
        }).then(categories => {
            props.setAttributes( {
                categories: categories
            });
        });
    }
    return (
        true
    );
}

那么什么相当于 PHP 的 get_site_url()？该数据是否存储在 wp 对象中的某处？如果有，在哪里？因为我需要在 /wp-json/wp/v2/categories 前面加上正确的站点 URL.

Answer 1

尝试更新您的 site_url 或 home_url

site_url() 将始终是您可以访问该站点的实时位置，而 home_url() 将是您设置主页的位置。

访问并编辑 常规 > 设置 "WordPress address (URL)"，尝试将 home_url() 设置为“http://localhost/websitename” 字段。

您还可以通过编辑 wp-config.php:

以编程方式定义路径

define( 'WP_HOME', 'http://localhost/websitename/' );
define( 'WP_SITEURL', 'http://websitename.local' );

然后您可以使用 get_home_url() 检索正确的路径。

Answer 2

刚刚自己找到了解决方案。

在 Gutenberg 块插件的 init 挂钩中，您可以创建一个全局数据对象，供您在 Wordpress 编辑器文件中使用 block.js.

因此，在 init 挂钩的 init.php 中，您可以添加：

wp_localize_script(
    'custom_block',
    'cs_data',
    [
        'siteUrl'       => get_site_url()
    ]
);

这样全局对象 cs_data 在 block.js 中可用。所以 Fetch 调用现在可以像这样使用动态路径。

wp.apiFetch( {
    url: cs_data.siteUrl + '/wp-json/custom-data/v1/post-types'
} ).then( postTypes => {
    props.setAttributes( {
      postTypes: postTypes
    } );
} );

希望对您有所帮助。

使用 Wordpress gutenberg wp 对象时如何获取站点根目录 URL

How to get the site root URL when using Wordpress gutenberg wp object

wordpress

wordpress-gutenberg

gutenberg-blocks

create-guten-block