求WordPress侧边栏图文小工具：可制作带圆角背景图的精美盒子

Hey there! Let's tackle your question step by step:

First, the correct name for this "box" #

In the WordPress ecosystem, this styled sidebar content block is commonly called a Styled Widget Card (or more casually, a "sidebar card widget"). It's essentially a customized, visually enhanced widget container designed to make your sidebar content stand out.

Solution 1: Use a ready-made plugin (quick & easy) #

If you don't want to mess with code, these plugins will cover all your core and optional requirements:

• Widget Styles: This plugin lets you add custom styling to any default WordPress widget (like the Custom HTML widget). You can set background images, adjust border radius for rounded corners, tweak text fonts/sizes, add button styles, and even control background opacity.
• WP Custom Widgets: A dedicated widget builder that lets you create fully customized card widgets from scratch, with all the features you need (background images, rounded corners, text customization, button support).

Quick setup with Widget Styles: #

1. Install and activate the plugin, then go to Appearance > Widgets.
2. Drag the default Custom HTML widget into your sidebar, and paste your text content inside it.
3. Open the plugin's styling panel (usually below the widget content):
   • Enable the "Background Image" option, upload your image, and adjust opacity if needed.
   • In the "Border" settings, set a border radius (e.g., 10px) to get rounded corners.
   • Use the "Text Styles" section to customize font family, size, and color for your content.
   • To add a button, insert basic HTML like <button class="custom-card-btn">Your Button Text</button> into the HTML widget, then use the plugin's custom CSS field to style the button (e.g., purple background, rounded edges).

Solution 2: Custom code (full control) #

If you prefer a code-based approach (no plugins), you can create this card using a Custom HTML widget + custom CSS:

Step 1: Add the HTML widget #

Go to Appearance > Widgets, add a Custom HTML widget to your sidebar, and paste this code:

<div class="purple-sidebar-card">
  <h3 class="card-title">Your Card Title</h3>
  <p class="card-text">Your custom text here — feel free to adjust font, size, and content as needed!</p>
  <button class="card-btn">Click Me</button>
</div>

Step 2: Add custom CSS #

Head to Appearance > Customize > Additional CSS and paste this code (tweak values to match your design):

/* Base card styles (core requirements) */
.purple-sidebar-card {
  background: url('YOUR-BACKGROUND-IMAGE-URL') center/cover no-repeat;
  border-radius: 12px; /* Adjust this for more/less rounded corners */
  padding: 20px;
  position: relative;
  margin-bottom: 15px;
}

/* Optional: Add background opacity without affecting text */
.purple-sidebar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(128, 0, 128, 0.2); /* Purple tint with 20% opacity — adjust last value for transparency */
  border-radius: 12px;
  z-index: 0;
}

/* Ensure text/buttons sit above the background overlay */
.purple-sidebar-card > * {
  position: relative;
  z-index: 1;
}

/* Custom text styles (core requirement) */
.card-title {
  font-family: 'Arial', sans-serif; /* Swap with your preferred font */
  font-size: 20px;
  color: #ffffff;
  margin-bottom: 10px;
}

.card-text {
  font-family: 'Georgia', serif;
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 18px;
}

/* Optional: Styled button */
.card-btn {
  background-color: #9370db; /* Soft purple */
  color: #ffffff;
  border: none;
  padding: 9px 18px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.card-btn:hover {
  background-color: #800080; /* Darker purple on hover */
}

Quick notes for the code: #

• Replace YOUR-BACKGROUND-IMAGE-URL with the direct link to an image you've uploaded to your WordPress Media Library.
• If you want to use a custom Google Font, add the font's embed code to your theme's functions.php file first, then update the font-family values in the CSS.

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