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

【问题标题】：How to get the site root URL when using Wordpress gutenberg wp object使用 Wordpress gutenberg wp 对象时如何获取站点根 URL
【发布时间】：2019-11-14 12:53:56
【问题描述】：

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

编辑功能类似于您在下面看到的代码。但它在apiFetch() 调用中找不到 404，因为该网站位于一个文件夹中，而不是域的根目录中。换句话说：主机名的结构是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。

【问题讨论】：

标签： wordpress wordpress-gutenberg gutenberg-blocks create-guten-block

【解决方案1】：

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

在您的 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
    } );
} );

希望这会有所帮助。

【讨论】：

【解决方案2】：

尝试更新您的site_url 或home_url

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

通过访问和编辑常规>设置“WordPress地址（URL）”字段，尝试将home_url()设置为“http://localhost/websitename”。

您还可以通过编辑 wp-config.php 以编程方式定义路径：

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

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

【讨论】：