qinPress Headless Video Theme Setup Guide

Installation Guide

1. Install WordPress Backend

qinPress is a headless video theme where WordPress serves as the content management and API backend. Follow these steps:

1. Install WordPress: Create a PHP site and install WordPress. Use a subdomain (e.g., api.yourdomain.com) for the backend, as the primary domain will host the frontend.
2. Upload Theme: Upload the qinpress theme folder to /wp-content/themes/ via FTP.
3. Activate Theme: Log into the WordPress admin, go to Appearance → Themes, and activate qinPress.
4. Verify Frontend: Visit the site homepage (while logged out) to see the frontend login interface.
5. Test API: Access yourdomain.com/wp-json/wp/v2/. It should return JSON data. If not, check server rewrite rules (e.g., Nginx) for WordPress.
6. Create Pages: In theme settings, click "Create Pages." Pages may appear broken initially; proceed.
7. Check Categories: Under Posts → Categories, verify that "Anime Categories" and "Anime Types" were auto-generated. Refer to the required settings table later; correct any discrepancies manually to ensure frontend display.
8. Install JWT Plugin: Install and activate JWT Authentication for WP-API for user authentication.
9. Generate Secret Key: Visit the WordPress secret key generator and copy one set of keys.
10. Configure Key: Add this to your site's root wp-config.php file, near other define('AUTH_KEY', ...) statements:

    define('JWT_AUTH_SECRET_KEY', 'your-secret-key-here');
    define('JWT_AUTH_CORS_ENABLE', true);

11. Set Frontend Domain: In theme settings, add your frontend domain (e.g., https://www.yourdomain.com) to the "Allowed Frontend Domains" list to enable CORS.

2. Deploy Frontend Static Site

The frontend is the main content display. Deploy separate sites for PC and mobile.

• Domain Suggestions: Use the primary domain for PC (e.g., www.yourdomain.com) and a subdomain for mobile (e.g., m.yourdomain.com).
• File Deployment: Create a web site and upload all files from the theme's web (PC) or h5 (mobile) folder to the site root.

Server Configuration (Nginx Example):

1. Rewrite Rules: Configure rules similar to WordPress, but set the default index to index.html.

   location / {
       index index.html index.htm index.php;
       try_files $uri $uri/ /index.html?$args;
   }

2. UA Redirect (Optional): Set redirects between PC and mobile sites based on user agent.
   PC to Mobile:

   if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
       return 301 https://m.yourdomain.com$request_uri;
   }

   Mobile to PC:

   if ($http_user_agent !~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
       return 301 https://www.yourdomain.com$request_uri;
   }

3. Configure API Address: Edit static/config.js in the frontend root. Set baseurl to your WordPress backend domain (e.g., https://api.yourdomain.com) and basename to your site name.

Function Verification:

1. Access the frontend site; pages should load normally.
2. Test login and registration.
3. After login, access the user center to confirm functionality.
4. Test features like image upload. If issues arise, check WordPress upload directory permissions (/wp-content/uploads/ should be 755 or 775).

Required Settings

When using the bundled frontend theme, you must create the following pages and categories in WordPress with exact slugs, or the frontend will fail to access them correctly.

1. Pages

2. Anime Categories

3. Anime Types

Note: After creating these categories and pages, assign your anime content to the appropriate categories.

Important Notes

1. Admin Redirect: You can modify the WordPress "Site Address" to point to the frontend and adjust rewrite rules to enable direct admin-to-frontend page jumps.
2. Security Authorization: Always configure the "Authorized Domain" (your frontend domain) in theme settings. This prevents others from using your API to clone your site. For high-traffic sites, implement additional security measures.
3. API Usage: This guide assumes use of the bundled frontend theme. For custom frontend development, refer to the theme source code or future API documentation.