博客

最近搜集了几个比较实用的wordpress博客程序中的CSS代码。现摘录于下，或许平时能用到。

把作者头像图片的形状变成圆形：

.avatar {
    border-radius: 50%; /* 创建圆形头像 */
}

让作者头像图片的位置垂直居中：

.avatar {
    line-height: 50px; /* 例如：line-height: 50px; */
    vertical-align: middle; /* 头像垂直居中代码，确保与line-height一起使用 */
}

设置博客文章的行间距大小：

.entry-content p {
    line-height: 2;
}/* 文章行间距设定 */

对博客页面的侧边栏进行位置固定：

@media (min-width: 768px) {
    .sidebar {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0px; /* 侧边栏固定代码，根据需要调整距离顶部的距离 */
    }
}

博客文章的特色图片位置居中显示：

.featured-image-container {
    text-align: center; /* 特色图片居中代码，居中图片 */
}
.featured-image-container img {
    display: inline; /* 确保图片是内联元素 */
}

博客的每个页面的第一篇文章不显示特色图片：

.home .post:first-child .wp-post-image {
    display: none;} /*每页第一篇文章不显示特色图片*/

让博客文章的“阅读更多”按钮变成圆角：

.more-link {
	border-radius: 15px;} /* 改变圆角 */

今天是五一劳动节，首先祝各位辛勤劳动的打工人节日快乐！😀

wordpress的特色图片功能可以让你在写博客时设置一张封面图片，并将此封面图在首页和单独文章页自动显示。这是个很好的功能，可以让博客增色不少。但有些主题虽然有特色图片功能，但却并未设置成在首页文章或单独文章页中显示。这时我们可以在content.php和single.php文件中加入以下代码：

<?php if (has_post_thumbnail()) : ?>
    <div class="featured-image-container">
          <?php the_post_thumbnail('full',array( 'class' => 'aligncenter')); ?> <!--'full'是图片尺寸，也可以使用'medium', 'large'等。-->
    </div>
           <?php endif; ?>

这样你的博客首页文章列表，和单独文章页就都会自动显示你事先设置好的特色图片了。当然，如果你只想在首页文章列表中，或只想在单独文章页中显示特色图片，你可以只在content.php（首页文章列表）或single.php（单独文章页）其中之一加入上述代码即可。

代码中的full表示全尺寸图片；medium表示中等尺寸图片；large表示大尺寸图片。还有个thumbnail表示缩略图。你可以按自己意愿的尺寸来设置图片大小。

在wordpress的每篇文章上显示作者头像，是件非常棒的事。特别是对于多作者博客，这样就能更清楚地区分哪篇文章是谁写的。如果你的博客主题没有加入该功能，你可以把以下代码分别放在content.php和single.php的适当位置中：

<a href="<?php echo get_author_posts_url(get_the_author_meta( 'ID' )); ?>"><?php echo get_avatar(get_the_author_meta('user_email'),'44'); ?></a> <!-- 添加这行代码 -->

这样你的博客首页文章列表，和单独文章页上，就都能显示本篇文章的作者头像了。

注：其中的数字“44”是头像大小，你可以自行修改数值以适合自己的大小。适当位置一般是文章标题下方，可以查找类似class=”entry-title”字段，在其下方插入上述代码。

阅读量能显示访客浏览了你的博客文章的次数。但有些wordpress主题没有显示阅读量数据，如果想加上，可以复制如下代码，粘贴到function.php文件中：

//增加文章阅读次数
function record_visitors(){
    if (is_singular()){
        global $post;
        $post_ID = $post->ID;
        if($post_ID){
            $post_views = (int)get_post_meta($post_ID, 'views', true);
            if(!update_post_meta($post_ID, 'views', ($post_views+1))){
                add_post_meta($post_ID, 'views', 1, true);
            }
        }
    }
}
add_action('wp_head', 'record_visitors');
function post_views($before = '(点击 ', $after = ' 次)', $echo = 1){
    global $post;
    $post_ID = $post->ID;
    $views = (int)get_post_meta($post_ID, 'views', true);
    if ($echo) echo $before, number_format($views), $after;
    else return $views;
}

然后，在content.php和singe.php文件的适当位置，分别加入以下相同代码：

 <?php post_views('','次');?>

现在，在wordpress的前台页面就能看到每篇文章的阅读量了。

如果你还想在wordpress后台的文章列表中显示每篇阅读量，可以在function.php文件中继续加入以下代码：

//在后台文章列表增加一列数据
add_filter( 'manage_posts_columns', 'customer_posts_columns' );
function customer_posts_columns( $columns ) {
$columns['views'] = '浏览次数';
return $columns;
}

//输出浏览次数
add_action('manage_posts_custom_column', 'customer_columns_value', 10, 2);
function customer_columns_value($column, $post_id){
if($column=='views'){
$count = get_post_meta($post_id, 'views', true);
if(!$count){
$count = 0;
}
echo $count;
}
return;
}

如果想根据阅读量对文章进行排序，则可加入以下代码：

1 $hot_args = array(  
 2     'cat' => $hot_category_id, // 使用分类ID 
 3     'posts_per_page' => 6, // 获取所有文章  
 4     'ignore_sticky_posts' => 1, // 忽略置顶文章  
 5     'has_post_thumbnail' => true, // 只获取带有特色图片的文章  
 6     'meta_key' => 'views',
 7     'orderby' => 'meta_value',
 8 
 9     'order' => 'DESC' // 倒序排列  
10 ); 

以上代码，转载参考自郑州谷多软件的博客。