1. 首页
  2. 技术交流
  3. 正文

子比主题美化之WordPress子比主题添加说说/微语功能

前言

之前自己用的是另外一个主题，也一直在用说说这个功能，但是现在换成了子比主题，说说这个功能就没有了，现在想再添加回来，在别的网站看到这个添加方法，还有几个款式，现在一并记录下来，供参考

效果预览

第一款：

图片[1]-子比主题美化之WordPress子比主题添加说说/微语功能-一生相随博客

第二款：

图片[2]-子比主题美化之WordPress子比主题添加说说/微语功能-一生相随博客

第三款：

图片[3]-子比主题美化之WordPress子比主题添加说说/微语功能-一生相随博客

使用教程

这里我弄了三个款式的，其中两个款式的外观差不多，自己挑喜欢的搞

第一款

1、在主题目录下functions.php文件末尾把下面代码添加进去即可。

//给网站添加说说功能
function my_custom_post_nonsense() {
$labels = array(
'name' => _x( '说说', 'post type 名称' ),
'singular_name' => _x( '说说', 'Post Type 单个 Item 时的名称' ),
'add_new' => _x( '新建说说', '添加新内容的链接名称' ),
'add_new_item' => __( '新建一个说说' ),
'edit_item' => __( '编辑说说' ),
'new_item' => __( '新说说' ),
'all_items' => __( '所有说说' ),
'view_item' => __( '查看说说' ),
'search_items' => __( '搜索说说' ),
'not_found' => __( '没有找到有关说说' ),
'not_found_in_trash' => __( '回收站里面没有相关说说' ),
'parent_item_colon' => '',
'menu_name' => '说说'
);
$args = array(
'labels' => $labels,
'description' => '说说信息',
'public' => true,
'menu_position' => 5,
'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt', 'comments' ),
'has_archive' => true
);
register_post_type( 'shuoshuo', $args );
}
add_action( 'init', 'my_custom_post_nonsense' );

2、在主题pages目录下新建一个shuoshuo.php文件，把下面代码复制进去

[hidecontent type="reply" desc="隐藏内容：评论后查看"]

<?php 
/* Template Name: 我的说说 */
get_header(); 
?>
<section class="container">
<div class="content-wrap">
<div class="content">
    <div style="background: #FFF; padding: 30px; border-radius: 5px;">
        <ul class="cbp_tmtimeline">
        <?php 
        query_posts("post_type=shuoshuo & post_status=publish & posts_per_page=-1");
        if ( have_posts() ) { 
        while ( have_posts() ) { 
        the_post(); ?>
            <li>
                <time class="cbp_tmtime"><i class="fa fa-clock-o"></i> <?php the_time('Y年n月j日G:i'); ?></time>
                <div class="cbp_tmicon">
                <img src="https://www.520xv.com/logo.png" class="avatar avatar-48" width="48" height="48">
                </div>
                <div class="cbp_tmlabel" >
                    <span style="font-size:14px;"><?php the_content(); ?></span>
                    <h2><?php the_title(); ?><span><?php echo get_bloginfo('name'); ?> | <?php echo get_bloginfo('description' ); ?></span></h2>
                </div>
            </li>
        <?php }
        } ?>
        </ul>
    </div>
</div> 
</div>
</section>
<?php get_footer();?>
<style>
.cbp_tmtimeline {
    margin: 30px 0 0 0;
    padding: 0;
    list-style: none;
    position: relative;
} 
/* The line */
.cbp_tmtimeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    background: #f4f5f9;
    left: 20%;
    margin-left: -6px;
}
/* The date/time */
.cbp_tmtimeline > li .cbp_tmtime {
    display: block;
    width: 30%;
    padding-right: 100px;
    position: absolute;
    color: #AAA;
}
.cbp_tmtimeline > li .cbp_tmtime span {
    display: block;
    text-align: right;
}
.cbp_tmtimeline > li .cbp_tmtime span:first-child {
    font-size: 0.9em;
    color: #bdd0db;
}
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
    font-size: 2.9em;
    color: #e4f0ff;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
    color: #F6F6F6;
}
/* Right content */
.cbp_tmtimeline > li .cbp_tmlabel {
    margin: -30px 0 15px 25%;
    background: #e4f0ff;
    color: black;
    padding: 0.8em;
    font-size: 1.2em;
    font-weight: 300;
    line-height: 1.4;
    position: relative;
    border-radius: 5px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
    background: #F6F6F6;
}
.cbp_tmtimeline > li .cbp_tmlabel h2 { 
    border-bottom: 0px;
    border-top:1px dashed #FFF; 
    font-size:16px; 
    height: 24px; 
    padding: 5px 3px 12px; 
    margin:0px;
}
.cbp_tmtimeline > li .cbp_tmlabel h2 > span { 
    font-size: 12px; 
    float: right; 
    text-align: center; 
    line-height: 24px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}
/* The triangle */
.cbp_tmtimeline > li .cbp_tmlabel:after {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-right-color: #e4f0ff;
    border-width: 10px;
    top: 10px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
    border-right-color: #F6F6F6;
}
/* The icons */
.cbp_tmtimeline > li .cbp_tmicon {
    width: 48px;
    height: 48px;
    font-family: 'ecoico';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 48px;
    line-height: 48px;
    -webkit-font-smoothing: antialiased;
    position: relative;
    color: #fff;
    background: #46a4da;
    border-radius: 50%;
    box-shadow: 0 0 0 8px #f4f5f9;
    text-align: center;
    left: 20%;
    top: 0;
    margin: 0 0 0 -25px;
}
.cbp_tmtimeline > li .cbp_tmicon >img {
    border-radius: 50%; 
    position: absolute; 
    top: 0px; 
    left: 0px;
}
/* Example Media Queries */
@media screen and (max-width: 65.375em) {
    .cbp_tmtimeline > li .cbp_tmtime span:last-child {
        font-size: 1.5em;
    }
}
@media screen and (max-width: 47.2em) {
    .cbp_tmtimeline:before {
        display: none;
    }
    .cbp_tmtimeline > li .cbp_tmtime {
        width: 100%;
        position: relative;
        padding: 0 0 20px 0;
    }
    .cbp_tmtimeline > li .cbp_tmtime span {
        text-align: left;
    }
    .cbp_tmtimeline > li .cbp_tmlabel {
        margin: 0 0 30px 0;
        padding: 1em;
        font-weight: 400;
        font-size: 95%;
    }
    .cbp_tmtimeline > li .cbp_tmlabel:after {
        right: auto;
        left: 20px;
        border-right-color: transparent;
        border-bottom-color: #e4f0ff;
        top: -20px;
    }
    .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
        border-right-color: transparent;
        border-bottom-color: #F6F6F6;
    }
    .cbp_tmtimeline > li .cbp_tmicon {
        position: relative;
        float: right;
        left: auto;
        margin: -55px 5px 0 0px;
    }
}
</style>

[/hidecontent]

为了更好的体现视觉效果，新建页面可以选择隐藏侧边栏。该设置可以通过主题自带的选项或插件实现，同样也可以通过代码实现：
在上面的样式代码中加入.sidebar {display: none;}即可；

  • 同时，可以屏蔽站点搜索“说说”的内容。编辑主题目录下functions.php文件，加入如下代码： 注意：此代码为限定搜索内容仅搜索“文章”，会屏蔽除默认“文章”内容外的其他搜索
//屏蔽搜索说说
function search_filter_page($query) {
if ($query->is_search) {
$query->set('post_type', 'post');
}
return $query;
}
add_filter('pre_get_posts','search_filter_page');
 

第二款

1、同样是在主题目录下functions.php文件末尾把下面代码添加进去。

//说说
add_action('init', 'my_custom_init'); function my_custom_init() { $labels = array( 'name' => '说说', 'singular_name' => 'singularname', 'add_new' => '发表说说', 'add_new_item' => '发表说说', 'edit_item' => '编辑说说', 'new_item' => '新说说', 'view_item' => '查看说说', 'search_items' => '搜索说说', 'not_found' => '暂无说说', 'not_found_in_trash' => '没有已遗弃的说说', 'parent_item_colon' => '', 'menu_name' => '说说' ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => null, 'supports' => array('title','editor','author','custom-fields','comments') ); register_post_type('shuoshuo',$args); }
//指定说说文章模板
add_filter( 'template_include', 'include_template_function', 1 );
function include_template_function( $template_path ) {
if ( get_post_type() == 'shuoshuo' ) {
if ( is_single() ) {
if ( $theme_file = locate_template( array ( 'shuoshuo.php' ) ) ) {
$template_path = $theme_file;
} else {
$template_path = plugin_dir_path( __FILE__ ) . '/pages/shuoshuo.php';//自己修改文件路径
}
}
}
return $template_path;
}
/*说说点赞功能*/
add_action('wp_ajax_nopriv_bigfa_like', 'bigfa_like');
add_action('wp_ajax_bigfa_like', 'bigfa_like');
function bigfa_like(){
global $wpdb,$post;
$id = $_POST["um_id"];
$action = $_POST["um_action"];
if ( $action == 'ding'){
$bigfa_raters = get_post_meta($id,'bigfa_ding',true);
$expire = time() + 99999999;
$domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
setcookie('bigfa_ding_'.$id,$id,$expire,'/',$domain,false);
if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
update_post_meta($id, 'bigfa_ding', 1);
}
else {
update_post_meta($id, 'bigfa_ding', ($bigfa_raters + 1));
}
echo get_post_meta($id,'bigfa_ding',true);
}
die;
}
 

2、在主题目录pages目录下创建shuoshuo.php文件,并把下面代码复制进去

版本一：

[hidecontent type="reply" desc="隐藏内容：评论后查看"]

//说说
add_action('init', 'my_custom_init'); function my_custom_init() { $labels = array( 'name' => '说说', 'singular_name' => 'singularname', 'add_new' => '发表说说', 'add_new_item' => '发表说说', 'edit_item' => '编辑说说', 'new_item' => '新说说', 'view_item' => '查看说说', 'search_items' => '搜索说说', 'not_found' => '暂无说说', 'not_found_in_trash' => '没有已遗弃的说说', 'parent_item_colon' => '', 'menu_name' => '说说' ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => null, 'supports' => array('title','editor','author','custom-fields','comments') ); register_post_type('shuoshuo',$args); }
 //指定说说文章模板
add_filter( 'template_include', 'include_template_function', 1 );
function include_template_function( $template_path ) {
    if ( get_post_type() == 'shuoshuo' ) {
        if ( is_single() ) {
            if ( $theme_file = locate_template( array ( 'shuoshuo.php' ) ) ) {
                $template_path = $theme_file;
            } else {
                $template_path = plugin_dir_path( __FILE__ ) . '/pages/shuoshuo.php';//自己修改文件路径
            }
        }
    }
    return $template_path;
}
/*说说点赞功能*/
add_action('wp_ajax_nopriv_bigfa_like', 'bigfa_like');
add_action('wp_ajax_bigfa_like', 'bigfa_like');
function bigfa_like(){
    global $wpdb,$post;
    $id = $_POST["um_id"];
    $action = $_POST["um_action"];
    if ( $action == 'ding'){
    $bigfa_raters = get_post_meta($id,'bigfa_ding',true);
    $expire = time() + 99999999;
    $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
    setcookie('bigfa_ding_'.$id,$id,$expire,'/',$domain,false);
    if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
        update_post_meta($id, 'bigfa_ding', 1);
    } 
    else {
            update_post_meta($id, 'bigfa_ding', ($bigfa_raters + 1));
        }
    echo get_post_meta($id,'bigfa_ding',true);
    } 
    die;
}

[/hidecontent]

 

版本二：

[hidecontent type="reply" desc="隐藏内容：评论后查看"]

<?php

/**
 * Template name: 说说页面
 * Description:   WIIUII-shuoshuo
 */

// 获取链接列表
get_header();
$header_style = zib_get_page_header_style();
?>
<main class="container">
    <div class="content-wrap">
        <div class="content-layout">
            <?php while (have_posts()) : the_post(); ?>
                <?php if ($header_style != 1) {
                    echo zib_get_page_header();
                } ?>
                <?php endwhile;  ?>
                <div class="box-body theme-box radius8 main-bg main-shadow">
                    <?php if ($header_style == 1) {
                        echo zib_get_page_header();
                    } ?>
                <!--说说主体开始www.520xv.com-->
                <style type="text/css">
                #wiiuii-bt h1,#wiiuii-bt h2,#wiiuii-bt h3,#wiiuii-bt h4,#wiiuii-bt h5 #wiiuii-bt h1{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid red;padding: 5px 12px;border-left: 5px solid red;margin: 12px 0px;border-radius: 0.4rem;}#wiiuii-bt h2{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid #FF1493;padding: 5px 12px;border-left: 5px solid #FF1493;border-radius: 0.4rem;margin: 12px 0px;}#wiiuii-bt h3{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid #4169E1;padding: 5px 12px;border-left: 5px solid #4169E1;margin: 12px 0px;border-radius: 0.4rem;}#wiiuii-bt h4{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid #3CB371;padding: 5px 12px;border-left: 5px solid #3CB371;margin: 12px 0px;border-radius: 0.4rem;}#wiiuii-bt h5{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid #FFC0CB;padding: 5px 12px;border-left: 5px solid #FFC0CB;margin: 12px 0px;border-radius: 0.4rem;}/*www.wiiuii.cn*/#article{color: #444; font-family: microsoft yahei;}#article ul{padding-left:0px!important;}#article li{padding:5px!important;color: var(--main-color);}#article img{border-radius: 5px;} #article p{color:var(--main-color);}#article video{border-radius: 5px;}.typebox{box-shadow:0px 1px 6px 0.01px #9999993d;padding:10px;margin-bottom:20px;border-radius:8px;}.typeafter{margin-right:-15px;margin-left:-15px;margin-top:-20px;}.wiiuii-avatar img{border-radius: 10px;width:58px;height:58px;}.wiiuii-avatar{float:left;position:relative;min-height:1px;padding: 0px 10px 10px 25px;}.wiiuii-hr{border-top: 2px dashed rgba(255,78,106,.85);margin: 0 0 0;}.wiiuii-content{positiON: relative;}.wiiuii-content .shuoshuo-icon{position: absolute;right: 1px;display: block;width: 40px;height: 40px;line-height: 20px;background-image: url(https://img.wiiuii.cn/img/%E5%BF%83.svg);transform-origin: 0% 0%;}/*www.wiiuii.cn*/#wiiuii-content{background-color: rgba(255,78,106,.15); color: #ff4e6a; border-radius: 5px!important;padding: 2px 5px;display: inline-block; }#wiiuii-content1{background-color: rgb(41, 151, 247, .15); color: #2997f7; border-radius: 5px!important;padding: 2px 5px;display: inline-block; }/*www.wiiuii.cn*/.gd{font-weight:700;margin: 30px 0 0 10px;}.wiiuii-fenye{box-shadow: 0px 1px 6px 0.01px #9999993d;border-radius: 999px;}.wiiuii-h2 h2{display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;}.wiiuii-h2 h2::before{content:"# ";color:#f04494;font-weight:bold;}.button{padding: 5px 25px; font-size: 16px; margin: 4px 2px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; cursor: pointer; border-radius: 10px!important;} .button1{background-color: var(--main-bg-color); color:#2997f7; border: 2px solid #2997f7;} .button1:hover{background-color: #2997f7; color: white;}.aligncenter {clear: both;display: block;margin: 0 auto;}.alignright{display: block;margin-left: auto;}.wiiuii_frame{padding: 0 10px 0 10px;}
                /*图片背景*//*.wiiuii_bj{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(https://img.wiiuii.cn/img/%E7%8C%9B%E7%94%B7%E7%B2%89.jpg);background-size: cover; background-repeat: no-repeat; background-position: center center; border-radius: 5px; cursor: pointer;}*/
                 .post-like{text-align:right;padding:10px} .post-like a{/*background-color: #2997f7;*/ border-radius: 10px; color: #2997f7; font-size: 15px; padding: 8px 10px; text-decoration: none; outline: none;}.post-like a.done, .post-like a:hover{/*background-color: #F44336;*/ color: #ff4e6a;} .post-like a.done{cursor:not-allowed}
                </style>
                 <!--点赞功能js-->
                 <script type="text/javascript">
                    $.fn.postLike=function(){if($(this).hasClass('done')){return false}else{$(this).addClass('done');var id=$(this).data("id"),action=$(this).data('action'),rateHolder=$(this).children('.count');var ajax_data={action:"bigfa_like",um_id:id,um_action:action};$.post("/wp-admin/admin-ajax.php",ajax_data,function(data){$(rateHolder).html(data)});return false}};$(document).on("click",".favorite",function(){$(this).postLike()});
                </script>
                </head>
                <body>
                <h1 class="wp-block-zibllblock-biaoti title-theme"><strong>说说列表:</strong></h1>
                <h1 class="wp-block-zibllblock-biaoti title-theme"><strong>目前总计发表 <span style="color: #ff0000;"><?php $count_posts = wp_count_posts('shuoshuo'); echo $published_posts = $count_posts->publish;?></span> 个说说，更新于 <span style="color: #ff0000;"><?php $last = $wpdb->get_results("SELECT MAX(post_modified) AS MAX_m FROM $wpdb->posts WHERE (post_type = 'shuoshuo')");$last = date('Y年n月j日', strtotime($last[0]->MAX_m));echo $last; ?></span>。<strong></h1>
                </br>
                <div class="wiiuii-content">
                <ul id="list">
                    <?php $limit = get_option('posts_per_page');$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;  
                    query_posts('post_type=shuoshuo&post_status=publish&showposts=' . $limit=6 . '&paged=' . $paged);if (have_posts()) : while (have_posts()) : the_post(); ?>
                    <li> 
                            <div class="typebox wiiuii_bj">
                                <a class="shuoshuo-icon"></a>
                            <div class="typeafter">
                            <div class="wiiuii-avatar">
                                <a href="<?php bloginfo('url'); ?>"><?php echo get_avatar( get_the_author_meta( 'ID' ) ); ?></a>
                            </div>
                            <div class="gd">
                                <p id="wiiuii-content"><i class="fa fa-user" aria-hidden="true"></i> <?php the_author(); ?>の说说</p></br>
                                <p id="wiiuii-content1"><i class="fa fa-calendar" aria-hidden="true"></i> <?php the_time('Y年n月j日 G:i D'); ?></p>
                            </div>
                            </div>
                             <hr class="wiiuii-hr" >
                            <div class="wiiuii_frame">
                                <div class="wiiuii-h2">
                                    <h2><?php the_title();?></h2>
                                </div>
                                <div id="article" class="wp-posts-content">
                                    <div id="wiiuii-bt">
                                    <?php the_content(); ?>
                                    </div>
                                </div>
                            </div>
                            <!--点赞功能开始-->
                            <div class="post-like">
                                <a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])) echo ' done';?>"><i class="fa fa-heart" aria-hidden="true"></i> 喜欢[<span class="count"><?php if( get_post_meta($post->ID,'bigfa_ding',true)){ echo get_post_meta($post->ID,'bigfa_ding',true);} else { echo '0';}?></span>]
                                </a>
                                </div>
                            </div>
                            <!---->
                        <?php endwhile;endif; ?>
                    </li>
                </ul>
                <!--分页功能-->
                <div class="wiiuii-fenye" style="text-align:center;font-weight:700;">
                <?php if (function_exists('wp_pagenavi')) wp_pagenavi();else { ?><div style="padding: 5px;"><?php previous_posts_link('<button class="button button1"><i class="fa fa-caret-left" aria-hidden="true"></i> 上一页</button>') ?>  <?php next_posts_link('<button class="button button1">下一页 <i class="fa fa-caret-right" aria-hidden="true"></i></button>') ?></div><?php } ?>
                </div>
                </div>
                <!--说说主体结束www.520xv.com-->
                </div>
                <!---->
                <!---->
                <?php comments_template('/template/comments.php', true); ?>
        </div>
    </div>
    <?php get_sidebar(); ?>
</main>
<?php
get_footer();

[/hidecontent]

3、在网站后台—>页面—>新建页面—>页面属性–模板–说说页面（古腾堡编辑器是这样的，不知道经典编辑器是不是一样），然后发布页面即可。

第三款

1、首先在主题目录的functions.php里面加入以下代码：

//微语
add_action('init', 'my_custom_init'); function my_custom_init() { $labels = array( 'name' => '微语', 'singular_name' => 'singularname', 'add_new' => '发表微语', 'add_new_item' => '发表微语', 'edit_item' => '编辑微语', 'new_item' => '新微语', 'view_item' => '查看微语', 'search_items' => '搜索微语', 'not_found' => '暂无微语', 'not_found_in_trash' => '没有已遗弃的微语', 'parent_item_colon' => '', 'menu_name' => '微语' ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => null, 'supports' => array('title','editor','author') ); register_post_type('shuoshuo',$args); }
 

2、然后在子比主题pages目录下新建一个weiyu.php文件，然后把下面代码放入weiyu.php文件中即可。

[hidecontent type="reply" desc="隐藏内容：评论后查看"]

<?php

/**
 * Template name: 微语页面
 * Description:   WIIUII-weiyu
 */

// 获取链接列表
get_header();
$header_style = zib_get_page_header_style();
?>
<main class="container">
    <div class="content-wrap">
        <div class="content-layout">
            <?php while (have_posts()) : the_post(); ?>
                <?php if ($header_style != 1) {
                    echo zib_get_page_header();
                } ?>
                <?php endwhile;  ?>
                <div class="box-body theme-box radius8 main-bg main-shadow">
                    <?php if ($header_style == 1) {
                        echo zib_get_page_header();
                    } ?>
                <!--主体开始-->
                <style type="text/css">
                #shuoshuo_content{padding: 10px; /*min-height: 500px;*/} /* shuo */ body.theme-dark .cbp_tmtimeline::before{background: RGBA(255, 255, 255, 0.06);} ul.cbp_tmtimeline{padding: 0;} div class.cdp_tmlabel > li .cbp_tmlabel{margin-bottom: 0;} .cbp_tmtimeline{margin: 30px 0 0 0; padding: 0; list-style: none; position: relative;} /* The line */ .cbp_tmtimeline:before{/*content: '';*/ position: absolute; top: 0; bottom: 0; width: 4px; background: RGBA(0, 0, 0, 0.02); left: 80px; margin-left: 10px;} /* The date/time */ .cbp_tmtimeline > li .cbp_tmtime{display: block; /* width: 29%; */ /* padding-right: 110px; */ max-width: 70px; position: absolute;} .cbp_tmtimeline > li .cbp_tmtime span{display: block; text-align: right;} .cbp_tmtimeline > li .cbp_tmtime span:first-child{font-size: 0.9em; color: #bdd0db;} .cbp_tmtimeline > li .cbp_tmtime span:last-child{font-size: 1.2em; color: #9BCD9B;} .cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child{color: RGBA(255, 125, 73, 0.75);} div.cbp_tmlabel > p{margin-bottom: 0;} /* Right content */ .cbp_tmtimeline > li .cbp_tmlabel{margin: 0 0 45px 65px; background: #9BCD9B; color: #fff; padding: .8em 1.2em .4em 1.2em; /* font-size: 1.2em; */ font-weight: 300; line-height: 1.4; position: relative; border-radius: 5px; transition: all 0.3s ease 0s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor: pointer; display: block;} .cbp_tmlabel:hover{transform:scale(1.05); transform: translateY(-3px); z-index: 1; -webkit-box-shadow: 0 15px 32px rgba(0, 0, 0, 0.15) !important} .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel{background: RGBA(255, 125, 73, 0.75);} /* The triangle */ .cbp_tmtimeline > li .cbp_tmlabel:after{right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: #9BCD9B; border-width: 10px; top: 4px;} .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after{border-right-color: RGBA(255, 125, 73, 0.75);} p.shuoshuo_time{margin-top: 10px; border-top: 1px dashed #fff; padding-top: 5px;} /* Media */ @media screen and (max-width: 65.375em){.cbp_tmtimeline > li .cbp_tmtime span:last-child{font-size: 1.2em;} } .shuoshuo_author_img img{border: 1px solid #ddd; padding: 2px; float: left; border-radius: 64px; transition: all 1.0s;} .avatar{-webkit-border-radius: 100% !important; -moz-border-radius: 100% !important; box-shadow: inset 0 -1px 0 #3333sf; -webkit-box-shadow: inset 0 -1px 0 #3333sf; -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out;} .zhuan{transform: rotateZ(720deg); -webkit-transform: rotateZ(720deg); -moz-transform: rotateZ(720deg);}
                </style>
                </head>
                <body>
                <div id="primary" class="content-area" style="">
                    <main id="main" class="site-main" role="main">
                        <div id="shuoshuo_content">
                            <ul class="cbp_tmtimeline">
                                <?php query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?>
                                <li> <span class="shuoshuo_author_img"><img src="https://q1.qlogo.cn/g?b=qq&nk=18298553&s=640" class="avatar avatar-48" style="width:48px;height:48px"></span>
                                    <a class="cbp_tmlabel" href="javascript:void(0)">
                                        <h4><?php the_title();   ?></h4>
                                        <p><?php the_content(); ?></p>
                                        <p></p>
                                        <p class="shuoshuo_time"><i class="fa fa-clock-o"></i>
                                            <?php the_time('Y年n月j日G:i'); ?>
                                        </p>
                                    </a>
                                    <?php endwhile;endif; ?>
                                </li>
                            </ul>
                        </div>
                    </main>
                </div>
                <script type="text/javascript">
                    $(function () {
                        var oldClass = "";
                        var Obj = "";
                        $(".cbp_tmtimeline li").hover(function () {
                            Obj = $(this).children(".shuoshuo_author_img");
                            Obj = Obj.children("img");
                            oldClass = Obj.attr("class");
                            var newClass = oldClass + " zhuan";
                            Obj.attr("class", newClass);
                        }, function () {
                            Obj.attr("class", oldClass);
                        })
                    })
                </script>
                <!--主体结束-->
                </div>
                <?php comments_template('/template/comments.php', true); ?>
        </div>
    </div>
    <?php get_sidebar(); ?>
</main>
<?php
get_footer();

[/hidecontent]

 

注：微语头像只需把代码中”https://q1.qlogo.cn/g?b=qq&amp;nk=18298553&amp;s=640″修改成自己QQ号头像或者自己图片链接即可。

3、最后在后台—>页面—>新建页面—>找到“页面属性”选择“微语页面”—>填写标题—>发布就可以啦！

版权所有：李骏的博客
文章标题：子比主题美化之WordPress子比主题添加说说/微语功能
文章链接：https://www.lijun520.com/技术交流/2391.html
本站文章均为原创，未经授权请勿用于任何商业用途
收藏
扫描二维码，在手机上阅读

12.13国家公祭日丨铭记历史，珍爱和平！

宝塔面板对接模块安装使用说明
评 论
请登录后再评论
立即登录 ｜ 注册帐号