分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:站点开启被动注册模式,详情点击这里了解
 您目前所在位置: 站点首页 » WordPress » 代码 » 我的影视页面是如何实现的
+

我的影视页面是如何实现的

  • 影视页面
  • 其他页面
  • 如何修改
  • 总结
  • 今天一个站点好友询问我的影视页面是如何形成的,说实话,其实没有什么技术,但是为了防止下一个用户再继续询问,我个人觉得还是直接写成一篇文章告诉大家好了。我会尽可能的写得详细一点,如果还有不明白的就直接留言告知吧。

    影视页面

    首先看看影视页面是什么样的:
    我的影视页面是如何实现的-BanYuner

    那么大家看到了,跟常规的影视页面一样的,就是封面有序排列,那么这个有序排列的话,是根据站点的宽度不同进行了设置的,这里我一行显示5个是因为我一共只显示10个,在没有滑动鼠标的情况下仅仅显示10个而已,向下滑动就会再显示10个,最多显示30个,这个部分和首页是一样的,通过AJAX来实现的。

    其次,这里使用的模板和首页的模板是同样一个文件,只不过我通过分类判断之后使用了内置样式表来实现这个效果。

    其他页面

    现在我们再看看其他分类的页面:
    我的影视页面是如何实现的-BanYuner

    固件页面很明显的就是常规的页面,和主页都是一样的,这里就没有什么好说的了,该是怎样的就是怎样了。

    如何修改

    那么我们对比两个页面发现,有哪些东西改变了呢?

    • 文章标题
    • 相关信息
    • 简单描述
    • 评分插件
    • 边栏
    • 缩略图
    • 列表宽度

    那么前五个变动都是不见了,这里的不见了并不是我删除了原始代码,而是通过display:none;代码让其隐藏了,同样的,缩略图的大小和列表宽度也是通过CSS的改变让其大小发生变化来达到正常的长宽比,看上去更加美观点。

    说完了思路,我们接下来就开始修改:

    隐藏代码

    首先我们通过鼠标右键在首页中找到了上方变动了的东西对应的元素:

    • 文章标题:.excerpt header
    • 相关信息:.excerpt .meta
    • 简单描述:.excerpt .note
    • 评分插件:.ratings
    • 边栏:.sidebar
    • 缩略图:.excerpt .thumb
    • 列表宽度:.content

    OK,找到了对应的元素,我们需要做的就是开始对这些元素进行一对一的修改了,鉴于我们需要隐藏前面五项,那么这里我们需要用到的代码就是:

    .excerpt header,.excerpt .meta,.excerpt .note,.ratings,.sidebar{
    	display: none;
    }
    

    也就是说将上面的代码全部隐藏。接下来,我们需要的就是要将整体宽度设置为最大宽度,我个人设置设置的最大宽度是1200px,那么也就是需要添加以下代码:

    .content{
    	width: 1200px;
    }
    

    这个代码就是将主题内容宽度设置为1200px,来达到效果。但是这样还是不行,因为你的缩略图没有实现你想要的效果,也就是说看上去很混乱很不美观,为什么?因为你的缩略图没有设置正常的长宽比,我的电影以及影视资源均来源一个或者两个固定站点,所以封面大小基本一致,那么我们就需要添加以下代码:

    .excerpt .thumb {
    	width: 220px;
    	height: 300px;
    }
    

    这个代码也就是将缩略图的宽设定为220px,高设定为300px。同样的,及时添加了这样的代码之后,你依然还是跟我的效果有点差别,没有关系,这不是还没完么。鉴于我主题的特殊性,我还添加了如下代码:

    .excerpt .focus {
    	margin-left: 0px;
    }
    

    也就是缩略图的容器,我要让他全部靠左排列,同样的,我们也需要设置.excerpt的属性:

    .excerpt {
    	border: 1px solid #eaeaea;
    	padding: 9px;
    	overflow: hidden;
    	background-color: #fff;
    	margin-bottom: -1px;
    	float: left;
    }
    

    那么上面代码添加了之后,基本就可以实现我的效果了。但是问题来了,怎么限定指定分类才用这样的样式呢,就像我的一样,别的分类都是正常的,仅仅是影视分类下才是这样的。我之前也说了原理了,通过判断分类来使用内置样式,为什么使用内置样式,具体可以查看: CSS中关于优先级的问题

    那么这个代码方面,根据我的主题,我是添加到了分类页面中的.content:

    <?php if(is_category(array(1495,1411,1074,1148,1137,1136,1282,1299,1073,1133,1298,1132,1179,1180,1181))&&!wp_is_mobile()){ ?>
    	<style type="text/css"> 
    	.excerpt header,.excerpt .meta,.excerpt .note,.ratings,.sidebar{
    		display: none;
    	}
    	.content{
    		width: 1200px;
    	}
    	.excerpt .thumb {
    		width: 220px;
    		height: 300px;
    	}
    	.excerpt .focus {
    		margin-left: 0px;
    	}
    	.excerpt {
    		border: 1px solid #eaeaea;
    		padding: 9px;
    		overflow: hidden;
    		background-color: #fff;
    		margin-bottom: -1px;
    		float: left;
    	}
    	</style> 
    <?php } ?>
    

    上面就是将我之前的代码整合在了一起,之后再通过判断分类之后再决定是否使用内置的样式,括号内的数字为分类的ID,如何查看就自行百度了,后面的!wp_is_mobile()是判断是否是移动端,如果是移动端就不使用。

    总结

    上面的我相信应该都能理解了,基本每个部分我都讲解了,如果还有不明白的请直接留言告知。代码部分主要是简单的CSS加上简单的PHP判断而已,技术含量基本没有,所以我修改了之后也没有写文章,觉得没啥意义。如果你懂CSS的话,那么痒是方面你还可以加上自己的想法,可能会更好。

    关注我们 打赏 分享此文

    微信扫码,关注我们

    扫码,支持我

    我的影视页面是如何实现的

    支付宝(点击图片切换)

    扫码,支持我

    我的影视页面是如何实现的

    微信(点击图片切换)

    扫码,手机看

    我的影视页面是如何实现的
    匿名

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃ 分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

    相关推荐

    • WordPress添加评论内容字数限制

      WordPress添加评论内容字数限制

      很久之前我们介绍过,如何添加文章内容字数限制,有兴趣的可以去了解一下: 那么今天给大家介绍的是,如何给WordPress评论内容中添加字数限...

      点击查看
    • Giphypress-WordPress文章内容中添加GIF图片

      Giphypress-WordPress文章内容中添加GIF图片

      看了标题之后,千万不要关闭这个页面,因为这个页面里面的内容可能跟你了解的不一样。 我们都知道 WordPress 可以通过添加媒体来上传 G...

      点击查看
    • 如何自定义WordPress登陆页面背景

      如何自定义WordPress登陆页面背景

      这个功能是一个小功能,但是就我了解到的,目前还是有很大一部分主题都是使用的了这个功能的,所以这里还是简单的介绍一下实现方法。 首先我们看到登...

      点击查看
    我的影视页面是如何实现的
    0 + 8 =
    • 昵称 (必填)  
    • 邮箱 (必填)
    • 网址 (选填)
    1. 7楼
      有个问题
      不知道把代码加在哪个文件里,加了几个都不对。
      有个问题 8个月前 (08-25)回复
    2. 6楼
      木瓜
      博主你好,请问怎么设置首页也是这样呢?
      木瓜 12个月前 (05-07)回复
      • 帅气小琦琦
        @木瓜 首页也设置这样的么 那可以直接将上面的CSS代码添加到excerpt中去 不过这样的话 那么所有的页面基本都是这样 并不提倡
        帅气小琦琦    12个月前 (05-07)回复
    3. 5楼
      闲鱼
      这个不错,但是没成功
      闲鱼 12个月前 (05-06)回复
    4. 4楼
      木瓜
      博主,你的影视页面为什么在Google浏览器没有“More”,不能翻页。在火狐和IE就能。
      木瓜 12个月前 (05-05)回复
    5. 3楼
      夏天烤洋芋
      :idea: 不会改。弄不来。 :cry: :cry: :cry:
      夏天烤洋芋 12个月前 (05-05)回复
    6. 2楼
      好书推荐
      这个分享的好
      好书推荐 12个月前 (05-05)回复
    7. 1楼
      木瓜
      博主写的好详细,我研究研究
      木瓜 12个月前 (05-04)回复