Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Theme Development
Code

Membuat Tema WordPress dari HTML Statis: Menambahkan Loop

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Creating a WordPress Theme From Static HTML.
Creating a WordPress Theme From Static HTML: Uploading Your Theme to WordPress
Creating a WordPress Theme From Static HTML: Setting Up the Header

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Dalam tiga bagian pertama dari seri ini, Anda belajar bagaimana menyiapkan HTML statis untuk WordPress dan untuk membuat tema dengan memecah file HTML Anda menjadi satu set file template dan mengedit stylesheet. Anda kemudian mengunggah tema Anda ke WordPress dan mengaktifkannya.

Tema masih belum menampilkan konten apa pun yang Anda tambahkan melalui admin WordPress; untuk melakukan itu Anda perlu menambahkan loop ke file template Anda.

Saat ini tema Anda hanya memiliki satu file template utama - index.php - jadi Anda akan menambahkan satu loop untuk itu.


Apa yang Akan Anda Butuhkan

  • Editor pilihan Anda
  • Browser untuk menguji pekerjaan Anda
  • Perangkat lunak gambar untuk menyimpan tangkapan layar Anda dalam dimensi yang tepat
  • Instalasi WordPress, baik lokal maupun remote
  • Jika Anda bekerja secara lokal, Anda memerlukan MAMP, WAMP atau LAMP untuk mengaktifkan WordPress agar berjalan
  • Jika Anda bekerja dari jarak jauh, Anda memerlukan akses FTP ke situs Anda ditambah akun administrator di instalasi WordPress Anda

1. Menambahkan Halaman di WordPress

Saya akan berasumsi bahwa Anda sudah tahu cara menggunakan admin WordPress untuk menambahkan halaman. Saya akan membuat halaman bernama 'Home', menambahkan beberapa konten dummy ke dalamnya dan kemudian mengedit 'Reading Settings' di WordPress sehingga ini adalah halaman beranda, bukan daftar posting blog.

Saya akan menggunakan konten dari situs statis saya sebagai konten untuk halaman baru saya, kecuali saya tidak akan menambahkan gambar lebar-penuh pertama ke konten - Anda akan belajar cara menambahkan gambar seperti ini ke tema Anda sebagai gambar unggulan di Bagian 10 dari seri ini.

Jadi silakan membuat halaman, termasuk beberapa gambar jika Anda suka, dan mengedit halaman 'Reading Settings' sehingga halaman baru Anda adalah halaman beranda.


2. Menambahkan Loop

Setelah membuat halaman baru Anda, kunjungi halaman beranda situs Anda lagi. Anda akan menemukan bahwa tidak ada yang berubah - WordPress tidak menampilkan konten halaman Anda. Itu karena Anda perlu menambahkan satu loop agar melakukannya. Loop akan menarik konten halaman dari database dan inilah yang membuat WordPress berfungsi.

Buka file index.php Anda. Setelah pembukaan div .content dan sebelum tag pembuka <article>, tambahkan yang berikut:

Sekarang setelah tag penutup </article>, tambahkan:

Bagian pertama kode yang Anda tambahkan memulai loop. Ini memeriksa apakah ada posting atau halaman untuk ditampilkan dan kemudian membuka posting pertama atau halaman.

Jika Anda berada di halaman arsip, itu akan mengulangi melalui semua posting yang relevan, baik posting terbaru di halaman blog utama atau posting di kategori tertentu pada halaman kategori.

Potongan kode kedua mengakhiri loop sehingga WordPress dapat melanjutkan untuk menampilkan konten seperti sidebar dan footer.


3. Kelas dan ID untuk Article

Tag pembuka <article> dapat memiliki kelas dan ID yang secara otomatis dihasilkan oleh WordPress. Anda kemudian dapat menggunakan ini di kemudian hari untuk menargetkan CSS pada posting atau halaman tersebut jika Anda ingin melakukannya.

Temukan tag pembuka <article>:

Edit itu sehingga terbaca:

Kedua fungsi yang Anda tambahkan adalah:

  • the_ID() - ini menambahkan kelas ke elemen article yang merupakan referensi ID unik untuk posting atau halaman yang sedang ditampilkan
  • post_class - ini menambahkan serangkaian kelas ke elemen article termasuk kategori posting, jenis posting dan banyak lagi

Jadi Anda dapat menggunakan ID untuk menargetkan posting tertentu dengan CSS, dan kelas untuk mengatur gaya semua posting dalam kategori tertentu dengan cara yang sama, misalnya.


4. Menambahkan Judul Halaman atau Posting di Loop

Hal berikutnya yang ditampilkan pada posting atau halaman Anda adalah judulnya. Dalam kode yang ada, ini adalah judul statis di dalam tag <h2>. Temukan baris kode yang berbunyi:

Edit itu sehingga sekarang berbunyi:

Ini menambahkan dua hal:

  • Tautan ke posting atau halaman itu sendiri (menggunakan the_permalink()). Ini berguna untuk mengarsipkan halaman untuk memungkinkan pengguna mengklik tautan ke halaman posting itu sendiri
  • Judul posting atau halaman, yang secara otomatis akan diisi oleh WordPress

5. Menambahkan Metadata Posting

Elemen section pertama di dalam loop adalah untuk metadata posting - khususnya tanggal dan penulis posting.

Temukan baris kode ini (atau semua kode di dalam elemen section pertama: mungkin berbeda dalam tema Anda):

Gantilah dengan:

Anda telah menambahkan dua tag template:

  • Tanggal posting diterbitkan, menggunakan the_date()
  • Penulis posting, menggunakan the_author()

6. Menambahkan Konten Posting

Yang paling penting adalah memastikan konten posting atau halaman ditampilkan dan Anda melakukan ini menggunakan satu tag template sederhana - the_content().

Temukan section dengan kelas .entry-content dan hapus isinya. Ganti ini dengan tag the_content() sehingga seluruh section terlihat seperti ini:


7. Lebih Banyak Metadata Posting

Dalam desain saya, ada lebih banyak metadata setelah posting atau konten halaman. Ini opsional, tetapi di sini saya akan menggunakannya untuk menampilkan daftar kategori yang terkait dengan posting. Anda mungkin memilih untuk melewatkan ini dari tema Anda tergantung pada desain Anda dan penggunaan kategori atau tag Anda.

Hapus isi section akhir dengan kelas .entry-meta dan gantikan mereka sehingga seluruh bagian terbaca:

Sebaiknya luangkan waktu untuk mengatasi kode ini karena ini adalah potongan terpanjang dari PHP yang telah Anda tambahkan sejauh ini.

  • Baris pembuka memeriksa jumlah kategori yang ditetapkan untuk posting menggunakan pernyataan if dan jika ini lebih dari nol, menjalankan sisa kode.
  • Ini kemudian membuka elemen span dan daftar kategori posting di dalamnya, menggunakan echo get_the_catgeory_list(). Echo ini penting karena tanpa ini fungsi get_the_category_list() tidak akan benar-benar menampilkan daftar, itu hanya akan mengakses daftar dan tidak melakukan apa-apa dengannya.
  • Akhirnya pernyataan endif menutup pernyataan if sehingga WordPress dapat berpindah ke potongan kode berikutnya.

Terakhir, simpan file index.php Anda, kembali ke browser Anda dan segarkan layar beranda. Ini seharusnya berubah sedikit, seperti yang ditunjukkan di bawah ini:

creating-wordpress-theme-from-static-html-site-loop-added

Seperti yang Anda lihat, item berikut ditampilkan:

  • Judul halaman
  • Tanggal dan penulis
  • Isi halaman
  • Daftar kategori tidak ditampilkan karena ini adalah halaman bukan posting, dan kategori tidak berlaku untuk halaman secara default. Anda akan melihat contoh dengan daftar kategori yang ditampilkan nanti di dalam seri
Perhatikan bahwa gambar unggulan belum ditampilkan - Anda akan memperbaikinya di Bagian 10 dari seri ini.

Ringkasan

Tema Anda sekarang sedang dalam perjalanan untuk menjadi tema yang berfungsi penuh. Ini memiliki loop di tempat untuk menampilkan konten yang ditambahkan melalui admin WordPress serta satu set file template. Langkah selanjutnya adalah mengedit file header.php untuk menyertakan hook tindakan penting dan beberapa tag template lainnya.


Sumber Daya

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.