WordPress美化之文章内页新增彩色渐变框【共9套】

  Whoa!~ 此文章已被收录至钻芒精选·美好的事物带来好心情!请享用。

前排提示,经后续测试发现: 此文章css样式部分效果在安卓Android设备上会出现部分不兼容无法显示完整效果。如天空之境在安卓设备上显示是纯粉色。PC和iOS均显示正常。详细测试可查看DEMO演示页面

2020年8月13日22:42:21  安卓好像支持了 Miui12  安卓9  小米浏览器  Android 9;  ( Chrome/71.0.3578.141 Mobile Safari/537.36 XiaoMi/MiuiBrowser/12.5.22″)

博客内之前(19年.5)发过两版WordPress美化文章内页文本框的文章。可以查看如下文章:

其实今天这个CSS之前博客内发过,最早是春节疫情期间在家美化向日葵的时候写的。今天突然心血来潮想到这个完全可以做到文章内页里。遂动手适配。在此分享给各位。钻芒博主原创内容 转载请注明。

一共写了9种样式。其中一个是无边框透明的。也凑数放一起了(但也带格式的)。效果可以查看下边的演示页面。

预览效果图

[collaps title=”效果图过长已折叠 点击展开查看”]
20200415-240a2151abf02
[/collaps]

教程正文开始

首先把下面的CSS丢到你的主题style.css样式文件内。圆角值修改下边的第三行即可。默认8px

/*WordPress宇宙超级无敌美化框 by:zmki  www.zmki.cn/5458.html*/
#zm_mhz,#zm_xgh,#zm_tkzj,#zm_xyz,#zm_gll ,#zm_xty,#zm_yyz,#zm_szh,#zm_wbk{
	/*圆角值,在此定义*/
	border-radius: 8px;
}
/*迷幻紫*/
#zm_mhz{
    color: #555555;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/
    box-shadow: 6px 0 12px -5px rgb(190, 196, 252), -6px 0 12px -5px rgb(189, 196, 252);
    background-color: #8EC5FC;
    background-image: linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%);
    background-image: -webkit-linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%);
}
/*西瓜红*/
#zm_xgh{
	    color: #555555;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/
    box-shadow: 6px 0 12px -5px rgb(255, 176, 172), -6px 0 12px -5px rgb(255, 161, 174);
    background-color: #ff9a8b66;
    background-image: linear-gradient(220deg,#FF9A8B 0%,#ff6a8838 55%,#FF99AC 100%);
    background-image: -webkit-linear-gradient(220deg,#ff9a8b7a 0%,#ff6a88ab 55%,#ff99ac82 100%);
}
/*华为P30 天空之境*/
#zm_tkzj {
    color: #555555;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/
    box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243);
    background-color: #FFDEE9;
    background-image: linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%);
    background-image: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%);
}
/*小宇宙*/
#zm_xyz {
    color: #eeeeee;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/
    box-shadow: 6px 0 12px -5px rgb(12, 85, 141), -6px 0 12px -5px rgba(10, 58, 93, 0);
    background-image: radial-gradient( circle 263px at 100.2% 3%, rgba(12,85,141,1) 31.1%, rgba(205,181,93,1) 36.4%, rgba(244,102,90,1) 50.9%, rgba(199,206,187,1) 60.7%, rgba(249,140,69,1) 72.5%, rgba(12,73,116,1) 72.6% );
}
/*橄榄绿*/
#zm_gll {
    color: #eeeeee;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/
    box-shadow: 6px 0 12px -5px rgb(68, 110, 92), -6px 0 12px -5px rgb(204, 212, 163);
    background-image: linear-gradient( 102deg, rgba(68,110,92,1) 17.4%, rgba(107,156,120,1) 49.3%, rgba(154,183,130,1) 83.4%, rgba(247,237,191,1) 110.3% );
}
/*小太阳*/
#zm_xty {
    color: #ffffff;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
     /*border-radius: 10px; */
    box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243);
    background-image: radial-gradient( circle farthest-corner at -8.9% 51.2%, rgba(255,124,0,1) 0%, rgba(255,124,0,1) 15.9%, rgba(255,163,77,1) 15.9%, rgba(255,163,77,1) 24.4%, rgba(19,30,37,1) 24.5%, rgba(19,30,37,1) 66% );
}
/*优雅紫*/
#zm_yyz {
	color: #ffffff;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 10px;*/
    box-shadow: 6px 0 12px -5px rgb(175, 160, 208), -6px 0 12px -5px rgba(177, 161, 207, 0);
    background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(95,117,227,1) 0%, rgba(188,167,205,1) 90% );
}
/*深邃黑*/
#zm_szh {
	color: #c7c7c7;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    /*border-radius: 5px;*/
    box-shadow: 6px 0 12px -5px rgb(155, 170, 185), -6px 0 12px -5px rgba(177, 161, 207, 0);
    background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(0,0,0,1) 0%, rgba(64,64,64,1) 90.2% );
}
/*无边框*/
#zm_wbk {
    color: #000000;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
}
#zm_xyz a , #zm_gll a{
	 color: #eeeeee;
}
#zm_szh a{
	color: #c7c7c7;	
}
#zm_xty a, #zm_yyz a{
	color: #ffffff;
}

然后把下面的代码放到你主题的函数文件functions.php内

/*zmki添加文本编辑自定义快捷标签按钮 开始*/
 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( 'z_mhz', '迷幻紫', '<div id="zm_mhz">迷幻紫</div>n', "" );
 QTags.addButton( 'z_xgh', '西瓜红', '<div id="zm_xgh">西瓜红</div>n', "" );
 QTags.addButton( 'z_tkzj', '天空之境', '<div id="zm_tkzj">天空之境</div>n', "" );
 QTags.addButton( 'z_xyz', '小宇宙', '<div id="zm_xyz">小宇宙</div>n', "" );
 QTags.addButton( 'z_gll', '橄榄绿', '<div id="zm_gll">橄榄绿</div>n', "" );
 QTags.addButton( 'z_xty', '小太阳', '<div id="zm_xty">小太阳</div>n', "" );
 QTags.addButton( 'z_yyz', '优雅紫', '<div id="zm_yyz">优雅紫</div>n', "" );
 QTags.addButton( 'z_szh', '深邃黑', '<div id="zm_szh">深邃黑</div>n', "" );
 QTags.addButton( 'z_wbk', '无边框', '<div id="zm_wbk">无边框</div>n', "" ); 
 function bolo_QTnextpage_arg1() {
 }
 </script>
 <?php
 }
 /*zmki添加文本编辑自定义快捷标签按钮 结束*/

使用说明

如图,WordPress后台文章编辑器 文本选项插入相应文本框即可。可返回可视化编辑操作。如换行不生效可检查div嵌套关系。

20200415-9488bacd83b81

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 共17条

请登录后发表评论

    • 头像浩瀚网络科技工作室0
    • 头像amiisk0
    • 头像Songshuxiao0
    • 头像沃德天0
      • Alextao的头像-钻芒网赞助会员Alextao徽章-元老玩家-钻芒网等级-LV6-钻芒网作者0
        • 头像沃德天0
    • 头像JJ0
    • 头像诺音网址导航0