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主题 »

