当前位置：荐爱小站 > WordPress > 正文

WordPress 短代码功能非插件实现方法

发布 2019-10-25
分类 WordPress
浏览 (1192)

本文是 WordPress 彩色短代码功能在 WordPress 上非插件的实现方法文章的完整代码使用说明，wordpress 短代码的基本原理和具体实例展示已经在上一篇文章中介绍了，如还不清楚详细可以查看：

彩色短代码功能在 WordPress 上非插件的实现方法

首先，在当前主题的 function.php 文件中添加如下代码：

/*---WordPress-Short-Code---*/
function alertbox($atts, $content=null, $code="") {
$return = '<div class="dw-box-alert">';
$return .= $content;
$return .= '</div>';
return $return;
}
add_shortcode('red' , 'alertbox' );
function warningbox($atts, $content=null, $code="") {
$return = '<div class="dw-box-warning">';
$return .= $content;
$return .= '</div>';
return $return;
}
add_shortcode('yellow' , 'warningbox' );
function downloadbox($atts, $content=null, $code="") {
$return = '<div class="dw-box-download">';
$return .= $content;
$return .= '</div>';
return $return;
}
add_shortcode('blue' , 'downloadbox' );
function tipbox($atts, $content=null, $code="") {
$return = '<div class="dw-box-tip">';
$return .= $content;
$return .= '</div>';
return $return;
}
add_shortcode('green' , 'tipbox' );
function infobox($atts, $content=null, $code="") {
$return = '<div class="dw-box-info">';
$return .= $content;
$return .= '</div>';
return $return;
}
add_shortcode('black' , 'infobox' );

其次，在使用的主题目录下 style.css 文件中添加样式代码：

/*---CSS样式---*/
.dw-box{text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);border: 1px solid;clear:both;margin:15px}
.dw-box-alert,.dw-box-warning,.dw-box-download,.dw-box-info,.dw-box-tip{padding:15px 20px 15px 20px}
.dw-box-warning{background:#FCF8E3;border-color:#FBEED5;color: #C09853}
.dw-box-alert{background:#F2DEDE;border-color:#EED3D7;color:#B94A48}
.dw-box-download{background:#D9EDF7;border-color:#BCE8F1;color:#3A87AD}
.dw-box-info{background:#e7e7e7;border-color:#E0DEDE;color:#333}
.dw-box-tip{background:#DFF0D8;border-color:#D6E9C6;color:#468847}

最后，短代码在后台编写文章时的调取使用：

wordpress彩色短代码

wordpress短代码使用方法

好了，现在可以去自己的网站编辑试试看了！

标签：wordpress代码 wordpress优化

转载请注明链接地址：荐爱小站 » WordPress 短代码功能非插件实现方法

相关推荐

精选推荐