WordPress可修改考勤列表：如何实现修改内容持久化？

Hey there! I get it—having a frontend attendance list that resets every refresh is super frustrating. Let's break this down into simple, code-friendly steps since you know basic programming. The core issue right now is that your frontend changes aren't being stored anywhere (like WordPress's database), so they vanish when you reload. Here's how to fix it:

1. First: Lock the Page to Admins (Double Protection) #

You mentioned only admins should edit this. WordPress has built-in password protection for pages—just edit your attendance page, look for Page Attributes > Visibility and set it to "Password protected". We'll also add a code check later to ensure only admins can submit changes, so it's double-safe.

2. Update Your Frontend Form #

Right now your <select> elements don't have names or a way to send data to the backend. Let's wrap them in a form and give each select a unique name tied to the attendee. Here's how to modify your existing code:

<form method="post" action="">
  <!-- Add a nonce for security (WordPress requires this to block spam submissions!) -->
  <?php wp_nonce_field('save_attendance_nonce', 'attendance_nonce'); ?>
  
  <table>
    <!-- Example row for an employee -->
    <tr>
      <td>John Doe</td>
      <td class="select">
        <select name="attendance[john_doe]">
          <option value="present" <?php echo (get_option('attendance_list')['john_doe'] === 'present') ? 'selected' : ''; ?>>Present</option>
          <option value="absent" <?php echo (get_option('attendance_list')['john_doe'] === 'absent') ? 'selected' : ''; ?>>Absent</option>
          <option value="late" <?php echo (get_option('attendance_list')['john_doe'] === 'late') ? 'selected' : ''; ?>>Late</option>
        </select>
      </td>
    </tr>
    <!-- Repeat this row structure for every attendee, updating the name and option checks -->
  </table>
  
  <button type="submit" name="save_attendance">Save Attendance</button>
</form>

• The name="attendance[john_doe]" groups all attendance data into one easy-to-handle array.
• The <?php echo ... ?> snippet checks if we already have saved data and pre-selects the correct option when the page loads.

3. Add Backend Code to Save the Data #

Now we need to handle the form submission and store the data in WordPress's database. Add this code to your theme's functions.php file (or a custom plugin if you prefer—just create a new .php file in wp-content/plugins/ with a basic plugin header):

function save_attendance_data() {
  // Check if the form was submitted, security nonce is valid, and user is an admin
  if (isset($_POST['save_attendance']) && 
      wp_verify_nonce($_POST['attendance_nonce'], 'save_attendance_nonce') &&
      current_user_can('manage_options')) {
    
    // Grab the attendance data from the form submission
    $attendance_data = $_POST['attendance'];
    
    // Save it to WordPress's options table (this keeps data persistent across page reloads!)
    update_option('attendance_list', $attendance_data);
    
    // Optional: Show a success message after saving
    add_action('admin_notices', function() {
      echo '<div class="notice notice-success is-dismissible"><p>Attendance saved successfully!</p></div>';
    });
  }
}
// Hook this function to run when WordPress loads
add_action('init', 'save_attendance_data');

• update_option stores your data in the wp_options table—no need to create custom database tables, which is perfect for basic coding.
• The nonce and current_user_can checks keep your form secure, so only admins can submit changes.

4. Set Default Attendance Values (Optional) #

If you want to start with all attendees marked as "present" (or any default), add this code once (you can remove it after the first page load):

function set_default_attendance() {
  if (!get_option('attendance_list')) {
    $default_data = array(
      'john_doe' => 'present',
      'jane_smith' => 'present',
      // Add all your attendees here with their default status
    );
    update_option('attendance_list', $default_data);
  }
}
add_action('init', 'set_default_attendance');

Quick Tip for Your Existing Code #

Replace your original <select> code with the version from step 2—just make sure each select has a unique name (like the attendee's ID or full name) so we can track each person's status correctly.

That's it! Now when you select an option and click "Save Attendance", the data will be stored in WordPress's database, and it'll stay there even when you refresh the page.

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