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

PC 端

移动端

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

添加模板文件

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

<?php
/**
  * @name 视频分类页面模板
  * @author 蝈蝈要安静 | 一个不学无术的伪程序员
  * @copyright https://blog.quietguoguo.com/
  * @version 1.0.0
  */
?>
<div class="cat-video-main">
    <?php 
    if ( have_posts() ): 
        echo '<div class="cat-video-content">';
            while ( have_posts() ) : the_post();
                echo '<article class="cat-video-item">';
                    echo '<a target="_blank"  href="'.get_permalink().'">'.get_the_post_thumbnail().'</a>';							
                    echo '<h2><a target="_blank" href="'.get_permalink().'">'.get_the_title().'</a></h2>';
                    echo '<div>';
	
                    echo '<span><a target="_blank" href="'.get_permalink().'"><i class="fa fa-eye" aria-hidden="true"></i>  ('.(int) get_post_meta($post->ID, 'views', true).')</a></span>';
                    echo '<span><a href="'.get_comments_link().'"><i class="fa fa-comments-o"></i> ('.get_comments_number('0', '1', '%').')</a></span>';
							
                    echo '<span class="cat-video-author"><a  href="'.get_author_posts_url( get_the_author_meta( 'ID' ) ).'"><i class="fa fa-user-circle" aria-hidden="true"></i> '.get_the_author_meta( 'nickname' ).'</a></span>';
							
                    echo '</div>';
                echo '</article>';
            endwhile; 
            wp_reset_query();
        echo '</div>';
        _moloader('mo_paging');
    else:
        get_template_part( 'content-404' );
    endif; 
    ?>
</div>

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

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>

如此，修改完成。