Project

Theme WordPress dari nol

All project
06

Membuat Template home.php

1. Apa fungsi home.php?

Pada WordPress, home.php digunakan untuk menampilkan daftar posting/artikel.

Misalnya kita memiliki:

Artikel 1
Artikel 2
Artikel 3
Artikel 4

Maka home.php bertugas menampilkan daftar tersebut.

2. Buat file home.php

Struktur theme kita menjadi:

aamblog/
├── style.css
├── functions.php
├── index.php
├── header.php
├── footer.php
├── sidebar.php
├── front-page.php
└── home.php 

Buat file sederhana untuk home.php

    <?php get_header(); ?>

    <!-- Main Content -->
    <main class="container">

        <div class="layout">


            <!-- Content -->
            <section class="content">

                <h2>Blog</h2>

                <?php if (have_posts()) : ?>
                    <?php while (have_posts()) : the_post(); ?>
                        <article class="post">
                            <h3><?php the_title(); ?></h3>
                            <?php the_excerpt(); ?>
                        </article>
                    <?php endwhile; ?>
                <?php else : ?>
                    <p>Belum ada artikel.</p>
                <?php endif; ?>

            </section>


            <!-- Sidebar -->
            <?php get_sidebar(); ?>

        </div>
    </main>

    <?php get_footer(); ?>

3. Apa fungsi single.php?

single.php digunakan WordPress ketika pengunjung membuka satu artikel/blog secara penuh.

2. Membuat single.php

Buat File single.php :

aamblog/
├── style.css
├── functions.php
├── index.php
├── front-page.php 
├── header.php
├── footer.php
└── single.php --> baru 

Single.php

<?php get_header(); ?>

<!-- Main Content -->
<main class="container">

    <div class="layout">

        <!-- Content -->
        <section class="content">
            <?php if (have_posts()) : ?>
                <?php while (have_posts()) : the_post(); ?>

                    <article class="post">
                        <h1><?php the_title(); ?></h1>
                        <div class="post-meta">
                            <?php echo get_the_date(); ?> oleh<?php the_author(); ?>
                        </div>

                        <?php if (has_post_thumbnail()) : ?>
                            <?php the_post_thumbnail(); ?>
                        <?php endif; ?>

                        <div class="post-content"><?php the_content(); ?></div>

                    </article>
                <?php endwhile; ?>
            <?php endif; ?>
        </section>
        
    </div>
</main>

<?php get_footer(); ?>