Wordpress开发:将Auto-highslide图片灯箱代码集成到你的主题

auto-highslide

一直都在用Auto-highslide插件,最近准备发主题了,顺便集成到主题里面,免去再安装插件的麻烦,如果你也想使用该插件,可以根据微饭的提示进行Wordpress插件集成哦~

集成前提篇

请下载底部微饭经过精心优化修改的Auto-highslide关键文件,上传到你的主题目录里面,剔除了不需要的PHP文件,优化CSS文件,体积更小,不易产生冲突。

提醒:如果你已经安装了该插件,请进行集成时关闭插件,否则会与本教程操作步骤产生冲突,导致网站显示出现异常。

核心代码篇

请在 Footer.php 文件中添加:

<?php if(is_single()):?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/highslide/highslide.css" type="text/css" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/highslide/highslide.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
    hs.graphicsDir = "<?php bloginfo('template_url'); ?>/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>
<?php endif;?>

在主题函数文件functions.php文件中添加以下代码

/**
* WordPress集成Auto-highslide图片灯箱(按需加载&无需插件)
* 文章地址:http://www.weeiy.com/wordpress-auto-highslide-code.html
*/
add_filter('the_content', 'addhighslideclass_replace');
function addhighslideclass_replace ($content)
{   global $post;
	$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '<a$1href=$2$3.$4$5 class="highslide-image" onclick="return hs.expand(this);"$6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}



文件名称:auto-highslide 集成代码

注:本站资源部分来自网络,请在下载后的24小时内删除,感谢支持!

提示:下载后请检查MD5值,欢迎捐赠本站以及广告合作! | 点此合作联系

下载地址: 百度网盘 【文件大小:64.2kb】

发表评论
加载中...
  • 一段佳能 2年前 (2016-03-08)

    用了以后出来的图像是变形的,只有一个高度和一个宽度。

    查看对话
    • 微饭君 微饭 2年前 (2016-03-09) 官方

      地址发我看看

  • 飞羽 2年前 (2016-02-20)

    想问一下博主,我成功添加上去了,文章页能正常使用,但是页面的图片不行,这个要怎么解决呢?

    查看对话
    • 微饭君 微饭 2年前 (2016-02-23) 官方

      貌似这就匹配文章里面的,页面的图片不支持

      • 飞羽 2年前 (2016-02-23)

        好吧 :???:

      • 飞羽 2年前 (2016-03-20)

        找到办法了,把第一句代码里的is_single()改成is_single()||is_page()就行了

  • 小月博客 2年前 (2016-02-19)

    还不错,可以试试

  • 2年前 (2015-10-11)

    感谢无私分享,可否取消全屏,另外,有些文章插入图片有问题就无法使用了,一个一个改好麻烦。。。

    查看对话
    • 微饭君 微饭 2年前 (2016-02-23) 官方

      修改背景为透明就行了

  • ddd 2年前 (2015-09-28)

    代码复制进去了,怎么用?

  • 苗条的猪 2年前 (2015-07-16)

    点开图片只有图片名,图片显示不出来

  • 简单世界 3年前 (2015-05-22)

    下载的附件放到哪里?

    查看对话
  • core 3年前 (2015-05-04)

    functions.php加载代码后 报错 Parse error: syntax error, unexpected ‘$psot’ (T_VARIABLE)
    这个该怎么解决啊。。。

  • 碚子 3年前 (2015-03-30)

    终于找到你了,又少了一个插件,感谢!! :grin:

  • 云落 3年前 (2015-02-15)

    :shock: 64k啊

    查看对话
  • 云落 3年前 (2015-02-15)

    :mrgreen: 我来签到啦!签到时间:下午12:07:56,支持微饭,支持分享!~

相关文章