WordPress

代码实现WordPress首字下沉

效果如下:
代码实现WordPress首字下沉-优次元
前些天逛百度,突然发现了这个,于是整理分享给大家!
首字下沉效果的CSS其实很简单,直接代码如下:


<p style="float: left;color:#333;font-size: 45px;font-weight: 300;margin: 12px 5px 0px 0px;">(这里填第一个字)</p>

大小可以根据自己的文章字体大小和行距调节,你也可以利用CSS3的选择器来实现首字下沉,具体来说就是:first-letter与:first-of-type。 结合这两个选择器,就可以实现文章的首字下沉。

如何才能让我们使用更加分别呢?这里我们就需要把它弄成简码添加到编辑器才能更好的使用。
首先是变成简码,在主题目录下的functions.php里面加入如下代码:


//首字下沉 优次元www.uoo2.com
function uoo2.com_dropcaps($atts, $content=null, $code="") {
    $return = '<p style="float: left;color:#333;font-size: 45px;font-weight: 300;margin: 12px 5px 0px 0px;">';
    $return .= $content;
    $return .= '</p>';
    return $return;
}
add_shortcode('uoo2.com_dropcaps' , 'uoo2.com_dropcaps' );

然后我们添加到后台编辑器,同样在function.php文件里边加入如下代码:


function appthemes_add_quicktags() {
?>
<script type="text/javascript">
QTags.addButton( '首字下沉', '首字下沉', '[uoo2.com_dropcaps]', '[/uoo2.com_dropcaps]' ); //首字下沉
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

好啦,后台发布文章,文本编辑器,使用时,选中第一个字,点击【首字下沉】就会直接显示简码:


[uoo2.com_dropcaps]第一个字[/uoo2.com_dropcaps]
(0)

本文来源于 inlojv博客,由 芈悦 整理编辑!

关键词:,

热评文章

发表评论