WordPress网站文章详情页头部添加图片-ripro详情页美化

鳄鱼君

发表文章数:643

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » WordPress » WordPress网站文章详情页头部添加图片-ripro详情页美化

修改文章详情页的样式,增加随机图片,就是文章头部添加图片,每次刷新文章都会随机显示不同的图片。

这里以rirpo主题为例,其他主题自己摸索,首先修改single.php文件,在<div class=”container”>上面添加代码:

<div class="pageheader headtbanner" style="<?php echo 'background-image: url('._the_theme_sing_img().');background-position: center' ; ?>">
    <header class="article-header">
        <h1 class="article-title"><?php the_title(); ?></h1>
        <div class="article-meta">
            <span class="item item-1"><?php the_time('Y-n-j') ?></span>
            <span class="item item-2">阅读(<?php echo _get_post_views();?>)</span>           
            <span class="item item-3">分类:
            <a<?php echo _target_blank();?> href="<?php
                     $category = get_the_category();
                    if($category[0]){
                         echo ''.get_category_link($category[0]->term_id ).'';
                                                }
                        ?>" rel="category" title=" <?php foreach((get_the_category()) as $category){echo $category->cat_name;} ?>">
                 <?php foreach((get_the_category()) as $category){echo $category->cat_name;} ?>
              </a></span>
        </div>
    </header>
</div>
 

然后在主题的css文件中添加css样式:

.pageheader::before{padding:70px 0;content:'';background-image:url(../images/pattern.png);background-repeat:repeat;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.pageheader .white{background-color:#fff!important}.pageheader .title{color:#fff!important;font-size:40px}.pageheader p{margin-bottom:0;color:#f5f5f5;font-size:1pc}.pageheaders h2{margin:0}@media screen and (max-width:1200px){.pageheader{margin-top:5pc}}@media screen and (max-width:992px){.pageheader{margin-top:-30px;padding:10px 10px}}.pageheader .white .title{color:#3f3f3f!important;text-shadow:3px 3px 0 #fff}.pageheader .white p{color:#6f6f6f}.headtbanner span{color:#fff;font-size:15px}.headtbanner span i{margin-left:15px}@media screen and (max-width:992px){.headtbanner span{font-size:14px}.headtbanner span i{margin-left:10px}}@media screen and (max-width:768px){.headtbanner span{font-size:9pt}.pageheader .title{font-size:30px}.headtbanner span i{margin-left:5px}}code{background:#40dd2a;color:#111010;border-radius:4px;padding:1px 3px;margin:1px 2px}.pageheader{background-size:cover;background-repeat:repeat;background-attachment:fixed;position:relative;z-index:1;padding:110px 0;background-color:#394048;color:#eee;text-align:center;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;margin-bottom:20px;margin-top:-60px}@media screen and (max-width:768px){.pageheader{padding:50px 0}.article-title{position:relative;margin-bottom:10px;font-size:20px;font-weight:bold;line-height:1.3;margin:0;display:block;padding:10px 20px;text-shadow:.8px 0 5px #333;z-index:2}.article-header{padding:25px 0 25px 0;border-bottom:0;border-radius:5px 5px 0 0}.article-title{margin-top:0;font-size:26px;line-height:36px}.article-title a,.article-title a:hover{color:#576366}.article-title a span{color:#ff5e52}.article-meta{font-size:12px;color:#eaeaea;padding:0 20px;z-index:2;position:relative}.article-meta .item{margin:0 5px;text-shadow:.8px 0 5px #333}.dess .item{margin-right:10px;color:#9c9c9c;font-size:12px}.article-meta .item a{color:#eaeaea}.article-meta .item a:hover{color:#4ba7fd}.article-header h1{color:#ecc9e6}
 

然后添加一个随机更换图片的函数,不添加就会报错,因为我们在html中已经引用这个函数了,这个图片可以放在自己的图床中,上传的时候使用默认的名字,就像1,2,3,…jpg的格式,一般自建的图床再上传的时候是可以修改配置的,上传默认都是试用MD5重名,路径都是按照当天的日期,我们修改上传使用原来的文件名字,当天尽量把随机更换的图片都上传完成,然后就可以添加对应的路径:

function _the_theme_sing_img()
{
   
    $randm = mt_rand(1,8);//设置随机缩略图数量(10代表10张缩略图)
    return 'XXX/2020/02/20/'.$randm.'.jpg';#更换为自己的图床地址
}
 

最方便的就是使用图片接口了,这里有能力的可以自己修改,不再介绍。

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《WordPress网站文章详情页头部添加图片-ripro详情页美化》 发布于2020-03-08

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

4 + 6 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册