Lembar Cheat WordPress Terbaik

WordPress dengan cepat menjadi terkenal jika belum. Ada di mana-mana, keindahan yang ramah ini, mendukung beberapa situs web dan aplikasi web terbaik yang pernah ada di dunia. Ini adalah CMS dan platform blogging perdana yang tidak hanya sangat serbaguna, namun juga sangat mudah dipelajari dan digunakan. Mengapa lagi WordPress semakin populer dari hari ke hari?

Namun apa yang Anda lihat saat menyiapkan dan meluncurkan WordPress hanyalah sebagian kecil dari apa yang terjadi di balik layar. Faktanya, UI indah yang kita semua sukai tidak ada apa-apanya dibandingkan dengan hiruk pikuk aktivitas di belakang panggung. Maksud saya adalah, WordPress berjalan pada dua teknologi web yang agak rumit yang dikenal sebagai PHP dan MySQL.

Teknologi lain yang berperan termasuk JavaScript, yang merupakan sepupu dekatnya jQuery, CSS, dan HTML. Tema WordPress (dan bahkan plugin) sebagian besar ditulis dalam PHP, dan bergantung pada database MySQL untuk dijalankan. Mereka juga bergantung pada teknologi web yang disebutkan di atas. Semua teknologi ini harus bekerja sama.

Sebagai seorang pemula, Anda mungkin tidak memahami bahwa agar platform, tema, dan plugin WordPress dapat bekerja secara bersamaan, pengembang menggunakan sekumpulan kode standar, atau secara kolektif dikenal sebagai tag PHP. Kode-kode inilah yang kami uraikan di postingan hari ini, yang menunjukkan kepada Anda betapa bergunanya kode tersebut. Kami akan memasukkan beberapa contoh di sini sebagai gambaran, jadi bersiaplah untuk bersenang-senang dalam perjalanan membangun tema Anda!

Anatomi Tema

Tema WordPress tidak lebih dari sekedar beberapa file PHP yang dihubungkan bersama. Muncul dengan file stylesheet CSS yang bertanggung jawab atas tampilan tema (dan situs) Anda. Kembali ke dasar, tema WordPress hanyalah beberapa file PHP. Di atas adalah cuplikan dari tuts+ cheatsheet yang bagus untuk anatomi tema WordPress. Untuk membuat tema WordPress, Anda memerlukan file berikut:

  • header.php – File template ini berisi informasi header, yang muncul di bagian <head>, dan sebelum tag <body> pembuka. Di sini Anda antara lain menambahkan metadata, judul situs, dan tautan ke stylesheet CSS Anda.
  • index.php – Ini adalah template isi utama untuk tema (atau situs) WordPress Anda. Tujuan utamanya adalah untuk menyatukan file-file lain dengan memasukkannya menggunakan tag templat (lebih lanjut tentang tag templat sebentar lagi).
  • sidebar.php – Ini adalah bagian sidebar Anda. Anda dapat menempatkan widget, kategori, menu tambahan, formulir pencarian, dan apa pun yang Anda suka
  • footer.php – Ini adalah bagian footer. Tambahkan info hak cipta Anda, tautan RSS, widget, tautan, ikon sosial, dll
  • page.php – Setiap kali Anda membuat halaman di situs berbasis WordPress, templat inilah yang bertanggung jawab
  • single.php – File template ini berisi satu postingan blog
  • comments.php – Templat yang bertanggung jawab atas komentar tersebut
  • 404.php – Templat yang ditampilkan saat pembaca Anda menemukan kesalahan 404 tidak ditemukan yang terkenal
  • search.php – Menawarkan kesempatan kepada pembaca untuk menemukan konten di situs WordPress Anda
  • searchform.php – Anda memerlukan formulir pencarian untuk menawarkan fungsi yang disebutkan di atas, bukan?
  • archive.php – Karena menemukan konten yang Anda publikasikan pada tahun 2008 tidak akan merepotkan
  • functions.php – Tempatkan semua fungsi khusus, dan bahkan plugin khusus di sini. Namun untuk kompatibilitas lintas tema, Anda disarankan untuk menambahkan kode khusus sebagai plugin mandiri. Anda dapat menambahkan menu tambahan, mengaktifkan widget, dan banyak lagi. File ini memberi Anda begitu banyak kekuatan untuk mengubah situs/tema WordPress Anda sesuai keinginan Anda.
  • style.css – Ini bukan file template PHP. Namun ini adalah file tempat Anda menambahkan gaya CSS untuk mengontrol estetika. Itu juga dilengkapi dengan header informasi untuk tema WordPress Anda.

Tidak diragukan lagi, Anda dapat membuat tema dengan lebih sedikit templat, namun kami tidak menyarankan Anda menjadikannya sebagai kebiasaan. Lagi pula, Anda hanya memerlukan sekitar 10 file di atas untuk membuat tema WP standar. Tiga belas bukanlah angka yang besar, bukan? Singkatnya, index.php Anda mungkin terlihat seperti ini:

<?php
// Every page will need the contents of the header.php
get_header(); ?>

// Insert main content here, include the loop

<?php
// Include your sidebar
get_sidebar(); ?>

<?php
// The footer hook is used by themes and plugins to load scripts and tracking codes
get_footer(); ?>

Selanjutnya, mari kita bahas tentang cuplikan kode bagus yang disebut the loop.

Putaran

Dalam beberapa seri postingan kami sebelumnya, seperti Tutorial WordPress yang populer: Cara Membuat Tema WordPress dari HTML, kami telah menyebutkan loopnya, meskipun hanya sekilas. Jadi apa yang membuat loop menjadi cuplikan populer? Tanpa kode khusus ini, Anda harus mengkodekan setiap postingan, beserta kutipannya, ke dalam tema WordPress Anda. Anda akan melakukan ini setiap kali Anda memposting artikel baru.

Usaha dan waktu yang Anda buang akan membuat Anda pucat dan kaku. Jejak karbon yang Anda tinggalkan – setelah bekerja keras sampai mati – akan membuat lubang seukuran dua belas stadion Yankee menembus lapisan ozon. Ya, saya melebih-lebihkan fakta (atau ketiadaan fakta), tetapi Anda akan menjadi gila jika Anda mengkodekan setiap posting ke situs WordPress Anda secara manual.

Lingkaran ini adalah penyelamat hidup. Cukup letakkan cuplikan kode berikut di mana pun di file template WordPress Anda, dan itu akan mencantumkan semua postingan yang pernah Anda buat:

<?php
if ( have_posts() ) :

	while ( have_posts() ) :

		the_post();

		// Post Content here

	endwhile;

endif; ?>

Kami biasanya menggunakan loop di index.php untuk menampilkan daftar postingan, namun jangan ragu untuk bereksperimen; tambahkan di mana pun Anda ingin mencantumkan postingan Anda. Selain itu, tambahkan tag HTML dan PHP khusus di dalam loop untuk menyesuaikan postingan Anda sesuai keinginan Anda. Berbicara tentang tag, apa saja yang tersedia di WordPress?

Sertakan Tag

Tag penyertaan templat hanyalah kode PHP yang Anda gunakan dalam file templat apa pun untuk menyertakan (atau lebih tepatnya memanggil) file templat lain dari folder tema WordPress Anda. Inilah yang sedang kita bicarakan:

  • <?php get_header(); ?> – Gunakan ini di index.php untuk memanggil (atau menyertakan) file header.php. Ini akan mengambil header.php dan menampilkan kontennya di index.php – itulah arti dari menyertakan file.
  • <?php get_sidebar(); ?> – Termasuk sidebar.php
  • <?php get_footer(); ?> – Termasuk file template footer.php
  • <?php comments_template(); ?> – Kuis Singkat: Menurut Anda, apa fungsi tag penyertaan ini?

Tag Info Blog Templat

Ada kategori lain dari tag templat yang kami sebut saja tag bloginfo. Mereka memainkan satu peran, yaitu mengambil informasi tentang situs WordPress Anda dari database. Ini pada dasarnya adalah informasi yang Anda masukkan ke situs WordPress di area admin Anda melalui Profil Pengguna dan Pengaturan -> Umum. Setelah informasi diambil dari database Anda, tag ini akan menampilkan informasi yang sama di situs Anda saat Anda menempatkannya.

Anda dapat sedikit memodifikasi struktur bloginfo, sehingga alih-alih hanya menampilkan informasi yang diambil, Anda dapat menggunakannya (info) di tempat lain dalam kode PHP Anda. Alangkah nyaman? Lebih lanjut tentang itu sebentar lagi. Berikut adalah tag bloginfo yang paling umum:

  • <?php bloginfo('nama'); ?> – Ini menampilkan judul blog/situs WordPress Anda
  • <?php bloginfo('url'); ?> – Tag template ini menampilkan URL blog Anda
  • <?php bloginfo('deskripsi'); ?> – Ini menampilkan deskripsi, atau lebih tepatnya tagline, blog Anda.
  • <?php bloginfo('rangkaian karakter'); ?> – Menampilkan kumpulan karakter yang digunakan untuk menyandikan situs Anda. Standarnya adalah UTF-8
  • <?php bloginfo('stylesheet_url'); ?> – Ini menampilkan URL ke stylesheet CSS tema aktif Anda
  • <?php bloginfo('versi'); ?> – Menampilkan versi WordPress yang Anda gunakan
  • <?php bloginfo('bahasa'); ?> – Menampilkan bahasa WordPress
  • <?php bloginfo('rss_url'); ?> – Menampilkan URL untuk umpan RSS 0.92
  • <?php bloginfo('rss2_url'); ?> – Menampilkan URL untuk umpan RSS 2.0

Ada beberapa tag bloginfo lain yang dapat Anda gunakan untuk menyempurnakan tema WordPress Anda. Sekarang tentang sedikit modifikasi bloginfo yang kita bicarakan beberapa detik yang lalu. Sejauh ini, kami telah menggunakan <?php bloginfo(); ?>. Mari kita ubah menjadi: <?php $bloginfo=get_bloginfo ($show, $filter); ?>. Izinkan saya menguraikan parameternya:

  • $show – Ini adalah kata kunci yang Anda gunakan untuk memberi nama informasi yang ingin Anda ambil dari database. Contohnya termasuk 'nama', 'url', 'deskripsi', 'admin_email' dll
  • $filter – Ini hanya memungkinkan Anda memfilter informasi yang diambil. Secara default, ini disetel ke 'mentah', yang berarti nilai $show dikembalikan apa adanya. Menyetelnya ke 'display' akan menyebabkan nilai $show dilewatkan melalui fungsi wptexturize() terlebih dahulu. Namun, jangan khawatir tentang hal ini saat ini.

Berikut ini contohnya: Anggaplah kita ingin mengambil dan menampilkan tagline Anda (deskripsi situs) seperti “Tema WordPress Premium Terbaik”, pertama-tama kita akan mengambil informasi ini menggunakan tag ini…

<?php $site_description = get_bloginfo( 'description' ); ?>

…yang memuat deskripsi situs ke $site_description. Untuk menampilkan deskripsi situs di situs Anda, gunakan ini:

<?php echo 'Your tagline is: '. esc_html( $site_description ); ?>

Ini memberi Anda: Tagline Anda adalah: Tema WordPress Premium Terbaik

Catatan: Ada banyak jenis tag template lain yang memungkinkan Anda mencapai lebih banyak hal dengan situs WordPress Anda. Tag tersebut diklasifikasikan ke dalam berbagai rangkaian, antara lain tag umum, tag penulis, tag thumbnail postingan, tag kategori, dan tag link. Anda bahkan dapat menggunakannya di dalam loop, jadi ya, Anda harus bersenang-senang.

Lembar Gaya Tema

Kami menyebutkan style.css sebelumnya. Sekali lagi, mengapa file style.css penting? Pertama, ini memberikan detail tentang tema Anda. Informasi ini masuk ke header stylesheet, yang membantu mengidentifikasi tema selama pemilihan di area admin. Dengan demikian, tidak ada dua tema yang memiliki detail yang sama di header stylesheetnya. Berikut ini contoh header stylesheet:

/*
Theme Name: Your Theme Name
Theme URI: https://www.yoursite.com/yourtheme
Author: Your Name
Author URI: https://www.yoursite.com/
Description: This WordPress theme is 100% responsive blah blah...
Version: 1.0
License: GNU General Public License V2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: gold, one-column, left-sidebar, responsive-grid, etc
Text Domain: yourthemename
*/

Informasi ini muncul pertama (atau paling atas) di style.css. Selain itu, pastikan Anda:

  • Ikuti Standar Pengkodean CSS
  • Gunakan CSS yang valid
  • Minimalkan CSS
  • Tambahkan gaya ramah cetak
  • Gaya semua elemen HTML

Pikiran Terakhir

Lembar contekan ini hanyalah sumber referensi singkat yang akan membantu Anda memulai saat mempelajari pengembangan tema WordPress. Dengan menggunakan tag dan cuplikan yang kami bagikan di sini, Anda dapat dengan cepat mengembangkan tema standar, dan menyempurnakannya tanpa bersusah payah. Tentu saja, Anda perlu terus mempelajari pengembangan tema WordPress, dan untuk itu kami merekomendasikan WordPress Codex, tuts+, Threehouse, dan ThemeShaper di antara sumber daya terkemuka lainnya.

Selain itu, jangan ragu untuk membagikan tip, cheat, cuplikan, atau apa pun yang Anda pikirkan di komentar di bawah. Kami ingin mengetahui di mana atau bagaimana Anda belajar tentang WordPress. Sampai jumpa!