WORDPRESS纯代码实现彩色短代码功能

我们在编辑文章的时候经常会需要用到短代码来将文字醒目处理,有不少插件可以实现此功能,今天在这里我们来说说如何用代码实现该功能!

短代码预览

[mf-lan]这是蓝色短代码[/mf-lan]

[mf-huang]这是黄色短代码[/mf-huang]

[mf-hong]这是红色短代码[/mf-hong]

[mf-hui]这是灰色短代码[/mf-hui]

[mf-lv]这是绿色短代码[/mf-lv]

代码如下

在主题的FUNCTIONS.PHP中加入如下代码:

//短代码
function toz($atts, $content=null) {
return '<div style="color:#fff;background:linear-gradient(-125deg,#4ab3fb 0%, #7884de 100%);border:1px solid #62afff;overflow:hidden;margin:10px 0; padding:15px 15px 15px 35px;font-size:14px;font-weight:700;">'.$content.'</div>';
}
add_shortcode('mf-lan' , 'toz' );

function toa($atts, $content=null){
return '<div style="color:#fff;background:linear-gradient(-125deg,#d2a552 0%, #d2c41d 100%);border:1px solid #ffeb12;overflow:hidden;margin:10px 0;padding:15px 15px 15px 35px;font-size:14px;font-weight:700;">'.$content.'</div>';
}
add_shortcode('mf-huang','toa');

function tob($atts, $content=null){
return '<div style="color:#fff;background:linear-gradient(-125deg,#b74949 0%, #de1d1d 100%);border:1px solid #ff7c7c;overflow:hidden;margin:10px 0;padding:15px 15px 15px 35px;font-size:14px;font-weight:700;">'.$content.'</div>';
}
add_shortcode('mf-hong','tob');

function toc($atts, $content=null){
return '<div style="color:#fff;background:linear-gradient(-125deg,#797979 0%, #191919 100%);border:1px solid #8a8a8a;overflow:hidden; margin:10px 0; padding:15px 15px 15px 35px;font-size:14px;font-weight:700;">'.$content.'</div>';
}
add_shortcode('mf-hui','toc');

function tod($atts, $content=null){
return '<div style="color:#fff;background:linear-gradient(-125deg,#48bf93 0%, #38a52a 100%);border:1px solid #2bec9e;overflow:hidden; margin:10px 0; padding:15px 15px 15px 35px;font-size:14px;font-weight:700;">'.$content.'</div>';
}
add_shortcode('mf-lv','tod');

以上,需要的可以试试~

原创文章,作者:MASTER,如若转载,请注明出处:https://www.59iwp.com/218.html