Cara Menambah Dan Memperbaiki Kolom Table Pada Theme WordPress

by on 2013/03/26 · 3 comments

Table WordPressApakah kamu saat ini sedang rajin-rajinnya  posting Artikel di Blog atau Website Bisnis Online kamu? Bakal ide atau calon Posting artikel kali ini kebetulan tentang Daftar Pemasukan dan Pengeluaran Produk? Atau mengenai Daftar Harga Item Barang berformat Table yang tersusun dari Baris dan atau Kolom bahkan sebuah Neraca? Semua diketik/dibuat lewat Software seperti Microsoft Excel atau Word? Serta setelah selesai kamu Copy Paste di Blog WordPress terus di Publish, Hasilnya?! Wkwkwk… baris atau kolom-nya tidak muncul alias no table! Hanya Text-nya saja yang ditampilkan…

Sekilas Ide Dasar

Masalah tidak sempurnanya output core engine CMS WordPress seperti di atas aku pikir wajar, karena memang tidak semua Theme WordPress mendukung format penulisan dengan garis kolom-table. Bahkan WordPress melalui Child Theme-nya yang open source pun kadang masih banyak lubang dalam hal source kode yang lain di desain template-nya. Apa itu karena para developer sengaja membuat seperti itu atau memang tidak terpikirkan sama sekali…I don’t know! Menurutku, selama output tampilan desain masih bisa dibaca dan dipahami oleh visitor, serta tidak ada error yang berarti…rasanya masih bisa dimaklumi.

Sebenarnya, jika hanya masalah kurang manis-nya tampilan yang ada format Table-nya dalam sebuah Postingan, beberapa pengembang/developer Plugin WordPress sudah membuatnya seperti, Plugin WP-Table Reloaded ataupun TablePress. Silahkan kalo kamu ingin mencobanya, tinggal download dan install, beres sudah. Tapi dalam Artikel-ku kali ini, kita mencoba sedikit memahami bagaimana langkah membuat garis dan kolom untuk Table menggunakan Kode CSS, yah Tanpa Plugin WordPress!

Memanfaatkan Kode CSS Untuk Membuat Table

Untuk memulai memperbaiki ataupun menambah Garis Kolom-Table pada Theme WordPress, ikuti penjelasan langkah pada contoh berikut :

-Saat kita mulai menambah postingan baru, sumber ide/data berasal dari dokumen Microsoft Word atau Excel, dan ada Table-nya. Login WordPress > Add New Post > Paste from Word.

Paste From Word

Dengan asumsi Theme WordPress yang kita gunakan adalah Twenty Twelve versi terbaru, setelah kita coba Publish hasilnya seperti gambar berikut :

Table Twenty Twelve

Terlihat jelas dari gambar ilustrasi di atas meskipun kita menggunakan Theme WordPress Default dari Paket WordPress terbaru, garis kolom (vertikal) tidak ditampilkan. Juga seperti hasil dari Nextpro_Bloggers Theme racikanku sendiri, tidak luput dari masalah…dan lebih parah! Hehehe.

Table NextPro_Bloggers

– Baiklah sekarang kita mencoba untuk memperbaiki dan atau menambah garis kolom layaknya format Table yang sebenarnya. Untuk itu kita akan memodifikasi serta bereksperimen dengan Theme-theme WordPress yang ada. Untuk ini aku anjurkan kamu menggunakan WP Offline dan Download Software di Link berikut, sebagai senjata,  untuk meminimalkan Resiko rusaknya tampilan desain Blog jika Online :



Tutorial WP-Offline | Download Notepad++

XAMPP htdocs coba wp_content Themes– Aku anggap kamu sudah menyiapkan Theme WordPress pilihanmu untuk modifikasi Table dan sudah memiliki WordPress Offline yang aktif di Komputer atau Laptop kamu. Mulailah dengan Drag and Drop atau Copy Paste ke direktori WordPress Offline kamu (aku pakai direktori coba) ke C:\xampp\htdocs\coba\wp-content\themes.

– Cari file style.css di sub direktori\themes tersebut yaitu Twenty Twelve default WordPress Theme (contoh).

Twenty Twelve Style CSS

– Buka file style.css tersebut menggunakan Notepad++, temukan lines (kalo susunan kode-kode tersebut belum berubah atau belum diinject skrip/kode lain).

Edit Kode style.css

– Kemudian blok kode tersebut dan ganti dengan kode berikut :

.entry-content td,
.comment td {border: 1px solid #B3F58F;background:#E4FED8;
padding: 5px 5px 5px 5px;}

Kode CSS ini juga berlaku untuk Twenty Eleven Theme, Deux Milles Douze Theme, NextPro_Bloggers dan mungkin beberapa Tema WordPress yang lain.

Akhiri dengan menyimpan perubahan yang telah dilakukan!

Reload browser untuk Postingan yang dimaksud. Setelah penggantian dan perubahan Kode CSS, hasil tampilan contoh postingan di atas menjadi seperti berikut :

Fixed Table Twenty Twelve

Terlihat bahwa Garis kolom-Table sudah terbentuk

Begitu juga jika Kode CSS tersebut diterapkan di NextPro_Bloggers, hasilnya :

Fixed Table Nextpro_Bloggers

Sebagai bukti dan DEMO silahkan kunjungi posting artikel : Semaya One Cruises Fast Boat to Gili

Kode CSS Untuk Theme WordPress Terbaik-Terpopuler-Responsive-Tercepat

Aku juga sempat memodifikasi beberapa tema wp Terbaik-Terpopuler-Responsive-Tercepat yang selama ini sering digunakan oleh rekan-rekan Blogger WordPress. Jika kamu saat ini sedang menggunakan salah satu-nya, silahkan langsung saja diaplikasikan nggak perlu repot-repot Explore atau Eksperimen lagi.

Gemini Theme , Kode CSS :

.entry-content td,
.comment td {border: 1px solid #B3F58F;background:#E4FED8;
padding: 5px 5px 5px 5px;}

Thesis Theme 1.8.x, di folder custom\layout.css :

.format_text td,
.comment td {border: 1px solid #B3F58F;
background:#E4FED8;padding: 5px 5px 5px 5px;}

Platform WP Theme, Lines 659 style.css :

.hentry table td,
.comment td {border: 1px solid #B3F58F;background:#E4FED8;
padding: 5px 5px 5px 5px;}

Businnes Lite WP Theme, folder theme: css/style.css :

cari dan hapus   line 379 td {border-top: 1px solid #DDD;padding: 6px 6px 6px 0;} dan ganti :
td {border: 1px solid #B3F58F;background:#E4FED8;
padding: 5px 5px 5px 5px;}

Xenon WP Theme, Lines 66 style.css :

td {border: 1px solid #B3F58F;background:#E4FED8;
padding: 5px 5px 5px 5px;

*Jika menginginkan Bentuk dari Garis Kolom Table, silahkan atur sendiri sesuai selera nilai atau value dari ketebalan Border, warna Background, Padding-jarak garis kolom.

*Yang punya Blog/Website dengan Selfhosting setelah yakin dengan modifikasi Theme pakai WP Offline, sekarang bisa langsung menerapkannya dengan masuk Dashboard Admin > Appearance/Tampilan > Editor > ganti Kode CSS di style.css pada Theme yang sedang digunakan > Simpan/save > Reload Browser!

Selesai. Semoga Bermanfaat.

4.5 / 5 stars     

Artikel ini ditulis oleh Mazdodot

Yang telah menulis 105 Artikel dalam Blog Kumpulan Artikel.

Nama aslinya Ade Setijo K, pemilik resmi situs dotcomcell.com, melalui blog ini mencoba berbagi ilmu dan pengalaman tentang Desain Web, Handphone, Komputer, Android, Multimedia, Tips Trik, Wordpress...read more >>

{ 3 comments… read them below or add one }

Toko Herbal July 21, 2013 at 9:41 PM

terima kasih gan buat infonya…

Reply

ubud bali day tour November 11, 2016 at 3:17 PM

thnks Maz Dodot, lagi nyari cara buat edit nih..

Reply

Ade Setijo K December 27, 2016 at 8:06 AM

Kalo pingin buat list semacam format Booking…banyak tuh Plugin Booking WP…searching ya.

Reply

Cancel reply

Leave a Comment

Previous post:

Next post: