分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » 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站点添加wow.js效果

    如何给WordPress站点添加wow.js效果

    今天折腾了以下这个东西,为什么会折腾这个东西呢,因为之前经常逛知更鸟博客,后来一次更新之后,发现知更鸟博客多了一种加 ...

    点击查看
  • 如何在WordPress评论中显示更多HTML标签

    如何在WordPress评论中显示更多HTML标签

    我见过很多站点,都可以在评论里面添加各种标签,什么自己加粗,然后添加图片,添加链接等等,当时我个人觉得可能并不适合我 ...

    点击查看
  • WordPress显示一年前当天的文章

    WordPress显示一年前当天的文章

    最开始看到这个功能是在112博客,那个时候看到这个功能的第一感觉可能就是觉得,这个功能不是很实用,可能会增加SQL语句的查 ...

    点击查看
  • 给你的WordPress站点添加一个打印按钮

    给你的WordPress站点添加一个打印按钮

    这个功能很久之前就已经在知更鸟博客上面看到了,但是一直没有想过是什么原理,但是今天无意间发现了一个方法,目前觉得还是 ...

    点击查看
  • WordPress显示一周热评

    WordPress显示一周热评

    WordPress站点如何显示一周热评,我相信还是有很多人都想要知道的,那么这里就简单的说说实现方法了。

    点击查看
  • WordPress 限定显示评论者链接的输出

    WordPress 限定显示评论者链接的输出

    最近从bigfa的相关站点看到了这个更新内容,我个人觉得还是很有用的,对于一些广告用户还是有一定的作用的,毕竟有些时候, ...

    点击查看
  • WordPress文章段落间插入广告

    WordPress文章段落间插入广告

    很久之前就已经在留意这个功能了,但是一直没有找到相关的解决办法,今天我算是找到了这个相关代码。使用这个功能对于我们宣 ...

    点击查看
  • 最轻便的复制页面内容到剪切板的JS:clipboard.js

    最轻便的复制页面内容到剪切板的JS:clipboard.js

    今天早些时候在水煮鱼博客看到了这篇文章,我一开始是想要用到代码方面的,毕竟代码很多时候都是直接复制编辑的,但是后来想 ...

    点击查看
  • WordPress前台显示站点有多少注册用户

    WordPress前台显示站点有多少注册用户

    虽然我的站点目前已经关闭了注册,所有已经注册过的用户已经清理完毕了,这里说声抱歉。那么今天这个文章就是给大家一个方法 ...

    点击查看
  • WordPress添加一个底部漂浮栏

    WordPress添加一个底部漂浮栏

    站点底部添加一个通知栏的作用是起到一个通知或者说增加PV的作用,但是很多时候我们都知道,这种通知可能被人觉得很反感,但 ...

    点击查看
  • WordPress避免手残导致文章意外发布

    WordPress避免手残导致文章意外发布

    有些时候,我们编辑好了文章,但是我们可能并不想发布,但是很多时候,我们就是手残,也就是误发布了,这种事情可能对于博客 ...

    点击查看

  目前有 18 条评论 其中:访客: 9 条, 博主: 9 条

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