l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/WordPress区块编辑器中的封面图片与特色图片（初学者指南）

WordPress区块编辑器中的封面图片与特色图片（初学者指南）

写 Bug工程师：

WordPress区块编辑器中的封面图片与特色图片

在WordPress的区块编辑器中，我们经常需要添加封面图片和特色图片来美化我们的文章或页面。这两个元素对于提升网站的整体视觉效果至关重要。本文将详细介绍如何在WordPress中使用这些区块。

1. 添加封面图片

步骤：

  1. 登录到您的WordPress后台。
  2. 在左侧菜单栏选择“内容” -> “页面”或“帖子”。
  3. 找到您想要添加封面图片的文章或页面。
  4. 点击页面顶部的“编辑”按钮。
  5. 在右侧编辑区域，找到并点击位于顶部的“区块”选项。
  6. 在“区块”列表中找到“封面图片”或“背景图像”，点击它打开其设置面板。
  7. 在“封面图片”设置中，您可以调整以下参数：
    • 标题：为封面图片添加一个标题。
    • 链接：如果您的封面图片是一个链接，请在这里输入链接地址。
    • 高度：设定封面图片的高度。
    • 宽度：设定封面图片的宽度。
  8. 完成设置后，点击保存更改。

效果： 封面图片现在会出现在文章或页面的顶部，根据您设置的高度和宽度自动缩放以适应整个页面。

2. 添加特色图片

步骤：

  1. 如上所述，登录到WordPress后台并在“内容” -> “页面”或“帖子”中找到要添加特色图片的文章或页面。
  2. 点击页面顶部的“编辑”按钮。
  3. 在右侧编辑区域，找到并点击位于顶部的“区块”选项。
  4. 在“区块”列表中找到“特色图片”或“内嵌图像”，点击它打开其设置面板。
  5. 在“特色图片”设置中，您可以调整以下参数：
    • 标题：为特色图片添加一个标题。
    • 链接：如果您的特色图片是一个链接，请在这里输入链接地址。
    • 高度：设定特色图片的高度。
    • 宽度：设定特色图片的宽度。
  6. 完成设置后，点击保存更改。

效果： 特色图片现在会出现在文章或页面的底部，根据您设置的高度和宽度自动缩放以适应整个页面。

示例代码

假设您已经有一个名为my_page.php的页面文件，下面是一个简单的HTML代码片段，用于展示封面图片和特色图片：

<!-- 包含头部 -->
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php wp_title('|', true, 'right'); ?></title>
    <!-- 引入CSS样式 -->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
</head>

<body>
    <div class="container">
        <h1>Welcome to My Page</h1>

        <!-- 使用封面图片 -->
        <section id="cover-image-section">
            <figure>
                <img src="<?php the_post_thumbnail_url('full'); ?>" alt="Cover Image">
                <figcaption><?php the_title(); ?></figcaption>
            </figure>
        </section>

        <!-- 使用特色图片 -->
        <section id="featured-image-section">
            <figure>
                <a href="<?php echo get_permalink(); ?>"><img src="<?php the_post_thumbnail_url('thumbnail'); ?>" alt="Featured Image"></a>
                <figcaption><?php the_title(); ?></figcaption>
            </figure>
        </section>

        <!-- 其他区块内容 -->
        <p>This is some content that follows the featured image.</p>
    </div>
</body>
</html>

这段代码展示了如何在WordPress页面中使用封面图片和特色图片。请确保在上传图片时，它们被正确地设置为特定尺寸以便在网页上显示。

通过以上步骤和示例代码，您可以轻松地在WordPress中添加封面图片和特色图片，从而增强您的网站视觉吸引力。

黑板IDE教书匠：

课程目标

本课程将帮助您了解如何使用WordPress的区块编辑器来添加封面图片和特色图片。通过这个教程，您将学习如何选择合适的图像文件、设置文件位置以及创建自定义区块以满足特定需求。

目标受众

  • WordPress初学者
  • 对WordPress开发有基本了解的人士

教学大纲

  1. 基础概念

    • 理解WordPress的块编辑器
    • 基础HTML语法：标签和属性

  2. 上传封面图片

    • 使用<div>区块插入图像
    • 设置图像尺寸和位置

  3. 上传特色图片

    • 使用<div>区块插入图像
    • 设置图像尺寸和位置

  4. 创建自定义区块

    • 创建自定义区块并设置样式
    • 配置自定义区块以显示或隐藏特定信息

  5. 主题集成

    • 如何在WordPress主题中集成自定义区块
    • 自定义区块如何影响页面布局

  6. 常见问题解答

演示示例代码

示例一：上传封面图片

<div class="post-thumbnail">
    <img src="path/to/your/image.jpg" alt="Cover Image">
</div>

示例二：上传特色图片

<div class="post-thumbnail">
    <img src="path/to/your/image.jpg" alt="Feature Image">
</div>

示例三：创建自定义区块

<div id="custom-block" class="block-content">
    <h2>Custom Block Title</h2>
    <p>This is a custom block content.</p>
</div>

示例四：在WordPress主题中集成自定义区块

add_action( 'wp_head', function() {
    wp_enqueue_script('my-custom-script');
} );

function my_custom_block_shortcode() {
    return '<div id="custom-block" class="block-content"><h2>Custom Block Title</h2><p>This is a custom block content.</p></div>';
}

add_shortcode('my_custom_block', 'my_custom_block_shortcode');

结语

通过以上步骤，您已经掌握了如何使用WordPress的区块编辑器为您的博客添加封面图片和特色图片。您可以根据需要进一步定制这些元素，以实现个性化的设计效果。希望这个教程能对您有所帮助！如果您有任何疑问，请随时提问。

, ,

最新更新