WordPress文章添加首字下沉的简码功能

有的时候为了文章排版好看,我们会用到首字下沉的放大的效果,实现这个效果也很简单,插件、甚至CSS做一定修改就可以,当然,这里还要说的是如何即实现这个效果,又能很方便的将功能代码添加到编辑器,以简码的形式来使用。

Wordpress文章添加首字下沉的简码功能

CSS的修改

这个很简单,根据自己的主题做一定修改,间距、字体大小、颜色可以适当调整。

  1. floatleft;  
  2. font-size35px;  
  3. font-weight: 300;  
  4. margin20px 5px 0px 0px;  
  5. color#888;  

简码的添加

①、将代码变成简码
将以下代码添加到主题目录下的functions.php文件:

  1. //首字下沉-闲鱼博客  
  2. function macrr_dropcaps($atts$content=null, $code="") {  
  3.      $return = '<p style="float: left;color:#333;font-size: 35px;font-weight: 300;margin: -8px 5px 0px 0px;color: #888;">';  
  4.      $return .= $content;     $return .= '</p>';     return $return;   
  5. }  
  6. add_shortcode('macrr_dropcaps' , 'macrr_dropcaps' );  

②、添加到编辑器按钮

  1. function appthemes_add_quicktags() {   
  2. ?>   
  3. <script type="text/javascript">   
  4. QTags.addButton( '首字下沉', '首字下沉', '

    ', '

    ' ); //首字下沉   
  5. </script>   
  6. <?php   
  7. }   
  8. add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );  

Wordpress文章添加首字下沉的简码功能

提示

完成以上这些步骤就可以简码的方式使用这个功能了,同时可以发现如果我们要给编辑器添加其他的按钮,同样可以用这个方法,举一反三,丰富我们的编辑器啦。

本文最后更新于2017年11月22日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
  • 博客公众号
  • 关注本博客公众号
  • weinxin
  • 博客小程序
  • 关注本博客小程序
  • weinxin

墙裂推荐本站使用的阿里云服务器  去试试>>

1核2G,100%CPU性能,114/年  丨  1核2G,100%CPU性能,118/年

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论:13   其中:访客  7   博主  6

    • Koolight

      这个很不错的说啊,首字很有个性!

        • 闲鱼 【博主】

          @Koolight 也觉得还行,改改文章排版有更新鲜的感觉

        • 我爱动感单车网

          这个,我个人还是蛮喜欢的,啥时候试试!

          • boke112导航

            这个方法挺不错的,不过一般人用不到

              • 闲鱼 【博主】

                @boke112导航 提供一个思路嘛,有需要的可以考虑

              • 明月登楼的博客

                呀买碟,我知道啥意思?一库是啥意思?求解惑? :evil:

                • 火端网络

                  一库,雅咩蝶

                  • 刘国栋个人博客

                    比起这个,更喜欢鼠标跟随的滑稽表情,哈哈 魔性