记录成长
分享快乐

WordPress 主题添加视频分类页面模板

因为网站有分享一些个人看过的感觉还不错的视频,然而目前所使用的 DUX 主题自带的两种页面分类页面(默认、产品)并不能很好地展示视频效果,所以决定自己写一份。因个人能力有限,写出来的不是太好,但也还凑合,于是决定分享出来,有相中的可以自取。先看下显示效果:

PC 端

移动端

大致就是这个样子,下面说下具体实现方式:

添加模板文件

新建一个名为 loop-video.php (当然你也可以修改为其他名称,这里仅因为我个人使用的主题需要命名的),将以下代码丢到该文件中。

蝈蝈要安静(QuietGuoGuoBlog)
此处内容已经被作者无情的隐藏,请输入验证码查看内容
验证码:
请关注“蝈蝈要安静”官方公众号,回复关键字“视频分类模板”,获取验证码。 【注】手机扫描二维码关注“蝈蝈要安静”官方公众号获取验证码。

新建完成后将文件丢到你的主题文件夹下,然后调用就可以了。

CSS 样式美化

将以下代码丢到你主题的样式文件里,一般为 style.css 文件中即可。DUX 主题需到 main.css 文件中。

/*  @name 视频分类模板样式文件  2019年01月06日  蝈蝈要安静 | https://blog.quietguoguo.com/  */
.cat-video-main{
    position:relative;
    margin: 15px 10px 25px;
    padding:0px;
    overflow: hidden;
}
.cat-video-content{position:relative;margin:0 3%;min-height:600px}

.cat-video-item{
    position:relative;
    display:inline-block;
    width:18%;
    margin:1%;
    padding:0px;
    vertical-align:bottom;
    text-align:left;
    background-color:#fff;
    border:1px solid #eee;
    border-radius: 9px;
    overflow:hidden;
}

.cat-video-item:hover{ border-color: #79d5ff;}

.cat-video-item h2{
    margin: 10px 10px 5px;
    font-size:14px;
    height: 40px;
    line-height:20px;
    overflow: hidden;
}

.cat-video-item div{
    height: 24px;
    margin: 10px 1px;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cat-video-item div span{
    margin: 5px 10px 10px;
    font-size:10px;
    height: 16px;
    line-height:16px;
    overflow: hidden;
    float: right;
}

.cat-video-author{
    float:left !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cat-video-item a{margin:0px;width: 100% !important;display:block;overflow:hidden;border-radius: 0;padding-bottom: 0;}
.cat-video-item  a img{margin:0px;width: 100% !important;height: 100% !important;display:block;overflow:hidden;border-radius: 0;}
@media (max-width:1366px){
    .cat-video-item{width:23%}
}
@media (max-width:1024px){
    .cat-video-item{width:31%}
}
@media (max-width:768px){
    .cat-video-item{width:48%}
}
@media (max-width:480px){
    .cat-video-item div span{float: left;}
}

上面两个文件是此次主题修改的核心文件,大家针对自己主题稍微调整下应该就可以用了。下面就我目前使用的主题简单说下如何配置,你也可以作为修改自己主题的参考。

category.php 文件修改

DUX 主题的话,需修改 category.php 文件以加载我们的模板文件,具体修改方式为在代码 16 行位置处的数组函数中增加一个 video 项。修改后的代码为:

$loop_style = 'default';
if( !empty($meta_style) && in_array($meta_style, array('default', 'video','product')) ){
	$loop_style = $meta_style;
}

functions-theme.php 文件修改

加载模板后我们还需要设置后台选项选择我们的“视频”模板。在 functions-theme.php 文件中大约 1012 行位置处增加如下代码

<option value="video">视频</option>

修改后如下:

<select name="term_meta[style]" id="term_meta[style]" class="postform">
    <option value="default">默认</option>
    <option value="video">视频</option>
    <option value="product">产品</option>
</select>

在 1051 代码处增加如下代码:

<option value="video" '. ('video'==$meta_style?'selected="selected"':'') .'>视频</option>

修改后如下所示:

<select name="term_meta[style]" id="term_meta[style]" class="postform">
    <option value="default" '. ('default'==$meta_style?'selected="selected"':'') .'>默认</option>
    <option value="video" '. ('video'==$meta_style?'selected="selected"':'') .'>视频</option>
    <option value="product" '. ('product'==$meta_style?'selected="selected"':'') .'>产品</option>
</select>

如此,修改完成。

蝈蝈下载面板

此资源下载价格为1G币,请先
注意:本站资源多为网络收集,如涉及版权问题请及时与站长联系,我们会在第一时间内与您协商解决。如非特殊说明,本站所有资源解压密码均为:blog.quietguoguo.com。
赞(3) 我要打赏
蝈蝈提醒:转载请注明出处哦>>>蝈蝈要安静 » WordPress 主题添加视频分类页面模板
分享到: 更多 (0)

评论 15

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #10

    请问楼主,这个付费下载插件的支付设置是怎么填的呀?充值用的支付宝接口不是需要签约嘛?

    ma32527882个月前 (07-06)回复
  2. #9

    能增加一下视频集数播放选项?让他们在同一个文章页面播放,假设我要添加西游记不然我要添加很多文章……

    5201232个月前 (07-05)回复
  3. #8

    东西真不错,改明儿有需要就来买!

    dujin2个月前 (06-28)回复
  4. #7

    图片比例是不是根据电影海报比例会更好?

    匿名2个月前 (06-28)回复
    • @ 匿名 这个的话我直接获取的特色图片,如果是海报的话,需要新增 Meta 选择海报上传。

      蝈蝈要安静2个月前 (06-28)回复
  5. #6

    老大,这个视频分类照着做好了,为什么整个页面只有10个视频,不像你的网站上一样有16个视频呢?10个视频不好看呀,多出来的就跑到第二页了

    3730735913个月前 (05-11)回复
  6. #5

    这验证码 让不玩微信得怎么过0.0 :cry:

    nice6个月前 (02-18)回复
  7. #4

    这个是针对DUX5.2的修改对吧?

    kkoo7个月前 (01-23)回复
  8. #3

    借楼请教楼主一个问题,在使用dux主题的过程中,在用户注册的时候无法输入大写字母,比如我注册楼主的博客的时候,我本来想填Meow123的,但是总是注册不上,失败的提示也没有说清楚,后来才发现是由于M大写字母不能注册,所以才用小写字母注册,想问一下楼主,有没有什么办法能让dux主题在注册的时候可以使用大写字母,我看了一下,应该是dux主题下JS文件夹中的signpop.js文件,但是我不知道如何修改~

    meow1237个月前 (01-19)回复
  9. #2

    请问 非dux主题怎么添加这个?我的主题没有functio-ntheme.php

    wuyun7个月前 (01-15)回复
  10. #1

    这个功能似乎还不错,

    wordpress建站吧7个月前 (01-14)回复

博客文章有用,赏博主一包辣条~~~

支付宝扫一扫打赏

微信扫一扫打赏

WordPress 主题添加视频分类页面模板-海报

分享本文封面