WordPress不用插件如何展示图片,使用相册功能!

4,319次阅读
一条评论

共计 2866 个字符,预计需要花费 8 分钟才能阅读完成。

一直想写一个自己想要的相册插件,然而生活上工作上的事情太多,一直空不下来;想联系大佬写一个相册插件,价格稍稍有点贵,后面如果还是不得空的话,可能会联系大佬写吧。

那么如何在不使用任何插件的情况下,启用相册功能呢?

该文章适用于WordPress任何主题(可能吧),只是在实操的时候可能会出现一些莫名其妙的问题,细细琢磨就能一一解决。

推荐的方式:添加页面当做相册,因为用文章当做相册的话,可能会展示在文章中,我个人来说,我不喜这样,所以我比较推荐使用添加页面当做相册。

其次,建议创建一个空白页面为父级页面,这样在url中,会展示父级页面的地址;

列:
无父级页面URL:http://xxxxx.com/xiangce.html
有父级页面URL:http://xxxxx.com/fuji/xiangce.html
简单的区别展示,如上!

创建父级页面后,将相册设置为子页面,如下图。

WordPress不用插件如何展示图片,使用相册功能!

那么,简单的相册页面创建好了(也许吧)!改怎么添加图片呢?能否自动分页呢(不能)?后面我可能会写一个相册模板吧(概率不高)!

手动添加图片,如果你使用的古腾堡编辑器,添加就简单很多,添加区块就行,这里不做过多讲解(其实我TM也不会使),我个人喜欢孟坤编辑器,所以就手动添加了。

WordPress不用插件如何展示图片,使用相册功能!

<!--nextpage-->  //分页符
<!-- wp:gallery {"linkTo":"none"} --> //每页第一张图
<figure class="wp-block-gallery has-nested-images columns-default is-cropped">
<!-- wp:image {"id":2} -->
<figure class="wp-block-image"><img src="https://images.ailcc.com/wordpress/photos/2022/10/28/358b682fb20b2318.jpeg" alt="" class="wp-image-2"/><figcaption class="wp-element-caption">喜欢的图</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"id":1} -->  //插入其他图
<figure class="wp-block-image"><img src="https://images.ailcc.com/wordpress/photos/2022/10/28/86c11968fd3740302.jpeg" alt="" class="wp-image-1"/><figcaption class="wp-element-caption">喜欢的图</figcaption></figure>
<!-- /wp:image -->

请仔细观察第一张图和第二张图代码上的区别,这个很重要(确实有点重要);

到这里,相册差不多完成了(可能吧),那么图片过多如何分页呢?见下图红框所示

WordPress不用插件如何展示图片,使用相册功能!

在特定的图片前面或后面添加分页符(手动添加),但是这里有个问题(其实有很多);

  1. 图片太多要手动插入分页符;
  2. 最前面插入一张图,就要移动分页符(当然你没强迫症的话当我没说);
  3. 排序问题;
  4. 图片展示问题(展示效果、特效等);
  5. 略(大约十几条)

到这里,相册页面真的差不多就要完成了,不开玩笑,如果没其他要求,这个功能还是好使的,能满足日常展示需求。

然后我们来到了最关键的地方,可能你会发现,哎我氧化钙,为什么页面里面展示出来的图片是一张一张的呢,不是三张一排呢(不使用上述代码插入图片的情况下)?

这个地方就需要添加一个相册模板,然后回到页面编辑中,将页面模板选择为相册模板,点击更新。

在主题所在文件夹里找到page文件夹并打开,在page文件夹里面新建一个名为:“template-photo.php”或者其他名字的文件,然后把下面的代码复制粘贴并保存即可。

相册模板实例代码:

<?php
/*
Template Name: 相册模板
*/
get_header();
?>
<style>
.ailcc_photos{width:100%;overflow:hidden;margin-top: -20px;}
.ailcc_photos img {
    /*width:33.33%;*/
    height: 200px !important;
    background-color: var(--pk-bg-body);
    padding: 4px;
    max-height: 256px;
    position: relative ;
    float:left;
    padding:5px;
}
</style>
<div id="page" class="container mt20">
    <?php get_template_part('templates/box', 'global-top') ?>
    <?php echo pk_breadcrumbs(); while (have_posts()):the_post();?>
        <div id="page-empty">
            <div id="page-<?php the_ID() ?>" class="row row-cols-1">
                <div id="post-main" class="col-lg-12 col-md-12 fadeInLeft ">
                    <div class="p-block">
                        <div class="mt20 puock-text <?php get_entry_content_class() ?>">
                            <div class="ailcc_photos"><?php the_content();?></div>
                            <?php do_action('pk_page_content_footer'); ?>
                            <?php
                            $link_pages = wp_link_pages(array(
                                'before'=> '<li>',
                                'after'=> '</li>',
                                'prev_text'=>'«',
                                'next_text'=>'»',
                                'format'=>'<li>%1</li>',
                                'echo'=>false
                            ));
                            if(!empty($link_pages)):
                            ?>
                            <div class="mt20 clearfix text-center">
                                <ul class="pagination float-right">
                                    <?php echo $link_pages ?>
                                </ul>
                            </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <?php endwhile; ?>
</div>

<?php get_footer() ?>

到这里真的完成了,试试吧,有问题可以留言(虽然我不一定会回复),但试试总没错。

mp_wx_49e55203ff

共计27人点赞,其中1人来自小程序

正文完
 27
沛霖主页
版权声明:本站原创文章,由 沛霖主页 2023-04-01发表,共计2866字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(一条评论)
领导,我小江 评论达人 LV.1
2023-04-04 14:35:38 回复

厉害了沛霖哥哥

 Macintosh  Chrome  中国北京北京市皓宽网络