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文章添加首字下沉的简码功能

提示

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

发表评论

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

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

    • Koolight Koolight 5 来自天朝的朋友 火狐浏览器 Windows 7 湖北省 联通

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

        • 闲鱼 闲鱼 【博主】 来自天朝的朋友 谷歌浏览器 Windows 7 湖南省长沙市 电信

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

        • 我爱动感单车网 我爱动感单车网 2 来自天朝的朋友 谷歌浏览器 Windows XP 广西桂林市 电信

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

          • boke112导航 boke112导航 2 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 电信

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

              • 闲鱼 闲鱼 【博主】 来自天朝的朋友 谷歌浏览器 Windows 7 湖南省长沙市 电信

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

              • 明月登楼的博客 明月登楼的博客 6 来自天朝的朋友 谷歌浏览器 Windows 10 河南省南阳市 电信

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

                • 火端网络 火端网络 1 来自天朝的朋友 谷歌浏览器 Windows 10 广西 电信

                  一库,雅咩蝶

                    • 闲鱼 闲鱼 【博主】 来自天朝的朋友 谷歌浏览器 Windows 7 湖南省长沙市 电信

                      @火端网络 老司机 :grin:

                    • 刘国栋个人博客 刘国栋个人博客 1 来自天朝的朋友 谷歌浏览器 Windows 10 河南省郑州市 联通

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