wordpress图文教程

纯代码现实WordPress相关文章推荐调用

2024年8月27日
酒醒

纯代码现实WordPress相关文章推荐调用

把以下代码放到想要显示的位置。

方法一：WordPress相关文章推荐调用（不带图）

<?php  //方法一：WordPress相关文章推荐调用（不带图）
// 获取当前文章的标签
$tags = wp_get_post_tags($post->ID);

// 检查是否获取到了标签
if ($tags) {
    // 初始化一个空数组来存储标签的ID
    $tag_ids = array();

    // 遍历获取到的标签
    foreach ($tags as $individual_tag) {
        // 将每个标签的ID添加到$tag_ids数组中
        $tag_ids[] = $individual_tag->term_id;
    }

    // 构造查询参数
    $args = array(
        'post__not_in' => array($post->ID), // 排除当前文章
        'tag__in' => $tag_ids, // 查询具有这些标签的文章
        'posts_per_page' => 4, // 显示数量
        'caller_get_posts' => 1 // 这是一个过时的参数，‌现在通常不需要
    );

    // 执行查询
    $query = new WP_Query($args);

    // 检查是否查询到了相关文章
    if ($query->have_posts()) {
        // 开始输出相关文章的HTML结构
        echo '<div class="related-posts">';

        // 遍历查询到的文章
        while ($query->have_posts()) : $query->the_post();
            // 输出每篇文章的HTML结构
            ?>
            <div class="related-item">
                <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
            </div>
            <?php
        endwhile;

        // 结束输出相关文章的HTML结构
        echo '</div>';
    }

    // 重置查询，‌以避免影响后续的查询或循环
    wp_reset_query();
}
?>

这段代码会检查当前文章是否有标签，‌如果有，‌则基于这些标签检索其他相关文章，‌并显示它们的标题和链接。‌

请注意，‌由于WordPress和主题的不断更新，‌以上代码可能需要根据你的具体情况进行调整。‌如果你不熟悉PHP和WordPress主题开发，‌建议使用插件来实现相关推荐功能。‌

方法二：WordPress相关文章推荐调用（带图）

以下是一个修改后的版本，‌这个版本在显示相关文章标题的同时，‌也会显示每篇文章的特色图片（‌如果有的话）‌：‌

<?php  //方法二：WordPress相关文章推荐调用（带图）
// 获取当前文章的标签
$tags = wp_get_post_tags($post->ID);

// 检查是否获取到了标签
if ($tags) {
    // 初始化一个空数组来存储标签的ID
    $tag_ids = array();

    // 遍历获取到的标签
    foreach ($tags as $individual_tag) {
        // 将每个标签的ID添加到$tag_ids数组中
        $tag_ids[] = $individual_tag->term_id;
    }

    // 构造查询参数
    $args = array(
        'post__not_in' => array($post->ID), // 排除当前文章
        'tag__in' => $tag_ids, // 查询具有这些标签的文章
        'posts_per_page' => 4, // 显示数量
        // 'caller_get_posts' => 1 // 这是一个过时的参数，‌现在通常不需要
    );

    // 执行查询
    $query = new WP_Query($args);

    // 检查是否查询到了相关文章
    if ($query->have_posts()) {
        // 开始输出相关文章的HTML结构
        echo '<div class="related-posts">';

        // 遍历查询到的文章
        while ($query->have_posts()) : $query->the_post();
            // 获取当前循环文章的特色图片
            $thumbnail = get_the_post_thumbnail(get_the_ID(), 'thumbnail');

            // 输出每篇文章的HTML结构，‌包括特色图片
            ?>
            <div class="related-item">
                <?php if ($thumbnail): ?>
                    <div class="related-thumbnail">
                        <?php echo $thumbnail; ?>
                    </div>
                <?php endif; ?>
                <div class="related-title">
                    <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
                </div>
            </div>
            <?php
        endwhile;

        // 结束输出相关文章的HTML结构
        echo '</div>';
    }

    // 重置查询，‌以避免影响后续的查询或循环
    wp_reset_query();
}
?>

在这个版本中，‌我使用了get_the_post_thumbnail()函数来获取每篇文章的特色图片，‌并将其作为<img>标签输出。‌同时，‌我也为特色图片和标题添加了额外的<div>容器，‌以便您可以更容易地通过CSS进行样式设置。‌

方法三：WordPress相关文章推荐调用（带图带动画效果）

要使图片具有动态效果，‌您可以使用CSS来实现一些简单的动画，‌比如淡入淡出效果。‌以下是一个修改后的PHP代码示例，‌它结合了CSS动画来使相关文章的特色图片具有动态效果：‌

<?php  //方法三：WordPress相关文章推荐调用（带图带动画效果）
// 获取当前文章的标签
$tags = wp_get_post_tags($post->ID);

// 检查是否获取到了标签
if ($tags) {
    // 初始化一个空数组来存储标签的ID
    $tag_ids = array();

    // 遍历获取到的标签
    foreach ($tags as $individual_tag) {
        // 将每个标签的ID添加到$tag_ids数组中
        $tag_ids[] = $individual_tag->term_id;
    }

    // 构造查询参数
    $args = array(
        'post__not_in' => array($post->ID), // 排除当前文章
        'tag__in' => $tag_ids, // 查询具有这些标签的文章
        'posts_per_page' => 4, // 显示数量
    );

    // 执行查询
    $query = new WP_Query($args);

    // 检查是否查询到了相关文章
    if ($query->have_posts()) {
        // 开始输出相关文章的HTML结构
        echo '<div class="related-posts">';

        // 遍历查询到的文章
        while ($query->have_posts()) : $query->the_post();
            // 获取当前循环文章的特色图片
            $thumbnail = get_the_post_thumbnail(get_the_ID(), 'thumbnail');

            // 输出每篇文章的HTML结构，‌包括特色图片
            ?>
            <div class="related-item">
                <?php if ($thumbnail): ?>
                    <div class="related-thumbnail">
                        <?php echo $thumbnail; ?>
                    </div>
                <?php endif; ?>
                <div class="related-title">
                    <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
                </div>
            </div>
            <?php
        endwhile;

        // 结束输出相关文章的HTML结构
        echo '</div>';
    }

    // 重置查询，‌以避免影响后续的查询或循环
    wp_reset_query();
}
?>

<style>
/* 添加CSS动画 */
.related-thumbnail img {
    transition: opacity 0.5s ease-in-out;
    opacity: 0.7;
}

.related-thumbnail img:hover {
    opacity: 1;
}
</style>

在这个版本中，‌我为.related-thumbnail img添加了一个CSS过渡效果，‌当鼠标悬停在图片上时，‌图片的透明度会从0.7变为1，‌从而创建一个简单的淡入效果。‌您可以根据需要调整动画的类型和持续时间。‌

方法四：WordPress相关文章推荐调用（带图带更好的动画效果）

为了创建一个更好的动画效果，‌我们可以使用CSS的transform属性来实现图片的放大效果，‌并结合transition属性使动画更加平滑。‌以下是修改后的PHP代码和CSS样式：‌

<?php  // 方法四：WordPress相关文章推荐调用（带图带更好的动画效果）
// 获取当前文章的标签
$tags = wp_get_post_tags($post->ID);

// 检查是否获取到了标签
if ($tags) {
    // 初始化一个空数组来存储标签的ID
    $tag_ids = array();

    // 遍历获取到的标签
    foreach ($tags as $individual_tag) {
        // 将每个标签的ID添加到$tag_ids数组中
        $tag_ids[] = $individual_tag->term_id;
    }

    // 构造查询参数
    $args = array(
        'post__not_in' => array($post->ID), // 排除当前文章
        'tag__in' => $tag_ids, // 查询具有这些标签的文章
        'posts_per_page' => 4, // 显示数量
    );

    // 执行查询
    $query = new WP_Query($args);

    // 检查是否查询到了相关文章
    if ($query->have_posts()) {
        // 开始输出相关文章的HTML结构
        echo '<div class="related-posts">';

        // 遍历查询到的文章
        while ($query->have_posts()) : $query->the_post();
            // 获取当前循环文章的特色图片
            $thumbnail = get_the_post_thumbnail(get_the_ID(), 'thumbnail');

            // 输出每篇文章的HTML结构，‌包括特色图片
            ?>
            <div class="related-item">
                <?php if ($thumbnail): ?>
                    <div class="related-thumbnail">
                        <?php echo $thumbnail; ?>
                    </div>
                <?php endif; ?>
                <div class="related-title">
                    <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
                </div>
            </div>
            <?php
        endwhile;

        // 结束输出相关文章的HTML结构
        echo '</div>';
    }

    // 重置查询，‌以避免影响后续的查询或循环
    wp_reset_query();
}
?>

<style>
/* 添加CSS动画 */
.related-thumbnail img {
    transition: transform 0.5s ease-in-out;
    transform-origin: center center;
}

.related-thumbnail img:hover {
    transform: scale(1.1);
}
</style>

在这个版本中，‌我为.related-thumbnail img添加了一个CSS过渡效果，‌当鼠标悬停在图片上时，‌图片会放大10%（‌从scale(1)变为scale(1.1)）‌。‌transform-origin属性确保图片从中心开始放大。‌您可以根据需要调整放大的比例和动画的持续时间。‌

方法五：WordPress相关文章推荐调用（带图带更好的动画效果）

为了创建更好的动画效果，‌我们可以使用CSS的transform属性来实现图片的放大效果，‌以及transition属性来使动画更加平滑。‌以下是修改后的PHP代码和CSS样式：‌

<?php  // 方法五：WordPress相关文章推荐调用（带图带更好的动画效果）
// 获取当前文章的标签
$tags = wp_get_post_tags($post->ID);

// 检查是否获取到了标签
if ($tags) {
    // 初始化一个空数组来存储标签的ID
    $tag_ids = array();

    // 遍历获取到的标签
    foreach ($tags as $individual_tag) {
        // 将每个标签的ID添加到$tag_ids数组中
        $tag_ids[] = $individual_tag->term_id;
    }

    // 构造查询参数
    $args = array(
        'post__not_in' => array($post->ID), // 排除当前文章
        'tag__in' => $tag_ids, // 查询具有这些标签的文章
        'posts_per_page' => 4, // 显示数量
    );

    // 执行查询
    $query = new WP_Query($args);

    // 检查是否查询到了相关文章
    if ($query->have_posts()) {
        // 开始输出相关文章的HTML结构
        echo '<div class="related-posts">';

        // 遍历查询到的文章
        while ($query->have_posts()) : $query->the_post();
            // 获取当前循环文章的特色图片
            $thumbnail = get_the_post_thumbnail(get_the_ID(), 'thumbnail');

            // 输出每篇文章的HTML结构，‌包括特色图片
            ?>
            <div class="related-item">
                <?php if ($thumbnail): ?>
                    <div class="related-thumbnail">
                        <a href="<?php the_permalink() ?>" rel="bookmark"><?php echo $thumbnail; ?></a>
                    </div>
                <?php endif; ?>
                <div class="related-title">
                    <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
                </div>
            </div>
            <?php
        endwhile;

        // 结束输出相关文章的HTML结构
        echo '</div>';
    }

    // 重置查询，‌以避免影响后续的查询或循环
    wp_reset_query();
}
?>

<style>
/* 添加CSS动画 */
.related-thumbnail a {
    display: inline-block;
    overflow: hidden;
}

.related-thumbnail a img {
    transition: transform 0.3s ease-in-out;
    transform-origin: center center;
}

.related-thumbnail a:hover img {
    transform: scale(1.1);
}
</style>

在这个版本中，‌我为.related-thumbnail a img添加了一个CSS过渡效果，‌当鼠标悬停在图片上时，‌图片会放大10%（‌scale(1.1)）‌。‌同时，‌我也为图片设置了transform-origin属性，‌以确保图片从中心开始放大。‌您可以根据需要调整动画的持续时间和其他参数。‌

方法六：WordPress相关文章推荐调用（带图带更好的动画效果）

为了创建更好的动画效果，‌我们可以使用CSS的@keyframes规则来定义一个更复杂的动画。‌以下是一个修改后的PHP代码示例，‌它结合了一个CSS关键帧动画来使相关文章的特色图片具有更吸引人的动态效果：‌

<?php  // 方法六：WordPress相关文章推荐调用（带图带更好的动画效果）
// 获取当前文章的标签
$tags = wp_get_post_tags($post->ID);

// 检查是否获取到了标签
if ($tags) {
    // 初始化一个空数组来存储标签的ID
    $tag_ids = array();

    // 遍历获取到的标签
    foreach ($tags as $individual_tag) {
        // 将每个标签的ID添加到$tag_ids数组中
        $tag_ids[] = $individual_tag->term_id;
    }

    // 构造查询参数
    $args = array(
        'post__not_in' => array($post->ID), // 排除当前文章
        'tag__in' => $tag_ids, // 查询具有这些标签的文章
        'posts_per_page' => 4, // 显示数量
    );

    // 执行查询
    $query = new WP_Query($args);

    // 检查是否查询到了相关文章
    if ($query->have_posts()) {
        // 开始输出相关文章的HTML结构
        echo '<div class="related-posts">';

        // 遍历查询到的文章
        while ($query->have_posts()) : $query->the_post();
            // 获取当前循环文章的特色图片
            $thumbnail = get_the_post_thumbnail(get_the_ID(), 'thumbnail');

            // 输出每篇文章的HTML结构，‌包括特色图片
            ?>
            <div class="related-item">
                <?php if ($thumbnail): ?>
                    <div class="related-thumbnail">
                        <?php echo $thumbnail; ?>
                    </div>
                <?php endif; ?>
                <div class="related-title">
                    <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
                </div>
            </div>
            <?php
        endwhile;

        // 结束输出相关文章的HTML结构
        echo '</div>';
    }

    // 重置查询，‌以避免影响后续的查询或循环
    wp_reset_query();
}
?>

<style>
/* 添加CSS关键帧动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.related-thumbnail img {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
    transform: translate3d(0, 100%, 0);
}

/* 当鼠标悬停时，‌可以添加另一个动画效果 */
.related-thumbnail img:hover {
    animation: none; /* 取消原有的动画 */
    transform: scale(1.05); /* 放大图片 */
    transition: transform 0.3s ease-in-out; /* 平滑的过渡效果 */
}
</style>

在这个版本中，‌我定义了一个名为fadeInUp的关键帧动画，‌它会使图片从下往上淡入。‌当鼠标悬停在图片上时，‌我取消了这个动画，‌并添加了一个放大效果，‌使图片稍微放大并创建一个更吸引人的交互体验。‌您可以根据需要调整动画的持续时间、‌延迟、‌迭代次数等属性。‌

发表回复