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

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

PC 端

移动端

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

添加模板文件

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

公众号二维码加载失败时的替代文字
此处内容已经被作者无情的隐藏,请输入验证码查看内容
验证码:
请关注“你公众号名字”官方公众号,回复关键字“视频分类模板”,获取验证码。 【注】手机扫描二维码快速关注“你公众号名字”官方公众号。

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

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。
未经允许不得转载

文章标题:蝈蝈要安静 » WordPress 主题添加视频分类页面模板

原文链接:https://blog.quietguoguo.com/3445.html

发布信息:文章由【蝈蝈要安静】于<2019-01-09>发布于【主题修改】分类下

相关标签:||

相关推荐

评论 ( 25 )

  • 昵称 (必填)
  • 邮箱 (必填)
  • QQ (选填)
  • 网址(选填)
  1. #15

    好了,谢谢群主了,1块钱买雪糕吃吧,还得自己学习啊

    fff2个月前 (09-29)回复
    • 不好意思,fff这个账户不存在。请加2220379479这个QQ提供下账户信息。

      蝈蝈要安静2个月前 (09-29)回复
  2. #14

    删我评论?1块钱都能骗人,还能干点啥

    fff2个月前 (09-29)回复
    • 额,评论需要审核,也可能是插件自动删的。您之前评论的内容是?

      蝈蝈要安静2个月前 (09-29)回复
  3. #13

    删我评论?

    lk1232个月前 (09-29)回复
    • 额,评论需要审核,也可能是插件自动删的。您之前评论的内容是?

      蝈蝈要安静2个月前 (09-29)回复
  4. #12

    群主啊,我都添加了按照你说的,但是新加一个页面,没有视频这个新的模板啊,怎么操作啊?

    lk1232个月前 (09-29)回复
  5. #11

    充值购买了,但是没有到帐啊

    lk1232个月前 (09-29)回复
  6. #10

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

    ma32527885个月前 (07-06)回复
  7. #9

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

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

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

    dujin6个月前 (06-28)回复
  9. #7

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

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

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

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

    3730735917个月前 (05-11)回复
    • 设置/阅读选项调整下博客页面至多显示文章数量。

      蝈蝈要安静7个月前 (05-12)回复
  11. #5

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

    nice10个月前 (02-18)回复
  12. #4

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

    kkoo11个月前 (01-23)回复
  13. #3

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

    meow12311个月前 (01-19)回复
  14. #2

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

    wuyun11个月前 (01-15)回复
    • 主文件不变,针对需要的分类调用这个模板应该就可以了。

      蝈蝈要安静11个月前 (01-15)回复
  15. #1

    这个功能似乎还不错,

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