获取文章图片地址创建WordPress图片集

本博客的一些文章拥有自己拍摄的大量照片,因此想把这些照片重新汇集起来,做成一个图片集,便于随时浏览观看。经过研究,基本构建思路如下:

创建wordpress页面

在wordpress创建一个新的page页面,同时为该页面设置一个独立的模板。我是复制了一份page页模板,然后简单的修改了下,使其能单独的响应某一个分类(标签)的内容。例如:

query_posts( array( 'tag' => 'photography', 'paged' => get_query_var('paged') ) );
while (have_posts()) : the_post();

或者最好用这个方式,因为query_posts由于增加加载时间问题好像已经逐渐弃用:

$query = new WP_Query( array( 'tag' => 'photography', 'paged' => get_query_var('paged') ) );
while ( $query->have_posts() ) : $query->the_post();
# 如果使用分页,请调用$query
if(function_exists('wp_pagenavi')) { wp_pagenavi(array( 'query' => $query )); }

文章页面所有图片获取

获取文章页面图片,基本思路是先搜寻页面的img标签,然后提取地址放在一起。网上有很多的代码方法,大致相仿。wpworking提供了一段比较简洁的代码,且整合了html标签,便于css:

function fnGetImgs($content){
    preg_match_all('/<img[^>]+./',$content,$imgarr);
    $totimgs = count($imgarr[0]);
    if ($totimgs > 0){
        $resimgs = "<ul id='imgspost'>";
         for ($i=0;$i < $totimgs;$i++){
             $resimgs .= "<li>".$imgarr[0][$i]."</li>";
         }   
         $resimgs .= "</ul>";
    }
    return $resimgs;
}

使用时将以上代码添加到function.php模板,在图片页面使用echo fnGetImgs(get_the_content());调用即可。

美化

页面美化因人而异。例如本博客添加了zoom效果和延迟加载,最终效果截个图如下:

xiangcejietu

我是单独使用了一个标签来标记需要放到这个页面的图片文章,因而这个页面是一个可以自动化动态更新的页面。


除非特别声明,文章均为牛会飞的博客原创,遵循署名-非商业使用-相同方式共享授权协议
转载请注明出处: https://blogfei.com/huo-qu-wen-zhang-tu-pian-de-zhi-chuang-jianwordpre/

暂无评论