2017年12月11日 星期一

wordpress免插件集成炫酷图册&幻灯

Tech An 504阅读 0评论

大多数非图片类wordpress主题对图片或者说相册的支持不好基本上是没有提供任何支持,当你浏览文章要查看大图时,点击图片直接跳到浏览器的图片查看,似乎不太优雅,虽然这些需求有很多插件可以比较优雅的支持,但是有点强迫症,不想把wordpress搞得过于臃肿,自己动手集成一个吧,于是上github搜gallery 第一个2.5k star 一看demo果然优雅!

准备文件

github地址:https://github.com/blueimp/Gallery

clone回来之后新建一个文件夹我这里就叫gallery,把css,img,js 都拷贝进去,然后新建一个php文件我这里叫init.php。

init.php 内容(文件内路径可根据实际情况修改)

<?php
add_filter('the_content', 'gallery_replace', '99');
add_action('wp_head', 'gallery_head');
add_action('wp_footer', 'gallery_footer');

function gallery_head()
{
    $gallery_wp_url = get_bloginfo('template_url') . '/';
    $defaults_css =
        "<link href='{$gallery_wp_url}lib/gallery/css/blueimp-gallery.min.css' rel='stylesheet' />";
    echo $defaults_css;
}

function gallery_footer()
{
    $gallery_wp_url = get_bloginfo('template_url') . '/';
    $defaults_javascript = <<<EOF
    
    <!--gallery control start-->
    <div id="blueimp-gallery" class="blueimp-gallery">
        <div class="slides"></div>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="close">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
    </div>
    <!--gallery control end-->
        \n\t<script src='{$gallery_wp_url}lib/gallery/js/blueimp-helper.js'></script>
    <script src='{$gallery_wp_url}lib/gallery/js/blueimp-gallery.js'></script>
    <script src='{$gallery_wp_url}lib/gallery/js/blueimp-gallery-indicator.js'></script>
    <script src='{$gallery_wp_url}lib/gallery/js/jquery.blueimp-gallery.js'></script>\n\t
EOF;
    echo $defaults_javascript;
}

function gallery_replace($content)
{
    $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '<a$1href=$2$3.$4$5 id="gallery" data-gallery $6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

?>

把gallery上传之主题根目录我这里是根目录下的lib里。

修改文件

functon.php引入gallery初始化文件

require get_parent_theme_file_path('lib/gallery/init.php');

修改single.phpthe_content()的父级div上添加id=’links‘

<article class="article-content" id="links">
    <?php the_content(); ?>
    <?php custom_wp_link_pages(); ?>
</article>

最终效果

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址