欢迎光临
我们一直在努力

WordPress 短代码:实现文章添加彩色美化框 引用框体特效

以前用的主题都自带有简码,也在多个博客都看到这种彩色美化框,感觉好看,而且把文章分得很有层次感、突出内容等…                           分享给大家

效果展示

绿色提示框
红色提示框
黄色提示框
灰色提示框

代码实现

一、编辑WordPress主题目录下的functions.php文件,添加如下代码并保存:

  1. /*短代码信息框 开始*/
  2. function toz($atts$content=null){
  3.     return ‘<div id=“sc_notice”>’.$content.'</div>’;
  4. }
  5. add_shortcode(‘v_notice’,’toz’);
  6. function toa($atts$content=null){
  7.     return ‘<div id=“sc_error”>’.$content.'</div>’;
  8. }
  9. add_shortcode(‘v_error’,’toa’);
  10. function toc($atts$content=null){
  11.     return ‘<div id=“sc_warn”>’.$content.'</div>’;
  12. }
  13. add_shortcode(‘v_warn’,’toc’);
  14. function tob($atts$content=null){
  15.     return ‘<div id=“sc_tips”>’.$content.'</div>’;
  16. }
  17. add_shortcode(‘v_tips’,’tob’);
  18. /* 短代码信息框 完毕*/

二、CSS美化代码:
添加到CSS中,或者直接在在主题设置——自定义代码——自定义CSS样式中加入

  1. color: #777;
  2. background: #eaeaea url(‘img/sc_tips.png’) -1px -1px no-repeat;
  3. border: 1px solid #ccc;
  4. overflow: hidden;
  5. margin: 10px 0;
  6. padding: 15px 15px 15px 35px;
  7. }
[url href=https://wp.cvps.top/%E5%9B%BE%E6%A0%87%E7%B4%A0%E6%9D%90.zip]图标素材下载[/url]

三、代码使用:

在文章编辑时插入以下代码即可,注意括号修改下

  1. 绿色提示框:{v_notice]输入文字[/v_notice}
  2. 红色提示框:{v_error]输入文字[/v_error}
  3. 黄色提示框:{v_warn]输入文字[/v_warn}
  4. 灰色提示框:{v_tips]输入文字[/v_tips}
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

转载请注明出处:初缘Vps小站 » WordPress 短代码:实现文章添加彩色美化框 引用框体特效

分享到: 生成海报
avatar

热门文章

  • 评论 抢沙发

    • QQ号
    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    【腾讯云】618云聚惠 百款云产品限量抢购

    点击抢购老用户 三折续费

    登录

    忘记密码 ?

    切换登录

    注册