WordPress 为长图片设置展开/折叠功能,方便查看

无言说这个WordPress网站主要分享网站源码的,经常需要把网站首页图片展示出来。

这几天更新无言发现了个问题,一般网站首页长度都在1000+px,若要获取下载地址,往往需要下翻很久才能看到下载框。

今天无言就把这个问题给解决了。也是挺简单的,几行css+js就解决了。

CSS

.open {height: 320px;overflow: hidden;text-align: center;position: relative;}
.open::after {content: "展开图像 ▼";display: block;height: 29px;width: 100%;position: absolute;bottom: 20px;color: #333;}
.openmask{width: 100%;position: absolute;height: 320px;background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0), #666);background-image: -moz-linear-gradient(top, hsla(0, 0%, 100%, 0), #666);background-image: -o-linear-gradient(top, hsla(0, 0%, 100%, 0), #666);background-image: linear-gradient(top, hsla(0, 0%, 100%, 0), #666);}
.fold{height:100%;}
.fold .openmask{height:100%; opacity:0;}
.open.fold::after{content: "折叠图像 ▲";color: #666;}

JS

/* 为网站添加“点击展开/收缩” */
jQuery(document).ready(
	function(jQuery){
	jQuery('.open').click(function(){
		$(".open").toggleClass("fold");
	});
});

HTML

<div class="open"><div class="openmask"></div>
此处加入图片代码 如 <img  src=""  />
</div>

上面这个其实就已经满足使用需求了,这个方法可以应用在任何程序的网站上来展示长图,当然这个也仅限于用来折叠长图。

PHP

小编使用的是WodPress程序,为了方便把这个功能放到WordPress后台,所以也琢磨了下代码。直接将下方代码放到functions.php

<?php
add_action('after_wp_tiny_mce', 'prettify_bottom');
function prettify_bottom($mce_settings) {
        <script type="text/javascript">
        QTags.addButton( 'openimg', '展开/收缩图片', '<div class="open"><div class="openmask"></div>\n\n</div>', "" );
        function prettify_bottom() {
        }
        </script>
    <?php
}

然后就可以在WordPress后台 文本编辑器中看到这个功能了。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress文章页面调用相同分类下文章列表

2022-7-11 12:10:07

WordPress教程

移除 WordPress 工具菜单中导出和抹除个人数据

2022-9-11 11:00:05

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索