子比主题 – 文章段落渐变背景样式（四款）
腾飞博客在逛论坛的时候发现一个四款渐变背景样式，于是腾飞博客就给他们单独分开，一开始腾飞用WordPress 区块开发的本地注册（即原生注册）自定义区块来写的wordpress插件，写了一半不想写了，就代码部署wordpress新样板吧，也挺方便的，而且插件多了还卡，话不多说直接开始！我会一步步教怎么部署，也当留个笔记，后面用起来方便！
代码部署
腾飞博客更新了原始编辑器，就是禁用古腾堡的那种WP原始编辑器，看好是古腾堡编辑器还是原始编辑器
首先这个教程需要WP古腾堡，古腾堡才有的哦，没有的话就不用部署了！
定位：WP后台–>>新建文章，我们先把代码直接新建区块这样就很方便了，新建文章如下图！
代码我放到最后，喜欢的哪个自己放哪个，或者也可以都放，我们把样式放到了自定义HTML之后，我们点右边的三个点，如下图！
然后我们如上图有一个：创建新样板，然后我们点开他，然后我们创建比如这个名字是：蓝色渐变，就写这个名字，然后分类可以自己创建，如下图，就看懂了！
然后我们添加就添加成功了，然后我们去哪里找这个呢，如下图，我已经添加了四个！
然后搜到了之后我们喜欢哪个就点哪个，然后直接部署就行，如果添加自定义HTML，想看到样式，可以点一下预览就变成了可观的样式，当然你如果自己写了样式也可以用这个教程哦
<p class="gradient-paragraph gradient-4">
这是一个绿色渐变背景示例。清新的颜色让人联想到自然和成长，适合用于环保、健康或积极主题的内容。
</p>
<style>
.gradient-paragraph {
margin-bottom: 30px;
padding: 25px;
border-radius: 12px;
line-height: 1.8;
font-size: 1.6rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.gradient-paragraph:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.gradient-4 {
background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
color: #4a4a4a;
border-left: 5px solid #00b894;
}
</style>
橙色渐变
<p class="gradient-paragraph gradient-3">
这是一个橙色渐变背景示例。温暖的颜色能够吸引读者的注意力，适合用于强调重要内容或警告信息。
</p>
<style>
.gradient-paragraph {
margin-bottom: 30px;
padding: 25px;
border-radius: 12px;
line-height: 1.8;
font-size: 1.6rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.gradient-paragraph:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.gradient-3 {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
color: #4a4a4a;
border-left: 5px solid #e17055;
}
</style>蓝到粉渐变
<p class="gradient-paragraph gradient-1">
这是一个蓝色到粉色的渐变背景示例。柔和的色彩过渡创造出平静而优雅的效果，非常适合用于引言或重要提示内容。
</p>
<style>
.gradient-paragraph {
margin-bottom: 30px;
padding: 25px;
border-radius: 12px;
line-height: 1.8;
font-size: 1.6rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.gradient-paragraph:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.gradient-1 {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
color: #4a4a4a;
border-left: 5px solid #6c5ce7;
}
</style>灰色渐变
<p class="gradient-paragraph gradient-2">
这是一个灰色渐变背景示例。中性色调适合各种内容类型，不会分散读者对文本的注意力，同时提供视觉上的区分。
</p>
<style>
.gradient-paragraph {
margin-bottom: 30px;
padding: 25px;
border-radius: 12px;
line-height: 1.8;
font-size: 1.6rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.gradient-paragraph:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.gradient-2 {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #4a4a4a;
border-left: 5px solid #4a69bd;
}
</style>
我们将下面的代码放到func文件里面，如果没有这个文件记住自己创建一个，记得加上php头，要不然会报错
/*文本编辑自定义快捷渐变按钮*/
add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
function bolo_after_wp_tiny_mce($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'tengfei_hs', '灰色渐变', '<div id="tengfei-hs">填入内容</div>', "" );
QTags.addButton( 'tengfei_cs', '橙色渐变', '<div id="tengfei-cs">填入内容</div>', "" );
QTags.addButton( 'tengfei_ls', '蓝色到粉色', '<div id="tengfei-fs">填入内容</div>', "" );
QTags.addButton( 'tengfei_lvs', '绿色渐变', '<div id="tengfei-ls">填入内容</div>', "" );
function bolo_QTnextpage_arg1() {
}
</script>
<?php
}然后将下面的代码放到：子比主题–>>自定义CSS样式即可！
/* 渐变段落样式 */
#tengfei-hs {
margin-bottom: 30px;
padding: 25px;
border-radius: 12px;
line-height: 1.8;
font-size: 1.6rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #4a4a4a;
border-left: 5px solid #4a69bd;
}
#tengfei-cs{
margin-bottom: 30px;
padding: 25px;
border-radius: 12px;
line-height: 1.8;
font-size: 1.6rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
color: #4a4a4a;
border-left: 5px solid #e17055;
}
#tengfei-fs{
margin-bottom: 30px;
padding: 25px;
border-radius: 12px;
line-height: 1.8;
font-size: 1.6rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
color: #4a4a4a;
border-left: 5px solid #e17055;
}
#tengfei-fs{
margin-bottom: 30px;
padding: 25px;
border-radius: 12px;
line-height: 1.8;
font-size: 1.6rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
color: #4a4a4a;
border-left: 5px solid #6c5ce7;
}
#tengfei-ls{
margin-bottom: 30px;
padding: 25px;
border-radius: 12px;
line-height: 1.8;
font-size: 1.6rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
color: #4a4a4a;
border-left: 5px solid #00b894;
}接下来就是我们到编辑器点右边的代码就可以看到，如下图！
页:
[1]