l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在WordPress中添加特色图像或文章缩略图

如何在WordPress中添加特色图像或文章缩略图

写 Bug工程师：

要在WordPress中添加特色图像或文章缩略图，你需要遵循以下步骤：

  1. 上传和设置图片：

    • 首先，从你的电脑上选择一张你喜欢的图片。
    • 将图片拖放到WordPress编辑器窗口中的“媒体”区域，或者通过点击菜单栏上的“媒体”，然后选择“上传文件”来上传图片。

  2. 为图片添加标题和描述：

    • 在上传图片后，你会看到一个选项卡，用于输入图片的相关信息，如标题（Title）和描述（Description）。填写这些信息以帮助读者了解图片的内容。

  3. 创建或修改页面或帖子：

    • 打开你想要插入图片的页面或帖子。
    • 通常，你可以通过点击顶部的“页面”或“帖子”链接来进入编辑模式。

  4. 插入图片到页面或帖子：

    • 使用鼠标悬停在要放置图片的位置，然后点击“插入来自媒体库的图像”按钮。
    • 从弹出的下拉菜单中选择刚刚上传的图片，或者如果你有多个图片，可以选择它们并按照顺序排列。

  5. 调整图片大小和位置：

    • 确保图片正确地显示在页面或帖子上。如果图片看起来不理想，可以右键点击图片并选择“属性”来调整其尺寸、裁剪、旋转等。
    • 调整完图片后，记得保存你的更改。

  6. 完成页面或帖子：

    • 完成所有必要的编辑后，点击页面或帖子底部的“发布”按钮。

示例代码： 假设你已经完成了上述步骤，并且你有一个名为featured-image.php的自定义模板文件，你可以这样使用它来展示图片：

<?php get_header(); ?>
<div class="container">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <header>
                        <h1><?php the_title(); ?></h1>
                    </header>
                    <?php the_content(); ?>
                    <!-- 插入图片 -->
                    <?php if ( has_post_thumbnail() ) { ?>
                        <figure class="featured-image">
                            <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php the_title_attribute(); ?>">
                            <figcaption><?php the_excerpt(); ?></figcaption>
                        </figure>
                    <?php } else { ?>
                        <p>No featured image available.</p>
                    <?php } ?>
                </article>
            <?php endwhile; endif; ?>
        </main><!-- .site-main -->
    </div><!-- #primary -->
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

使用步骤：

  1. 创建一个新的PHP文件，例如featured-image.php。
  2. 将上面的代码复制到新文件中，并将其放在适当的模板目录中。
  3. 保存文件并在WordPress后台激活该模板。
  4. 再次打开你的网站，在你想要显示图片的地方粘贴这个PHP文件的路径，即可实现图片功能。

请注意，这只是一个基本的示例，实际应用时可能需要根据具体需求进行调整，比如处理不同的图片类型、加载CSS样式等。

黑板IDE教书匠：

在WordPress中添加特色图像或文章缩略图可以提高网站的吸引力和用户体验。下面是一些步骤和示例代码来帮助您完成这个任务。

步骤 1: 创建一个自定义主题插件

首先，需要创建一个自定义的主题插件来处理特色图片和文章缩略图。这可以通过使用WordPress的wp-admin界面中的Plugins目录来实现。以下是如何创建自定义主题插件的简要步骤：

  1. 打开WordPress管理面板。
  2. 在顶部菜单栏选择“Admin”（管理员）选项卡。
  3. 点击“New Plugin”，然后点击“Add New”按钮开始创建新插件。
  4. 在新窗口中输入插件名称、描述等基本信息，然后点击“Create”。现在，插件已成功创建并保存。

步骤 2: 编辑插件文件夹

接下来，编辑您的插件文件夹以包含处理图片和缩略图所需的函数和逻辑。

  • 功能文件（functions.php）：这是处理插件核心功能的地方。在这里，您可以编写用于加载图片和缩略图的函数。
  • 样式文件（style.css）：用于设置插件的外观和风格。
  • 视图文件（view.php）：用于显示和操作插件的功能。

示例代码

功能文件 (functions.php)

function my_custom_image_shortcode() {
    $args = array(
        'title' => '',
        'class' => 'custom-image',
        'link' => false,
        'size' => 'medium',
        'width' => 600,
        'height' => 450,
        'id' => null,
        'align' => 'left'
    );
    return get_template_part('template-parts/content', 'image', $args);
}

add_shortcode( 'my-custom-image', 'my_custom_image_shortcode' );

function my_custom_thumbnail_shortcode() {
    $args = array(
        'title' => '',
        'class' => 'thumbnail',
        'link' => false,
        'size' => 'medium',
        'width' => 600,
        'height' => 450,
        'id' => null,
        'align' => 'left'
    );
    return get_template_part('template-parts/content', 'thumbnail', $args);
}

add_shortcode( 'my-custom-thumbnail', 'my_custom_thumbnail_shortcode' );

样式文件 (style.css)

.custom-image {
    display: block;
    margin-bottom: 1em;
}
.thumbnail {
    display: block;
    width: 100%;
}

视图文件 (view.php)

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post-content">
    <?php the_content(); ?>
    <div class="custom-image" style="background-image: url('<?php echo get_the_post_thumbnail_url(get_the_ID(), 'medium'); ?>')"></div>
</div>
<?php endwhile; else : ?>
<h2><?php _e('Sorry, no posts matched your criteria.'); ?></h2>
<?php endif; ?>

步骤 3: 更新主题模板

更新WordPress的主题模板，使插件能够正常工作。

  1. 打开wp-content/themes/your-theme/wp-includes/partials/目录下的每个子目录。
  2. 寻找content.php文件，找到template-part-content标签。
  3. 将content.php文件的内容替换为以下内容： 
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   <div class="post-content">
       <?php the_content(); ?>
       <div class="custom-image" style="background-image: url('<?php echo get_the_post_thumbnail_url(get_the_ID(), 'medium'); ?>')"></div>
   </div>
<?php endwhile; else : ?>
   <h2><?php _e('Sorry, no posts matched your criteria.'); ?></h2>
<?php endif; ?>

步骤 4: 配置插件

确保配置插件以便它能在WordPress上运行。

  1. 在插件的functions.php文件中添加require_once语句，指向您的自定义插件文件。
  2. 调整插件的工作环境，例如将插件放在正确的路径下。

通过以上步骤，您已经成功地在WordPress中添加了特色图像或文章缩略图。可以根据实际需求调整这些代码以适应不同的布局和设计需求。

,

最新更新