中文姓名生成器 Chinese Name Generator

点击按钮生成姓名 Click button to generate

How to Use the Chinese Name Generator Widget in WordPress

Step 1: Access WordPress Editor

  • Log in to your WordPress dashboard
  • Create a new post/page or edit an existing one
  • Switch to the block editor if not already active

Step 2: Add HTML Block

  1. Click the “+” button to add a new block
  2. Search for “Custom HTML” or find it under “Formatting”
  3. Click to add the HTML block to your page

Step 3: Insert the Code

  1. Copy the entire code snippet below
  2. Paste it into the HTML block
  3. Click “Preview” to ensure it’s working correctly

Step 4: Customize (Optional)

You can customize the widget by modifying:

  • Colors: Change the button color by editing background: #ff4757
  • Width: Adjust max-width: 600px to fit your needs
  • Fonts: Modify the font-family property
  • Shadow: Adjust the box-shadow values

Step 5: Testing

  1. Preview your page
  2. Click the “Generate Name” button
  3. Verify that:
    • Names are generating correctly
    • Meanings are displayed properly
    • Button is responsive
    • Layout looks good on both desktop and mobile

Step 6: Publishing

  1. Save your changes
  2. Click “Update” or “Publish”
  3. View your page to ensure everything works as expected

Troubleshooting Common Issues

If the widget isn’t working properly, check:

  • HTML block is properly selected
  • All code is copied completely
  • No extra spaces or characters were added
  • WordPress theme compatibility

Technical Requirements

  • WordPress 5.0 or higher
  • Modern web browser
  • JavaScript enabled
  • No additional plugins required

Maintenance Tips

  • Regularly check if the widget is functioning
  • Update character meanings if needed
  • Add new surnames or name characters as desired
  • Test on different devices periodically

Support and Modifications

For modifications, you can:

  • Add more surnames to the surnames array
  • Add new characters to the nameCharacters object
  • Adjust styling through CSS
  • Modify the generation logic in the JavaScript code

Security Notes

The widget is:

  • Self-contained
  • Uses no external resources
  • Safe for WordPress use
  • Cross-site compatible

Performance Considerations

  • Lightweight code
  • No database queries
  • Minimal impact on page load
  • Mobile-friendly design

Additional Features

You can extend the widget by adding:

  • Gender-specific names
  • Traditional/Simplified character toggle
  • Name pronunciation guide
  • Export functionality
  • Custom styling options