给wordpress文章图片添加Auto-highslide灯箱预览效果

操作步骤:

1、下载auto-highslide集成包包:highslide

highslide

隐藏内容,您需要满足以下条件方可查看

2、把下载的压缩包解压后的highslide文件夹通过FTP上传到 wp-content/themes/当前使用主题名称/ 目录;

3、编辑当前主题的Footer.php文件,在合适的位置添加引用代码:

 if(is_single()):?>
<link rel="stylesheet" href="/highslide/highslide.css" type="text/css" />
<script type="text/javascript" src="/highslide/highslide.js">script>
<script type="text/javascript">
jQuery(document).ready(function($) {
    hs.graphicsDir = "/highslide/graphics/";
    hs.outlineType = "rounded-white";
    hs.dimmingOpacity = 0.8;
    hs.outlineWhileAnimating = true;
    hs.showCredits = false;
    hs.captionEval = "this.thumb.alt";
    hs.numberPosition = "caption";
    hs.align = "center";
    hs.transitions = ["expand", "crossfade"];
    hs.addSlideshow({
        interval: 5000,
        repeat: true,
        useControls: true,
        fixedControls: "fit",
        overlayOptions: {
            opacity: 0.75,
            position: "bottom center",
            hideOnMouseOut: true

        }

    });
});
script>
 endif;?>

4、编辑当前主题的functions.php文件,在

//集成auto-highslide灯箱插件  by www.qyblog.cn
add_filter('the_content', 'addhighslideclass_replace');
function addhighslideclass_replace ($content)
{   global $post;
	$pattern = "/]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '$7';
    $content = preg_replace($pattern, $replacement, $content);return $content;
}

5、上传图片的时,“附件显示设置”中的“链接到”选择“媒体文件”再插入文章,然后文章中的图片点击就会有灯箱效果

人已赞赏
建站教程

用wordpress自带的媒体中心上传图片

2019-8-28 13:04:41

建站教程

为WordPress增加一个分享海报功能

2019-8-28 13:17:48

⚠️
盾给网上的部份代码及教程来源于互联网,仅供网友学习交流,未经作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 84087680 或 点击右侧 私信:盾给网络管理员 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索