古腾堡（Gutenberg）编辑器，如何使编辑器和排字器更方便

这篇文章激励我写一篇文章。 作者提供了一个有趣的技巧来摆脱包装器div.container 。 乍一看，这可以节省比赛费用，但是WordPress程序员知道很多。 对我们来说，弗洛格言学家，母马的新娘。

我们在这里遇到什么问题：

1. 从SEO角度来看，文字不应分为几部分
2. 日期应自动替换
3. 对于编辑器，页面布局应为线性
4. 米色整页宽度背景
5. 一个斑点可以改变颜色（有时是形状）（（有时是移动））。

对于第2项，我们将编写一个简单的简码，在此不再赘述。 古腾堡（Gutenberg）使在文本中插入短代码变得容易。

要解决所有其他问题，您当然可以使用ACF。 但是请自己考虑-

• 第一行的字段
• 日期后的段落框
• 点描述字段

对于一个简单的作者而言，这根本不是透明的，并且模板将变成一堆IF。

所以

这是我们解决所有问题的方法：

• 除了古腾堡
• 第一段是第一行
• 接下来，标题部分H1
• 然后是简码[post-date]
• 带文字的段落
• 魔术-分隔符！
• 好，然后纯文本

我们的single.php看起来像这样：

 <?php the_post(); get_header(); ?> <article> <?php the_content() ?> </article> <?php get_footer() ?> 

the_content（）将输出以下内容：

 <p>  </p> <h1>  </h1> <time>2013-11-11</time> <p class="has-medium-font-size">"lorem ipsum ".repeat(20)</p> <hr class="wp-block-separator"> ...   ... 

搜索优化人员很高兴，作者了解所有内容。 我们必须全力以赴。

但这通常并不难：

 article { display:flex; flex-direction: column; align-items: center; } article { width: 960px; margin: auto; } hr { margin: 80px 0 70px; border: 0; padding: 1px 0 0; position: relative; } /*    */ hr::before { width: calc(100vw - 10px); /* -10px      -    .     . */ left: calc(480px - 50vw); content: ""; position: absolute; transform-origin: 0 100%; transform: scaley(1000); background: #f7f2eb; z-index: -1; height: 1px; margin: 0; border: none; } /*    */ hr::after { width: 130px; height: 120px; content: ""; background: url(blot.svg) 0 0 no-repeat; position: absolute; left: calc(100% + 100px); transform: translatey(-50%); } 

其他所有内容都不值得特别注意，主要的魔术在于HR分隔符以及伪元素可以包含在其中的事实。 可以分别通过同一分隔符的类来更改斑点的颜色和行为。

如果您喜欢这部影片，请按一下[喜欢]并订阅我们的频道。
等一下，YouTube不是吗？ 不行吗
好吧，那么快乐黑客