feat(single-sidebar-seo): custom dashboard sidebar, intra & inter-post paging, dan native schema seo
This commit is contained in:
Mas Budi Kusuma
+123
-46
@@ -1,64 +1,141 @@
|
||||
<?php
|
||||
/**
|
||||
* Template untuk menampilkan satu artikel/postingan penuh dengan Sidebar.
|
||||
* Template Baca Artikel Penuh (Single Post) EduKarsa
|
||||
* Dilengkapi Breadcrumbs, Intra-post Paging, Inter-post Paging, dan Native Social Share
|
||||
*/
|
||||
get_header();
|
||||
?>
|
||||
|
||||
<main id="primary" class="site-main" style="padding: 50px 0; min-height: 75vh; background-color: #f8fafc;">
|
||||
<main id="primary" class="site-main" style="padding: 45px 0 70px; background-color: #f8fafc; min-height: 75vh;">
|
||||
<div class="container single-layout-wrapper">
|
||||
|
||||
<!-- Kolom Konten Utama -->
|
||||
<article id="post-<?php the_ID(); ?>" <?php post_class( 'card-style' ); ?> style="padding: 40px;">
|
||||
<?php
|
||||
while ( have_posts() ) :
|
||||
the_post();
|
||||
?>
|
||||
<header class="entry-header" style="margin-bottom: 25px;">
|
||||
<h1 class="entry-title" style="color: var(--heading-color); margin-bottom: 15px; font-weight: 800; font-size: 30px; line-height: 1.3;">
|
||||
<?php the_title(); ?>
|
||||
</h1>
|
||||
<div class="entry-meta" style="color: #64748b; font-size: 14px; display: flex; gap: 20px; flex-wrap: wrap;">
|
||||
<span>📅 <?php echo get_the_date(); ?></span>
|
||||
<span>👤 <?php the_author(); ?></span>
|
||||
<?php if ( has_category() ) : ?>
|
||||
<span>📁 <?php the_category( ', ' ); ?></span>
|
||||
<!-- KOLOM KONTEN UTAMA -->
|
||||
<div class="single-content-column">
|
||||
|
||||
<?php while ( have_posts() ) : the_post(); ?>
|
||||
|
||||
<!-- BREADCRUMBS NATIVE -->
|
||||
<nav class="edukarsa-breadcrumbs" aria-label="Breadcrumb">
|
||||
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">Beranda</a>
|
||||
<span class="bc-sep">/</span>
|
||||
<?php
|
||||
$categories = get_the_category();
|
||||
if ( ! empty( $categories ) ) {
|
||||
echo '<a href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">' . esc_html( $categories[0]->name ) . '</a>';
|
||||
echo '<span class="bc-sep">/</span>';
|
||||
}
|
||||
?>
|
||||
<span class="bc-current"><?php the_title(); ?></span>
|
||||
</nav>
|
||||
|
||||
<article id="post-<?php the_ID(); ?>" <?php post_class( 'card-style single-article-card' ); ?>>
|
||||
|
||||
<!-- HEADER ARTIKEL -->
|
||||
<header class="entry-header">
|
||||
<?php if ( ! empty( $categories ) ) : ?>
|
||||
<span class="badge-title"><?php echo esc_html( $categories[0]->name ); ?></span>
|
||||
<?php endif; ?>
|
||||
|
||||
<h1 class="single-article-title">
|
||||
<?php the_title(); ?>
|
||||
</h1>
|
||||
|
||||
<div class="single-meta-bar">
|
||||
<span>📅 <?php echo get_the_date( 'l, d F Y' ); ?></span>
|
||||
<span>👤 <?php the_author(); ?></span>
|
||||
<span>⏱️ <?php echo ceil( str_word_count( strip_tags( get_the_content() ) ) / 200 ); ?> Menit Baca</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- GAMBAR UTAMA DENGAN CAPTION -->
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<div class="single-featured-image">
|
||||
<?php the_post_thumbnail( 'full' ); ?>
|
||||
<?php if ( get_the_post_thumbnail_caption() ) : ?>
|
||||
<figcaption class="img-caption"><?php the_post_thumbnail_caption(); ?></figcaption>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- ISI ARTIKEL UTAMA -->
|
||||
<div class="entry-content">
|
||||
<?php
|
||||
the_content();
|
||||
|
||||
// 1. INTRA-POST PAGINATION (Jika artikel dipecah dengan tag <!--nextpage-->)
|
||||
wp_link_pages( array(
|
||||
'before' => '<div class="intra-post-pagination"><span class="page-links-title">' . __( 'Halaman Artikel:', 'edukarsa' ) . '</span>',
|
||||
'after' => '</div>',
|
||||
'link_before' => '<span class="page-number-box">',
|
||||
'link_after' => '</span>',
|
||||
) );
|
||||
?>
|
||||
</div>
|
||||
|
||||
<!-- TAGS & BAGIKAN ARTIKEL -->
|
||||
<div class="single-article-footer">
|
||||
<div class="single-tags-list">
|
||||
<?php the_tags( '<span class="tag-label">Topik Terkait:</span> ', ' ', '' ); ?>
|
||||
</div>
|
||||
|
||||
<!-- Native Share Buttons (No Plugin) -->
|
||||
<div class="single-share-bar">
|
||||
<span class="share-label">Bagikan:</span>
|
||||
<?php
|
||||
$share_url = rawurlencode( get_permalink() );
|
||||
$share_title = rawurlencode( get_the_title() );
|
||||
?>
|
||||
<a href="https://wa.me/?text=<?php echo $share_title . '%20' . $share_url; ?>" target="_blank" rel="noopener" class="share-btn share-wa" title="Bagikan ke WhatsApp">WhatsApp</a>
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $share_url; ?>" target="_blank" rel="noopener" class="share-btn share-fb" title="Bagikan ke Facebook">Facebook</a>
|
||||
<a href="https://twitter.com/intent/tweet?text=<?php echo $share_title; ?>&url=<?php echo $share_url; ?>" target="_blank" rel="noopener" class="share-btn share-tw" title="Bagikan ke X">X / Twitter</a>
|
||||
<button type="button" class="share-btn share-copy" onclick="navigator.clipboard.writeText('<?php echo esc_js( get_permalink() ); ?>'); alert('Tautan artikel berhasil disalin!');">Salin Tautan</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
<!-- 2. INTER-POST PAGINATION (Navigasi Berita Sebelumnya & Selanjutnya) -->
|
||||
<nav class="inter-post-nav">
|
||||
<?php
|
||||
$prev_post = get_previous_post();
|
||||
$next_post = get_next_post();
|
||||
?>
|
||||
|
||||
<div class="nav-box nav-box-prev card-style <?php echo empty($prev_post) ? 'disabled' : ''; ?>">
|
||||
<?php if ( ! empty( $prev_post ) ) : ?>
|
||||
<a href="<?php echo esc_url( get_permalink( $prev_post->ID ) ); ?>" class="nav-box-link">
|
||||
<span class="nav-direction">« Artikel Sebelumnya</span>
|
||||
<h4 class="nav-post-title"><?php echo esc_html( wp_trim_words( $prev_post->post_title, 9, '...' ) ); ?></h4>
|
||||
</a>
|
||||
<?php else : ?>
|
||||
<span class="nav-direction">« Paling Awal</span>
|
||||
<h4 class="nav-post-title" style="color:#94a3b8;">Tidak ada artikel sebelumnya</h4>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<div class="post-thumbnail" style="margin-bottom: 30px; border-radius: var(--radius); overflow: hidden;">
|
||||
<?php the_post_thumbnail( 'full', array( 'style' => 'width: 100%; height: auto; display: block;' ) ); ?>
|
||||
<div class="nav-box nav-box-next card-style <?php echo empty($next_post) ? 'disabled' : ''; ?>">
|
||||
<?php if ( ! empty( $next_post ) ) : ?>
|
||||
<a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>" class="nav-box-link text-right">
|
||||
<span class="nav-direction">Artikel Selanjutnya »</span>
|
||||
<h4 class="nav-post-title"><?php echo esc_html( wp_trim_words( $next_post->post_title, 9, '...' ) ); ?></h4>
|
||||
</a>
|
||||
<?php else : ?>
|
||||
<div class="text-right">
|
||||
<span class="nav-direction">Paling Akhir »</span>
|
||||
<h4 class="nav-post-title" style="color:#94a3b8;">Tidak ada artikel selanjutnya</h4>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</nav>
|
||||
|
||||
<div class="entry-content" style="line-height: 1.85; color: var(--text-color); font-size: 16px;">
|
||||
<?php
|
||||
the_content();
|
||||
<?php endwhile; ?>
|
||||
|
||||
wp_link_pages( array(
|
||||
'before' => '<div class="page-links" style="margin-top: 30px; font-weight: bold;">' . esc_html__( 'Halaman:', 'edukarsa' ),
|
||||
'after' => '</div>',
|
||||
) );
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="entry-footer" style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;">
|
||||
<a href="<?php echo esc_url( get_permalink( get_option( 'page_for_posts' ) ) ); ?>" class="btn-outline-primary">
|
||||
« Kembali ke Daftar Berita
|
||||
</a>
|
||||
<div class="post-tags" style="font-size: 13px;">
|
||||
<?php the_tags( '<span style="color:#64748b;">Tag: </span>', ', ', '' ); ?>
|
||||
</div>
|
||||
</footer>
|
||||
<?php
|
||||
endwhile;
|
||||
?>
|
||||
</article>
|
||||
|
||||
<!-- Kolom Sidebar -->
|
||||
<?php get_sidebar(); ?>
|
||||
<!-- KOLOM SIDEBAR DINAMIS -->
|
||||
<div class="single-sidebar-column">
|
||||
<?php get_sidebar(); ?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user