Langsung ke konten utama

Contoh Desain Child Theme Wordpress untuk Website Sekolah

Dari sisi desain, salah satu kelebihan Wordpress adalah dimungkinkannya penggunaan templat berdasarkan pada desain templat-templat lain yang sudah ada. Istilah untuk menyebut templat pertama adalah child theme (templat anak), dan tempat yang direferensi oleh child theme disebut parent theme (templat induk). Wordpress telah menyediakan dokumentasi lengkap mengenai penggunaan templat anak ini jika Anda tertarik.

Membuat desain templat di Wordpress berdasarkan pada parent theme tentu lebih mudah dan relatif cepat. Perhatian kita pada saat membuat child theme ini lebih ditujukan pada bagaimana desain templat akan disajikan dan tidak direpotkan dengan coding. Sisi coding memang bukan fokus utama. Namun, hal ini tidak jarang pula dikustomisasi agar sesuai dengan kebutuhan.

Salah satu kekurangan child theme tentu saja adanya kertergantungan pada keberadaan templat induk. Tanpa kehadiran templat induk, templat anak menjadi tidak berfungsi sama sekali.

Ketika pertama kali dipasang, Wordpress menyertakan dua buah templat bawaan, yakni: Twentyeleven dan Twentytwelve. Kedua templat bawaan ini bersifat fleksibel (responsive), dapat mengikuti ukuran resolusi layar, dan sama-sama dibuat menggunakan HTML5.

Telah banyak templat anak yang dibuat berdasarkan pada kedua templat bawaan Wordpress di atas, baik jenis portal berita, toko online, serta profil lembaga pendidikan.

Untuk jenis website sekolah, di sini saya ingin menyajikan dua buah contoh child theme yang didesain oleh saya sendiri. Child teme yang pertama dibuat untuk SMA dan SMK Almarwah berdasarkan pada Twentytwelve. Adapun yang kedua dibuat untuk Madrasah Aliyah Alhuda 70 dengan menggunakan Twentyeleven sebagai templat induk-nya.





Secara umum, pengerjaan kedua child theme website sekolah di atas lebih dititikberatkan pada sisi desain sehingga lebih tampak seperti halaman profil perusahaan dengan menambahkan menu tambahan, di samping menu utama, serta responsive jQuery photo slider di halaman depan.

Beberapa fungsi juga saya tambahkan pada file function.php di child theme-nya, seperti fungsi untuk menampilkan jumlah posting sebanyak sepuluh buah di halaman arsip, kategori, pencarian, dan tag, tidak mengikuti jumlah posting yang ditampilkan di halaman depannya.

Selain Twentyeleven dan Twentyetwele, kita dapat pula menggunakan templat-templat induk lainnya sebagai framework saat mendesain laman web berbasis Wordpress, seperti: Skeleton, Hybrid, dan Thematic.

Postingan populer dari blog ini

Tutorial Adobe Illustrator: Menambahkan Elemen Teks

Selain gambar dengan bentuk-bentuk dasar seperti persegi, garis, dan elips, kita juga dapat menambahkan elemen teks pada kreasi desain yang dibuat dengan Adobe Illustrator. Salah satu tool yang tersedia untuk membuat elemen teks ini adalah Type Tool . Teks-teks yang telah dibuat selanjutnya dapat kita atur jenis, ukuran, atau warna hurufnya sesuai dengan kebutuhan. Tidak sedikit desainer yang telah membuat kreasi-kreasi logo menakjubkan dengan semata-mata mengandalkan elemen teks ini. Beberapa dari karya-karya text-based design ini dapat kita lihat di www.1stwebdesigner.com ( 50 Creative Type-Based Logo Designs For Inspiration ) dan smashinghub.com ( 50 Cool Text Logo Designs ). Tutorial Adobe Illustrator kali ini akan menjelaskan cara menambahkan elemen teks beserta pengaturan-pengaturannya pada sebuah desain vektor.

Angkot: Free Vector Graphic

Terinspirasi oleh beberapa teman saya yang berprofesi sebagai sopir angkot (Angkutan Kota), saya membuat sebuah vector graphic berbentuk kendaraan yang menjadi sumber utama penghasilan teman-teman saya tersebut. Vector graphics berbentuk angkot ini saya buat dalam empat pilihan warna yaitu merah , hijau, kuning, dan biru. Keterangan Format file yang digunakan: PNG ( Portable Network Graphic ). Lebar dan tinggi vektor: 1024 pixels x 775 pixels. Ukuran file per satu vektor (berdasarkan warna): 228 -237 KB. Lisensi Creative Commons Attribution-NonCommercial-ShareAlike 3.0 .

Membuat Gambar Vektor Tali Tambang

Tutorial Adobe Illustrator kali ini akan menjelaskan cara membuat gambar vektor tambang, sejenis tali yang biasa kita gunakan untuk mengikat atau melilit sesuatu. Saya menggunakan Rectangle Tool dan Pen Tool untuk membuat gambar vektor tersebut dalam tutorial ini. Lilitan pada tambang menggunakan pattern brush yang akan kita buat sendiri, dengan panduan warna coklat terang dan gelap.