WordPress自带的相册功能和CSS美化展示

闲鱼使用的是知更鸟主题，主题是有一个相册功能的，效果还是很好看的，但是有时候发文章闲鱼想要展示图片的效果是将几张图片一起直观的展示出来，并列排列，所以就不能用这个主题的相册功能了。这一点其实WordPress自带有一个相册功能就能实现闲鱼想要的效果，但是这个也还是美中不足，比如插入的是缩略图，而每张图又不是一个尺寸，那显示的效果就比较杂乱，不整齐，那要如何才能达到想要的既能并列显示又能整齐不乱的展示效果呢？这就需要我们动手去修改一下css就好了。

首先来看看知更鸟主题自带的相册效果

        带缩略图的左右切换的相册效果，多图展示都无压力，很漂亮。但是不能直观的展示每一张图片，有这需求的就不好使了。
WordPress自带的相册功能和CSS美化展示

再来看看WordPress自带的相册功能

        使用方法：编辑文章-添加媒体-创建相册-选择图片
        可以看到无论是选择两排、三排甚至是四排并列展示，图片都是很杂乱无章的，影响观看。
WordPress自带的相册功能和CSS美化展示

css修改WordPress自带的相册功能展示效果

        既然效果不好看，我们就通过CSS来一下，代码来自设计笔记：美化WordPress插入到文章中的相册，感谢。
        代码一：此方法兼容IE8及以上，IE8不支持居中单不会拉伸图片。

  1. .gallery{  
  2.  margin:-1%!important;  
  3. }  
  4. .gallery .gallery-item {  
  5.  padding:1%;  
  6.  /* width:14.66666%!important; */  
  7.  margin: 0 !important;  
  8.  overflow:hidden;  
  9.  position:relative;  
  10. }  
  11. .gallery-columns-3 .gallery-item{  
  12.  width:33.3333333%!important;  
  13. }  
  14. .gallery .gallery-item dt:before {  
  15.  content: "";  
  16.  display: block;  
  17.  padding-top: 100%;  
  18. }  
  19. .gallery .gallery-item dt {  
  20.  position: relative;  
  21.  box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;  
  22.  background: #eee;  
  23.  cursor: pointer;  
  24.  overflow: hidden;  
  25. }  
  26. .gallery .gallery-item a {  
  27.  position: absolute;  
  28.  top: 0;  
  29.  rightright: 0;  
  30.  bottombottom: 0;  
  31.  left: 0;  
  32.  opacity: 1;  
  33.  -webkit-transition: opacity .1s;  
  34.  transition: opacity .1s;  
  35.  transform: translate(50%,50%);  
  36. }  
  37. .gallery .gallery-item img{  
  38.  position:absolute;  
  39.  top: 0;  
  40.  left: 0;  
  41.  max-height:100%;  
  42.  max-width:none!important;  
  43.  width:auto!important;  
  44.  border:0!important;  
  45.  transform: translate(-50%,-50%);  
  46. }  

 
        代码二：此方法PC兼容绝大部分现代主流浏览器（webkit内核、firefox），不支持IE，Mobile兼容Safari、Android4.4.4+（国内ROM上Android5.x兼容不同），代码更精简，推荐。

  1. .gallery{  
  2.  margin:-1%!important;  
  3. }  
  4. .gallery .gallery-item {  
  5.  padding:1%;  
  6.  /* width:14.66666%!important; */  
  7.  margin: 0 !important;  
  8.  overflow:hidden;  
  9.  position:relative;  
  10. }  
  11. .gallery-columns-3 .gallery-item{  
  12.  width:33.3333333%!important;  
  13. }  
  14. .gallery .gallery-item dt:before {  
  15.  content: "";  
  16.  display: block;  
  17.  padding-top: 100%;  
  18. }  
  19. .gallery .gallery-item dt {  
  20.  position: relative;  
  21.  box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;  
  22.  background: #eee;  
  23.  cursor: pointer;  
  24.  overflow: hidden;  
  25. }  
  26. .gallery .gallery-item img{  
  27.  position:absolute;  
  28.  top: 0;  
  29.  left: 0;  
  30.  height:100%;  
  31.  width:100%;  
  32.  object-fit:cover;  
  33.  border:0!important;  
  34. }  

        修改css后的相册展示效果：
WordPress自带的相册功能和CSS美化展示WordPress自带的相册功能和CSS美化展示
        这样已经达到了闲鱼想要的图片并列展示效果了，很不错。WordPress自带的相册功能蛮好使的，推荐大家使用，以后展示图片都无压力了，哈哈。

本文最后更新于2018年8月14日，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

历史上的今天:

  • 博客公众号
  • 关注本博客公众号
  • weinxin
  • 博客小程序
  • 关注本博客小程序
  • weinxin

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论：17   其中：访客  10   博主  7

    • 青苏
      回复 2018年11月15日 下午11:49  7楼

      请问，能不能教教我怎么用，超级喜欢这个功能。但是不知道怎么根据主题修改，您能帮我改一下吗？

        • 闲鱼 【博主】
          回复 2018年11月16日 上午11:01  1层

          @青苏 css添加好了就可以了，然后按照 使用方法：编辑文章-添加媒体-创建相册-选择图片

            • 青苏
              回复 2018年11月16日 上午11:21  2层

              @闲鱼 谢谢啦

            • 青苏
              回复 2018年11月16日 上午11:20  1层

              @青苏 已改

            • 区块链
              回复 2018年8月16日 上午10:19  6楼

              :smile: 然而并没有什么用。O(∩_∩)O哈哈~ :mrgreen:

                • 闲鱼 【博主】
                  回复 2018年8月16日 上午10:31  1层

                  @区块链 你那些破文章当然用不到 :!:

                • 明月登楼
                  回复 2018年8月16日 上午9:35  5楼

                  很少用相册功能，就是因为排版效果太差了！

                    • 闲鱼 【博主】
                      回复 2018年8月16日 上午10:31  1层

                      @明月登楼 是的，这个WordPress做的也是low，有这个功能排版效果这么差

                    • 杨景文
                      回复 2018年8月15日 下午9:38  4楼

                      我还从没用过 WP 自带的相册，之前用的 NextGen 插件，用起来也不方便，后来，索性就什么不用了，有图片就一张张往下排下去，一行一张 :cool:

                        • 闲鱼 【博主】
                          回复 2018年8月15日 下午10:21  1层

                          @杨景文 :neutral: 我也用的少，后来觉得蛮好用的，有时候一行一张往下排图片感觉特占地方，不好看

                        • 青山
                          回复 2018年8月15日 上午6:42  地板

                          不过知更鸟带的相册功能，图片大小不一，也影响美观。总之都是为了美观，阅读效果。

                            • 闲鱼 【博主】
                              回复 2018年8月15日 下午10:19  1层

                              @青山 知更鸟带的相册功能也蛮喜欢的，不够有时候不想那样展示，WordPress自带的相册功能蛮不错的

                            • 懿古今
                              回复 2018年8月14日 下午9:22  板凳

                              这样展示图片确实好看多了，目前都是一张张图片展示确实灵性

                                • 闲鱼 【博主】
                                  回复 2018年8月14日 下午10:11  1层

                                  @懿古今 是的，这样并列展示图片的需求也满足了，平时写文一张张做插图会比较好

                                    • 99八十一
                                      回复 2018年8月16日 下午3:00  2层

                                      @闲鱼 这个想法很不错啊。

                                  • 公子扶苏
                                    回复 2018年8月14日 下午5:59  沙发

                                    哼！

                                      • 闲鱼 【博主】
                                        回复 2018年8月14日 下午6:01  1层

                                        @公子扶苏 :cool: 你真的想进黑名单吗，我的淡淡猪