分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » 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,但是很多用户不会修改自己站点的默认WordPress图标,就会跟我的站点一样,看上去非常不美观, ...

    点击查看
  • WordPress简易集成Markdown教程

    WordPress简易集成Markdown教程

    今天首先在群里面看到一个用户询问是否有方法将Markdown集成到主题里面去,后来我一想,这个所谓的Markdown确实是很多人提到 ...

    点击查看
  • WordPress制作简易年度总结页面

    WordPress制作简易年度总结页面

    今天早些时候已经制作一个类似112博客导航的页面,具体可以详见:

    点击查看
  • WordPress通过短代码显示指定文章内容

    WordPress通过短代码显示指定文章内容

    今天在一个WordPress交流群里面看到一个群友问一个问题,我个人方面也是很感兴趣,这个问题就是如何通过“新建文章栏输入链接 ...

    点击查看
  • 禁用WordPress 4.7版本的PDF预览功能

    禁用WordPress 4.7版本的PDF预览功能

    之前的文章我们也介绍了,关于WordPress 4.7版本中,新增了一个预览PDF的功能,详见:

    点击查看
  • WordPress获取文章的第一张图片并且显示

    WordPress获取文章的第一张图片并且显示

    关于这类的文章我们已经介绍过两种方法了,两种方法都不一样,但是适合自己的才是最好的,虽然今天我要介绍的方法可能不适合 ...

    点击查看
  • 帅气小琦琦
  • 有个问题
  • 木瓜
  • 闲鱼
  • 夏天烤洋芋
  • 好书推荐
我的影视页面是如何实现的
1 + 4 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)
  1. 7楼
    有个问题
    不知道把代码加在哪个文件里,加了几个都不对。
    有个问题 来自天朝的朋友 谷歌浏览器 Windows 7 湖南省 电信 5个月前 (08-25)回复
    • 帅气小琦琦
      @有个问题 这个不好说 因为不同主题添加到的位置不一样 所以没有一个绝对的位置
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 5个月前 (08-25)回复
  2. 6楼
    木瓜
    博主你好,请问怎么设置首页也是这样呢?
    木瓜 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 9个月前 (05-07)回复
    • 帅气小琦琦
      @木瓜 首页也设置这样的么 那可以直接将上面的CSS代码添加到excerpt中去 不过这样的话 那么所有的页面基本都是这样 并不提倡
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通 9个月前 (05-07)回复
      • 木瓜
        @帅气小琦琦 博主,我试过了,但是什么都不显示了
        木瓜 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 9个月前 (05-07)回复
  3. 5楼
    闲鱼
    这个不错,但是没成功
    闲鱼 来自天朝的朋友 搜狗浏览器 Windows 7 湖南省衡阳市 联通 9个月前 (05-06)回复
    • 帅气小琦琦
      @闲鱼 额 好吧 是哪里还不明白呢
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 9个月前 (05-06)回复
    • 帅气小琦琦
      @闲鱼 我看了一下 你的站点是知更鸟的站点 可能修改方面这个并不是很适用于你
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 9个月前 (05-06)回复
  4. 4楼
    木瓜
    博主,你的影视页面为什么在Google浏览器没有“More”,不能翻页。在火狐和IE就能。
    木瓜 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 9个月前 (05-05)回复
    • 帅气小琦琦
      @木瓜 我这边是没有问题的 已经添加你的QQ了 QQ截图给我看可否
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 9个月前 (05-05)回复
  5. 3楼
    夏天烤洋芋
    :idea: 不会改。弄不来。 :cry: :cry: :cry:
    夏天烤洋芋 来自天朝的朋友 谷歌浏览器 Windows 7 云南省昆明市 电信 9个月前 (05-05)回复
  6. 2楼
    好书推荐
    这个分享的好
    好书推荐 来自天朝的朋友 谷歌浏览器 Windows 10 广东省广州市 联通 9个月前 (05-05)回复
  7. 1楼
    木瓜
    博主写的好详细,我研究研究
    木瓜 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 9个月前 (05-04)回复