Edit Theme WordPress TwentySeventeen Dengan W3CSS

Ingin memiliki theme WordPress yang unik dan tampil berbeda sesuai selera Anda sendiri akan disain? Itu bisa tanpa membayar mahal sebuah theme premium. Dapatkan gratis tema unik milik Anda sendiri. Edit theme WordPress Twenty Seventeen.

edit theme wordpress twenty seventeen

Sedikit usaha dalam cara merubah tema, dapatkan theme yang aman dari script jahat. Kita hanya akan menambah sedikit barisan kode saja dan mendapatkan perubahan besar dalam penampilan.

WordPress datang sepaket dengan tema bawaannya. Bila melihat isi dalam tema tersebut. Lengkap. Kenapa mencari terlalu jauh sementara theme asli WordPress yang powerfull sudah ada di dalam.

Twenty Seventen adalah starter theme yang masih menjadi default untuk WordPress saat ini. Dengan modal W3CSS, Anda sangat mungkin membuat orang atau bahkan diri Anda sendiri lupa, bahwa itu adalah tema standar.

Pastinya sebagai theme default, maka akan jauh dari konflik. Ketahui juga bahwa tema bawaan merupakan acuan kesesuaian bagi developer yang menyediakan plugin. Ini akan menjauhkan Anda di kemudian hari dengan masalah ketidak-sesuaian  antara tema dan plugin.

Kenapa mesti W3CSS Yang Digunakan?

Ada kesederhanaan di dalam framework ini. Sedikit class untuk dihafal. Jangan samakan dengan framework lain yang kaya fungsi, jika kurang dari 20% saja fungsi itu kita gunakan.

Fungsi lainnnya? Mubazir bukan… hanya menambah panjang kode yang ada di dalam template.

W3CSS dengan dokumentasi lengkap dari W3school, hanya sedikit class untuk diingat. Mudah dikerjakan secara manual. Pemula dapat berkreasi  untuk mendapatkan hasil yang wah.

Bagaimana memadukan W3CSS Ke Dalam Tema WordPress?

Sederhana sekali. Kita akan mulai membangun child theme berdasar tema bawaan WordPress yang merupakan starter theme. Ini sebagai antisipasi ketika update terjadi.

1.     Siapkan W3CSS

Kita butuh dua file W3CSS yang berukuran kecil dari sumbernya.

W3CSS

W3CSS

Download juga tema warna khusus

W3CSS theme blue

W3 THEME

Untuk warna selain biru bisa memilih sendiri melalui link di bawah

W3css color themes

 

*Cukup memilih hanya satu theme warna.

2.     Siapkan File Utama Child Theme

Silahkan masuk  cpanel hosting → akses file manager (dapat juga menggunakan FTP client). Segera ke lokasi instalan WordPress, terus ke folder tema Twenty Seventeen, tepatnya di

Folder wp-content/themes/twentyseventeen/

Silahkan download dua file pokok untuk child theme

  • style.css
  • function.php

3.     Edit File style.css

Pada file style.css yang sudah didownload sebelumnya kita lakukan edit. Silahkan buka dengan Notepad++. Temukan kemudian hapus code seperti terlihat pada penampil kode di bawah.

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready 

This theme, like WordPress, is licensed under the GPL.

Use it to make something cool, have fun, and share what you've learned with others.
*/

Pastikan dari /* ke kode */ terhapus.

Lalu kita akan menggantinya dengan kode berikut. Klik dua kali pada penampil kode di bawah untuk memblok kode.

*/
Theme Name: Tema Pribadiku
Theme URL: http://www.memokecil.com/catatan/
Description: Teme pribadiku yang unik
Author: Nama Anda
Author URL: http://domain.anda
Template: twentyseventeen
Version: 1.0.0
Text Domain: twentyseventeen-child
*/ 

Langkah selanjutnya, masih di file style.css.
Salin semua kode W3CSS dan W3CSS theme yang sudah dimiliki sebelumnya ke dalam style.css.

*Penting Kode mesti ditempel di bagian akhir, dengan urutan W3CSS terlebih dahulu baru kemudian W3CSS theme.

4. Mulai Membuat Child Theme

Masuk ke root theme. Tepatnya ada di sini.

Folder wp-content/themes/

lalu buat folder baru dengan nama temaku kemudian upload hasil editan style.css dan juga file function.php ke dalam folder tersebut.

Upload juga sebuah gambar dengan nama screenshot.png. Upload gambar ini tidak harus.

Baca juga catatan kami tentang:

Cara membuat website

Silahkan lihat di panel admin WordPress Anda, akan tersedia tema baru yang siap diaktifkan. Segera aktifkan tema baru Anda.

edit tema wordpress

*** Hingga tahap ini Anda sudah berhasil membuat child theme yang terintegrasi W3CSS. Ketika Anda membuat post maupun page baru, dapat memberikan style khusus di dalamnya dengan hanya menambahkan class W3CSS dibagian mana pun saat membuat post dan page.

*** Gunakan referensi berikut untuk mengetahui kerja masing-masing class w3css dokumentasi

*** Untuk melakukan perubahan tampilan tema mari kita lanjutkan.

Edit Halaman Pos pos TwentySeventeen

Edit ini akan mengatur tampilan halaman indek blog dan juga tipe halaman lain yang tidak ditentukan secara spesifik.

Hampir sama dengan sebelumnya ketika mengambil file style.css. dan function.php.

Saat ini yang perlu diambil adalah file index.php. Tidak dibutuhkan banyak sentuhan. Anda hanya perlu menambahkan class W3CSS ke bagian yang diinginkan. Jangan lupa upload ke folder temaku setelahnya.

Contoh menambahkan w3-card-2 pada div wraper-nya maka halaman Anda akan seperti tampilan kartu yang menawan.

edit blog template

w3css wordpress

Anda perlu sedikit saja penyesuaian untuk mengetahui fungsi class W3CSS. Gunakan referensi di W3school.

Edit Halaman Postingan

Tak ubahnya mengedit halaman Pos-pos. Namun dibagian ini yang akan digunakan adalah file single.php. Lakukan hal yang sama. Ambil dan edit file single php. Jadikan tampilannya sesuai selera.

Cara yang sama berlaku untuk edit arsip, halaman not found, hasil search, dan edit page

Anda masih akan melakukan cara yang sama. Kebutuhan untuk mengedit halaman lain hanyalah mengambil filenya , lakukan perubahan dan upload kembali ke dalam folder temaku.

***
Edit tambahan by request

Edit Lebar Halaman Theme TwentySeventeen

Hal yang paling banyak diinginkan pengguna, membuat halaman blog lebih lebar dari aslinya. Merubah lebar halaman tema ini sangat mudah. Cukup dilakukan dari panel admin WordPress Anda.

Ini adalah bagaimana cara merubah lebar theme

Akses — appearance — edit

CTRL + F untuk mencari: /* Layout */

Apakah menemukan kode seperti pada gambar berikut?

edit twentyseventeen lebar wrap

Silahkan ganti nilai max-width sesuai keinginan, untuk kontrol tambahkan margin otomatis bila dibutuhkan, juga mengurangi padding. Contoh pada penampil kode di bawah

	.wrap {
		max-width: 1024px;
		margin-left: auto; 
		margin-right: auto;
		padding-left: 1em;
		padding-right: 1em;
	}

Menambahkan Widget Area Di Tema WordPress

Ikuti langkah berikut untuk menambahkan widget area.

1.     Registering Fuction For Widget

Ini dilakukan di file function.php. Untuk pengguna child theme silahkan ambil file function.php di folder tema asli untuk disalin ke folder tema anak.

Bila function.php sudah berada dalam child theme sebelumnya, penambahan widget area bisa dilakukan melalui panel admin. Masuk ke menu appearance — edit — pilih function.php

Pada kolom editor, gulung terus ke bawah hingga bagian akhir kode

Agar widget area dapat ditambahkan pada area yang diinginkan, fungsi pemanggilnya mesti dibuat dulu.

Kode widget WordPress baru

Widget area pertama

function mk1_widgets_init() {

register_sidebar( array(
'name'          => 'Spesial Widget Area 1',
'id'            => 'spesial-widget-1',
'before_widget' => '

<div class="w3-container">',
'after_widget'  => '</div>


',
'before_title'  => '

<h2 class="w3-text-shadow">',
'after_title'   => '</h2>


',

) );

add_action( 'widgets_init', 'mk1_widgets_init' );

}

Jika kurang satu widget area, silahkan tambahkan widget area kedua.

function mk2_widgets_init() {

register_sidebar( array(

'name'          => 'Spesial Widget Area 2',
'id'            => 'spesial-widget-2',
'before_widget' => '

<div class="w3-container">',
'after_widget'  => '</div>


',
'before_title'  => '

<h2 class="w3-text-shadow">',
'after_title'   => '</h2>


',

) );

add_action( 'widgets_init', 'mk2_widgets_init' );
}

Penting untuk dicatat adalah nama fungsi untuk pemangggilnya. Kita akan gunakan nanti di dalam tema.

Seperti contoh kita telah punya special-widget-1 dan juga spesial-widget-2.

1.     Meletakkan Widget Area Di Halaman Pilihan

Gunakan kode pemanggil seperti ini.

 <?php dynamic_sidebar( 'spesial-widget-1' ); ?>

Contoh aplikasinya sebagai berikut:

Menambahkan widget area di halaman post blog

Silahkan pilih di bagian mana widget area baru akan ditampilkan. Tempelkan kode berikut:

<?php if ( is_active_sidebar( 'spesial-widget-1' ) ) : ?>




<div class=" widget-area" role="complementary">
<?php dynamic_sidebar( 'spesial-widget-1' ); ?>
</div>




<?php endif; ?>

Menambahkan widget area di semua halaman kecuali halaman utama

Agar tidak harus menambahkan widget area satu persatu di banyak file, cara terbaik bisa meletakkan widget di header.php. Alternatif lain bisa juga di footer.php. Silahkan pilih sesuai kebutuhan. Dan guna mencegahnya tampil di halaman utama adalah dengan memberikan kondisional term.

<?php if ( is_active_sidebar( 'spesial-widget-2' ) && ! is_frontpage() ) : ?>




<div class=" widget-area" role="complementary">
<?php dynamic_sidebar( 'spesial-widget-2' ); ?>
</div>




<?php endif; ?>

Widget area akan terlihat di pengaturan widget panel admin, siap diisi widget sesuai kebutuhan dan tampil pada tempat yang ditentukan tadi.

***
Masih banyak perubahan lain tentunya yang bisa dilakukan melalui starter theme bawaan WordPress. Bahkan ada pilihan untuk membangun tema baru dengan prefix Anda sendiri, menjadi tema mandiri bukan lagi child-theme.

Perubahan tentu akan lebih sesuai dengan kebutuhan dan keinginan Anda sendiri.

×Jika Anda pengguna theme yang kami bahas dan sedang ingin merubah suatu bagian sementara kami tidak mencantumkan kodenya di atas… Silahkan tinggalkan jejak jemari Anda di kolom komentar.

 



BIla catatan merupakan artikel panjang, silahkan menggunakan menu paginasi halaman yang tersedia di bagian bawah kolom text reader ini guna mengakses part selanjutnya





Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *