You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

303 lines
11 KiB

<?php
/**
* 案例详情页模板
* Template for displaying case content
*/
// 防止直接访问
if (!defined('ABSPATH')) {
exit;
}
get_header();
?>
<div class="page-full-width">
<div class="row">
<div class="col-md-12">
<?php echo do_shortcode('[nenghui_banner_title bg_image="https://nenghui.com/wp-content/uploads/2025/07/cases-bg.webp" title="cases" description="Nenghui Energy Cases" overlay_opacity="0.5"]'); ?>
<div class="case-content-wrapper">
<div class="container">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('case-single'); ?>>
<!-- 案例标题 -->
<header class="case-header">
<div class="row">
<div class="col-12">
<h1 class="case-title"><?php the_title(); ?></h1>
<!-- 发布日期 -->
<div class="case-meta text-muted mb-4">
<i class="fas fa-calendar-alt me-2"></i>
<time datetime="<?php echo get_the_date('c'); ?>">
<?php echo date('F j, Y', get_the_time('U')); ?>
</time>
</div>
</div>
</div>
</header>
<!-- 案例内容 -->
<div class="case-content">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="content-body">
<?php the_content(); ?>
</div>
<!-- 分页导航(用于多页文章) -->
<?php
wp_link_pages(array(
'before' => '<div class="page-links mt-4"><span class="page-links-title">页面:</span>',
'after' => '</div>',
'link_before' => '<span class="page-number">',
'link_after' => '</span>',
));
?>
</div>
</div>
</div>
<!-- 案例导航 -->
<nav class="case-navigation mt-5 pt-4 border-top">
<div class="row">
<div class="col-md-6">
<?php
$prev_post = get_previous_post(true, '', 'case_category');
if ($prev_post) :
?>
<div class="nav-previous">
<a href="<?php echo get_permalink($prev_post->ID); ?>" class="btn btn-outline-primary">
<i class="fas fa-chevron-left me-2"></i>
Previous case Study
</a>
<div class="nav-title mt-2">
<small class="text-muted"><?php echo get_the_title($prev_post->ID); ?></small>
</div>
</div>
<?php endif; ?>
</div>
<div class="col-md-6 text-md-end">
<?php
$next_post = get_next_post(true, '', 'case_category');
if ($next_post) :
?>
<div class="nav-next">
<a href="<?php echo get_permalink($next_post->ID); ?>" class="btn btn-outline-primary">
Next Case Study
<i class="fas fa-chevron-right ms-2"></i>
</a>
<div class="nav-title mt-2">
<small class="text-muted"><?php echo get_the_title($next_post->ID); ?></small>
</div>
</div>
<?php endif; ?>
</div>
</div>
</nav>
<!-- 相关案例 -->
<?php
// 获取相关案例(同分类)
$categories = get_the_terms(get_the_ID(), 'case_category');
if ($categories && !is_wp_error($categories)) :
$category_ids = wp_list_pluck($categories, 'term_id');
$related_args = array(
'post_type' => 'cases',
'post_status' => 'publish',
'posts_per_page' => 3,
'post__not_in' => array(get_the_ID()),
'tax_query' => array(
array(
'taxonomy' => 'case_category',
'field' => 'term_id',
'terms' => $category_ids,
'operator' => 'IN'
)
),
'orderby' => 'rand'
);
$related_query = new WP_Query($related_args);
if ($related_query->have_posts()) :
?>
<?php
endif;
wp_reset_postdata();
endif;
?>
</article>
<?php endwhile; ?>
<?php else : ?>
<div class="row">
<div class="col-12">
<div class="alert alert-warning text-center" role="alert">
<h4>案例未找到</h4>
<p>抱歉,您要查看的案例不存在或已被删除。</p>
<a href="<?php echo home_url(); ?>" class="btn btn-primary">返回首页</a>
</div>
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
<style>
.case-content-wrapper {
width: 100%;
padding: 60px 0;
background-color: #f8f9fa;
}
.case-content-wrapper .container {
width: 80%;
max-width: none;
margin: 0 auto;
padding: 0 20px;
}
.case-single {
background: white;
border-radius: 10px;
padding: 40px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.case-title {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 20px;
line-height: 1.2;
}
.case-meta {
font-size: 1rem;
}
.content-body {
font-size: 1.1rem;
line-height: 1.8;
color: #444;
}
.content-body h2,
.content-body h3,
.content-body h4 {
color: #2c3e50;
margin-top: 2rem;
margin-bottom: 1rem;
}
.content-body p {
margin-bottom: 1.5rem;
}
.content-body img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 20px 0;
}
.case-navigation {
margin-top: 3rem;
}
.nav-title {
max-width: 200px;
}
.related-cases {
margin-top: 3rem;
}
.section-title {
font-size: 1.8rem;
font-weight: 600;
color: #2c3e50;
}
.related-case-card .card {
border: none;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.related-case-card .card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.card-img-top-wrapper {
overflow: hidden;
height: 200px;
}
.card-img-top {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.card-img-top-wrapper:hover .card-img-top {
transform: scale(1.05);
transition: all 0.3s ease;
}
.page-links {
text-align: center;
padding: 20px 0;
}
.page-links .page-number {
display: inline-block;
padding: 8px 12px;
margin: 0 5px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.page-links .page-number:hover {
background-color: #0069a0;
color: white;
border-color: #0069a0;
transition: all 0.3s ease;
}
/* 响应式设计 */
@media (max-width: 768px) {
.case-content-wrapper .container {
width: 100%;
padding: 0 15px;
}
.case-single {
padding: 20px;
}
.case-title {
font-size: 2rem;
}
.content-body {
font-size: 1rem;
}
.case-navigation .col-md-6:first-child {
margin-bottom: 20px;
}
}
</style>
<?php get_footer(); ?>