Cara membuat tema kustom WordPress

Diterbitkan: 2021-08-06

WordPress menempati persentase besar dari situs web dunia, membentuk 37% dari semua situs yang saat ini online. Meskipun ada banyak alasan dan faktor untuk keberhasilan ini, salah satu alasan utamanya adalah popularitas fitur yang tersedia untuk semua pengguna. Plugin, tema, posting, halaman, kategori, taksonomi, peran pengguna dan penanganan media hanya untuk beberapa nama. Untuk mendapatkan hasil maksimal dari WordPress, pengguna disarankan untuk mempelajari dan mempelajari cara menggunakan semua fitur ini. Di blog ini, kami akan fokus dan membahas Tema WordPress dan akan memandu Anda melalui dasar-dasar yang diperlukan tentang cara membuat tema kustom WordPress.

Apa itu tema khusus?

Segala sesuatu di frontend situs Anda dijalankan dan dikendalikan menggunakan sesuatu yang disebut 'tema'. Tema situs web bertanggung jawab atas desain dan fungsionalitas spesifik situs web. Anda dapat melihat repositori tema WordPress atau Themeforest untuk contoh tema; di sini Anda akan menemukan ribuan tema yang terdaftar untuk Anda jelajahi dan unduh.

Meskipun tema WordPress yang mapan sangat bagus, jika Anda memiliki kemampuan dan kebutuhan, Anda mungkin juga ingin membuat tema kustom Anda sendiri untuk klien, untuk diri sendiri, atau untuk dikirimkan ke pasar dengan tujuan menjualnya. Saat membuat tema komersial, Anda harus mengikuti pedoman marketplace untuk standar pengkodean, struktur file dan folder, dll. Anda dapat menemukan detail lebih lanjut mengenai pedoman ini di situs web marketplace .

Di blog ini, kami akan menjalankan tutorial untuk menunjukkan kepada Anda gambaran umum dasar tentang cara membuat tema WordPress Anda sendiri dengan mencakup semua dasar-dasar dan langkah-langkah yang terkait dengan prosesnya.

Buat tema kustom WordPress

Tema WordPress dibuat dengan file template, skrip, gaya, gambar, dll. Untuk melanjutkan, Anda harus memiliki pengetahuan tentang PHP, HTML, dan CSS, yang diperlukan untuk membuat tema khusus. Memahami JavaScript juga bisa menjadi keuntungan tambahan.

Untuk memulai, pertama-tama kita akan memberi nama tema 'Updraft'. Buat folder bernama 'Updraft' di dalam wp-content/themes . Di dalam folder 'Updraft' ini, Anda akan menulis kode terkait tema Anda, menyimpan file, gambar, font, dll.

File utama dari tema WordPress kustom adalah:

  • style.css
  • index.php
  • function.php

Style.css akan menjadi file stylesheet utama dan Anda dapat menambahkan semua CSS Anda di file ini . Ingatlah bahwa Anda harus menyertakan tajuk informasi tentang tema tersebut. Header akan terlihat mirip dengan format di bawah ini dan berada di atas style.css .

 [kode]
/*
Nama Tema: Updraft
URI Tema: https://updraftplus.com
Penulis: UpdraftPlus
Penulis URI: https://updraftplus.com
Deskripsi: Tema khusus yang dibuat untuk situs web.
Versi: 1.0
Lisensi: GNU General Public License v2 atau lebih baru
Lisensi URI: http://www.gnu.org/licenses/gpl-2.0.html
Domain Teks: updraft
*/
[/kode]

Selanjutnya, buka Appearance >> Themes, di mana Anda akan melihat tema Anda terdaftar. Aktifkan. Saat Anda memeriksa frontend situs Anda, itu akan menampilkan layar kosong – karena kami belum menambahkan apa pun ke tema..

Ingatlah untuk menyimpan gambar, skrip, dan gaya Anda ke dalam direktori tema Anda. Direktori tema merujuk ke folder 'wp-content/themes/Updraft'. Pastikan untuk mengaturnya dengan menggunakan struktur folder yang baik, membuat folder khusus untuk gambar, skrip, dan gaya; Salin file ke direktori masing-masing.

File Fungsi

Functions.php adalah file di mana Anda dapat menambahkan kode untuk tujuan yang berbeda . File ini dimuat secara otomatis selama inisialisasi WordPress, dengan kode yang tertulis di dalamnya dieksekusi secara otomatis.

Operasi berikut dalam file functions.php biasanya dilakukan dalam urutan ini:

  • Lembar gaya dan skrip tema enqueue (tambahkan file JS dan CSS ke situs web).
  • Aktifkan Sidebars, Menu Navigasi, Posting Thumbnail, dll.
  • Tentukan fungsi yang digunakan di seluruh aplikasi.
  • Dll.

Pengguna dapat menambahkan gaya dan skrip mereka dari file functions.php sebagai berikut. Silakan lihat tautan berikut untuk dokumentasi lebih lanjut .

 [kode]
fungsi include_js_css() {
wp_register_style( "bootstrap", get_stylesheet_directory_uri() .
"/styles/bootstrap.min.css", array(), false, "all" );
wp_enqueue_style("bootstrap");
wp_register_script('bootstrap', get_stylesheet_directory_uri() .
'/scripts/bootstrap.min.js', array(), false, true);
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts', 'include_js_css');
[/kode]

Fungsi get_stylesheet_directory_uri() memberikan jalur relatif dari direktori tema aktif. Sisa kode dapat dilihat sebagai jalur aset.

Demikian pula, untuk menambahkan Menu Navigasi, Posting Thumbnail:

 [kode]
fungsi updraft_theme_setup() {
add_theme_support( 'post-thumbnail' );
daftar_nav_menu(
Himpunan(
'utama' => __( 'Menu Utama' ),
'footer1=' => __( 'Menu Footer' ),
'toko' => __( 'Menu Halaman Toko' ),
)
);
}
add_action( 'after_setup_theme', 'updraft_theme_setup' );
[/kode]

Selanjutnya, buka dasbor WordPress dan tambahkan posting atau halaman. Anda akan melihat bagian 'Gambar Unggulan'. Selain itu, di bawah Appearance >> Menus, Anda akan menemukan Menu Utama dan Menu Footer di bawah Kelola Lokasi .

Ini hanyalah beberapa fitur dasar yang dapat Anda cakup saat menggunakan file 'Fungsi'. Ada banyak lagi yang dapat Anda tambahkan dalam file ini jika diinginkan.

File template

Saat membangun tema Anda, file template dapat digunakan untuk memengaruhi tata letak dan desain berbagai bagian situs web Anda. Misalnya, Anda akan menggunakan template header.php untuk membuat header, atau template comments.php untuk menyertakan komentar di situs Anda. File template memiliki ekstensi .php . Karena mereka adalah file PHP, semua halaman ditampilkan sebagai HTML.

Menggunakan template, pengembang dapat mendistribusikan kode di antara banyak file. Di bawah ini adalah beberapa file yang dimaksud.

  • index.php : Template utama. File ini harus bertanggung jawab untuk daftar posting. Saat Anda mengatur halaman Postingan dari Settings >> Readings , template ini akan dieksekusi.
  • page.php : Template ini bertanggung jawab untuk merender halaman Anda. Pengaturan ini dapat diganti dengan menetapkan template halaman kustom ke halaman individual.
  • single.php : Digunakan ketika satu postingan di-query.
  • header.php : Tambahkan bagian header Anda di template ini.
  • footer.php : Tambahkan bagian footer Anda di template ini.
  • sidebar.php : Tambahkan widget di template ini.

Dapatkan daftar semua file template yang tersedia di sini .

Templat halaman khusus

Secara default, semua halaman Anda dirender melalui template page.php . Namun dalam praktiknya, Anda terkadang harus menampilkan alur yang terpisah pada halaman yang berbeda. Dalam skenario ini, Anda disarankan untuk menggunakan kekuatan templat halaman kustom.

Misalnya, jika Anda memiliki halaman 'Karir' dan ingin menambahkan kode ke halaman ini; untuk mencapai ini, Anda perlu membuat file career.php ke dalam direktori tema dan menempatkan komentar di bawah di bagian atas file.

 [kode]
<?php
/*
Nama Template: Karir
*/
[/kode]

Selanjutnya, buka bagian edit halaman dan tetapkan template 'Karir' ini dari bawah kotak Atribut Halaman .

Sekarang ketika Anda mengunjungi halaman Career – kode dari career.php akan dieksekusi.

File header

Situs web Anda akan memiliki tajuk umum di semua halaman. Anda dapat menempatkan header umum ini ke dalam header.php . Kode header akan menjadi seperti ini:

 [kode]
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<kepala>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- menu Anda -->
[/kode]

Pada kode di atas, Anda akan melihat bahwa kami menggunakan beberapa fungsi yang tersedia di WordPress.

  • wp_head() : Metode ini menyisipkan elemen penting ke dalam dokumen Anda – misalnya, skrip, gaya, dan tag meta.
  • body_class() : Ini akan menambahkan kelas yang berbeda ke elemen body.
  • wp_body_open() : Digunakan untuk memasukkan kode segera setelah membuka tag body. Contohnya adalah- skrip Google Analytics.

Menu dapat ditambahkan secara dinamis melalui fungsi wp_nav_menu() . Dengan asumsi Anda telah terlebih dahulu membuat menu di bawah Appearance >> Menus dan menetapkan lokasi 'primer' untuk itu. Kode di bawah ini menghasilkan elemen menu secara dinamis.

 [kode]
<?php
wp_nav_menu(
Himpunan(
'theme_location' => 'utama',
'container_class' => 'menu',
)
);
?>
[/kode]

Setelah file header Anda disetel, gunakan fungsi get_header() untuk memasukkan file ini ke dalam template Anda yang lain.

File catatan kaki

Mirip dengan file header, kode umum Anda untuk footer akan masuk ke dalam template footer.php .

 [kode]
<!-- elemen footer -->
<?php wp_footer(); ?>
</tubuh>
</html>
[/kode]

Di sini, gunakan wp_footer() yang menyisipkan elemen, khususnya skrip, di lokasi ini. Menggunakan get_footer() akan menyertakan konten file ini di tempat lain.

File bilah sisi

Bilah sisi adalah kolom vertikal yang digunakan untuk menampilkan informasi di situs Anda yang tidak ditampilkan dalam konten utama. Ini mungkin termasuk artikel populer, spanduk iklan, formulir pengiriman buletin, dll. Bilah sisi berisi widget yang dapat disesuaikan oleh administrator. Template sidebar.php akan menyertakan widget situs Anda.

Dalam contoh ini, kita akan membuat sidebar dasar dengan menambahkan kode di bawah ini ke file functions.php .

 [kode]
fungsi updraft_widgets_init() {
register_sidebar(
Himpunan(
'name' => esc_html__( Home Sidebar' ),
'id' => 'bilah sisi-1',
'description' => esc_html__( 'Tambahkan widget di sini untuk muncul di sidebar Anda.' ),
'before_widget' => '<section class="widget">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action('widget_init', 'updraft_widgets_init');
[/kode]

Selanjutnya, buka Appearance >> Widgets . Di sini Anda akan menemukan bilah sisi di atas. Dalam contoh ini, kita akan menambahkan beberapa widget ke sidebar ini. Untuk menambahkan sidebar ini ke frontend, tambahkan kode berikut di sidebar.php.

 [kode]
<div class="sidebar">
<?php
if ( is_active_sidebar( 'sidebar-1' ) ) {
dynamic_sidebar('bilah sisi-1');
}
?>
</div>
[/kode]

Terakhir, ingatlah untuk memberi nama metode ' get_sidebar()' sehingga Anda dapat dengan mudah menyertakan sidebar di mana pun di halaman lain mana pun saat dan saat diperlukan.

Merender halaman dan posting

Seperti yang telah disebutkan, semua halaman WordPress dirender dan dieksekusi menggunakan kode yang Anda tulis di file page.php , kecuali halaman dengan template halaman kustom. Kode di bawah ini adalah contoh yang akan menampilkan halaman yang menampilkan judul halaman, deskripsi, dan gambar unggulan.

 [kode]
<?php
get_header();
?>
<div class="content-area">
<main class="situs-utama">
<?php
while ( have_posts() ):
the_post();
?>
<?php
jika ( has_post_thumbnail() ):
the_post_thumbnail();
berakhir jika;
?>
<header class="entry-header">
<?php the_title(); ?>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
<?php
sementara;
?>
</main>
</div>
<?php
get_footer();
[/kode]

Kode serupa akan masuk ke dalam file single.php untuk menampilkan informasi posting. Untuk merender daftar posting dengan benar ( index.php Anda ), selain metode di atas – Anda mungkin juga ingin menggunakan yang berikut ini:

  • the_catgeory() : Menampilkan daftar kategori untuk sebuah posting.
  • the_permalink() : Menampilkan permalink untuk posting saat ini.
  • the_excerpt() : Menampilkan kutipan postingan.

I18n untuk tema kustom WordPress

Saat membangun tema khusus, cobalah untuk mengingat bahwa itu harus dikembangkan dengan cara untuk mendukung internasionalisasi. Dengan melakukan ini, memungkinkan tema Anda untuk dengan mudah diterjemahkan ke dalam bahasa lain.

Untuk menambahkan dukungan I18n, ingatlah untuk menggunakan domain teks tempat Anda dapat mengurai file sumber dan mengekstrak string yang dapat diterjemahkan. Dalam contoh ini, kami menggunakan domain teks 'Updraft', tetapi Anda dapat memilih pengenal unik apa pun. Kita dapat mendefinisikan domain teks sebagai berikut.

 [kode]
fungsi i18n_setup() {
load_theme_textdomain( 'updraft', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'i18n_setup' );
[/kode]

Sekarang setiap kali Anda menggunakan string statis dalam file tema Anda, bungkus di dalam fungsi __() atau _e() .

 [kode]
<h2><?php _e('Nama Depan', 'updraft); ?></h2>
<?php echo __('Email Pengguna', 'updraft'); ?>
[/kode]

Ada alat khusus yang tersedia seperti POEDIT yang membantu menghasilkan file bahasa yang diterjemahkan. Silakan merujuk ke blog ini untuk informasi lebih lanjut.

Blog ini telah membahas dasar-dasar membuat tema kustom WordPress. Namun, ini adalah topik yang luas yang membutuhkan banyak waktu dan kesabaran. Di bawah ini adalah beberapa sumber daya bermanfaat yang harus Anda kenal yang akan membantu Anda mulai membuat tema WordPress Anda..

  • Lingkaran WordPress
  • Tag Template
  • Halaman Kategori
  • Fungsi_Referensi
  • Tag Bersyarat
  • Standar Pengkodean WordPress

Saat membuat tema baru untuk situs WordPress Anda, ingatlah bahwa Anda harus mencadangkannya setelah setiap perubahan atau berisiko kehilangan semua pekerjaan Anda. Gunakan UpdraftPlus – Plugin pencadangan, pemulihan, dan kloning WordPress terkemuka dan tepercaya di dunia.

Posting Cara membuat tema kustom WordPress muncul pertama kali di UpdraftPlus. UpdraftPlus – Cadangkan, pulihkan, dan plugin migrasi untuk WordPress.