WP Tutorial Archives - Banyumas WordPress

Membuat Tema WordPress dari Landing Page

Mengonversi landing page statis (HTML/CSS) menjadi tema WordPress adalah langkah strategis untuk mendapatkan kemudahan manajemen konten (CMS) tanpa kehilangan desain kustom yang sudah Anda buat.

Berikut adalah panduan langkah demi langkah untuk melakukan konversi secara mandiri dengan standar pengembangan modern.

1. Persiapan Struktur Folder Tema

Langkah pertama adalah membuat folder baru di direktori /wp-content/themes/. Berikan nama folder yang unik, misalnya my-custom-landing-page.

Di dalam folder tersebut, buatlah file-file dasar berikut:

style.css: Berisi informasi metadata tema.
index.php: File utama cadangan.
header.php: Untuk bagian atas website.
footer.php: Untuk bagian bawah website.
functions.php: Untuk mengaktifkan fitur tema.

2. Menyiapkan File Metadata (style.css)

Salin kode CSS dari landing page asli Anda ke dalam style.css. Di bagian paling atas, tambahkan komentar khusus agar WordPress mengenali folder ini sebagai tema:

CSS

/*
Theme Name: My Landing Page Theme
Author: Nama Anda
Description: Konversi Landing Page ke WordPress.
Version: 1.0
*/

3. Memecah HTML Menjadi Bagian-Bagian WordPress

A. Header (header.php)

Pindahkan kode HTML dari bagian <!DOCTYPE html> sampai ke penutup tag </header> ke dalam file ini. Jangan lupa tambahkan fungsi wajib wp_head() tepat sebelum tag </head>.

B. Footer (footer.php)

Pindahkan kode dari bagian awal <footer> sampai tag penutup </html>. Tambahkan fungsi wp_footer() tepat sebelum tag </body>.

C. Konten Utama (index.php)

Gunakan fungsi PHP untuk memanggil bagian-bagian yang sudah dipisah:

PHP

<?php get_header(); ?>

<?php get_footer(); ?>

4. Memanggil Aset (CSS dan JS) melalui functions.php

Agar script dan gaya tampilan termuat dengan benar sesuai standar WordPress, gunakan file functions.php. Jangan melakukan hardcode link di header.php.

PHP

<?php
function load_landing_page_assets() {
    wp_enqueue_style('main-style', get_stylesheet_uri());
    wp_enqueue_script('main-js', get_template_directory_uri() . '/js/script.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'load_landing_page_assets');

5. Mengintegrasikan Konten Dinamis

Agar konten bisa diubah melalui Dashboard WordPress, Anda memiliki dua pilihan utama:

Metode Tradisional: Menggunakan “The Loop” WordPress di dalam index.php untuk menampilkan konten dari Page Editor.
Metode Modern (Block Theme): Mengonversi elemen HTML Anda menjadi blok-blok WordPress. Ini adalah cara yang direkomendasikan jika Anda ingin memaksimalkan fitur Full Site Editing (FSE).

Tips Ahli: Gunakan file theme.json jika Anda ingin mengontrol skema warna dan tipografi tema secara global melalui Editor Situs.

Konversi landing page ke WordPress memberikan Anda fleksibilitas desain sekaligus kekuatan pengelolaan data. Dengan membagi struktur HTML menjadi komponen PHP dan mendaftarkan aset secara benar, Anda telah memiliki pondasi tema WordPress yang ringan dan cepat.

Jika Anda ingin melangkah lebih jauh, pertimbangkan untuk menggunakan Advanced Custom Fields (ACF) untuk mempermudah pengisian teks dan gambar pada landing page Anda tanpa menyentuh kode lagi di masa depan.

Panduan Lengkap: Cara Mengatur Jaringan WordPress Multisite

Pernahkah Anda membayangkan mengelola puluhan atau bahkan ratusan situs web hanya dari satu dasbor tunggal? Itulah kekuatan WordPress Multisite. Fitur ini memungkinkan Anda untuk membuat jaringan situs web (network) yang berbagi satu instalasi inti WordPress yang sama.

Artikel ini merupakan lanjutan dari artikel sebelumnya: Mengenal WordPress Multisite. Berikut adalah pembahasan mengapa Anda membutuhkannya, dan langkah-langkah teknis untuk mengaktifkannya.

Apa Itu Jaringan WordPress Multisite?

WordPress Multisite adalah koleksi situs yang berbagi file sistem, plugin, dan tema yang sama. Dalam jaringan ini, terdapat istilah “sub-situs” yang dikelola oleh seorang Super Admin. Meskipun berbagi file inti, setiap situs memiliki direktori media dan tabel konten database yang terpisah, sehingga konten antar situs tidak akan tercampur.

Mengapa Menggunakan Multisite?

Multisite sangat ideal untuk situasi di mana Anda memiliki banyak situs yang serupa namun harus tetap terpisah. Contohnya:

Institusi Pendidikan: Universitas yang memberikan sub-situs untuk setiap fakultas atau dosen.
Organisasi Non-profit: Cabang regional yang memiliki halaman web sendiri namun di bawah satu payung utama.
Jaringan Blog: Seperti Make WordPress, di mana setiap tim kontributor memiliki sub-situs khusus.

Hal yang Perlu Diperhatikan Sebelum Memulai

Sebelum melakukan instalasi, pastikan Anda telah melakukan hal berikut:

Backup Lengkap: Selalu cadangkan database dan file situs Anda.
Cek Permalinks: Pastikan struktur permalink sudah diatur (bukan struktur “Plain”).
Deaktivasi Plugin: Semua plugin harus dinonaktifkan sementara selama proses pengaturan.
Akses Hosting: Anda membutuhkan akses ke File Manager atau FTP untuk mengedit file sistem.

Langkah-Langkah Mengaktifkan WordPress Multisite

Langkah 1: Mengaktifkan Fitur Multisite

Buka file wp-config.php di direktori utama WordPress Anda menggunakan FTP atau File Manager. Tambahkan kode berikut tepat di atas baris /* That's all, stop editing! Happy blogging. */:

PHP

define( 'WP_ALLOW_MULTISITE', true );

Simpan file tersebut dan segarkan (refresh) halaman dasbor WordPress Anda.

Langkah 2: Pengaturan Jaringan (Network Setup)

Setelah langkah di atas, akan muncul menu baru. Buka Tools (Peralatan) > Network Setup. Di sini Anda harus memilih struktur URL untuk sub-situs Anda:

Sub-domains: Contoh: situs1.domainanda.com (Memerlukan pengaturan Wildcard DNS pada hosting).
Sub-directories: Contoh: domainanda.com/situs1 (Lebih mudah karena tidak perlu pengaturan DNS tambahan).

Isi detail nama jaringan dan email admin, lalu klik Install.

Langkah 3: Modifikasi File wp-config.php dan .htaccess

Setelah klik Install, WordPress akan memberikan dua blok kode. Anda harus memasukkannya ke dalam dua file berbeda:

wp-config.php: Salin kode yang diberikan dan tempelkan di atas baris yang tadi Anda tambahkan.
.htaccess: Ganti semua aturan penulisan ulang (rewrite rules) yang ada di file .htaccess dengan kode baru yang diberikan oleh WordPress.

Langkah 4: Login Kembali

Setelah file disimpan, keluar (log out) dari dasbor WordPress dan masuk kembali. Anda akan melihat perubahan besar: menu My Sites (Situs Saya) akan muncul di pojok kiri atas. Selamat! Anda sekarang adalah seorang Super Admin.

Mengatur WordPress Multisite mungkin terlihat teknis, namun manfaat efisiensi yang ditawarkan sangat luar biasa bagi pengelola banyak situs. Anda cukup memperbarui tema atau plugin satu kali, dan perubahan tersebut akan berlaku untuk seluruh jaringan situs Anda.

Pelajari lebih lanjut mengenai pengelolaan jaringan ini di dokumentasi resmi WordPress untuk memaksimalkan fitur Network Admin Anda!

Mengenal WordPress Multisite

Satu Atap untuk Banyak Website

Pernahkah Anda membayangkan mengelola puluhan website hanya dengan satu kali login? Jika Anda seorang pengembang web, pemilik jaringan blog, atau administrator institusi pendidikan, WordPress Multisite adalah fitur “ajaib” yang mungkin selama ini Anda cari.

Apa Itu WordPress Multisite?

WordPress Multisite adalah fitur bawaan WordPress yang memungkinkan Anda untuk membuat dan mengelola jaringan situs web (network) dari satu instalasi WordPress tunggal.

Bayangkan sebuah gedung apartemen: Anda sebagai pemilik gedung hanya perlu mengelola satu struktur utama (satu database dan satu instalasi WordPress), namun di dalamnya terdapat banyak unit kamar (situs-situs individu) yang bisa dihuni oleh penyewa berbeda.

Karakteristik Utama:

Satu Dashboard Utama: Terdapat peran Super Admin yang mengendalikan seluruh jaringan.
Berbagi Core: Semua situs menggunakan file inti, tema, dan plugin yang sama.
Database Bersama: Data disimpan dalam satu database, namun dipisahkan melalui tabel-tabel tertentu.
Struktur URL: Bisa menggunakan sub-domain (misal: site1.contoh.com) atau sub-direktori (misal: contoh.com/site1).

Fungsi Utama WordPress Multisite

Mengapa orang beralih ke Multisite daripada menginstal WordPress berkali-kali? Berikut adalah fungsi krusialnya:

1. Efisiensi Manajemen Update

Tanpa Multisite, jika Anda punya 10 website, Anda harus update WordPress, tema, dan plugin sebanyak 10 kali. Dengan Multisite, Anda cukup satu kali klik untuk memperbarui semuanya secara bersamaan di seluruh jaringan.

2. Manajemen Pengguna yang Terpusat

Anda bisa menambahkan pengguna baru sekali saja dan memberikan mereka akses ke situs tertentu dalam jaringan tanpa perlu membuat akun berulang kali.

3. Standarisasi Brand

Bagi perusahaan dengan banyak cabang, Multisite memastikan semua situs cabang menggunakan tema dan standar keamanan yang sama yang telah ditentukan oleh kantor pusat.

4. Penghematan Sumber Daya Server

Karena hanya menggunakan satu set file inti, penggunaan ruang penyimpanan (disk space) cenderung lebih efisien dibandingkan instalasi mandiri yang terpisah-pisah.

Siapa yang Butuh WordPress Multisite?

Fitur ini sangat powerful, tapi tidak untuk semua orang. Berikut adalah beberapa contoh pengguna yang ideal:

Pengguna	Contoh Penggunaan
Institusi Pendidikan	Universitas yang menyediakan blog gratis untuk setiap dosen atau mahasiswa.
Perusahaan Global	Brand yang memiliki sub-situs untuk tiap negara (misal: `id.brand.com`, `us.brand.com`).
Media Online	Jaringan berita yang memiliki kanal berbeda (Olahraga, Politik, Gaya Hidup).
Web Developer	Membuat situs staging atau demo untuk klien dalam satu tempat.

Kelebihan dan Kekurangan

Sebelum Anda mengaktifkannya, pertimbangkan pro dan kontra berikut:

Kelebihan:

Kontrol penuh di tangan Super Admin.
Proses instalasi plugin/tema baru yang sangat cepat untuk banyak situs.
Mudah dipantau secara keseluruhan.

Kekurangan:

Single Point of Failure: Jika server down atau terjadi error pada instalasi utama, semua situs dalam jaringan ikut mati.
Konflik Plugin: Beberapa plugin mungkin tidak dirancang untuk bekerja di lingkungan Multisite.
Keamanan: Jika satu situs berhasil diretas, ada risiko situs lain dalam jaringan ikut terancam.

WordPress Multisite adalah solusi brilian untuk efisiensi manajemen konten skala besar. Fitur ini mengubah WordPress dari sekadar platform blogging menjadi sistem manajemen jaringan yang sangat tangguh. Namun, pastikan Anda memiliki hosting yang mumpuni dan pemahaman teknis yang cukup sebelum mengelola “gedung apartemen” digital Anda sendiri.

Kita akan bahas cara mengaktifkannya di artikel mendatang.

Cara Migrasi Website dari Blogger ke WordPress (Step-by-Step)

Blogger (blogspot.com) merupakan platform blogging yang populer karena gratis milik Google dan mudah digunakan. Namun, seiring berkembangnya kebutuhan website—baik untuk bisnis, portofolio, maupun blog profesional—banyak pengguna mulai beralih ke WordPress karena fleksibilitas, kontrol penuh, dan dukungan plugin yang sangat luas. Salah satu langkah penting dalam proses ini adalah memindahkan website dan data dari Blogger ke WordPress tanpa kehilangan konten dan pengunjung.

Berikut langkah-langkah yang dilakukan agar proses migrasi aman:

1. Menyiapkan WordPress

Sebelum memindahkan data, pastikan WordPress sudah siap digunakan.

Langkah-langkah:

Beli hosting dan domain.
Install WordPress (melalui cPanel / installer hosting)
Login ke dashboard WordPress (namadomain.com/wp-admin)
Pastikan WordPress sudah menggunakan permalink Post name (disesuaikan dengan struktur link sebelumnya)

👉 Settings → Permalinks → Post name

2. Export Data dari Blogger

Langkah berikutnya adalah mengekspor semua konten dari Blogger.

Caranya:

Login ke Blogger
Masuk ke Settings → Other
Klik Back up content
Unduh file backup berformat XML

File ini berisi:

Postingan
Halaman
Komentar

3. Import Data Blogger ke WordPress

WordPress menyediakan fitur import khusus untuk Blogger.

Langkah-langkah:

Masuk ke Tools → Import
Pilih Blogger
Klik Install Now, lalu Run Importer
Upload file XML dari Blogger
Assign author (penulis) ke user WordPress
Klik Submit

Tunggu hingga proses selesai. Semua artikel Blogger akan otomatis masuk ke WordPress.

4. Memeriksa dan Menyesuaikan Konten

Setelah proses import selesai, lakukan pengecekan:

Apakah semua artikel sudah masuk?
Apakah gambar tampil dengan benar?
Apakah label Blogger berubah menjadi kategori atau tag?

Jika ada gambar yang tidak muncul, biasanya karena masih mengarah ke server Blogger.

👉 Solusi: gunakan plugin Import External Images atau Auto Upload Images

5. Mengatur Tema WordPress

Agar tampilan website lebih profesional:

Pilih tema WordPress yang responsif
Sesuaikan menu, sidebar, dan homepage
Tambahkan widget yang dibutuhkan

Tema gratis populer seperti:

Astra
GeneratePress
OceanWP

6. Redirect Blogger ke WordPress (PENTING untuk SEO)

Ini langkah paling penting agar:

Trafik tidak hilang
Ranking Google tetap aman

Caranya:

Pasang plugin Blogger to WordPress Redirection
Ikuti petunjuk plugin
Salin kode redirect
Tempelkan ke Theme → Edit HTML di Blogger
Simpan perubahan

Dengan redirect, semua URL lama Blogger akan otomatis diarahkan ke WordPress.

7. Setting SEO dan Optimasi

Agar website WordPress siap bersaing di Google:

Install plugin SEO (Rank Math / Yoast)
Submit sitemap ke Google Search Console
Perbaiki broken link
Optimasi judul dan meta description

8. Testing & Final Check

Sebelum benar-benar meninggalkan Blogger:

Coba buka beberapa URL lama
Pastikan redirect berjalan
Cek kecepatan website
Cek tampilan di mobile

Jangan langsung menghapus blog Blogger—biarkan aktif sebagai penghubung redirect.

Kesalahan Umum Saat Migrasi

❌ Tidak membuat redirect
❌ Menghapus Blogger terlalu cepat
❌ Tidak mengecek gambar
❌ Mengubah struktur URL

Hindari kesalahan ini agar migrasi berjalan aman.

Memindahkan website dan data dari Blogger ke WordPress memang membutuhkan beberapa langkah teknis, namun hasilnya sangat sepadan. Dengan WordPress, kamu mendapatkan fleksibilitas, kontrol penuh, dan peluang pengembangan website yang jauh lebih besar.

Dengan mengikuti panduan ini secara berurutan, migrasi dapat dilakukan dengan aman tanpa kehilangan konten, trafik, maupun peringkat SEO.

Membedah theme.json dan Era Full Site Editing (FSE)

Jika Anda terbiasa dengan tema klasik (Classic Themes), file seperti functions.php (untuk add_theme_support), style.css, dan Customizer API adalah senjata utama Anda. Namun di era WordPress modern (Block Themes), “otak” dari desain situs Anda kini berpindah ke satu file bernama theme.json.

File ini bukan sekadar konfigurasi; ia adalah mesin yang men-generate CSS, mengontrol antarmuka editor (Gutenberg), dan membatasi apa yang bisa (dan tidak bisa) dilakukan oleh klien.

Mari kita bedah strukturnya.

1. Filosofi: Settings vs Styles

Struktur theme.json dibagi menjadi dua pilar utama yang sering membingungkan pemula:

settings: Mengatur kontrol UI yang tersedia di Editor. (Contoh: “Apakah user boleh memilih warna custom?”, “Font apa saja yang muncul di dropdown?”).
styles: Mengatur tampilan default situs. (Contoh: “Apa warna background body?”, “Berapa padding default tombol?”).

2. Mengontrol Palet Warna (The CSS Variable Engine)

Salah satu fitur terkuat theme.json adalah kemampuannya mengubah definisi JSON menjadi CSS Custom Properties (Variables) secara otomatis.

Kode di theme.json:

JSON 

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#0073AA",
                    "name": "Primary Blue"
                },
                {
                    "slug": "dosa-merah",
                    "color": "#FF0000",
                    "name": "Danger"
                }
            ]
        }
    }
}

Apa yang terjadi di Frontend:

WordPress akan otomatis menyuntikkan CSS berikut di <body>:

CSS 

body {
    --wp--preset--color--primary: #0073AA;
    --wp--preset--color--dosa-merah: #FF0000;
}

Artinya, Anda bisa menggunakan variabel ini di file CSS kustom Anda tanpa perlu mendeklarasikannya ulang.

3. “Client-Proofing”: Mengunci Desain

Developer sering frustrasi ketika klien mengubah warna font menjadi hijau neon atau merusak layout dengan margin aneh. theme.json adalah solusi lock-down terbaik.

Mematikan Warna Custom

Jika Anda ingin klien HANYA memilih warna dari palet yang sudah Anda tentukan di atas, matikan fitur color picker:

JSON 

"settings": {
    "color": {
        "custom": false, 
        "palette": [ ... ] 
    }
}

Mengontrol Layout Container

Lupakan pembungkus .container manual di setiap file PHP. Tentukan lebar konten global di sini:

JSON 

"settings": {
    "layout": {
        "contentSize": "800px",
        "wideSize": "1200px"
    }
}

Ini memastikan semua blok group atau cover mengikuti aturan lebar yang konsisten.

4. Styling Elemen Spesifik (Tanpa CSS File)

Anda bisa menargetkan elemen HTML atau Blok WordPress spesifik langsung dari JSON. Ini mengurangi ketergantungan pada file style.css yang membengkak.

Contoh: Mengubah Default Tombol (Button Block)

JSON 

"styles": {
    "blocks": {
        "core/button": {
            "border": {
                "radius": "0px"
            },
            "color": {
                "background": "var(--wp--preset--color--primary)",
                "text": "#ffffff"
            },
            "typography": {
                "fontWeight": "700"
            }
        }
    }
}

Dengan kode di atas, semua tombol di situs otomatis akan kotak (radius 0), tebal, dan berwarna biru, tanpa menulis satu baris CSS pun.

5. Template Parts & Global Styles

Di tema FSE, header.php dan footer.php sudah tidak ada. Gantinya adalah file HTML statis di folder parts/. Namun, theme.json bertugas mendaftarkannya agar dikenali editor.

JSON 

"templateParts": [
    {
        "area": "header",
        "name": "header-sticky",
        "title": "Header Sticky"
    },
    {
        "area": "footer",
        "name": "footer-minimal",
        "title": "Footer Minimalis"
    }
]

Kapan Menggunakan CSS vs JSON?

Transisi ke FSE tidak berarti Anda dilarang menggunakan CSS.

Gunakan theme.json untuk: Tipografi global, palet warna, layout dasar, dan style default blok core.
Gunakan CSS biasa untuk: Animasi (@keyframes), Pseudo-elements (:before/:after), dan query media yang kompleks (meskipun theme.json mulai mendukung ini perlahan).

Menguasai theme.json membuat tema Anda lebih ringan, lebih cepat (karena CSS di-load inline atau efisien), dan lebih aman dari “tangan jahil” klien.