Chapter 4: Pages — A Few Quick Edits / Improvements
Ringkasan
Video ini berisi beberapa perbaikan kecil tapi penting pada theme: viewport meta tag untuk responsive design, language attributes, character set meta tag, dan body_class().
Step-by-Step
1. Viewport Meta Tag (Responsive Design)
Problem: Website terlihat zoom-out di mobile device — layout desktop diperkecil alih-alih menyesuaikan layar.
📄 header.php — tambahkan di <head> section, sebelum <?php wp_head(); ?>:
<meta name="viewport" content="width=device-width, initial-scale=1">| Attribute | Nilai | Penjelasan |
|---|---|---|
width=device-width | Menggunakan lebar layar device yang sebenarnya | Tidak lagi zoom-out layout desktop |
initial-scale=1 | Zoom level awal = 100% | Tidak ada zoom in/out saat pertama kali load |
Catatan penting: Meta tag ini sendiri TIDAK membuat website responsive. CSS harus sudah ditulis responsive (media queries, flexible layouts). Meta tag ini adalah pelengkap yang memberitahu browser untuk menggunakan native device width.
Cara test responsive di Chrome:
- Klik kanan → Inspect
- Klik icon device toolbar (2 rectangles di kiri atas DevTools)
- Pilih device (iPhone, Galaxy, iPad, dll)
2. Language Attributes
📄 header.php — pada opening <html> tag:
Sebelum:
<html>Sesudah:
<html <?php language_attributes(); ?>>| Fungsi | Output | Kegunaan |
|---|---|---|
language_attributes() | lang="en-US" (tergantung setting WordPress) | Memberitahu search engine dan browser bahasa website |
Hasil HTML yang di-render:
<html lang="en-US">3. Character Set Meta Tag
📄 header.php — tambahkan di <head> section:
<meta charset="<?php bloginfo('charset'); ?>">| Fungsi | Output | Kegunaan |
|---|---|---|
bloginfo('charset') | UTF-8 (biasanya) | Memberitahu browser jenis karakter/encoding yang digunakan halaman |
bloginfo()adalah fungsi serbaguna WordPress — bisa mengambil berbagai informasi blog. Argumen'charset'mengembalikan character set.
4. Body Class
📄 header.php — pada opening <body> tag:
Sebelum:
<body>Sesudah:
<body <?php body_class(); ?>>| Fungsi | Kegunaan |
|---|---|
body_class() | Menambahkan class CSS dinamis pada tag <body> berdasarkan halaman yang sedang dilihat |
Contoh output:
Di homepage:
<body class="home page-template-default logged-in">Di About Us (parent page):
<body class="page page-template-default page-id-16 page-parent">Di Our History (child page):
<body class="page page-id-22 page-child parent-pageid-16">Kegunaan: Class-class ini bisa digunakan di CSS untuk styling khusus per-halaman, atau di JavaScript untuk conditional logic.
Gambaran header.php Setelah Semua Perubahan
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
<!-- ...navigasi dan logo... -->
</header>Poin Penting
- Viewport meta tag → wajib untuk responsive design, tapi CSS responsive harus sudah ditulis terlebih dahulu
language_attributes()→ otomatis output language tag sesuai setting WordPressbloginfo('charset')→ otomatis output character encodingbody_class()→ salah satu function paling berguna — menambahkan class informatif yang berubah-ubah per halaman- Semua perubahan ini adalah best practice untuk setiap WordPress theme