WordPress模板插件定制

您现在的位置是:首页 > WordPress教程WordPress教程

WordPress相册咋整?手把手教你从0到1搭个靓相册(附代码小抄)

查看 WP集市 的更多文章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:

WordPress模板插件定制