masbudikusuma/edukarsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(layout): menambahkan sidebar native dan layout 2 kolom pada single.php

Browse Source
This commit is contained in:
Mas Budi Kusuma
2026-09-15 21:08:52 +07:00
parent 937613ac25
commit 226e09f2b1
4 changed files with 177 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
inc/setup.php
+14 -4
View File
@@ -7,8 +7,6 @@
function edukarsa_setup() {
add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' );
// Pastikan tema mendukung excerpt (kutipan) untuk CPT yang baru dibuat
add_post_type_support( 'page', 'excerpt' );
register_nav_menus( array(
@@ -20,7 +18,6 @@ add_action( 'after_setup_theme', 'edukarsa_setup' );
// 2. MENGHUBUNGKAN ASET (CSS & JS FRONTEND)
function edukarsa_scripts() {
// Memaksa path absolut langsung ke folder tema
wp_enqueue_style(
'edukarsa-style',
get_template_directory_uri() . '/style.css',
@@ -33,9 +30,22 @@ add_action( 'wp_enqueue_scripts', 'edukarsa_scripts' );
// 3. MEMUAT JAVASCRIPT UNTUK MEDIA UPLOADER (DASHBOARD)
function edukarsa_admin_scripts( $hook ) {
// Memastikan skrip uploader dipanggil di halaman pengaturan Edukarsa[cite: 9]
if ( strpos( $hook, 'edukarsa' ) !== false ) {
wp_enqueue_media();
}
}
add_action( 'admin_enqueue_scripts', 'edukarsa_admin_scripts' );
// 4. REGISTRASI AREA WIDGET SIDEBAR
function edukarsa_widgets_init() {
register_sidebar( array(
'name' => __( 'Sidebar Artikel', 'edukarsa' ),
'id' => 'sidebar-artikel',
'description' => __( 'Area widget untuk halaman single berita/artikel.', 'edukarsa' ),
'before_widget' => '<div id="%1$s" class="card-style sidebar-widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="sidebar-widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'edukarsa_widgets_init' );
sidebar.php
+66
View File
@@ -0,0 +1,66 @@
<?php
/**
* Template Sidebar EduKarsa
*/
?>
<aside id="secondary" class="widget-area">
<?php if ( is_active_sidebar( 'sidebar-artikel' ) ) : ?>
<?php dynamic_sidebar( 'sidebar-artikel' ); ?>
<?php else : ?>
<!-- 1. Mini Banner CTA PPDB (Sinkron dengan Theme Settings) -->
<div class="card-style sidebar-widget text-center" style="background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: #fff;">
<h3 class="sidebar-widget-title" style="color: #fff; border-color: rgba(255,255,255,0.3);">Pendaftaran Mahasiswa</h3>
<p style="font-size: 14px; margin-bottom: 20px; opacity: 0.95;">
<?php echo esc_html( get_option('edukarsa_cta_title', 'Siap Bergabung Bersama Kami?') ); ?>
</p>
<a href="<?php echo esc_url( get_option('edukarsa_cta_btn_url', '#') ); ?>" class="btn-primary btn-light" style="padding: 10px 24px; font-size: 14px; display: inline-block;">
<?php echo esc_html( get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang') ); ?>
</a>
</div>
<!-- 2. Berita Terkini -->
<div class="card-style sidebar-widget">
<h3 class="sidebar-widget-title">Berita Terkini</h3>
<ul style="list-style: none; padding: 0; margin: 0;">
<?php
$recent_posts = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => 5,
'post__not_in' => array( get_the_ID() )
) );
if ( $recent_posts->have_posts() ) :
while ( $recent_posts->have_posts() ) : $recent_posts->the_post();
?>
<li style="margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9;">
<a href="<?php the_permalink(); ?>" style="color: var(--heading-color); font-weight: 700; font-size: 14px; line-height: 1.4; display: block; margin-bottom: 4px;">
<?php the_title(); ?>
</a>
<span style="font-size: 12px; color: #94a3b8;">📅 <?php echo get_the_date(); ?></span>
</li>
<?php
endwhile;
wp_reset_postdata();
else :
echo '<li style="font-size: 13px; color: #94a3b8;">Belum ada berita lainnya.</li>';
endif;
?>
</ul>
</div>
<!-- 3. Kategori Berita -->
<div class="card-style sidebar-widget">
<h3 class="sidebar-widget-title">Kategori</h3>
<ul style="list-style: none; padding: 0; margin: 0; font-size: 14px;">
<?php
$categories = get_categories();
foreach ( $categories as $category ) {
echo '<li style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">';
echo '<a href="' . esc_url( get_category_link( $category->term_id ) ) . '" style="color: #64748b; font-weight: 500;">' . esc_html( $category->name ) . '</a>';
echo '<span style="background: #f1f5f9; padding: 2px 8px; border-radius: 20px; font-size: 12px; color: var(--primary-color); font-weight: bold;">' . $category->count . '</span>';
echo '</li>';
}
?>
</ul>
</div>
<?php endif; ?>
</aside>
single.php
+25 -14
View File
@@ -1,38 +1,42 @@
<?php
/**
* Template untuk menampilkan satu artikel/postingan penuh.
* Template untuk menampilkan satu artikel/postingan penuh dengan Sidebar.
*/
get_header();
?>
<main id="primary" class="site-main" style="padding: 60px 20px; max-width: 900px; margin: 0 auto; min-height: 70vh;">
<main id="primary" class="site-main" style="padding: 50px 0; min-height: 75vh; background-color: #f8fafc;">
<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();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'card-style' ); ?> style="padding: 40px;">
<header class="entry-header text-center" style="margin-bottom: 30px;">
<h1 class="entry-title" style="color: var(--heading-color); margin-bottom: 15px; font-weight: 800; font-size: 32px;">
<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;">
<span style="margin-right: 15px;">📅 <?php echo get_the_date(); ?></span>
<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>
<?php endif; ?>
</div>
</header>
<?php if ( has_post_thumbnail() ) : ?>
<div class="post-thumbnail" style="margin-bottom: 40px; border-radius: var(--radius); overflow: hidden;">
<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>
<?php endif; ?>
<div class="entry-content" style="line-height: 1.8; color: var(--text-color); font-size: 16px;">
<div class="entry-content" style="line-height: 1.85; color: var(--text-color); font-size: 16px;">
<?php
the_content();
// Paginasi jika artikel dipecah menjadi beberapa halaman dengan tag <!--nextpage-->
wp_link_pages( array(
'before' => '<div class="page-links" style="margin-top: 30px; font-weight: bold;">' . esc_html__( 'Halaman:', 'edukarsa' ),
'after' => '</div>',
@@ -40,16 +44,23 @@ get_header();
?>
</div>
<footer class="entry-footer" style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; text-align: center;">
<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">
&laquo; Kembali ke Daftar Berita
</a>
<div class="post-tags" style="font-size: 13px;">
<?php the_tags( '<span style="color:#64748b;">Tag: </span>', ', ', '' ); ?>
</div>
</footer>
</article>
<?php
endwhile;
?>
</article>
<!-- Kolom Sidebar -->
<?php get_sidebar(); ?>
</div>
</main>
<?php
style.css
+7
View File
@@ -167,3 +167,10 @@ a { text-decoration: none; color: var(--primary-color); transition: 0.3s; }
.edukarsa-stats { margin-top: -40px; }
.img-wrapper-slider { height: 400px; }
}
/* 10. SINGLE & SIDEBAR LAYOUT */
.single-layout-wrapper { display: grid; grid-template-columns: 2.5fr 1fr; gap: 35px; align-items: start; }
.sidebar-widget { padding: 25px; margin-bottom: 25px; }
.sidebar-widget-title { font-size: 18px; font-weight: 800; color: var(--heading-color); margin-bottom: 18px; border-bottom: 2px solid var(--primary-color); padding-bottom: 8px; }
@media (max-width: 992px) {
.single-layout-wrapper { grid-template-columns: 1fr; }
}