WordPress添加彩色文本渐变框

奥多也网络

前言

CoreNext主题自带的编辑器增强内有标星面板，但是颜色有点少，所以找了个教程给WordPress添加彩色文本渐变框。

教程

1.首先将如下代码添加到CoreNext子主题的function.php 中，如果其他主题也有子主题一样操作。

1. add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
   
2. function bolo_after_wp_tiny_mce($mce_settings) {
   
3. ?>
   
4. <script type="text/javascript">
   
5. QTags.addButton( 'z_mhz', '迷幻紫', '<div id="zm_mhz">迷幻紫</div>\n', "" );
   
6. QTags.addButton( 'z_xgh', '西瓜红', '<div id="zm_xgh">西瓜红</div>\n', "" );
   
7. QTags.addButton( 'z_tkzj', '天空之境', '<div id="zm_tkzj">天空之境</div>\n', "" );
   
8. QTags.addButton( 'z_xyz', '小宇宙', '<div id="zm_xyz">小宇宙</div>\n', "" );
   
9. QTags.addButton( 'z_gll', '橄榄绿', '<div id="zm_gll">橄榄绿</div>\n', "" );
   
10. QTags.addButton( 'z_xty', '小太阳', '<div id="zm_xty">小太阳</div>\n', "" );
    
11. QTags.addButton( 'z_yyz', '优雅紫', '<div id="zm_yyz">优雅紫</div>\n', "" );
    
12. QTags.addButton( 'z_szh', '深邃黑', '<div id="zm_szh">深邃黑</div>\n', "" );
    
13. QTags.addButton( 'z_wbk', '无边框', '<div id="zm_wbk">无边框</div>\n', "" );
    
14. function bolo_QTnextpage_arg1() {
    
15. }
    
16. </script>
    
17. <?php
    
18. }

复制代码

2.将如下CSS代码添加到CoreNext子主题的CSS文件夹中的main.css中

1. /*渐变框区块*/
   
2. #zm_mhz,#zm_xgh,#zm_tkzj,#zm_xyz,#zm_gll ,#zm_xty,#zm_yyz,#zm_szh,#zm_wbk{
   
3.   /*圆角值,在此定义*/
   
4.   border-radius: 8px;
   
5. }
   
6. /*迷幻紫*/
   
7. #zm_mhz{
   
8.     color: #555555;
   
9.     overflow: hidden;
   
10.     margin: 10px 0;
    
11.     padding: 15px 15px 15px 35px;
    
12.     /*border-radius: 10px;*/
    
13.     box-shadow: 6px 0 12px -5px rgb(190, 196, 252), -6px 0 12px -5px rgb(189, 196, 252);
    
14.     background-color: #8EC5FC;
    
15.     background-image: linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%);
    
16.     background-image: -webkit-linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%);
    
17. }
    
18. /*西瓜红*/
    
19. #zm_xgh{
    
20.       color: #555555;
    
21.     overflow: hidden;
    
22.     margin: 10px 0;
    
23.     padding: 15px 15px 15px 35px;
    
24.     /*border-radius: 10px;*/
    
25.     box-shadow: 6px 0 12px -5px rgb(255, 176, 172), -6px 0 12px -5px rgb(255, 161, 174);
    
26.     background-color: #ff9a8b66;
    
27.     background-image: linear-gradient(220deg,#FF9A8B 0%,#ff6a8838 55%,#FF99AC 100%);
    
28.     background-image: -webkit-linear-gradient(220deg,#ff9a8b7a 0%,#ff6a88ab 55%,#ff99ac82 100%);
    
29. }
    
30. /*华为P30 天空之境*/
    
31. #zm_tkzj {
    
32.     color: #555555;
    
33.     overflow: hidden;
    
34.     margin: 10px 0;
    
35.     padding: 15px 15px 15px 35px;
    
36.     /*border-radius: 10px;*/
    
37.     box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243);
    
38.     background-color: #FFDEE9;
    
39.     background-image: linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%);
    
40.     background-image: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%);
    
41. }
    
42. /*小宇宙*/
    
43. #zm_xyz {
    
44.     color: #eeeeee;
    
45.     overflow: hidden;
    
46.     margin: 10px 0;
    
47.     padding: 15px 15px 15px 35px;
    
48.     /*border-radius: 10px;*/
    
49.     box-shadow: 6px 0 12px -5px rgb(12, 85, 141), -6px 0 12px -5px rgba(10, 58, 93, 0);
    
50.     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% );
    
51. }
    
52. /*橄榄绿*/
    
53. #zm_gll {
    
54.     color: #eeeeee;
    
55.     overflow: hidden;
    
56.     margin: 10px 0;
    
57.     padding: 15px 15px 15px 35px;
    
58.     /*border-radius: 10px;*/
    
59.     box-shadow: 6px 0 12px -5px rgb(68, 110, 92), -6px 0 12px -5px rgb(204, 212, 163);
    
60.     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% );
    
61. }
    
62. /*小太阳*/
    
63. #zm_xty {
    
64.     color: #ffffff;
    
65.     overflow: hidden;
    
66.     margin: 10px 0;
    
67.     padding: 15px 15px 15px 35px;
    
68.      /*border-radius: 10px; */
    
69.     box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243);
    
70.     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% );
    
71. }
    
72. /*优雅紫*/
    
73. #zm_yyz {
    
74.   color: #ffffff;
    
75.     overflow: hidden;
    
76.     margin: 10px 0;
    
77.     padding: 15px 15px 15px 35px;
    
78.     /*border-radius: 10px;*/
    
79.     box-shadow: 6px 0 12px -5px rgb(175, 160, 208), -6px 0 12px -5px rgba(177, 161, 207, 0);
    
80.     background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(95,117,227,1) 0%, rgba(188,167,205,1) 90% );
    
81. }
    
82. /*深邃黑*/
    
83. #zm_szh {
    
84.   color: #c7c7c7;
    
85.     overflow: hidden;
    
86.     margin: 10px 0;
    
87.     padding: 15px 15px 15px 35px;
    
88.     /*border-radius: 5px;*/
    
89.     box-shadow: 6px 0 12px -5px rgb(155, 170, 185), -6px 0 12px -5px rgba(177, 161, 207, 0);
    
90.     background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(0,0,0,1) 0%, rgba(64,64,64,1) 90.2% );
    
91. }
    
92. /*无边框*/
    
93. #zm_wbk {
    
94.     color: #000000;
    
95.     overflow: hidden;
    
96.     margin: 10px 0;
    
97.     padding: 15px 15px 15px 35px;
    
98. }
    
99. #zm_xyz a , #zm_gll a{
    
100.    color: #eeeeee;
     
101. }
     
102. #zm_szh a{
     
103.   color: #c7c7c7;  
     
104. }
     
105. #zm_xty a, #zm_yyz a{
     
106.   color: #ffffff;
     
107. }

复制代码

3.现在就可以在编辑器内添加如下代码使用效果了。

1. <div id="zm_mhz">迷幻紫</div>
   
2. <div id="zm_xgh">西瓜红</div>
   
3. <div id="zm_tkzj">天空之境</div>
   
4. <div id="zm_xyz">小宇宙</div>
   
5. <div id="zm_gll">橄榄绿</div>
   
6. <div id="zm_xty">小太阳</div>
   
7. <div id="zm_yyz">优雅紫</div>
   
8. <div id="zm_szh">深邃黑</div>
   
9. <div id="zm_wbk">无边框</div>

复制代码

演示

[url=https://www.qcyqq.com/wp-content/uploads/2024/08/4de222ec15ffb023ed6518671316a68e.webp.jpg][/url]