欢迎访问我们的网站

选择语言

  • English
  • 简体中文
  • 日本語
  • 한국어
  • Français
  • Deutsch
  • Español
  • Português
  • Italiano
  • Русский
  • العربية
  • Nederlands
  • Türkçe
  • Polski
  • Svenska
  • Dansk

WordPress系列

11首页信息调用–新手小白,快速使用静态页面建立wordpress主题

22.09.2025 21

1.首页幻灯调用
1.1 建立专门的幻灯栏目,用于调用幻灯信息
属于文章信息调用,结合下面的信息调用制作
最常见的方式 也是最简单的方式

TEXT
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
 <!-- 轮播图区域 -->
    <section class="hero-slider">
        <div class="slider-container">
            <?php
            // 调用别名为 home-hd 的栏目信息
            $home_slider_query = new WP_Query(array(
                'post_type' => 'post',
                'post_status' => 'publish',
                'category_name' => 'home-hd',
                'posts_per_page' => 5
            ));
            
            if ($home_slider_query->have_posts()) :
                $slide_index = 0;
                while ($home_slider_query->have_posts()) : $home_slider_query->the_post();
                    $thumbnail_url = get_the_post_thumbnail_url(get_the_ID(), 'full');
                    if (!$thumbnail_url) {
                        $thumbnail_url = get_template_directory_uri() . '/lycss/img/01.jpg'; // 默认图片
                    }
            ?>
            <div class="slide <?php echo $slide_index === 0 ? 'active' : ''; ?>" style="background-image: url('<?php echo esc_url($thumbnail_url); ?>');">
                <div class="slide-content">
                    <h2><?php the_title(); ?></h2>
                    <p><?php echo wp_trim_words(get_the_excerpt(), 20); ?></p>
                    <a href="<?php the_permalink(); ?>" class="btn">立即学习</a>
                </div>
            </div>
            <?php
                    $slide_index++;
                endwhile;
                wp_reset_postdata();
            else :
            ?>
            <div>暂无数据</div>
            <?php endif; ?>
        </div>
        <div class="slider-controls">
            <button class="prev-slide"><i class="fas fa-chevron-left"></i></button>
            <div class="slider-dots">
                <?php for ($i = 0; $i < $home_slider_query->post_count; $i++) : ?>
                <span class="dot <?php echo $i === 0 ? 'active' : ''; ?>" data-slide="<?php echo $i; ?>"></span>
                <?php endfor; ?>
            </div>
            <button class="next-slide"><i class="fas fa-chevron-right"></i></button>
        </div>
    </section>

1.2创建一个小工具,在小工具里面进行幻灯调用
单独的一个小工具课程讲解

1.3创建一个单页,在单页里面进行幻灯调用
使用SCF插件,进行调用

2.信息列表调用–不一定是放在首页

2.1首页调用

TEXT
123456789101112131415161718192021222324252627282930313233343536373839
<?php 
$latest_tutorials = new WP_Query(array(
    'post_type' => 'post',
    'posts_per_page' => 4,
    'category_name' => 'dlzxl'//栏目别名,分类别名,
));

if ($latest_tutorials->have_posts()) :
    while ($latest_tutorials->have_posts()) : $latest_tutorials->the_post();
        $categories = get_the_category();
        $category_name = !empty($categories) ? $categories[0]->name : 'Uncategorized';
?>
                <div class="tutorial-card">
                    <div class="tutorial-image">
                        <?php if (has_post_thumbnail()) : ?>
                            <?php the_post_thumbnail('medium', array('alt' => get_the_title())); ?>
                        <?php else : ?>
                            <img src="<?php echo get_template_directory_uri(); ?>/lycss/img/tyimg.jpg" alt="<?php the_title(); ?>">
                        <?php endif; ?>
                        <div class="tutorial-category"><?php echo esc_html($category_name); ?></div>
                    </div>
                    <div class="tutorial-content">
                        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                        <div class="tutorial-meta">
                            <span><i class="far fa-calendar"></i> <?php echo get_the_date(); ?></span>
                            
                        </div>
                        <p><?php echo wp_trim_words(get_the_excerpt(), 30); ?></p>
                        <a href="<?php the_permalink(); ?>" class="read-more">阅读更多</a>
                    </div>
                </div>
<?php 
    endwhile;
    wp_reset_postdata();
else :
?>
                <p>暂无教程内容</p>
<?php endif; ?>

2.2调用方法

2.2.1使用WP_Query
WP_Query是WordPress中用于查询数据库的核心类。你可以通过它来指定分类ID或名称来获取文章。

TEXT
123456789101112131415161718192021
<?php
// 假设我们要获取分类ID为15的文章
$args = array(
    'cat' => 15, // 分类ID
    'posts_per_page' => 5 // 每页文章数,可以根据需要调整
);
 
$query = new WP_Query($args);
 
if ($query->have_posts()) {
    while ($query->have_posts()) {
        $query->the_post();
        // 在这里输出文章内容
        the_title('<h2>', '</h2>'); // 输出文章标题
        the_excerpt(); // 输出文章摘要
    }
    wp_reset_postdata(); // 重置post data以避免与其他查询冲突
} else {
    echo '没有找到文章。';
}
?>

2.2.2使用get_posts函数
get_posts函数是WordPress中用于获取文章的核心函数。它接受一个数组作为参数,用于指定查询条件。

TEXT
1234567891011121314151617181920212223
<?php
$args = array(
    'post_type' => 'post', // 获取文章
    'posts_per_page' => 5, // 获取5篇文章
    'orderby' => 'date', // 按日期排序
    'order' => 'DESC' // 降序排列
);
 
$query = new WP_Query($args);
 
if ($query->have_posts()) {
    while ($query->have_posts()) {  
        $query->the_post();      
?>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <p><?php the_excerpt(); ?></p>
<?php
    }
    wp_reset_postdata();    
} else {
    echo '没有找到文章。';
}
?>

2.2.3使用get_category和循环wp_list_categories(如果你的目的是列出分类下的文章)
如果你只是想列出某个分类下的所有文章,可以直接使用get_category获取分类对象,然后遍历该分类下的文章。

TEXT
1234567891011121314151617
<?php
$category = get_category(15); // 获取分类ID为15的分类对象
if (!empty($category->name)) { // 检查分类是否存在
    echo '<h2>分类: ' . $category->name . '</h2>'; // 输出分类名称
    $category_posts = get_posts(array(
        'category__in' => array($category->term_id), // 使用分类的term_id进行查询
        'numberposts' => -1 // 获取所有文章,或者指定数量
    ));
    foreach ($category_posts as $post) {
        setup_postdata($post); // 设置全局post数据
        the_title('<h3>', '</h3>'); // 输出文章标题
        the_excerpt(); // 输出文章摘要
    }
} else {
    echo '指定的分类不存在。';
}
?>

3.单独信息调用跟列表信息调用相似

3.1单独信息调用
3.1.1使用WP_Query

TEXT
12345678910111213141516171819202122
<?php
$args = array(
    'p' => 1, // 文章ID
    'posts_per_page' => 1 // 显示的文章数量
);
 
$the_query = new WP_Query( $args );
 
if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
        ?>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <?php the_content(); ?>
        <?php
    }
    wp_reset_postdata(); // 重置查询后必须调用
} else {
    // 没有文章时的处理
    echo '没有找到文章';
}
?>

3.1.2使用get_post

TEXT
1234567
<?php
$post = get_post(123);
if ($post) {
    echo '<h2>' . $post->post_title . '</h2>';
    echo '<p>' . $post->post_content . '</p>';
}
?>      

微信二维码
抖音二维码