l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在 WordPress 侧边栏小工具中添加一张图片

如何在 WordPress 侧边栏小工具中添加一张图片

写 Bug工程师：

要在 WordPress 的侧边栏小工具中添加一张图片，你可以按照以下步骤操作：

步骤 1: 登录到您的 WordPress 网站后台

首先，请确保您已经登录到您的 WordPress 后台管理界面。

步骤 2: 进入侧边栏编辑器

在左侧菜单栏中找到并点击“外观”选项卡，然后选择“侧边栏”。

步骤 3: 添加新小工具

在侧边栏页面的顶部，你会看到一个名为“侧边栏”的区域。点击它，然后选择“创建新小工具”。在弹出的小窗口中，您可以选择不同的小工具类型。对于图片小工具，选择“图片”。

步骤 4: 输入图片链接

在“图片”小工具下方，有一个文本框用于输入图片的 URL 或者上传一个新的图片文件。输入您想要显示的图片URL或者从本地上传图片的路径。

例如，如果您要上传一个名为 “example.jpg” 的图片文件，那么应该这样填写：

/wp-content/uploads/2023/01/example.jpg

步骤 5: 定义图片位置和标题

在右侧的小工具设置部分，您可以定义图片的位置（例如左、右或居中）以及为这个小工具提供一个标题。

示例代码：

假设您上传了一个名为 example.jpg 的图片，并且将其保存在 /wp-content/uploads/2023/01/example.jpg 路径下，那么您的小工具配置看起来可能会像这样：

// 小工具配置
add_filter('register_sidebar', 'my_custom_widgets');

function my_custom_widgets($sidebars) {
    $sidebars['custom-sidebar'] = array(
        'name' => __('Custom Sidebar'),
        'description' => __('A custom sidebar for displaying images.'),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>'
    );

    return $sidebars;
}

// 输出图片小工具
add_action('widgets_init', 'register_my_sidebars');
function register_my_sidebars() {
    register_sidebar(array(
        'name'          => __('My Custom SideBar'),
        'id'            => 'my-custom-sidebar',
        'description'   => __( 'A sidebar for showing a featured image.' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));
}

使用步骤及效果：

  1. 上传图片：将图片上传至指定路径。
  2. 访问后台：返回到 WordPress 后台。
  3. 进入侧边栏编辑器：在侧边栏页面，点击“创建新小工具”，选择“图片”。
  4. 输入图片链接：在“图片”小工具下方，输入图片URL或本地路径。
  5. 定义位置与标题：根据需求调整图片的位置和标题。

完成上述步骤后，您将在侧边栏中看到自定义的小工具，展示您上传的图片。这个例子展示了如何通过插件扩展功能来实现特定的功能，比如在侧边栏中显示图片。

黑板IDE教书匠：

在WordPress中，你可以使用以下步骤来在侧边栏的小工具中添加一张图片：

  1. 打开你的WordPress网站。
  2. 登录到你的网站并导航到“管理”选项卡。
  3. 在左侧菜单中找到并点击“功能”标签。
  4. 在右侧窗口中，你会看到一个名为“功能”的下拉菜单。从这里选择“小工具”。
  5. 在小工具列表中，你会看到一些预设的功能。点击“+ 添加小工具”按钮。
  6. 选择“图片”作为新小工具类型。这会打开一个小工具编辑器，用于设置小工具的属性。
  7. 将图片插入到编辑器中。你可以通过拖放或直接上传图片。
  8. 设置小工具的位置和大小（如果需要）。默认情况下，小工具将位于页面底部。
  9. 点击保存以应用更改。

这是一个简单的示例代码：

<div class="wpcf7-display">
    <div class="wpcf7-display-container wpcf7-display-image">
        <img src="path/to/your/image.jpg" alt="" width="200" height="auto">
    </div>
</div>

在这个示例中，我们创建了一个包含图片的div元素，并设置了其宽度、高度和alt属性。<img>标签用于显示图片，src属性指定了图片文件的路径，width和height属性则指定了图片的尺寸。

,

最新更新