当前位置:首页 > 源码下载 > 网站源码 > 正文内容

WordPress新增页面模板-说说微语

admin4个月前 (11-24)网站源码103

微语说说相当于一个简单的记事本,使用还是比较方便的。这个版本的说说微语CSS样式不兼容,可能有些主题无法适配,但是后台添加内容,前端显示的逻辑已经实现。可以当作Word press二开中自定义页面模板学习~

一、后台添加说说微语模块

首先我们把以下代码,添加到主题根目录中的functions.php文件中。下面两步代码安装完成后,在后台页面,建立微语页面,在设置菜单,保存首页导航栏即可。纯代码微语添加微语,不影响百度谷歌搜录和数据备份恢复。

//说说页面
function shuoshuo_custom_init()
{
    $labels = array(
        'name' => '说说',
        'singular_name' => '说说',
        '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',
            'comments'
 
        )
    );
    register_post_type('shuoshuo', $args);
}
add_action('init', 'shuoshuo_custom_init');

二、前端页面模板

然后添加模板文件,在模板主题根目录新建一个名为page-shuo.php的文件,并将以下代码添加在其中

<?php
 
/**
 * Template Name: 说说/微语
 */
 
get_header(); ?>
 
<style>
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}.cbp_tmtimeline > li .cbp_tmtime{display:block;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}.cbp_tmtimeline > li .cbp_tmlabel{margin:0 0 45px 65px;background:#24a0f0;color:#fff;padding:.8em 1.2em .4em 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: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:#7878f0}.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after{border-right-color:#7878f0}.cbp_tmtimeline > li .cbp_tmlabel:after{right:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-right-color:#24a0f0;border-width:10px;top:4px}p.shuoshuo_time{margin-top:10px;border-top:1px dashed #fff;padding-top:5px;font-family:Ubuntu}@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;height:50px}.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>
 
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <div class="cbp_shuoshuo">
            <?php
            query_posts("post_type=shuoshuo & post_status=publish & posts_per_page=-1");
            if (have_posts()) : ?>
                <ul class="cbp_tmtimeline">
                    <?php
                    while (have_posts()) : the_post(); ?>
                        <li>
                            <span class="shuoshuo_author_img"><img src="<?php echo get_avatar_url(get_the_author_meta('ID')); ?>" class="avatar avatar-48" width="48" height="48"></span>
                            <a class="cbp_tmlabel" href="javascript:void(0)">
                                <p></p>
                                <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>
                        </li>
                    <?php endwhile;
                    wp_reset_query();//重置查询
                    ?>
                </ul>
            <?php
            else : ?>
                <h3 style="text-align: center;">你还没有发表说说噢!</h3>
                <p style="text-align: center;">赶快去发表你的第一条说说心情吧!</p>
            <?php
            endif; ?>
        </div>
    </main><!-- #main -->
</div><!-- #primary -->
<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>
<?php
get_footer();

三、新建页面,选择模板

最后刷新前后端,后台在自定义页面选择模板【说说微语】即可~


扫描二维码推送至手机访问。

版权声明:如需转载请注明出处

本文链接:https://yxyygzs.com/index.php/post/3.html

分享给朋友:

“WordPress新增页面模板-说说微语” 的相关文章

网站百度分享代码突然没有了不显示了?解决WordPress百度分享无效问题

最近维护网站过程中突然发现百度分享没有了,经过排查发现,是因为网站开启了SSL证书而导致的。百度分享无效问题的原因:网站百度分享代码突然没有了不显示了,百度分享无效问题的主要原因在于,百度分享代码不支持https。百度分享代码运用的链接方式是通过代码调用百度远程的CDN库,但是百度服务器并不支持ht...

最新版CoreDownload - WordPress文章下载增强插件,支持几乎所有网盘

最新版CoreDownload - WordPress文章下载增强插件,支持几乎所有网盘

CoreDownload 是果核剥壳开发的一款高级WordPress下载增强插件,支持几乎所有网盘,为WordPress增加任意下载功能安装插件后,在设置中全局开启。然后编辑文章,可以在下面找到CoreDownload下载增强功能。后台编辑页面文章内下载效果...

wordpress美化之代码高亮,非常好用的代码高亮插件Enlighter - Customizable Syntax Highlighter

wordpress美化之代码高亮,非常好用的代码高亮插件Enlighter - Customizable Syntax Highlighter

因为wordpress自带的编辑器并没有编辑代码样式的组件,所以导致如果页面中分享代码的话特别丑且不适配,我们也看过网站代码部分都是彩色高亮显示,且支持一键复制的。今天就给大家分享一款面代码的代码高亮插件Enlighter - Customizable Syntax Highlighter。Enli...

WordPress虚拟资源收费下载插件Erphpdown

Erphpdown是模板兔开发的一款针对虚拟资源收费下载的插件,集会员管理、支付管理、推广管理于一体的Wordpress插件。会员推广下载专业版:支持在线支付(支付宝、微信支付、贝宝),用户推广、提现,发布收费下载与收费内容查看,下载加密,VIP会员权限等功能的插件。推荐理由支持支付宝、微信、虎皮椒...

WordPress文章目录插件,LuckyWP Table of Contents自动生成文章插件

文章带目录不能帮助用户快速获取信息,也能让页面内容更具条例,更加符合搜索引擎收录规范。今天给大家推荐一款免费好用的WordPress文章目录插件LuckyWP Table of Contents。LuckyWP Table of Contents是一个WordPress插件,它允许你在博客帖子或页面...

wordpress侧栏文章底部海报分享点赞插件,MagicPost WordPress文章管理功能增强插件

虽然很多wordpress主题带有点赞功能,但是很多都在文章底部,不美观、不显眼,于是就想自定义一下分享样式,增加一些海报分享等功能,给大家推荐一款免开发的wordpress插件——MagicPost。MagicPost(中文为魔法文章)是闪电博开发的集定时发布管理,文章搬家,文章翻译,HTML代码...