loader loader
membuat single page wordpress

Setelah membuat file index dengan looping-nya, step yang ke empat dalam pembuatan tema WordPress ini adalah membuat halaman single (single page). Untuk membuat single page, Anda perlu membuat file baru single.php melalui text editor.

Perlu diingat, nama file single.php ini nantinya tidak boleh diganti, karena WordPress sudah mempunyai paten nama file sendiri. Untuk mengetahui nama-nama file yang benar, Anda bisa check di sini.

Single page adalah bagian website WordPress yang berisi satu halaman saja. Misalnya ketika Anda membuka halaman utama pada sebuah website dan masuk ke satu artikel tertentu, Anda akan masuk ke single page.

Jadi, file single page ini berguna sebagai template untuk menampilkan satu artikel post atau post type yang lain yang belum mempunyai file single sendiri. Berikut tutorial selengkapnya!

Langkah 1: Membuat File Single Page

File single.php pada dasarnya sama seperti file index.php yang sebelumnya telah kita buat, karena memiliki fungsi dan attribute sama. Hanya saja, untuk file single.php ini tidak ada fungsi looping post.

Pada kode single ini, fungsi yang bisa kita highlight adalah if ( has_post_thumbnail() ). Fungsi lain yang juga penting dapat Anda lihat di sini. Kondisi ini berfungsi mengecek apakah artikel tersebut mempunyai featured image. Berikut cara penerapannya:

Buka software text editor Anda. Kami menggunakan text editor VS Code. Klik File > New File > beri nama single.php.

membuat file single.php

Membuat file single.php di text editor.

  • Simpan di folder (C:) > xampp (atau software local server yang Anda gunakan) > htdocs > testingdua (menyesuaikan nama web Anda) > themes > WordPress-theme-from-scratch. Beri nama single.php dan klik Create.

    membuat file single.php

    Tempat menyimpan file single.php.

  • Copy-Paste code single page ke file single.php yang telah Anda buat.

    membuat file single.php

    Template code single page.

  • Berikut code single page yang dapat Anda copy dan nantinya dapat dimodifikasi:

    <?php /** * The template for displaying all single posts * * @package Tutorial */ get_header(); ?> <article class="blog-post px-3 py-5 p-md-5"> <?php while ( have_posts() ) : ?> <?php the_post(); ?> <div class="container single-col-max-width"> <header class="blog-post-header"> <h2 class="title mb-2"><?php the_title(); ?></h2> <div class="meta mb-3"> <span class="date"><?php tutorial_publish_date(); ?></span> <span class="time"><?php tutorial_reading_time(); ?></span> <span class="comment"><?php comments_popup_link( false, false, false, 'text-link' ); ?></span> </div> </header> <div class="blog-post-body"> <?php if ( has_post_thumbnail() ) : ?> <figure class="blog-banner"> <?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid' ) ); ?> <?php tutorial_post_thumbnail_caption(); ?> </figure> <?php endif; ?> <?php the_content(); ?> </div> <?php tutorial_post_navigation(); ?> <div class="blog-comments-section"> <div id="disqus_thread"></div> </div><!--//blog-comments-section--> </div><!--//container--> <?php endwhile; ?> </article> <?php get_footer(); Read More

    cara membuat template wordpress

    Saat ini banyak tersedia tema WordPress yang siap pakai baik gratis hingga berbayar. Tetapi ada kalanya kita butuh cara membuat theme WordPress sendiri.

    Pembuatan template WordPress di sini dilakukan tanpa menggunakan hosting, namun dikembangkan melalui localhost. Sehingga, Anda tidak perlu menyewa hosting.

    Lantas, bagaimana cara membuat template tema WordPress dari awal? Apa keuntungan membuat template WordPress? Berikut informasi dan tutorial selengkapnya.

    Keuntungan Membuat Theme WordPress Sendiri

    Mengembangkan tema WordPress sendiri memiliki beberapa keuntungan. Kecepatan dan keamanan adalah dua keuntungan pengembangan tema WordPress secara mandiri.

    Untuk kecepatan, tema yang dikembangkan sendiri tentu lebih ringan karena hanya menggunakan fungsi dan library yang dibutuhkan saja. Sementara tema berbayar atau free sering kali memiliki banyak fungsi yang belum tentu kita gunakan.

    Secara keamanan tema hasil pengembangan sendiri juga relatif lebih aman karena tidak ada yang memiliki source code tema tersebut. Hal ini menyebabkan reverse engineering tema untuk mencari celah keamanan menjadi lebih susah.

    Dari pengalaman penulis, untuk mulai mengembangkan tema WordPress, sebaiknya kita mempunyai desain yang sudah selesai dikembangkan. Jadi, kita bisa mencontoh desain tersebut.

    Setelah desain selesai dikembangkan, desain tersebut dapat dikonversi menjadi versi statik (HTML) terlebih dahulu atau langsung diimplementasikan pada tema WordPress. Hal ini sangat bergantung pada skill developer.

    Untuk memudahkan tutorial ini, tema akan dikembangkan berdasarkan template “Dev-Blog” milik Xriley . Dengan kata lain, kita akan membuat tema WordPress yang mirip dengan template tersebut.

    Persiapan Sebelum Membuat Theme WordPress

    Sebelum mengembangkan template WordPress secara offline, Anda perlu melakukan persiapan berikut ini:

    • Install WordPress kosong di server localhost. Ada dua jenis software server localhost yang kami rekomendasikan: WampServer dan XAMPP. WampServer untuk OS Windows. XAMPP bisa untuk Windows, Linux dan Mac OS.┬áBaca cara install WordPress di WampServer atau cara install WordPress di XAMPP untuk memulai. Dalam tutorial ini, kami menggunakan XAMPP.
    • Install Git.
    • Install text editor. Kami sarankan menggunakan Sublime atau Visual Studio Code. Dalam tutorial ini, kami menggunakan Visual Studio Code (VS Code).
    • Buka terminal untuk menjalankan git selain visual code.

    Jika persiapan di atas sudah selesai, ikuti cara membuat template sendiri di WordPress berikut, mulai dari clone tema WordPress, membuat file CSS dan PHP sederhana, hingga menampilkan hasil tema di WordPress.

    Langkah 1: Melakukan Clone Theme WordPress

    Untuk memudahkan cara membuat template WordPress dari awal, kita akan melakukan clone theme WordPress Theme from Scratch milik Tonjoo. Jika sudah paham cara melakukan clone, langsung gunakan perintah berikut di Text Editor.

    cd wp-content/theme
    git clone https://github.com/tonjoo/WordPress-theme-from-scratch.git
    cd themes/WordPress-theme-from-scratch
    git log --oneline

    Jika belum memahami cara melakukan clone, ikuti langkah-langkah berikut ini:

    Pastikan Anda sudah install WordPress di server localhost XAMPP. Buka VS Code > klik File > klik Open folder.

    Buka file theme WordPress melalui Visual Studio Code

    Buka file theme WordPress melalui Visual Studio Code (VS Code)

  • Selanjutnya, masuk ke Local Disk (C:) > pilih xampp > masuk folder htdocs > pilih folder WordPress yang Anda buat. Di sini kami menggunakan nama belajarwp > pilih wp-content > pilih themes. Kemudian klik Select Folder.
  • Buka Terminal dengan cara klik Toggle Panel di bagian kanan atas, nomor 2 dari kiri.

    Membuka Terminal pada Visual Studio Code

    Membuka Terminal pada VS Code

  • Ketik perintah git clone > copy-paste url: https://github.com/tonjoo/WordPress-theme-from-scratch.git > klik Enter. Tunggu proses clone berhasil seperti di bawah. Clone merupakan proses penyalinan kode program yang nantinya akan kita modifikasi.

    Melakukan Clone Theme

    Melakukan clone theme dengan perintah git

  • Masuk ke folder code hasil clone dengan cara ketik perintah cd WordPress-theme-from-scratch > klik Enter.

    Masuk ke folder hasil clone

    Masuk ke folder hasil clone

  • Masuk ke daftar Commit dengan cara ketik perintah git log –oneline > klik Enter.

    Masuk ke daftar Commit

    Masuk ke daftar Commit

  • Commit pada repository sudah disesuaikan dengan langkah-langkah pengembangan theme pada tutorial ini. Setelah Anda tekan Enter, daftar commit akan muncul seperti berikut ini:

    60de019 (HEAD -> master, origin/master, origin/HEAD) Part 3, Step 2 156feb4 Part 3, Step 1 8efec1e Part 2, Step 2 : widget a23df50 Part 2, Step 1 : daftarkan menu di functions.php c6d005a Step 5 : Single.php 19c2493 Step 4 : Membuat Excerpt otomatis di functions.php 007c73f Step 3 : Query Loop fbde939 Step 2 : functions.php bf92316 Step 1 : Base Theme be0edf4 init commit Read More