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

1.首页幻灯调用
1.1 建立专门的幻灯栏目,用于调用幻灯信息
属于文章信息调用,结合下面的信息调用制作
最常见的方式 也是最简单的方式
<!-- 轮播图区域 --> <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首页调用
<?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或名称来获取文章。
<?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中用于获取文章的核心函数。它接受一个数组作为参数,用于指定查询条件。
<?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获取分类对象,然后遍历该分类下的文章。
<?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
<?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
<?php $post = get_post(123); if ($post) { echo '<h2>' . $post->post_title . '</h2>'; echo '<p>' . $post->post_content . '</p>'; } ?>
下一篇: 12搜索调用–新手小白,快速使用静态页面建立wordpress主题 »