WordPress自定义主题分页问题：姊妹站模板复制后分页功能异常

Hey there, let's work through this pagination problem together! Since you're dealing with a custom theme, plugins aren't the right fix here—we need to directly replicate the working code and styles from your original sister site. Here's how to get your target site's pagination matching the original's style and responsive behavior:

1. First, Grab the Working Pagination Code from the Original Site #

Right-click on the working pagination (on your original site) and select "Inspect" to open your browser's dev tools. You'll need two key things:

• The HTML structure of the pagination elements: Note class names like pagination, page-numbers, current, prev, or next—these are critical for matching styles later.
• The PHP snippet that generates this HTML: In your original site's custom theme files (look for functions.php, pagination.php, or a template part like archive.php), find the code that uses paginate_links() or outputs the pagination classes you spotted. Copy this entire snippet (including any conditional logic that checks for multiple pages).

2. Replace the Pagination Code on Your Target Site #

In your target site's custom theme files, find where pagination is currently being output (it might be a generic function or a broken snippet from the copied template). Replace that code with the exact PHP snippet you copied from the original site. Make sure all class names match perfectly—even a tiny typo (like page-number instead of page-numbers) will break the styles.

3. Copy Over the Custom CSS Styles #

From the dev tools inspection, grab all the CSS associated with the pagination classes. Paste this into your target site's style.css file, or use the Customize > Additional CSS panel. Here's a sample structure to match most custom pagination styles (adjust values to match your original site):

/* Base pagination styles */
.pagination {
  margin: 2.5rem 0;
  text-align: center;
}
.page-numbers {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  margin: 0 0.3rem;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  color: #2d2d2d;
  text-decoration: none;
  transition: background 0.2s ease;
}
.page-numbers.current {
  background-color: #your-primary-color;
  color: white;
  border-color: #your-primary-color;
}
.page-numbers.prev, .page-numbers.next {
  font-weight: 600;
}

/* Responsive styles for tablet/mobile */
@media (max-width: 768px) {
  /* Hide middle page numbers on small screens */
  .page-numbers:not(.current):not(.prev):not(.next) {
    display: none;
  }
  .pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
}

Tweak colors, padding, breakpoints, and transitions to exactly match how the original site looks on all devices.

4. Check for Conflicts #

Make sure no pagination plugins are active on the target site—they'll override your custom theme's code. If you must use a plugin, pick one that lets you customize the output class names to match the original site's, so your CSS applies correctly.

5. Test Responsiveness #

Use your browser's dev tools to simulate tablet and mobile screens, or test on actual devices. Adjust the media queries if elements aren't stacking correctly or hiding when they should—you want the behavior to mirror the original site perfectly.

Once you've worked through these steps, your target site's pagination should look and behave exactly like the original!

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