Block Theme开发教程

新建主题,新建templates文件夹,里面存放的就是block主题里用的html模板。

新建index.html . 这个就是主页的模板。

block主题block的写法:block 模块一定要以<!– –> 这个标记包裹,不然wordpress后台编辑的页面无法识别这个模块。

<!– wp:paragraph –> <p>这是一段block里面的文字。</p><!– /wp:paragraph –>

当我们添加这个模块在templates文件夹的index.html里面的时候, 主题已经支持了block的写法。在后台编辑添加block的时候, 在index.html 里面却没有显示。 因为后台编辑生成的block 写入到的是数据库。 index.html 里面写进去的时候默认的模板,可以在后台进行恢复到默认模板的操作。

比如我们后台新建一个h3的block, 我们在index.html 里面看不到。 我们打开wordpress的数据库,打开wp_posts的表。然后我们在按索引排序里面选择PRIMARY(DESC), 或者把表拉倒最后一个数据,就可以看到最新一个发表的帖子数据。我们可以看到,在post_content列里,就可以看到已经写入的内容:

<!-- wp:paragraph -->
<p>Hello this is the paragraph</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Block theme </h3>
<!-- /wp:heading -->

我们把这个复制到index.html里面,这个就变成了默认的内容。

点击到页面编辑的templates那里,选择相应模板,点击三个点那里的清除, 就会还原到默认的模板。也就是粘贴在index.html里面的模板

其他模板命名规则同php模板的命名规则,比如在templates里面新建single.html 就是单页的模板,新建archive.html 就是分类的模板。

如果要动态添加内容到html 模板咋办。比如说要动态添加文章内容的title. 和文章内容。

去全站编辑的页面,选择templates的single.html模板,添加post title 和post content的 block ,就可以实现。

如果要实现在首页循环最近的五篇文章怎么办。

打开编辑index, 选择query loop 的block ,选择blank。 里面可以选择query的形式,选择你最需要的形式。我们这里选择title 和 excerpt.

左上角的三个横杠,可以显示目前block的树形结构。

点击下query loop ,点击设置按钮,可以设置 文章数量显示等设置。

如果想在post title后面插入时间, 就可以在列表post title那里 三个点设置insert after, 然后选择 post date 就可以。

block主题不是说不需要php了。Block主题也是依靠的php。 打开wp-includes, block里面, 都是wp核心的blocks。

Share :