feat(single-sidebar-seo): custom dashboard sidebar, intra & inter-post paging, dan native schema seo
This commit is contained in:
Mas Budi Kusuma
+17
-15
@@ -1,15 +1,17 @@
|
||||
<?php
|
||||
/**
|
||||
* File ini sekarang hanya berfungsi sebagai 'Router/Loader'.
|
||||
* Semua fungsi inti dipecah ke dalam folder 'inc' agar rapi.
|
||||
*/
|
||||
|
||||
// 1. Memuat Pengaturan Dasar Tema & Aset
|
||||
require_once get_template_directory() . '/inc/setup.php';
|
||||
|
||||
// 2. Memuat Custom Post Type (Slider, dll)
|
||||
require_once get_template_directory() . '/inc/cpt-slider.php';
|
||||
|
||||
// 3. Memuat Panel Menu EduKarsa & Pengaturan
|
||||
require_once get_template_directory() . '/inc/admin-menu.php';
|
||||
|
||||
<?php
|
||||
/**
|
||||
* File Loader / Router Tema EduKarsa
|
||||
* Seluruh logika modular ditempatkan di folder inc/
|
||||
*/
|
||||
|
||||
// 1. Memuat Pengaturan Dasar Tema & Aset
|
||||
require_once get_template_directory() . '/inc/setup.php';
|
||||
|
||||
// 2. Memuat Custom Post Type Native
|
||||
require_once get_template_directory() . '/inc/cpt-slider.php';
|
||||
|
||||
// 3. Memuat Panel Menu EduKarsa & Settings API
|
||||
require_once get_template_directory() . '/inc/admin-menu.php';
|
||||
|
||||
// 4. Memuat Native SEO & Structured Data (JSON-LD)
|
||||
require_once get_template_directory() . '/inc/seo.php';
|
||||
|
||||
+119
-15
@@ -43,16 +43,23 @@ add_action( 'admin_bar_menu', 'edukarsa_admin_bar_shortcut', 80 );
|
||||
|
||||
function edukarsa_register_settings() {
|
||||
$options = array(
|
||||
// Desain & Fitur Global
|
||||
'edukarsa_font_choice', 'edukarsa_primary_color', 'edukarsa_secondary_color', 'edukarsa_heading_color',
|
||||
'edukarsa_tampil_bilingual', 'edukarsa_lang_en', 'edukarsa_lang_ar', 'edukarsa_lang_zh', 'edukarsa_lang_ja',
|
||||
'edukarsa_tampil_accessibility',
|
||||
|
||||
// Halaman Depan Seksi
|
||||
'edukarsa_tampil_slider', 'edukarsa_tampil_stats', 'edukarsa_tampil_about', 'edukarsa_tampil_milestone', 'edukarsa_tampil_program', 'edukarsa_tampil_video', 'edukarsa_tampil_keunggulan', 'edukarsa_tampil_cta', 'edukarsa_tampil_faq', 'edukarsa_tampil_news',
|
||||
'edukarsa_header_logo',
|
||||
|
||||
// Label Kustom Frontend
|
||||
'edukarsa_milestone_subtitle', 'edukarsa_milestone_title',
|
||||
'edukarsa_program_subtitle', 'edukarsa_program_title',
|
||||
'edukarsa_keunggulan_subtitle', 'edukarsa_keunggulan_title',
|
||||
'edukarsa_faq_subtitle', 'edukarsa_faq_title',
|
||||
'edukarsa_news_title',
|
||||
|
||||
// Data Beranda
|
||||
'edukarsa_stat1_angka', 'edukarsa_stat1_label', 'edukarsa_stat1_desc', 'edukarsa_stat1_icon',
|
||||
'edukarsa_stat2_angka', 'edukarsa_stat2_label', 'edukarsa_stat2_desc', 'edukarsa_stat2_icon',
|
||||
'edukarsa_stat3_angka', 'edukarsa_stat3_label', 'edukarsa_stat3_desc', 'edukarsa_stat3_icon',
|
||||
@@ -60,6 +67,24 @@ function edukarsa_register_settings() {
|
||||
'edukarsa_video1_thumb', 'edukarsa_video1_url', 'edukarsa_video2_thumb', 'edukarsa_video2_url',
|
||||
'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color',
|
||||
'edukarsa_cta_bg', 'edukarsa_cta_title', 'edukarsa_cta_btn_teks', 'edukarsa_cta_btn_url',
|
||||
|
||||
// KUSTOMISASI SIDEBAR (Bebas Menu Widget)
|
||||
'edukarsa_sidebar_tampil_search',
|
||||
'edukarsa_sidebar_tampil_cta',
|
||||
'edukarsa_sidebar_cta_badge',
|
||||
'edukarsa_sidebar_cta_title',
|
||||
'edukarsa_sidebar_cta_desc',
|
||||
'edukarsa_sidebar_cta_btn_text',
|
||||
'edukarsa_sidebar_cta_btn_url',
|
||||
'edukarsa_sidebar_tampil_recent',
|
||||
'edukarsa_sidebar_recent_title',
|
||||
'edukarsa_sidebar_recent_count',
|
||||
'edukarsa_sidebar_tampil_cats',
|
||||
'edukarsa_sidebar_cats_title',
|
||||
'edukarsa_sidebar_banner_img',
|
||||
'edukarsa_sidebar_banner_url',
|
||||
|
||||
// Footer & WA
|
||||
'edukarsa_footer_logo', 'edukarsa_footer_desc', 'edukarsa_footer_alamat', 'edukarsa_footer_telp', 'edukarsa_footer_email', 'edukarsa_footer_jam',
|
||||
'edukarsa_wa_btn_text', 'edukarsa_wa_default_msg',
|
||||
'edukarsa_tampil_fb', 'edukarsa_footer_fb', 'edukarsa_tampil_ig', 'edukarsa_footer_ig', 'edukarsa_tampil_yt', 'edukarsa_footer_yt', 'edukarsa_tampil_tiktok', 'edukarsa_footer_tiktok', 'edukarsa_tampil_x', 'edukarsa_footer_x',
|
||||
@@ -156,7 +181,6 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Opsi Fitur Bahasa -->
|
||||
<div class="switch-row" style="margin-top: 18px; background: #eef2ff; border-color: #c7d2fe;">
|
||||
<div class="switch-label-wrap">
|
||||
<div class="switch-label" style="color: #3730a3;">
|
||||
@@ -189,7 +213,6 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Opsi Fitur Aksesibilitas Disabilitas -->
|
||||
<div class="switch-row" style="background: #f0fdf4; border-color: #bbf7d0;">
|
||||
<div class="switch-label-wrap">
|
||||
<div class="switch-label" style="color: #166534;">
|
||||
@@ -393,27 +416,109 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 6. Footer, Kontak & Floating WhatsApp -->
|
||||
<!-- 6. KUSTOMISASI SIDEBAR (BARU: PENGGANTI WIDGET WP) -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header"><h2>📞 6. Footer, Kontak & Tombol WhatsApp</h2></div>
|
||||
<div class="edukarsa-card-header">
|
||||
<h2>📑 6. Pengaturan Sidebar (Artikel & Halaman)</h2>
|
||||
</div>
|
||||
<div class="edukarsa-card-body">
|
||||
<p style="font-size: 13px; color: #64748b; margin-top:0; margin-bottom: 15px;">
|
||||
Kelola komponen sidebar artikel secara native tanpa perlu menu Widget WordPress.
|
||||
</p>
|
||||
|
||||
<!-- Toggle Komponen Sidebar -->
|
||||
<div class="switch-row-inline">
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Kotak Pencarian Cepat</span>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_sidebar_tampil_search" value="1" <?php checked(1, get_option('edukarsa_sidebar_tampil_search', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Kartu Mini CTA Pendaftaran</span>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" class="section-toggle" data-target="#sidebar-cta-box" name="edukarsa_sidebar_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_sidebar_tampil_cta', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Detail Form Mini CTA Sidebar -->
|
||||
<div id="sidebar-cta-box" class="stat-config-box" style="margin-bottom: 15px;">
|
||||
<h4>Konfigurasi Mini CTA Sidebar</h4>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-field-group"><label>Badge Judul CTA</label><input type="text" name="edukarsa_sidebar_cta_badge" value="<?php echo esc_attr(get_option('edukarsa_sidebar_cta_badge', 'Penerimaan Siswa/Mhs')); ?>"></div>
|
||||
<div class="form-field-group"><label>Judul Ajakan</label><input type="text" name="edukarsa_sidebar_cta_title" value="<?php echo esc_attr(get_option('edukarsa_sidebar_cta_title', 'Siap Berprestasi Bersama Kami?')); ?>"></div>
|
||||
</div>
|
||||
<div class="form-field-group"><label>Deskripsi Singkat</label><textarea name="edukarsa_sidebar_cta_desc" rows="2"><?php echo esc_textarea(get_option('edukarsa_sidebar_cta_desc', 'Daftarkan diri Anda sekarang dan raih peluang beasiswa unggulan.')); ?></textarea></div>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-field-group" style="margin-bottom:0;"><label>Teks Tombol</label><input type="text" name="edukarsa_sidebar_cta_btn_text" value="<?php echo esc_attr(get_option('edukarsa_sidebar_cta_btn_text', 'Daftar Sekarang')); ?>"></div>
|
||||
<div class="form-field-group" style="margin-bottom:0;"><label>Tautan URL Tombol</label><input type="text" name="edukarsa_sidebar_cta_btn_url" value="<?php echo esc_attr(get_option('edukarsa_sidebar_cta_btn_url', '#')); ?>"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="switch-row-inline">
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Daftar Berita Terbaru</span>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" class="section-toggle" data-target="#sidebar-recent-box" name="edukarsa_sidebar_tampil_recent" value="1" <?php checked(1, get_option('edukarsa_sidebar_tampil_recent', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Daftar Kategori Berita</span>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" class="section-toggle" data-target="#sidebar-cats-box" name="edukarsa_sidebar_tampil_cats" value="1" <?php checked(1, get_option('edukarsa_sidebar_tampil_cats', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-recent-box" class="form-grid-2" style="background:#f8fafc; padding:15px; border:1px solid #e2e8f0; border-radius:8px; margin-bottom:15px;">
|
||||
<div class="form-field-group" style="margin-bottom:0;"><label>Judul Seksi Berita Terkini</label><input type="text" name="edukarsa_sidebar_recent_title" value="<?php echo esc_attr(get_option('edukarsa_sidebar_recent_title', 'Warta Terkini')); ?>"></div>
|
||||
<div class="form-field-group" style="margin-bottom:0;"><label>Jumlah Pos Ditampilkan</label><input type="number" name="edukarsa_sidebar_recent_count" value="<?php echo esc_attr(get_option('edukarsa_sidebar_recent_count', 5)); ?>" min="1" max="10"></div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-cats-box" class="form-field-group" style="background:#f8fafc; padding:15px; border:1px solid #e2e8f0; border-radius:8px; margin-bottom:15px;">
|
||||
<label>Judul Seksi Kategori</label>
|
||||
<input type="text" name="edukarsa_sidebar_cats_title" value="<?php echo esc_attr(get_option('edukarsa_sidebar_cats_title', 'Kategori Pilihan')); ?>">
|
||||
</div>
|
||||
|
||||
<!-- Banner Iklan / Pengumuman Khusus Sidebar -->
|
||||
<div class="form-grid-2">
|
||||
<div class="form-field-group">
|
||||
<label>Banner Poster Sidebar (Opsional)</label>
|
||||
<div class="input-with-button">
|
||||
<input type="text" id="edukarsa_sidebar_banner_img" name="edukarsa_sidebar_banner_img" value="<?php echo esc_url(get_option('edukarsa_sidebar_banner_img')); ?>" placeholder="https://...">
|
||||
<button type="button" class="button btn-upload" data-target="#edukarsa_sidebar_banner_img">Pilih</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field-group">
|
||||
<label>Tautan Klik Banner Poster</label>
|
||||
<input type="text" name="edukarsa_sidebar_banner_url" value="<?php echo esc_attr(get_option('edukarsa_sidebar_banner_url')); ?>" placeholder="https://...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 7. Footer, Kontak & WhatsApp -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header"><h2>📞 7. Footer, Kontak & Tombol WhatsApp</h2></div>
|
||||
<div class="edukarsa-card-body">
|
||||
|
||||
<!-- Opsi Tombol WhatsApp Melayang -->
|
||||
<div style="background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 16px 20px; margin-bottom: 20px;">
|
||||
<h4 style="margin: 0 0 12px; font-size: 13px; color: #166534; display: flex; align-items: center; gap: 6px;">
|
||||
💬 Kustomisasi Tombol WhatsApp Melayang (Floating Button)
|
||||
</h4>
|
||||
<h4 style="margin: 0 0 12px; font-size: 13px; color: #166534;">💬 Kustomisasi Tombol WhatsApp Melayang</h4>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-field-group" style="margin-bottom: 0;">
|
||||
<label>Label / Tulisan Tombol</label>
|
||||
<input type="text" name="edukarsa_wa_btn_text" value="<?php echo esc_attr(get_option('edukarsa_wa_btn_text', 'Tanya PMB')); ?>" placeholder="cth: Hubungi Kami / Tanya PMB / Konsultasi">
|
||||
<input type="text" name="edukarsa_wa_btn_text" value="<?php echo esc_attr(get_option('edukarsa_wa_btn_text', 'Tanya PMB')); ?>">
|
||||
</div>
|
||||
<div class="form-field-group" style="margin-bottom: 0;">
|
||||
<label>Template Pesan Awal Otomatis</label>
|
||||
<input type="text" name="edukarsa_wa_default_msg" value="<?php echo esc_attr(get_option('edukarsa_wa_default_msg', 'Halo Admin EduKarsa, saya ingin bertanya informasi lebih lanjut.')); ?>" placeholder="cth: Halo Admin, saya ingin menanyakan...">
|
||||
<input type="text" name="edukarsa_wa_default_msg" value="<?php echo esc_attr(get_option('edukarsa_wa_default_msg', 'Halo Admin EduKarsa, saya ingin bertanya informasi lebih lanjut.')); ?>">
|
||||
</div>
|
||||
</div>
|
||||
<p class="description" style="margin-top: 8px; font-size: 12px; color: #15803d;">Nomor WhatsApp otomatis diambil dari kolom Nomor Telepon di bawah.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-grid-2">
|
||||
@@ -426,12 +531,12 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
<div class="form-field-group">
|
||||
<label>Jam Operasional / Layanan (Multi-baris / Bebas Tekan Enter)</label>
|
||||
<textarea name="edukarsa_footer_jam" rows="3" placeholder="Senin – Kamis: 08.00 – 16.00 WIB Jumat: 08.00 – 11.30 WIB Sabtu: 08.00 – 12.00 WIB"><?php echo esc_textarea(get_option('edukarsa_footer_jam', "Senin – Jumat: 08.00 – 16.00 WIB\nSabtu: 08.00 – 12.00 WIB")); ?></textarea>
|
||||
<textarea name="edukarsa_footer_jam" rows="3"><?php echo esc_textarea(get_option('edukarsa_footer_jam', "Senin – Jumat: 08.00 – 16.00 WIB\nSabtu: 08.00 – 12.00 WIB")); ?></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-field-group">
|
||||
<label>Deskripsi Singkat Kampus / Visi Ringkas (Kolom 1)</label>
|
||||
<label>Deskripsi Singkat Kampus / Visi Ringkas</label>
|
||||
<textarea name="edukarsa_footer_desc" rows="3"><?php echo esc_textarea(get_option('edukarsa_footer_desc', 'Institusi pendidikan terakreditasi unggul yang berdedikasi mencetak generasi berkarakter cerdas, kompetitif, dan berintegritas.')); ?></textarea>
|
||||
</div>
|
||||
|
||||
@@ -445,7 +550,6 @@ function edukarsa_settings_page_html() {
|
||||
<div class="form-field-group"><label>Teks Hak Cipta (Copyright Bar)</label><input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright', 'EduKarsa University. All Rights Reserved.')); ?>"></div>
|
||||
|
||||
<h4 style="margin: 25px 0 12px; font-size:14px; color:#0b4a8e; border-bottom:1px solid #e2e8f0; padding-bottom:8px;">Jaringan Media Sosial Resmi</h4>
|
||||
|
||||
<div class="switch-row"><span class="switch-label">Facebook</span><div style="display:flex; align-items:center; gap:12px; width:70%;"><input type="text" name="edukarsa_footer_fb" value="<?php echo esc_attr(get_option('edukarsa_footer_fb')); ?>" placeholder="https://facebook.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;"><label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_fb" value="1" <?php checked(1, get_option('edukarsa_tampil_fb', 1)); ?>><span class="slider-round"></span></label></div></div>
|
||||
<div class="switch-row"><span class="switch-label">Instagram</span><div style="display:flex; align-items:center; gap:12px; width:70%;"><input type="text" name="edukarsa_footer_ig" value="<?php echo esc_attr(get_option('edukarsa_footer_ig')); ?>" placeholder="https://instagram.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;"><label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_ig" value="1" <?php checked(1, get_option('edukarsa_tampil_ig', 1)); ?>><span class="slider-round"></span></label></div></div>
|
||||
<div class="switch-row"><span class="switch-label">YouTube</span><div style="display:flex; align-items:center; gap:12px; width:70%;"><input type="text" name="edukarsa_footer_yt" value="<?php echo esc_attr(get_option('edukarsa_footer_yt')); ?>" placeholder="https://youtube.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;"><label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_yt" value="1" <?php checked(1, get_option('edukarsa_tampil_yt', 1)); ?>><span class="slider-round"></span></label></div></div>
|
||||
|
||||
+119
@@ -0,0 +1,119 @@
|
||||
<?php
|
||||
/**
|
||||
* Modul Native SEO & Structured Data Schema EduKarsa
|
||||
* 100% Native tanpa plugin eksternal
|
||||
*/
|
||||
|
||||
function edukarsa_native_seo_tags() {
|
||||
global $post;
|
||||
|
||||
$site_name = get_bloginfo( 'name' );
|
||||
$site_desc = get_bloginfo( 'description' );
|
||||
$page_url = is_front_page() ? home_url( '/' ) : get_permalink();
|
||||
$page_title = wp_get_document_title();
|
||||
$logo_url = get_option( 'edukarsa_header_logo' );
|
||||
|
||||
$seo_desc = $site_desc;
|
||||
$seo_img = $logo_url;
|
||||
$og_type = 'website';
|
||||
|
||||
if ( is_singular() && ! empty( $post ) ) {
|
||||
$og_type = 'article';
|
||||
|
||||
// Deskripsi otomatis dari excerpt atau cuplikan paragraf pertama
|
||||
if ( ! empty( $post->post_excerpt ) ) {
|
||||
$seo_desc = strip_tags( $post->post_excerpt );
|
||||
} else {
|
||||
$content_text = strip_shortcodes( $post->post_content );
|
||||
$content_text = wp_strip_all_tags( $content_text );
|
||||
$seo_desc = wp_trim_words( $content_text, 25, '...' );
|
||||
}
|
||||
|
||||
// Gambar OpenGraph dari Featured Image
|
||||
if ( has_post_thumbnail( $post->ID ) ) {
|
||||
$thumb_id = get_post_thumbnail_id( $post->ID );
|
||||
$img_data = wp_get_attachment_image_src( $thumb_id, 'large' );
|
||||
if ( $img_data ) {
|
||||
$seo_img = $img_data[0];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$seo_desc = esc_attr( trim( preg_replace( '/\s+/', ' ', $seo_desc ) ) );
|
||||
?>
|
||||
<!-- Native SEO Metadata EduKarsa -->
|
||||
<meta name="description" content="<?php echo $seo_desc; ?>">
|
||||
<link rel="canonical" href="<?php echo esc_url( $page_url ); ?>">
|
||||
|
||||
<!-- Open Graph Data (Facebook, WhatsApp, Telegram) -->
|
||||
<meta property="og:locale" content="<?php echo esc_attr( get_locale() ); ?>">
|
||||
<meta property="og:type" content="<?php echo esc_attr( $og_type ); ?>">
|
||||
<meta property="og:title" content="<?php echo esc_attr( $page_title ); ?>">
|
||||
<meta property="og:description" content="<?php echo $seo_desc; ?>">
|
||||
<meta property="og:url" content="<?php echo esc_url( $page_url ); ?>">
|
||||
<meta property="og:site_name" content="<?php echo esc_attr( $site_name ); ?>">
|
||||
<?php if ( ! empty( $seo_img ) ) : ?>
|
||||
<meta property="og:image" content="<?php echo esc_url( $seo_img ); ?>">
|
||||
<meta property="og:image:alt" content="<?php echo esc_attr( $page_title ); ?>">
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Twitter / X Card Data -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="<?php echo esc_attr( $page_title ); ?>">
|
||||
<meta name="twitter:description" content="<?php echo $seo_desc; ?>">
|
||||
<?php if ( ! empty( $seo_img ) ) : ?>
|
||||
<meta name="twitter:image" content="<?php echo esc_url( $seo_img ); ?>">
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Google Structured Data (JSON-LD Schema) -->
|
||||
<script type="application/ld+json">
|
||||
<?php if ( is_singular( 'post' ) ) : ?>
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"headline": "<?php echo esc_js( get_the_title() ); ?>",
|
||||
"description": "<?php echo esc_js( $seo_desc ); ?>",
|
||||
"url": "<?php echo esc_url( $page_url ); ?>",
|
||||
"datePublished": "<?php echo esc_js( get_the_date( 'c' ) ); ?>",
|
||||
"dateModified": "<?php echo esc_js( get_the_modified_date( 'c' ) ); ?>",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": "<?php echo esc_url( $page_url ); ?>"
|
||||
},
|
||||
<?php if ( ! empty( $seo_img ) ) : ?>
|
||||
"image": "<?php echo esc_url( $seo_img ); ?>",
|
||||
<?php endif; ?>
|
||||
"author": {
|
||||
"@type": "Person",
|
||||
"name": "<?php echo esc_js( get_the_author() ); ?>"
|
||||
},
|
||||
"publisher": {
|
||||
"@type": "EducationalOrganization",
|
||||
"name": "<?php echo esc_js( $site_name ); ?>",
|
||||
"logo": {
|
||||
"@type": "ImageObject",
|
||||
"url": "<?php echo esc_url( $logo_url ); ?>"
|
||||
}
|
||||
}
|
||||
}
|
||||
<?php else : ?>
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "EducationalOrganization",
|
||||
"name": "<?php echo esc_js( $site_name ); ?>",
|
||||
"url": "<?php echo esc_url( home_url( '/' ) ); ?>",
|
||||
"description": "<?php echo esc_js( $site_desc ); ?>",
|
||||
<?php if ( ! empty( $logo_url ) ) : ?>
|
||||
"logo": "<?php echo esc_url( $logo_url ); ?>",
|
||||
<?php endif; ?>
|
||||
"sameAs": [
|
||||
"<?php echo esc_url( get_option( 'edukarsa_footer_fb' ) ); ?>",
|
||||
"<?php echo esc_url( get_option( 'edukarsa_footer_ig' ) ); ?>",
|
||||
"<?php echo esc_url( get_option( 'edukarsa_footer_yt' ) ); ?>"
|
||||
]
|
||||
}
|
||||
<?php endif; ?>
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
add_action( 'wp_head', 'edukarsa_native_seo_tags', 1 );
|
||||
+102
-60
@@ -1,66 +1,108 @@
|
||||
<?php
|
||||
/**
|
||||
* Template Sidebar EduKarsa
|
||||
* Template Sidebar Native EduKarsa
|
||||
* Dikelola 100% dari Dashboard EduKarsa (Bebas Menu Widget WP)
|
||||
*/
|
||||
?>
|
||||
<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>
|
||||
<aside id="secondary" class="edukarsa-custom-sidebar">
|
||||
|
||||
<!-- 1. Pencarian Cepat Native -->
|
||||
<?php if ( get_option( 'edukarsa_sidebar_tampil_search', 1 ) == 1 ) : ?>
|
||||
<div class="card-style sidebar-widget">
|
||||
<form role="search" method="get" class="sidebar-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
|
||||
<div class="sidebar-search-wrapper">
|
||||
<input type="search" class="sidebar-search-input" placeholder="Cari warta / informasi..." value="<?php echo get_search_query(); ?>" name="s" required>
|
||||
<button type="submit" class="sidebar-search-btn" aria-label="Cari">🔍</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 2. Mini Banner CTA Pendaftaran / PMB -->
|
||||
<?php if ( get_option( 'edukarsa_sidebar_tampil_cta', 1 ) == 1 ) : ?>
|
||||
<div class="card-style sidebar-widget sidebar-cta-box text-center">
|
||||
<span class="sidebar-cta-badge"><?php echo esc_html( get_option( 'edukarsa_sidebar_cta_badge', 'Penerimaan Siswa/Mhs' ) ); ?></span>
|
||||
<h3 class="sidebar-cta-title"><?php echo esc_html( get_option( 'edukarsa_sidebar_cta_title', 'Siap Berprestasi Bersama Kami?' ) ); ?></h3>
|
||||
<p class="sidebar-cta-desc">
|
||||
<?php echo nl2br( esc_html( get_option( 'edukarsa_sidebar_cta_desc', 'Daftarkan diri Anda sekarang dan raih peluang beasiswa unggulan.' ) ) ); ?>
|
||||
</p>
|
||||
<a href="<?php echo esc_url( get_option( 'edukarsa_sidebar_cta_btn_url', '#' ) ); ?>" class="btn-primary btn-light sidebar-cta-btn">
|
||||
<?php echo esc_html( get_option( 'edukarsa_sidebar_cta_btn_text', 'Daftar Sekarang' ) ); ?> »
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 3. Berita Terkini Dinamis -->
|
||||
<?php if ( get_option( 'edukarsa_sidebar_tampil_recent', 1 ) == 1 ) : ?>
|
||||
<div class="card-style sidebar-widget">
|
||||
<h3 class="sidebar-widget-title"><?php echo esc_html( get_option( 'edukarsa_sidebar_recent_title', 'Warta Terkini' ) ); ?></h3>
|
||||
<div class="sidebar-recent-list">
|
||||
<?php
|
||||
$count = intval( get_option( 'edukarsa_sidebar_recent_count', 5 ) );
|
||||
$recent_query = new WP_Query( array(
|
||||
'post_type' => 'post',
|
||||
'posts_per_page' => $count,
|
||||
'post__not_in' => array( get_the_ID() )
|
||||
) );
|
||||
|
||||
if ( $recent_query->have_posts() ) :
|
||||
while ( $recent_query->have_posts() ) : $recent_query->the_post();
|
||||
?>
|
||||
<article class="sidebar-recent-item">
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<a href="<?php the_permalink(); ?>" class="sidebar-recent-thumb">
|
||||
<?php the_post_thumbnail( 'thumbnail' ); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<div class="sidebar-recent-info">
|
||||
<span class="sidebar-recent-date">📅 <?php echo get_the_date( 'd M Y' ); ?></span>
|
||||
<h4 class="sidebar-recent-title">
|
||||
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
|
||||
</h4>
|
||||
</div>
|
||||
</article>
|
||||
<?php
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
else :
|
||||
echo '<p style="font-size:13px; color:var(--text-muted); margin:0;">Belum ada artikel lainnya.</p>';
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 4. Daftar Kategori Pilihan -->
|
||||
<?php if ( get_option( 'edukarsa_sidebar_tampil_cats', 1 ) == 1 ) : ?>
|
||||
<div class="card-style sidebar-widget">
|
||||
<h3 class="sidebar-widget-title"><?php echo esc_html( get_option( 'edukarsa_sidebar_cats_title', 'Kategori Pilihan' ) ); ?></h3>
|
||||
<ul class="sidebar-category-list">
|
||||
<?php
|
||||
$categories = get_categories( array( 'hide_empty' => true ) );
|
||||
foreach ( $categories as $category ) :
|
||||
?>
|
||||
<li>
|
||||
<a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>" class="sidebar-cat-link">
|
||||
<span><?php echo esc_html( $category->name ); ?></span>
|
||||
<span class="sidebar-cat-count"><?php echo esc_html( $category->count ); ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 5. Banner Poster Promosi / Pengumuman Khusus -->
|
||||
<?php
|
||||
$banner_img = get_option( 'edukarsa_sidebar_banner_img' );
|
||||
if ( ! empty( $banner_img ) ) :
|
||||
$banner_url = get_option( 'edukarsa_sidebar_banner_url', '#' );
|
||||
?>
|
||||
<div class="card-style sidebar-widget sidebar-banner-box" style="padding: 10px; overflow: hidden;">
|
||||
<a href="<?php echo esc_url( $banner_url ); ?>" target="_blank" rel="noopener">
|
||||
<img src="<?php echo esc_url( $banner_img ); ?>" alt="Banner Pengumuman" style="width: 100%; height: auto; border-radius: 8px; display: block;">
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
</aside>
|
||||
|
||||
+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>
|
||||
|
||||
@@ -450,3 +450,264 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl
|
||||
50% { transform: scale(1.04); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/* 19. BREADCRUMBS & SINGLE ARTICLE UI */
|
||||
.edukarsa-breadcrumbs {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.edukarsa-breadcrumbs a { color: var(--primary-color); font-weight: 600; }
|
||||
.edukarsa-breadcrumbs a:hover { text-decoration: underline; }
|
||||
.bc-sep { color: #cbd5e1; font-weight: bold; }
|
||||
.bc-current { color: var(--heading-color); font-weight: 600; }
|
||||
|
||||
.single-article-card { padding: 40px; margin-bottom: 30px; }
|
||||
.single-article-title {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
color: var(--heading-color);
|
||||
margin: 10px 0 15px;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.single-meta-bar {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 25px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
.single-featured-image {
|
||||
margin-bottom: 30px;
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
background: #f8fafc;
|
||||
}
|
||||
.single-featured-image img { width: 100%; height: auto; display: block; }
|
||||
.img-caption {
|
||||
padding: 10px 15px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
background: #f1f5f9;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* INTRA-POST PAGINATION (<!--nextpage-->) */
|
||||
.intra-post-pagination {
|
||||
margin-top: 35px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.page-links-title { font-weight: 700; font-size: 14px; color: var(--heading-color); }
|
||||
.intra-post-pagination a .page-number-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 14px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.intra-post-pagination a:hover .page-number-box {
|
||||
background: var(--primary-color);
|
||||
color: #ffffff;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
.intra-post-pagination > .page-number-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 14px;
|
||||
background: var(--primary-color);
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* FOOTER ARTIKEL & SHARE BAR */
|
||||
.single-article-footer {
|
||||
margin-top: 35px;
|
||||
padding-top: 25px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
.single-tags-list { font-size: 13px; }
|
||||
.single-tags-list a {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
background: #f1f5f9;
|
||||
color: var(--text-color);
|
||||
border-radius: 20px;
|
||||
margin: 0 4px 6px 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.single-tags-list a:hover { background: var(--primary-color); color: #ffffff; }
|
||||
|
||||
.single-share-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||||
.share-label { font-size: 13px; font-weight: 700; color: var(--heading-color); margin-right: 4px; }
|
||||
.share-btn {
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.share-wa { background: #25d366; }
|
||||
.share-wa:hover { background: #1ebc57; }
|
||||
.share-fb { background: #1877f2; }
|
||||
.share-fb:hover { background: #0c63d4; }
|
||||
.share-tw { background: #0f1419; }
|
||||
.share-tw:hover { background: #272c30; }
|
||||
.share-copy { background: #475569; color: #ffffff; }
|
||||
.share-copy:hover { background: #334155; }
|
||||
|
||||
/* INTER-POST NAVIGATION (SEBELUMNYA & SELANJUTNYA) */
|
||||
.inter-post-nav {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.nav-box { padding: 22px 25px; transition: all 0.25s ease; }
|
||||
.nav-box.disabled { opacity: 0.6; pointer-events: none; }
|
||||
.nav-box-link { display: block; text-decoration: none; }
|
||||
.nav-direction {
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
color: var(--secondary-color);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.nav-post-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--heading-color);
|
||||
margin: 0;
|
||||
line-height: 1.45;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
.nav-box:hover .nav-post-title { color: var(--primary-color); }
|
||||
.text-right { text-align: right; }
|
||||
|
||||
/* 20. KOMPONEN SIDEBAR NATIVE TERINTEGRASI */
|
||||
.sidebar-search-form { position: relative; }
|
||||
.sidebar-search-wrapper { display: flex; position: relative; }
|
||||
.sidebar-search-input {
|
||||
width: 100%;
|
||||
padding: 12px 45px 12px 16px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.sidebar-search-input:focus { border-color: var(--primary-color); }
|
||||
.sidebar-search-btn {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.sidebar-cta-box {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--heading-color));
|
||||
color: #ffffff;
|
||||
padding: 30px 24px;
|
||||
}
|
||||
.sidebar-cta-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 12px;
|
||||
background: rgba(255,255,255,0.18);
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.8px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.sidebar-cta-title { font-size: 19px; font-weight: 800; color: #ffffff; margin-bottom: 10px; line-height: 1.35; }
|
||||
.sidebar-cta-desc { font-size: 13px; opacity: 0.9; margin-bottom: 20px; line-height: 1.6; }
|
||||
.sidebar-cta-btn { display: inline-block; padding: 10px 26px; font-size: 14px; font-weight: 800; }
|
||||
|
||||
.sidebar-recent-list { display: flex; flex-direction: column; gap: 16px; }
|
||||
.sidebar-recent-item { display: flex; gap: 14px; align-items: center; }
|
||||
.sidebar-recent-thumb { width: 68px; height: 68px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
|
||||
.sidebar-recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.sidebar-recent-date { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 4px; }
|
||||
.sidebar-recent-title { font-size: 14px; font-weight: 700; margin: 0; line-height: 1.4; }
|
||||
.sidebar-recent-title a { color: var(--heading-color); }
|
||||
.sidebar-recent-title a:hover { color: var(--primary-color); }
|
||||
|
||||
.sidebar-category-list { list-style: none; padding: 0; margin: 0; }
|
||||
.sidebar-category-list li { margin-bottom: 8px; }
|
||||
.sidebar-cat-link {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 9px 14px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #f1f5f9;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.sidebar-cat-link:hover {
|
||||
background: var(--primary-color);
|
||||
color: #ffffff;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
.sidebar-cat-count {
|
||||
padding: 2px 8px;
|
||||
background: rgba(0,0,0,0.06);
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.sidebar-cat-link:hover .sidebar-cat-count {
|
||||
background: rgba(255,255,255,0.25);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.inter-post-nav { grid-template-columns: 1fr; }
|
||||
.text-right { text-align: left; }
|
||||
.single-article-card { padding: 25px 20px; }
|
||||
.single-article-title { font-size: 24px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user