Memahami Struktur Dasar dalam File-File Theme Wordress

Struktur file dasar dalam tema WordPress beserta penjelasan singkat tentang fungsinya. Setiap file memiliki peran dan fungsi masing-masing dalam menampilkan konten dan mengatur tampilan tema WordPress. Adapun penjelasan singkat tentang struktur file dalam tema WordPress:

style.css

File style.css dalam tema WordPress sangat penting karena digunakan oleh WordPress untuk mengenali dan menampilkan informasi tentang tema tersebut pada halaman admin, serta mengatur tampilan visual dari tema pada halaman depan website.

style.css adalah file yang digunakan untuk mengatur tampilan tema pada halaman admin WordPress. File ini berisi kode CSS yang mengatur tampilan visual dari tema, seperti warna, font, ukuran, dan tata letak. Selain itu, file style.css juga digunakan untuk menyimpan informasi metadata tema, seperti nama tema, deskripsi, versi, penulis, dan lain-lain.

Contoh isi dari file style.css:

/*
Theme Name: Murmaruttung
Theme URI: https://example.com/themes/murmaruttung
Description: Tema WordPress yang sederhana dan elegan
Version: 1.0
Author: John Doe
Author URI: https://example.com/
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: minimal, elegan, sederhana
Text Domain: murmaruttung
Domain Path: /languages
*/

/* Reset CSS / / … / / Kode CSS tambahan untuk mengatur tampilan tema / / … */

Penjelasan metadata tema dalam file style.css:

Theme Name: Nama tema WordPress.
Theme URI: URL atau tautan ke halaman tema pada website pengembang.
Description: Deskripsi singkat tentang tema.
Version: Nomor versi tema.
Author: Nama pengembang tema.
Author URI: URL atau tautan ke halaman pengembang tema.
License: Lisensi tema, misalnya GPL v2 atau GPL v3.
License URI: URL atau tautan ke halaman lisensi tema.
Tags: Kata kunci atau tag yang menggambarkan tema.
Text Domain: Domain teks yang digunakan untuk penerjemahan tema ke dalam bahasa lain.
Domain Path: Lokasi folder untuk file penerjemahan tema.

header.php

File ini untuk menampilkan bagian kepala (header) dari tema, termasuk deklarasi tipe dokumen, tag head, dan script tambahan. File ini juga digunakan untuk menampilkan bagian kepala (header) dari tema, termasuk deklarasi tipe dokumen, tag head, dan script tambahan yang diperlukan untuk tampilan tema.

File header.php dalam tema WordPress sangat penting karena mengatur tampilan bagian header pada halaman depan website. Anda dapat menyesuaikan kode dalam file header.php sesuai dengan desain dan fungsionalitas yang diinginkan untuk tema WordPress yang sedang Anda kembangkan.

header.php adalah file yang digunakan untuk membuat bagian header (bagian atas) dari tema WordPress. File ini berisi kode HTML, PHP, dan CSS yang mengatur tampilan bagian header pada halaman depan website, seperti logo, menu navigasi, judul halaman, dan elemen-elemen lain yang ingin ditampilkan di bagian header.

Contoh isi dari file header.php:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php wp_title(); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <div class="logo">
            <a href="<?php echo home_url(); ?>">
                <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="Logo">
            </a>
        </div>
        <nav>
            <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
        </nav>
    </header>

Penjelasan tentang beberapa kode dalam file header.php:

<!DOCTYPE html>: Deklarasi tipe dokumen HTML.
<html <?php language_attributes(); ?>>: Menambahkan atribut bahasa sesuai konfigurasi WordPress.
<meta charset="<?php bloginfo('charset'); ?>">: Menyertakan karakter set yang digunakan pada tema.
<title><?php wp_title(); ?></title>: Menyertakan judul halaman yang dinamis sesuai dengan judul halaman WordPress.
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">: Menyertakan file stylesheet (CSS) tema.
<?php wp_head(); ?>: Menyertakan tag head tambahan yang diperlukan oleh WordPress, seperti file CSS tambahan, plugin, dan fungsi lainnya.
<body <?php body_class(); ?>>: Menambahkan atribut kelas body sesuai dengan konfigurasi WordPress.
<header>: Menandai awal bagian header pada tema.
<div class="logo">: Membuat div untuk menampilkan logo.
<a href="<?php echo home_url(); ?>">: Menambahkan tautan ke halaman depan website (home) pada logo.
<nav>: Membuat elemen navigasi.
<?php wp_nav_menu(array('theme_location' => 'primary')); ?>: Menampilkan menu navigasi yang sudah diatur pada area menu “primary” di WordPress.

functions.php

File functions.php sangat penting karena memungkinkan Anda untuk menambahkan fungsionalitas tambahan pada tema WordPress yang sedang Anda kembangkan. Anda dapat menyesuaikan kode dalam file functions.php sesuai dengan kebutuhan dan fitur yang ingin ditambahkan pada tema WordPress Anda. Pastikan untuk memahami konsep-konsep dasar pemrograman PHP sebelum memodifikasi file functions.php.

functions.php adalah file yang digunakan untuk mengatur fungsi-fungsi kustom (custom functions) yang berkaitan dengan tema WordPress yang sedang dikembangkan. File ini berisi kode PHP yang digunakan untuk mengatur fungsionalitas tambahan, seperti menambahkan fitur kustom, mengatur widget, mengatur menu navigasi, mengatur fitur tema, dan sebagainya.

Contoh isi dari file functions.php:

<?php

// Menambahkan script dan style pada tema
function mytheme_enqueue_scripts() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/mytheme-script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );

// Menambahkan fitur tema
function mytheme_setup() {
    // Menambahkan dukungan untuk thumbnail pada posting
    add_theme_support( 'post-thumbnails' );
    // Menambahkan dukungan untuk menu navigasi
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'mytheme' ),
        'secondary' => __( 'Secondary Menu', 'mytheme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

// Menambahkan widget area pada tema
function mytheme_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Sidebar', 'mytheme' ),
        'id' => 'sidebar-1',
        'description' => __( 'Add widgets here.', 'mytheme' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

Penjelasan tentang beberapa kode dalam file functions.php:

wp_enqueue_style(): Mengenqueue (mendaftarkan) file stylesheet (CSS) pada tema.
wp_enqueue_script(): Mengenqueue (mendaftarkan) file script (JavaScript) pada tema.
add_theme_support(): Menambahkan dukungan (support) untuk fitur-fitur tertentu pada tema, seperti thumbnail, fitur header, fitur background, dan sebagainya.
register_nav_menus(): Mendaftarkan area menu navigasi yang akan digunakan pada tema.
register_sidebar(): Mendaftarkan area sidebar (widget area) pada tema.
add_action(): Menambahkan aksi (hook) yang akan dijalankan pada saat event tertentu terjadi, seperti saat tema sudah di-setup (after_setup_theme), saat script dan style dienqueue (wp_enqueue_scripts), atau saat widget sudah diinisialisasi (widgets_init).

index.php

File index.php merupakan file yang sangat penting dalam tema WordPress, karena file ini akan menentukan tampilan halaman depan situs web Anda. Anda dapat menyesuaikan kode dalam file index.php sesuai dengan kebutuhan desain dan fungsionalitas yang diinginkan untuk halaman depan tema WordPress Anda. Pastikan untuk memahami konsep-konsep dasar pemrograman PHP dan WordPress template hierarchy sebelum memodifikasi file index.php.

File utama yang digunakan untuk menampilkan konten pada halaman depan (homepage) tema. File ini akan menentukan bagaimana konten akan ditampilkan pada halaman depan tema, termasuk pemanggilan header, footer, dan konten utama.

index.php adalah file utama dalam tema WordPress yang akan menentukan tampilan halaman depan (front-end) dari situs web Anda. File ini akan menampilkan konten dari berbagai jenis halaman, seperti beranda (home page), halaman arsip (archive page), halaman pencarian (search page), halaman kategori (category page), dan sebagainya.

Contoh implementasi dasar dalam file index.php:

<?php get_header(); ?>

<!-- Konten Utama -->
<main id="primary" class="site-main">

    <?php if ( have_posts() ) : ?>

        <?php while ( have_posts() ) : the_post(); ?>

            <?php get_template_part( 'template-parts/content', get_post_format() ); ?>

        <?php endwhile; ?>

    <?php else : ?>

        <?php get_template_part( 'template-parts/content', 'none' ); ?>

    <?php endif; ?>

</main>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Penjelasan tentang beberapa kode dalam file index.php:

get_header(): Memanggil file header.php yang berisi kode untuk bagian header situs web.
get_template_part(): Memanggil file template-parts/content.php yang berisi kode untuk menampilkan konten dari masing-masing posting, dengan format konten yang sesuai (sesuai format posting yang aktif).
get_sidebar(): Memanggil file sidebar.php yang berisi kode untuk bagian sidebar situs web.
get_footer(): Memanggil file footer.php yang berisi kode untuk bagian footer situs web.
have_posts(): Mengecek apakah terdapat posting yang aktif untuk ditampilkan.
the_post(): Mengatur konteks posting saat ini untuk looping saat ini.
get_post_format(): Mendapatkan format posting yang aktif (misalnya, standar, galeri, video, audio, dsb.).
get_template_part(): Menggunakan file template yang sesuai untuk menampilkan konten posting sesuai formatnya.
get_template_part(): Menggunakan file template yang sesuai untuk menampilkan pesan bahwa tidak ada konten yang ditemukan jika tidak ada posting yang aktif.
get_sidebar(): Memanggil file sidebar.php yang berisi kode untuk bagian sidebar situs web.

single.php

File single.php sangat penting dalam tema WordPress, karena file ini akan menampilkan konten detail dari posting tunggal, termasuk komentar jika diaktifkan. Anda dapat menyesuaikan kode dalam file single.php sesuai dengan kebutuhan desain dan fungsionalitas yang diinginkan untuk tampilan detail posting pada tema WordPress Anda. Pastikan untuk memahami konsep-konsep dasar pemrograman PHP dan WordPress template hierarchy sebelum memodifikasi file single.php.

single.php adalah file yang digunakan untuk menampilkan konten detail dari sebuah posting tunggal (single post) pada tema WordPress. File ini akan digunakan ketika pengunjung mengklik pada judul atau permalink dari sebuah posting dan akan menampilkan konten lengkap dari posting tersebut.

Contoh implementasi dasar dalam file single.php:

<?php get_header(); ?>

<!-- Konten Utama -->
<main id="primary" class="site-main">

    <?php while ( have_posts() ) : the_post(); ?>

        <?php get_template_part( 'template-parts/content', get_post_format() ); ?>

        <!-- Navigasi Posting -->
        <?php the_post_navigation(); ?>

        <!-- Komentar -->
        <?php comments_template(); ?>

    <?php endwhile; ?>

</main>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Penjelasan tentang beberapa kode dalam file single.php baris per baris kode dalam contoh implementasi sebagai berikut:

<?php get_header(); ?>

Kode ini memanggil file header.php yang berisi kode untuk bagian header situs web.

<main id="primary" class="site-main">

Kode ini membuka tag dengan id “primary” dan class “site-main”, yang akan digunakan sebagai konten utama dari halaman.

<?php while ( have_posts() ) : the_post(); ?>

Kode ini memulai loop while untuk mengulangi proses menampilkan konten posting tunggal sebanyak posting yang ada.

<?php get_template_part( 'template-parts/content', get_post_format() ); ?>

Kode ini memanggil file content.php yang berada dalam folder template-parts, dengan format konten yang sesuai (sesuai format posting yang aktif).

<?php the_post_navigation(); ?>

Kode ini menampilkan navigasi posting, seperti posting sebelumnya dan posting berikutnya, jika ada.

<?php comments_template(); ?>

Kode ini menampilkan area komentar pada posting, jika diaktifkan.

<?php endwhile; ?>

Kode ini mengakhiri loop while untuk menampilkan konten posting tunggal.

</main>

Kode ini menutup tag yang digunakan sebagai konten utama.

<?php get_sidebar(); ?>

Kode ini memanggil file sidebar.php yang berisi kode untuk bagian sidebar situs web.

<?php get_footer(); ?>

Kode ini memanggil file footer.php yang berisi kode untuk bagian footer situs web.

Penjelasan Lebih Lanjut silahkan Klik Postingan Berikut:

page.php: File untuk menampilkan konten pada halaman (page) tema.
archive.php: File untuk menampilkan konten pada halaman arsip (archive) tema.
search.php: File untuk menampilkan hasil pencarian (search results) pada tema.
footer.php: File untuk menampilkan bagian footer (footer) dari tema.
sidebar.php: File untuk menampilkan bagian sisi (sidebar) dari tema.
header.php: File untuk menampilkan bagian kepala (header) dari tema.
footer.php: File untuk menampilkan bagian footer (footer) dari tema.
functions.php: File untuk menambahkan fungsi-fungsi kustom pada tema.

Itulah struktur file dasar dalam tema WordPress beserta penjelasan singkat tentang fungsinya. Setiap file memiliki peran dan fungsi masing-masing dalam menampilkan konten dan mengatur tampilan tema WordPress

style.css

header.php

functions.php

index.php

single.php

Leave a Reply Cancel reply