WordPress中如何为按钮添加视频分类短码实现分组筛选？

Hey there! I’ve been in your shoes tinkering with WordPress portfolio plugins, so let’s get that video filtering sorted out for you. Here are two straightforward ways to make those category buttons work with the Gallery Video and Player plugin’s shortcode:

方案1：预加载所有分类视频（适合新手，无需复杂代码） #

This method loads all your video categories upfront but hides non-active ones, making it super easy to set up without AJAX or advanced PHP.

1. Grab your video category IDs first

   • Log into your WordPress admin, then head to the video category management page (usually under the plugin’s dedicated menu or Media → Video Categories).
   • Click to edit a category, then check your browser’s address bar. Look for term_id or tag_ID followed by a number—this is your category ID (e.g., if the URL ends with &term_id=4, 4 is your ID).

2. Add buttons and video containers to your page
   Switch your page editor to Code Editor mode (avoid visual editors to prevent formatting glitches) and paste this code:

   <!-- Filter Button Group -->
   <div class="video-filter-buttons">
     <button class="filter-btn active" data-category="all">All Videos</button>
     <button class="filter-btn" data-category="1">Travel Videos</button> <!-- Replace 1 with your category ID, update text to match your category name -->
     <button class="filter-btn" data-category="2">Creative Videos</button> <!-- Replace 2 with another category ID -->
   </div>
   
   <!-- Video Groups: Each category's videos live in a separate div -->
   <div class="video-groups">
     <!-- Default: Show all videos first -->
     <div class="video-group group-all">
       [sp_html5video]
     </div>
     <!-- Category 1 Videos (hidden by default) -->
     <div class="video-group group-1" style="display:none;">
       [sp_html5video category="1"]
     </div>
     <!-- Category 2 Videos (hidden by default) -->
     <div class="video-group group-2" style="display:none;">
       [sp_html5video category="2"]
     </div>
   </div>
   

3. Add simple JavaScript to toggle visibility
   Paste this code into your theme’s Custom HTML section (Appearance → Customize → Additional HTML) or your page’s custom script area:

   // Wait for the page to fully load
   document.addEventListener('DOMContentLoaded', function() {
     const filterButtons = document.querySelectorAll('.filter-btn');
     const videoGroups = document.querySelectorAll('.video-group');
   
     // Add click event to each button
     filterButtons.forEach(button => {
       button.addEventListener('click', function() {
         // Update button active state
         filterButtons.forEach(btn => btn.classList.remove('active'));
         this.classList.add('active');
   
         // Get the target category from the button
         const targetCategory = this.getAttribute('data-category');
   
         // Show/hide matching video groups
         videoGroups.forEach(group => {
           if (targetCategory === 'all' || group.classList.contains(`group-${targetCategory}`)) {
             group.style.display = 'block';
           } else {
             group.style.display = 'none';
           }
         });
       });
     });
   });
   

4. Optional: Spruce up buttons with CSS
   Add this to Appearance → Customize → Additional CSS to make buttons look nicer:

   .video-filter-buttons { margin-bottom: 25px; }
   .filter-btn {
     padding: 9px 18px;
     margin-right: 12px;
     border: 1px solid #ddd;
     background: #f8f8f8;
     cursor: pointer;
     border-radius: 5px;
     transition: all 0.2s ease;
   }
   .filter-btn.active {
     background: #0073aa;
     color: white;
     border-color: #0073aa;
   }
   

方案2：AJAX动态加载（适合 large video libraries，优化 page speed） #

This method loads videos only when a button is clicked, reducing initial page load time. It requires a tiny bit of PHP, but I’ll keep it simple.

1. Add AJAX handler to your theme’s functions.php
   Go to Appearance → Theme File Editor → functions.php (make sure to back up your theme first!) and paste this code:

   // Register AJAX action for logged-in and guest users
   add_action('wp_ajax_load_video_category', 'load_video_category');
   add_action('wp_ajax_nopriv_load_video_category', 'load_video_category');
   
   function load_video_category() {
     // Validate category ID input
     if (!isset($_POST['category_id'])) {
       wp_send_json_error('Category ID missing');
     }
   
     $category_id = intval($_POST['category_id']);
     // Generate video content via shortcode
     if ($category_id === 0) {
       $video_content = do_shortcode('[sp_html5video]'); // Load all videos
     } else {
       $video_content = do_shortcode("[sp_html5video category='{$category_id}']");
     }
   
     wp_send_json_success($video_content);
   }
   

2. Add buttons and dynamic video container to your page
   In your page’s code editor, paste this:

   <div class="video-filter-buttons">
     <button class="filter-btn active" data-category="0">All Videos</button>
     <button class="filter-btn" data-category="1">Travel Videos</button>
     <button class="filter-btn" data-category="2">Creative Videos</button>
   </div>
   
   <!-- Container for dynamically loaded videos -->
   <div id="dynamic-video-container">
     <!-- Default: Show all videos on page load -->
     [sp_html5video]
   </div>
   

3. Add AJAX request JavaScript
   Paste this into your theme’s Additional HTML or page script area:

   document.addEventListener('DOMContentLoaded', function() {
     const filterButtons = document.querySelectorAll('.filter-btn');
     const videoContainer = document.getElementById('dynamic-video-container');
   
     filterButtons.forEach(button => {
       button.addEventListener('click', function() {
         // Update button active state
         filterButtons.forEach(btn => btn.classList.remove('active'));
         this.classList.add('active');
   
         const categoryId = this.getAttribute('data-category');
   
         // Send AJAX request to load videos
         fetch('/wp-admin/admin-ajax.php', {
           method: 'POST',
           headers: {
             'Content-Type': 'application/x-www-form-urlencoded',
           },
           body: `action=load_video_category&category_id=${categoryId}`
         })
         .then(response => response.json())
         .then(data => {
           if (data.success) {
             videoContainer.innerHTML = data.data;
           } else {
             videoContainer.innerHTML = '<p>Failed to load videos. Please try again.</p>';
           }
         })
         .catch(error => {
           videoContainer.innerHTML = '<p>Network error. Please check your connection.</p>';
         });
       });
     });
   });
   

4. Reuse the CSS from方案1 to style buttons

内容的提问来源于stack exchange，提问作者rossvincent diaz