Twenty twenty theme font and layout customize

Artikel ini terakhir diperbaharui pada 26 August 2020.

Halo selamat malam semua, kali ini saya akan share pangelaman saya menggunakan theme twenty twenty.

Theme twenty twenty ini adalah official theme wordpress untuk tahun 2020, saya mulai jatuh cinta pada theme ini karena framework AMP yang saya pakai, ternyata langsung bisa support.

Simple Theme

Setelah saya googling ternyata twenty twenty memang masuk kedalam ekosistem dari frame work AMP, disamping puluhan theme yang ada.

Disamping design nya yang menurut saya OKE banget, simple dan clean, saya juga mempertimbangkan loading speed dari blog saya agar tidak banyak resource yang digunakan terutama pada saat diload pada perangkat mobile.

Namun demikian dengan simple nya theme ini dibandingkan astra dan generate press membiliki ‘kelemahan’ tersendiri.

The Font

Salah satunya adalah saat anda melakukan speed test pada google page speed, gtmetrix dan light house, maka ada salah satu font yang menjadi ‘penghambat’ loading dari situs yang menggunakan theme twenty twenty.

Font tersebuta adalah inter : inter-upright-var.woff2 pada beberpa website audit font ini memberikan tambahan loading pada website sehingga performa website akan menurun.

Tidak seperti astra dan generatepress yang anda bisa ganti font nya menjadi UI system font agar dapat menghemat waktu loading web.

Pada twenty twenty tidak dapat dilakukan customize dengan mudah, anda harus paham terhadap struktur dari tema ini.

Using Plugin

Kabar baiknya adalah kita bisa menggunakan sebuah plugin untuk melakukan penggantian font yang dianggap sebagai penghambat ini dengan menggantinya menjadi UI system font.

Berikut adalah langkah nya :

  • Login ke dashboard wordpress anda
  • Klik Plugin
  • Klik Installed Plugin
  • Klik Add New
  • Search Twentig
  • Klik Install
  • Klik Activate
twentig plugin

Kemudian setelah anda melakukan installasi, silahkan lanjutkan Navigasi ke menu Appearance, klik customize.

twentig options

Klik Twentig Options, Klik Fonts, Klik Body Fonts ganti ke UI System Fonts. Sedangkan Heading font ganti juga ke UI System Fonts.

body font anda heading font

Setelah selesai update, klik publish, seharusnya font inter yang menjadi ‘masalah’ sudah tidak di load lagi oleh situs anda.

Tampilan font nya memang banyak berubah dari default inter, tapi menurut saya tidak masalah karena masih enak untuk di baca. Daripada speed web nya menjadi turun dan pembaca males untuk mengakses situs anda.

Customize Layout

Lebih jauh selain untuk mengganti font yang dianggap bermasalah, plugin ini bisa melakukan customize untuk post dan page, seperti misalnya mengganti layout waterfall menjadi grid pada halaman awal.

grid layout

Anda bisa melakukan setting pada customize, twentig options, blog dan ubah default menjadi grid.

post page and archives grid

Selain itu juga anda bisa melakukan customize untuk page dan post dengan template yang sudah di sediakan.

Customize Post and Page

Pada post / page klik icon tw pada kanan atas dan klikt paterns, disana akan muncul patern-patern yang sudah disediakan oleh twentig library s

Misalnya anda ingin membuat cover 3 column, dengan text atau dengan gambar. Atau hanya columns saja atau text dengan columns, Hero page title, Cowver, Call to Action, List, dll Dimana ini semua syncron dengan block editor milik gutenberg.

Ini Contoh Patern

First item

Lorem ipsum dolor sit amet, commodo erat adipiscing elit. Sed do eiusmod ut tempor incididunt ut labore et dolore.

Second item

Integer enim risus, suscipit eu iaculis sed, ullamcorper at metus. Venenatis nec convallis magna, eu congue velit.

Third item

Aliquam tempus mi nulla porta luctus. Sed non neque at lectus bibendum blandit. Morbi fringilla sapien libero.

Fourth item

Duis enim elit, porttitor id feugiat at, blandit at erat. Proin varius libero sit amet tortor volutpat diam laoreet.

Contoh Pattern

Lorem ipsum dolor sit amet, commodo erat adipiscing elit. Sed do eiusmod ut tempor incididunt ut labore et dolore. Integer enim risus, suscipit eu iaculis sed ullamcorper.

Contoh Pattern 2 captivates your audience

Kesimpulan

Dengan plugin twentig ini anda bisa memodifikasi font yang menjadi ‘penghalang’ speed pada tema twenty twenty, lebih jauh anda bisa melakukan customize untuk situs anda agar lebih menarik.

Tentunya semua itu juga sudah compatible dengan framework AMP, sehingga anda tidak perlu khawatir terkait css dan js nya.

Selamat mencoba dan mohon bisa di share pengalamannya pada kolom komentar ya.

Wassalam
Hendra Wijaya

Leave a Comment