
您现在的位置是:首页 > WordPress教程WordPress教程
WordPress相册咋整?手把手教你从0到1搭个靓相册(附代码小抄)
WP集市
2025-08-21
【WordPress教程】
452人已围观
最近老有朋友问:“我WordPress博客想放一堆照片,总不能每张都插文章里吧?忒费劲!相册咋整啊?” 嗨,这事儿简单!今天咱就唠唠相册创建,从“傻瓜式插件”到“手动撸代码”,两种路子都给你安排上,保准看完就会,不会你来打我(bushi)。
先唠唠准备工作:啥都不用愁,有WordPress就行!
你电脑上只要装了WordPress(版本5.0以上最好,太老的可能插件不兼容),PHP版本7.2往上(问主机商要,一般默认够),数据库?不用管,WordPress自己会折腾。咱直接开干!
方法一:插件大法好,懒人首选(5分钟搞定)
新手朋友听我的,先从插件开始,简单到飞起!推荐俩插件:NextGEN Gallery(老牌,功能全)和FooGallery(轻量,颜值高)。咱以FooGallery为例,步骤贼简单:
1. 装插件 → 激活
进WordPress后台,左边菜单点“插件”→“安装插件”,搜“FooGallery”,第一个就是,点“安装”→“激活”。搞定!
2. 创建相册 → 传照片
激活后左边会多一个“FooGallery”菜单,点进去选“Add New”(新建相册)。起个名儿,比如“2023旅行相册”,然后点“Add Media”传照片——直接拖进来就行,想传多少传多少,传完点“Insert into Gallery”。
3. 调样式 → 生成短代码
照片传完,上面有“Templates”(模板)选项,选个喜欢的样式,比如“Masonry”(瀑布流)、“Grid”(网格),调调间距、边框啥的。弄好点“Save Gallery”,这时候页面会显示一个短代码,比如 [foogallery id="123"]
——记着这个id,等会儿要用!
4. 嵌入页面/文章
新建一个页面(比如叫“我的相册”),在编辑框里直接粘贴刚才的短代码 [foogallery id="123"]
,发布!刷新页面瞅瞅,照片是不是整整齐齐排好了?哎,就这么简单,连代码都不用碰!
方法二:自定义相册,适合爱折腾的(代码党看过来)
插件虽好,但有时候想搞点花活——比如相册带个“按地点筛选”“按人物分类”,插件就未必够用了。这时候就得自己动手,丰衣足食嘛!咱用“自定义文章类型+ACF插件+模板文件”整一个,不难,跟着我敲!
1. 注册“相册”自定义文章类型(复制粘贴就行)
先在主题的 functions.php
里加段代码,注册一个叫“相册”的文章类型(不用懂原理,复制粘贴!):
function create_album_post_type() {
register_post_type('album', array(
'labels' => array('name' => '相册', 'singular_name' => '相册'),
'public' => true,
'supports' => array('title', 'editor'), // 支持标题和编辑器
'menu_icon' => 'dashicons-camera' // 菜单图标用相机
));
}
add_action('init', 'create_album_post_type');
保存后刷新后台,左边会多一个“相册”菜单,跟发文章一样,能新建“相册”了!
2. 用ACF插件加“照片”字段
装个“Advanced Custom Fields”(ACF)插件,激活后新建一个字段组,取名“相册照片”,规则选“相册”文章类型。然后添加一个字段,类型选“Gallery”(相册),字段名填 album_photos
——这样新建相册时,就能上传多张照片了!
3. 写个模板显示相册(简单循环就行)
在主题文件夹里新建一个 archive-album.php
文件(相册列表页模板),写个循环显示照片:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2> <!-- 相册标题 -->
<?php $photos = get_field('album_photos'); // 获取ACF字段里的照片 ?>
<div class="eedb-44bb-e433-02f3 album-grid">
<?php foreach ($photos as $photo) : ?>
<img src="<?php echo $photo['url']; ?>" alt="<?php echo $photo['alt']; ?>">
<?php endforeach; ?>
</div>
<?php endwhile; endif; ?>
加几句CSS调调样式(比如让照片排成网格):
.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.album-grid img { width: 100%; height: 200px; object-fit: cover; }
现在访问 你的网站/album
,是不是能看到相册列表和照片了?想加筛选功能?下次教你用JS写个过滤,今天先到这儿!
总结:懒人用插件,折腾用代码
行了,两种方法都讲完了——插件法适合“我就想快点看照片”,自定义法适合“我要做全网最酷的相册”。你要是刚开始学,先从FooGallery玩起,熟悉了再鼓捣代码。对了,短代码记不住?在相册编辑页直接点“复制短代码”按钮,一键粘贴,别傻乎乎手敲!
有啥卡壳的,评论区喊我,咱再唠!动手试试,你相册肯定比别人靓~
Tags:
文章版权声明:除非注明,否则均为WP集市原创文章,转载或复制请以超链接形式并注明出处。

相关文章
- WordPress滚动公告咋整?3分钟教你从0到1搞掂,小白也能看懂!
- WordPress置顶文章搞不定?手把手教你从入门到“玩明白”!
- WordPress友情链接管理保姆级教程:从添加到优化,小白也能看懂!
- WordPress数据库备份插件怎么整?手把手教你从0到1搞明白(附代码思路)
- WordPress维护模式不求人:3招让你优雅渡劫
- WordPress主题改CSS?三步搞定!新手也能上手的实操教程
- WordPress头部代码咋改?程序员手把手教你,别再瞎改把网站搞崩了!
- WordPress底部版权咋改?别再让“Powered by WordPress”霸屏了!
- WordPress 内容自动化摘要插件 - 智能内容提炼与SEO优化工具
- WordPress函数模板咋用?从抄代码到自己写,这篇手把手教你
热门文章
