update
This commit is contained in:
+216
-39
@@ -1,6 +1,15 @@
|
||||
<?php
|
||||
/**
|
||||
* The template for displaying all single posts
|
||||
* The template for displaying single posts
|
||||
*
|
||||
* Features:
|
||||
* – Full-width hero featured image with title overlay
|
||||
* – Reading progress bar (filled by reading-progress.ts)
|
||||
* – Auto-generated TOC (filled by toc.ts)
|
||||
* – Author bio card
|
||||
* – Related posts (same category)
|
||||
* – Social share buttons (no third-party SDK)
|
||||
* – Breadcrumb, prev/next navigation, comments
|
||||
*
|
||||
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
|
||||
*
|
||||
@@ -9,56 +18,224 @@
|
||||
|
||||
get_header();
|
||||
?>
|
||||
<br>
|
||||
<div class="notification is-primary">
|
||||
欢迎来到这！ <strong>Hello everyone.</strong>
|
||||
</div>
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" >
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-home" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span>首页</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span>文章页</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Reading progress bar -->
|
||||
<div id="reading-progress" class="reading-progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="<?php esc_attr_e( '阅读进度', 'cyywordpress' ); ?>">
|
||||
<div class="reading-progress__bar"></div>
|
||||
</div>
|
||||
|
||||
<main id="primary" class="site-main">
|
||||
<div id="primary" class="content-area">
|
||||
<main id="main" class="site-main" role="main">
|
||||
|
||||
<nav class="breadcrumb" aria-label="<?php esc_attr_e( '面包屑导航', 'cyywordpress' ); ?>">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
|
||||
<span class="icon is-small"><i class="fa-solid fa-house" aria-hidden="true"></i></span>
|
||||
<span><?php esc_html_e( '首页', 'cyywordpress' ); ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="#" aria-current="page">
|
||||
<span class="icon is-small"><i class="fa-solid fa-file-lines" aria-hidden="true"></i></span>
|
||||
<span><?php esc_html_e( '文章', 'cyywordpress' ); ?></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<?php
|
||||
while ( have_posts() ) :
|
||||
the_post();
|
||||
?>
|
||||
|
||||
get_template_part( 'template-parts/content', get_post_type() );
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<div class="single-hero">
|
||||
<?php
|
||||
the_post_thumbnail(
|
||||
'full',
|
||||
array(
|
||||
'class' => 'single-hero__image',
|
||||
'loading' => 'eager',
|
||||
'decoding'=> 'async',
|
||||
'alt' => the_title_attribute( array( 'echo' => false ) ),
|
||||
)
|
||||
);
|
||||
?>
|
||||
<div class="single-hero__overlay">
|
||||
<?php the_title( '<h1 class="single-hero__title">', '</h1>' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
the_post_navigation(
|
||||
array(
|
||||
'prev_text' => '<span class="nav-subtitle">' . esc_html__( '上一篇:', 'cyywordpress' ) . '</span> <span class="nav-title">%title</span>',
|
||||
'next_text' => '<span class="nav-subtitle">' . esc_html__( '下一篇:', 'cyywordpress' ) . '</span> <span class="nav-title">%title</span>',
|
||||
)
|
||||
);
|
||||
<div class="columns single-layout">
|
||||
<!-- TOC sidebar (populated by toc.ts) -->
|
||||
<aside class="column is-3-desktop is-hidden-touch single-toc" aria-label="<?php esc_attr_e( '目录', 'cyywordpress' ); ?>">
|
||||
<div id="toc" class="toc card">
|
||||
<div class="card-header">
|
||||
<p class="card-header-title">
|
||||
<i class="fa-solid fa-list" aria-hidden="true"></i>
|
||||
<?php esc_html_e( '目录', 'cyywordpress' ); ?>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-content" id="toc-list"></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
// If comments are open or we have at least one comment, load up the comment template.
|
||||
if ( comments_open() || get_comments_number() ) :
|
||||
comments_template();
|
||||
endif;
|
||||
<!-- Main article column -->
|
||||
<div class="column is-9-desktop single-article">
|
||||
<?php get_template_part( 'template-parts/content', get_post_type() ); ?>
|
||||
|
||||
endwhile; // End of the loop.
|
||||
?>
|
||||
<!-- Social share -->
|
||||
<div class="social-share">
|
||||
<span class="social-share__label"><?php esc_html_e( '分享：', 'cyywordpress' ); ?></span>
|
||||
<a
|
||||
class="social-share__btn social-share__btn--weibo"
|
||||
href="<?php echo esc_url( 'https://service.weibo.com/share/share.php?url=' . rawurlencode( get_permalink() ) . '&title=' . rawurlencode( get_the_title() ) ); ?>"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="<?php esc_attr_e( '分享到微博', 'cyywordpress' ); ?>"
|
||||
>
|
||||
<i class="fa-brands fa-weibo" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a
|
||||
class="social-share__btn social-share__btn--twitter"
|
||||
href="<?php echo esc_url( 'https://twitter.com/intent/tweet?url=' . rawurlencode( get_permalink() ) . '&text=' . rawurlencode( get_the_title() ) ); ?>"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="<?php esc_attr_e( '分享到 Twitter', 'cyywordpress' ); ?>"
|
||||
>
|
||||
<i class="fa-brands fa-x-twitter" aria-hidden="true"></i>
|
||||
</a>
|
||||
<button
|
||||
class="social-share__btn social-share__btn--copy"
|
||||
data-url="<?php echo esc_attr( get_permalink() ); ?>"
|
||||
aria-label="<?php esc_attr_e( '复制链接', 'cyywordpress' ); ?>"
|
||||
>
|
||||
<i class="fa-solid fa-link" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Post navigation -->
|
||||
<?php
|
||||
the_post_navigation(
|
||||
array(
|
||||
'prev_text' => '<span class="nav-subtitle"><i class="fa-solid fa-chevron-left" aria-hidden="true"></i> ' . esc_html__( '上一篇', 'cyywordpress' ) . '</span><span class="nav-title">%title</span>',
|
||||
'next_text' => '<span class="nav-subtitle">' . esc_html__( '下一篇', 'cyywordpress' ) . ' <i class="fa-solid fa-chevron-right" aria-hidden="true"></i></span><span class="nav-title">%title</span>',
|
||||
)
|
||||
);
|
||||
?>
|
||||
|
||||
<!-- Author bio -->
|
||||
<?php
|
||||
$author_id = (int) get_the_author_meta( 'ID' );
|
||||
$author_bio = get_the_author_meta( 'description' );
|
||||
if ( $author_bio ) :
|
||||
?>
|
||||
<div class="author-bio card">
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<?php
|
||||
echo get_avatar(
|
||||
$author_id,
|
||||
80,
|
||||
'',
|
||||
get_the_author(),
|
||||
array(
|
||||
'class' => 'author-bio__avatar',
|
||||
'loading' => 'lazy',
|
||||
)
|
||||
);
|
||||
?>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<a class="author-bio__name title is-5" href="<?php echo esc_url( get_author_posts_url( $author_id ) ); ?>">
|
||||
<?php echo esc_html( get_the_author() ); ?>
|
||||
</a>
|
||||
<p class="author-bio__description"><?php echo esc_html( $author_bio ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- .author-bio -->
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Related posts (same first category) -->
|
||||
<?php
|
||||
$cats = get_the_category();
|
||||
if ( $cats ) :
|
||||
$related = get_posts(
|
||||
array(
|
||||
'category__in' => array( $cats[0]->term_id ),
|
||||
'post__not_in' => array( get_the_ID() ),
|
||||
'posts_per_page' => 3,
|
||||
'orderby' => 'rand',
|
||||
)
|
||||
);
|
||||
|
||||
if ( $related ) :
|
||||
?>
|
||||
<div class="related-posts">
|
||||
<h3 class="related-posts__title title is-5">
|
||||
<?php esc_html_e( '相关文章', 'cyywordpress' ); ?>
|
||||
</h3>
|
||||
<div class="columns is-multiline">
|
||||
<?php
|
||||
foreach ( $related as $related_post ) :
|
||||
setup_postdata( $related_post );
|
||||
?>
|
||||
<div class="column is-4">
|
||||
<div class="card related-post-card">
|
||||
<?php if ( has_post_thumbnail( $related_post ) ) : ?>
|
||||
<div class="card-image">
|
||||
<figure class="image is-16by9">
|
||||
<?php
|
||||
echo get_the_post_thumbnail(
|
||||
$related_post,
|
||||
'card-thumbnail-sm',
|
||||
array(
|
||||
'loading' => 'lazy',
|
||||
'decoding' => 'async',
|
||||
'class' => 'related-post-card__image',
|
||||
'alt' => esc_attr( get_the_title( $related_post ) ),
|
||||
)
|
||||
);
|
||||
?>
|
||||
</figure>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="card-content">
|
||||
<a class="related-post-card__title" href="<?php echo esc_url( get_permalink( $related_post ) ); ?>">
|
||||
<?php echo esc_html( get_the_title( $related_post ) ); ?>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
endforeach;
|
||||
wp_reset_postdata();
|
||||
?>
|
||||
</div><!-- .columns -->
|
||||
</div><!-- .related-posts -->
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Comments -->
|
||||
<?php
|
||||
if ( comments_open() || get_comments_number() ) :
|
||||
comments_template();
|
||||
endif;
|
||||
?>
|
||||
|
||||
</div><!-- .single-article -->
|
||||
</div><!-- .columns.single-layout -->
|
||||
|
||||
<?php endwhile; ?>
|
||||
|
||||
</main><!-- #main -->
|
||||
</div><!-- #primary -->
|
||||
|
||||
<?php
|
||||
get_sidebar();
|
||||
get_footer();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user