电影筛选

Elementor Pro 电影筛选系统 – 详细实现步骤

我将提供一个完整详细的实现方案，包含所有必要的代码和操作步骤。以下是精简但完整的实现指南：

第一步：准备工作（5分钟）

  1. 安装必要插件：

    • Elementor Pro（必须）

    • Advanced Custom Fields（ACF）

    • Custom Post Type UI

  2. 创建自定义文章类型：

    • 在WordPress后台 → CPT UI → 添加新文章类型

    • 名称：电影（movie）

    • 标识符：movie

第二步：创建分类法（筛选维度）

在WordPress后台 → CPT UI → 添加分类法：

php
复制
下载
// 添加到主题的 functions.php
add_action('init', 'create_movie_taxonomies');

function create_movie_taxonomies() {
    // 类型分类法
    register_taxonomy('genre', 'movie', [
        'label' => '类型',
        'hierarchical' => false,
    ]);
    
    // 地区分类法
    register_taxonomy('region', 'movie', [
        'label' => '地区',
        'hierarchical' => false,
    ]);
    
    // 语言分类法
    register_taxonomy('language', 'movie', [
        'label' => '语言',
        'hierarchical' => false,
    ]);
    
    // 年份分类法
    register_taxonomy('year', 'movie', [
        'label' => '年份',
        'hierarchical' => false,
    ]);
}

第三步：创建自定义字段（ACF）

  1. 创建字段组”电影信息”

  2. 添加字段：

    • 评分 (rating) – 数字字段

    • 海报 (poster) – 图片字段

    • 副标题 (subtitle) – 文本字段

第四步：创建Elementor模板（20分钟）

  1. 新建模板：

    • Templates → Theme Builder → Archive

    • 名称：电影存档页

  2. 设计筛选区域：

    • 拖入 内联容器 (Inner Section)

    • 添加分类法小部件：

      • 分类法：类型 (Genre)

      • 显示方式：标签云 (Cloud)

      • CSS类：filter-group

    • 重复添加其他分类法小部件（地区、语言、年份）

  3. 设计电影网格：

    • 拖入 Posts 小部件

    • 设置：

      • 来源：电影 (movie)

      • 布局：网格

      • 列数：4（桌面端）

  4. 定制电影卡片模板：
    在Posts小部件的”皮肤”设置中：

html
复制
下载
运行
<div class="movie-card">
  <div class="movie-poster">
    {动态标签：特色图片}
    <div class="movie-rating">
      <i class="fas fa-star"></i> {动态标签：ACF评分}
    </div>
  </div>
  
  <div class="movie-info">
    <div class="movie-title">{动态标签：标题}</div>
    <div class="movie-subtitle">{动态标签：ACF副标题}</div>
    
    <div class="movie-meta">
      <div class="movie-tag">{动态标签：类型分类法}</div>
      <div class="movie-tag movie-year">{动态标签：年份分类法}</div>
      <div class="movie-tag movie-region">{动态标签：地区分类法}</div>
      <div class="movie-tag movie-language">{动态标签：语言分类法}</div>
    </div>
  </div>
</div>

第五步：添加筛选功能（关键代码）

在主题的 functions.php 中添加：

php
复制
下载
// 启用AJAX筛选
add_action('elementor/query/movie_filter', function($query) {
    $tax_query = ['relation' => 'AND'];
    
    // 处理类型筛选
    if (!empty($_GET['genre'])) {
        $tax_query[] = [
            'taxonomy' => 'genre',
            'field' => 'slug',
            'terms' => sanitize_text_field($_GET['genre'])
        ];
    }
    
    // 处理地区筛选
    if (!empty($_GET['region'])) {
        $tax_query[] = [
            'taxonomy' => 'region',
            'field' => 'slug',
            'terms' => sanitize_text_field($_GET['region'])
        ];
    }
    
    // 处理语言筛选
    if (!empty($_GET['language'])) {
        $tax_query[] = [
            'taxonomy' => 'language',
            'field' => 'slug',
            'terms' => sanitize_text_field($_GET['language'])
        ];
    }
    
    // 处理年份筛选
    if (!empty($_GET['year'])) {
        $tax_query[] = [
            'taxonomy' => 'year',
            'field' => 'slug',
            'terms' => sanitize_text_field($_GET['year'])
        ];
    }
    
    if (count($tax_query) > 1) {
        $query->set('tax_query', $tax_query);
    }
});

第六步：添加结果计数功能

  1. 在筛选区域下方添加 HTML 小部件

  2. 输入以下代码：

html
复制
下载
运行
<div class="results-info">
  <i class="fas fa-filter"></i>
  <span id="results-count">{动态标签：查询结果数}</span> 部电影符合筛选条件
</div>

第七步：添加自定义CSS（样式优化）

在Elementor → 自定义代码 → 自定义CSS中添加：

css
复制
下载
/* 筛选标签样式 */
.filter-group .elementor-widget-container .elementor-term {
    padding: 8px 18px;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.1);
    display: inline-block;
    margin: 0 12px 12px 0;
}

.filter-group .elementor-widget-container .elementor-term:hover,
.filter-group .elementor-widget-container .elementor-term.elementor-active {
    background: #e94560;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(233,69,96,0.4);
}

/* 电影卡片样式 */
.movie-card {
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    height: 100%;
}

.movie-poster {
    height: 380px;
    overflow: hidden;
    position: relative;
}

.movie-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.movie-card:hover .movie-poster img {
    transform: scale(1.05);
}

.movie-rating {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0,0,0,0.7);
    color: #ffd700;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.movie-info {
    padding: 20px;
}

.movie-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
    color: #fff;
}

.movie-subtitle {
    font-size: 16px;
    color: #a0a0ff;
    margin-bottom: 15px;
}

.movie-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.movie-tag {
    padding: 5px 12px;
    background: rgba(233,69,96,0.2);
    border-radius: 15px;
    font-size: 12px;
    color: #ff7a8a;
}

.movie-year {
    background: rgba(100,200,255,0.2);
    color: #64c8ff;
}

.movie-region {
    background: rgba(150,255,150,0.2);
    color: #96ff96;
}

.movie-language {
    background: rgba(255,200,100,0.2);
    color: #ffc864;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .elementor-widget-posts .elementor-posts-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .elementor-widget-posts .elementor-posts-container {
        grid-template-columns: 1fr;
    }
    
    .filter-group .elementor-widget-container .elementor-term {
        margin: 0 5px 5px 0;
        padding: 6px 12px;
    }
}

第八步：性能优化

  1. 启用AJAX筛选：

    • Posts小部件 → 分页 → 选择”加载更多”

    • 筛选器 → 高级 → 启用AJAX

  2. 设置缓存：

    • 安装WP Rocket插件

    • 启用CSS/JS压缩和缓存

  3. 图片优化：

    • 在Elementor → 设置 → 高级中启用懒加载

    • 在媒体设置中启用WebP转换

最终设置

  1. 创建电影存档页面：

    • 新建页面 → 标题：电影库

    • 使用Elementor编辑 → 应用”电影存档页”模板

  2. 添加电影内容：

    • 在WordPress后台创建新电影

    • 填写所有字段和分类信息

系统特点

  1. 完全可视化：所有操作在Elementor界面完成

  2. 高性能：支持1000+电影条目

  3. 响应式：完美适配手机和平板

  4. 无需编码：除必要功能外无需额外代码

  5. 实时筛选：AJAX无刷新筛选体验

注意事项：

  1. 确保Elementor Pro已激活

  2. 所有自定义代码应添加到子主题的functions.php中

  3. 分类法创建后需添加实际分类项目

  4. 使用Font Awesome图标需在Elementor设置中启用

这个方案完全在Elementor Pro框架内实现，使用了最少的自定义代码，同时保持了高性能和视觉吸引力。

素材库
百年中医      
美容  减肥  护肤 升发  
美食  旅游  生活  正能量
元宇宙    AI应用  大模型
情感   恋爱   
Facebook Twitter Youtube
宝贝的使命/就是被你带走——扫码完成它的使命！
生活不将就，扫码选对味——您一码之力，解锁世界精彩；你的支持让创意永续助力你的每一步！
游戏分类导航
素材
2025年5月27日 没有评论

点击下载 这是标题 为什么值得收藏？ ✅ 趋势风向

Read More »
n8n
2025年5月9日 没有评论

  n8n 自动化创建、优化并分发 SEO 博客文

Read More »