Month: April 2017

7 Plugin WordPress Yang Semua Website Harus Punya

7 Plugin WordPress Yang Semua Website Harus Punya

7 Plugin WordPress Yang Semua Website Harus Punya

Kini banyak ahli WordPress yang mengandalkan plugin, terutama plugin yang dapat membantu untuk menambahkan fungsi baru pada website. Namun dengan begitu banyaknya plugin WordPress yang tersedia, akan membuat pemilik website WordPress bingung memilihnya, apalagi jika kamu belum memiliki ide. (more…)

Cara Menampilkan Foto WordPress Dengan Lebih Menarik

Cara Menampilkan Foto WordPress Dengan Lebih Menarik

Cara Menampilkan Foto WordPress Dengan Lebih Menarik

Apakah kamu ingin menampilkan foto WordPress dengan lebih menarik? Secara default ketika menambahkan beberapa foto pada post di WordPress, foto akan ditampilkan secara bersusun kebawah. Hal ini tentunya sangat tidak menarik dan pengunjung perlu scroll terus kebawah untuk melihat semua foto.

Pada post kali ini, kami akan tunjukan cara untuk menampilkan foto WordPress dengan lebih menarik, caranya adalah dengan membuat gallery.

1. Membuat Gallery Tanpa Plugin

Metode ini dapat menampilkan foto WordPress dengan lebih menarik tanpa menggunakan plugin. Jika kamu sering menambahkan banyak foto pada setiap post, cara ini bisa membantu kamu.

Pertama, kamu perlu masuk ke Dasboard website WordPress, lalu masuk ke Post-> Add New, lalu klik Add Media. Pada tampilan Insert Media, klik Create Gallery lalu tambahkan foto dari Media Library atau dengan Upload Files foto baru. Pilih foto-foto yang ingin dimasukan kedalam gallery, dari foto yang sudah ada atau upload baru.

Setelah selesai memilih foto, klik tombol Create a new gallery. Akan muncuk popup windows, dimana kamu bisa mengganti setting untuk menampilkan gallery, seperti berapa column, ukuran foto dan menampilkannya secara random.

Setelah selesai melakuka settings, tinggal klik tombol Insert gallery, dan gallery akan dimasukan kedalam post. Jika kamu ingin mengganti jumlah kolomnya tinggal mengklik foto pada post editor, lalu klik ikon pensil untuk mengedit setting dari gallery.

Sayangnya metode ini memiliki kekurangan. Ketika pengunjung mengklik foto yang diinginkan, makan akan diload halaman baru, dan untuk melihat foto yang lain perlu mengklik tombol back untuk kembali ke halaman sebelumnya. Hal ini malah akan mengganggu user experience.

2. Membuat Gallery Dengan Plugin

Salah satu plugin terbaik untuk membuat gallery adalah Envira Gallery, dimana plugin ini bisa kita gunakan gratis atau membayar lisensi dengan fitur yang lebih baik. Download dan aktifkan plugin Envira Gallery.

Setelah aktivasi, masuk ke menu baru Envira Gallery dan pilih Add New. Lalu masuk judul gallery, dibawahnya pilih Native Envira Gallery, kamu bisa memilih foto dari file yang ada di komputer atau dari sumber web lain.

Setelah selesai mengupload foto atau memilih foto dari sumber lain, scroll kebawah pilih Config dibawah Images. Disini kamu bisa mengatur jumlah kolom, ukuran foto, dimensi foto dan lain sebagainya.

Setelah selesai mengupload foto dan mengatur tampilannya, klik tombol Publish yang berwarna hijau di sebelah kanan atas.

Sekarang masuk ke Post-> Add New, pada post editor sekarang ada menu baru Add Gallery, dan klik menu baru ini. Akan muncul daftar gallery yang sudah kamu buat di Envira, pilih gallery yang diinginkan. Lalu di samping kanan, kamu bisa untuk menampilkan judulnya, setelah selesai tinggal klik tombol Insert dibawahnya.

Plugin ini akan membuat shortcode di dalam post editor, biarkan saja jangan mengubahnya. Kamu bisa menambahkan cerita dibawahnya atau deskripsi atau apapun yang kamu inginkan. Setelah selesai mengedit, tinggal kamu Publish.

Dan sekarang pengunjung website atau blog kamu dapat melihat foto di WordPress dengan cara yang lebih menarik.

 

Bagi kamu yang sedang mencari hosting, Jakartawebhosting.com menyediakan WordPress Hosting, dengan kecepatan dan stabilitas pusat data dan server yang baik, up time server 99,9%, team support yang siap membantu 24 jam dan biaya langganan yang menarik.

Cara Menambah Sticky Navigation Menu di WordPress

Cara Menambah Sticky Navigation Menu di WordPress

Cara Menambah Sticky Navigation Menu di WordPress

Pernahkah kamu menyadari website WordPress saat ini menggunakan sticky navigation menu? Normalnya navigation menu selalu ditampilkan pada bagian atas dari halaman website, dan akan hilang ketika pengunjung men-scroll kebawah. Saat ini sedang menjadi tren sticky navigation menu, dimana navigation menu ini selalu melayang dan selalu ditampilkan meski pengunjung telah men-scroll kebawah. Navigation menu ini akan selalu mengikuti pengunjung.

Pada post kali ini saya akan membahas mengenai cara menambahkan sticky navigation menu pada website WordPress dengan menggunakan plugin.

Menambah Sticky Navigation Menu Menggunakan Plugin

Metode ini merupakan metode yang paling mudah dan paling direkomendasikan untuk kebanyakan pengguna.

Pertama yang harus kamu lakukan adalah meng-install dan mengaktifkan plugin yang bernama Sticky Menu (or Anything!) on Scroll. Setelah plugin diaktifkan, dari dashboard website WordPress kamu, buka Settings -> Sticky Menu (or Anything!), untuk mengkonfigurasi setting dari plugin.

Kemudian kamu masukan CSS ID dari navigation menu yang kamu ingin buat sticky agar selalu ditampilkan. Untuk menemukan CSS ID yang digunakan oleh navigation menu, bisa menggunakan inspect tool bawaan dari web browser, dengan mengklik tombol Ctrl + Shift + I dari keyboard. Atau pada halaman web, tinggal klik kanan navigation menu di atas, lalu pilih Inspect atau Inspect Element. Lali cari kode seperti dibawah ini:

<nav id="site-navigation" class="main-navigation" role="navigation">

Pada contoh ini, havigation menu CSS ID adalah site-navigation. Jadi pada menu settings plugin masukan CSS ID seperti: #site-navigation.

Pilihan selanjutnya pada setting plugin adalah untuk menentukan space antara bagian atas dari layar dan sticky navigation menu. Kamu bisa menggunakan setting ini jika navigation menu kamu overlapping, jika tidak bisa diabaikan.

Setelah itu kamu perlu memberi centang pada pilihan: ‘Check for Admin Bar.’ Hal ini memungkinkan plugin untuk menambahkan beberapa space untuk WordPress admin bar yang hanya bisa ditambahkan oleh pengguna yang login.

Pilihan selanjutnya adalah setting yang memungkinkan kamu untuk meng-unstick navigation menu jika pengunjung mengunjungi website WordPress kamu dari perangkat dengan layar yang lebih kecil seperti smartphone.

Kamu bisa melakukan tes bagaimana tampilannya terlihat pada smartphone atau tablet. Jika tidak suka, bisa menambahkan 780px pada pilihan ini.

Jangan lupa untuk mengklik tombol save settings untuk menyimpan perubahan.

Sekarang kamu bisa mencoba mengunjungi website WordPress kamu, dan lihat sticky navigation menu bekerja.

Bagi kamu yang sedang mencari hosting, Jakartawebhosting.com menyediakan WordPress Hosting, dengan kecepatan dan stabilitas pusat data dan server yang baik, up time server 99,9%, team support yang siap membantu 24 jam dan biaya langganan yang menarik.

Cara Menggunakan AMP di WordPress

Cara Menggunakan AMP di WordPress

Cara Menggunakan AMP di WordPress

Kecepatan menjadi kebutuhan yang sangat penting bagi setiap website. Berbicara mengenai kecepatan dari website, ada berbagai metode yang bisa kita lakukan salah satunya adalah menggunakan AMP. Metode ini juga bisa diterapkan pada website WordPress. Pada post kali ini saya akan menunjukan cara menggunakan AMP di WordPress.

Apa Itu AMP?

AMP merupakan singkatan dari Accelerated Mobile Pages. Pada bulan Oktober 2015, Google memperkenalkannya sebagai proyek open source untuk menghadirkan mobile browsing yang lebih cepat. Automattic, perusahaa dibalik WordPress, telah berkontribusi membuat WordPress kompatibel dengan AMP, yang kompatibel dengan hampir semua perangkat mobile. Alasan mengapa menggunakan AMP di WordPress sangat dibutuhkan karena search engine seperti Google Search akan memprioritaskan website yang mengintegrasikan AMP.

Aksi didalam AMP terdiri dari tiga bagian:

  • AMP HTML
  • AMP JS
  • Google AMP Cache.

Untuk informasi yang lebih detil mengenai AMP bisa mengunjungi website resmi Accelerated Mobile Pages Project.

Kelebihan Dari AMP:

  • AMP dapat mempercepat waktu loading website.
  • Meningkatkan ranking mobile.
  • Meningkat kinerja server.

Kekurangan Dari AMP

  • Mengurangi pendapatan dari iklan.

Menggunakan AMP di WordPress

Untuk menggunakan AMP di WordPress, kamu tidak perlu memiliki pengetahuan teknis. Kamu dapat mendownload plugin AMP dari direktori plugin resmi WordPress. Atau langsung dari halaman admin dashboard, lalu masuk ke Plugin-> Add New, dan cari plugin AMP.

Cari plugin AMP yang dibuat oleh Automattic. Kemudian pilih install, setelah proses install selesai kini kamu bisa memilih Activate Plugin.

Sekarang kamu bisa mengecek tampilan website WordPress kamu di perangkat mobile, masuk ke Apperance->AMP.

Disini kamu bisa mengganti warna teks header, header backgroud dan juga warna link. Setelaha melakukan perubahan jangan lupa mengklik tombol Save.

Untuk melihat halaman web dengan versi responsif, kamu bisa menambahkan /amp/ pada setiap link dari post website WordPress kamu.

 

Bagi kamu yang sedang mencari hosting, Jakartawebhosting.com menyediakan WordPress Hosting, dengan kecepatan dan stabilitas pusat data dan server yang baik, up time server 99,9%, team support yang siap membantu 24 jam dan biaya langganan yang menarik.

Cara Minify File CSS dan JavaScript di WordPress

Cara Minify File CSS dan JavaScript di WordPress

Minify atau meminimalkan file CSS dan JavaScript dapat membuat website WordPress kamu lebih cepat ketika loading. Pada post kali ini saya akan membahas mengenai minify file CSS dan JavaScript di website WordPress untuk mempercepat kinerjanya.

Apa Itu Minify dan Kapan Membutuhkannya?

Istilah ‘Minify’ digunakan untuk menjelaskan metode yang dapat digunakan untuk memperkecil ukuran file website. Untuk mencapat tujuan ini adalah dengan menghilangkan white spcae, line dan karakter yang tidak perlu pada source code.

Biasanya metode ini sangat direkomendasikan untuk file yang akan dikirim ke browser pengguna. File ini termasuk HTML, CSS dan JavaScript. Kita juga bisa minify file PHP, tetapi PHP merupakan bahasa pemrograman server-side dan meminimalkannya tidak akan meningkatkan kecepatan page load pada sisi pengguna.

Namun, banyak orang yang berpendapat bahwa minify file CSS dan JavaScript tidak banyak membantu, karena metode ini hanya mengurangi beberapa kilobytes data saja. Meski demikian tidak ada salahnya untuk melakukan minify file CSS dan JavaScript pada website WordPress.

Cara Minify File CSS dan JavaScript di WordPress

Untuk minify file CSS dan JavaScript di WordPress bisa meng-install dan mengaktifkan plugin yang bernama Better WordPress Minify.

Pada saat mengaktifkan plugin ini, plugin akan menambahkan item menu baru yang dilabeli’BWP Minify’ pada menu Dashboard. Klik menu baru tersebut dan akan membuka halaman setting plugin ini.

Pada halaman settings di tab General Optiops, centang pada dua pilihan pertama “Minify JS files automatically” dan “Minify CSS files automaticaly.” Setelah itu klik tombil Save Changes untuk menyimpan perubahan.

Sekarang buka website WordPress kamu di tab browser baru. Lalu tekan Ctrl + U pada keyboard atau klik menu View Page Source. Sekarang kamu bisa melihat HTML source code dari website WordPress kamu. Jika kamu perhatikan, plugin ini akan men-load file CSS dan JavaScript dari folder plugin itu sendiri, tidak lagi men-load dari folder WordPress themes dan plugin. File tersebut merupakan versi mini dari file CSS dan JavaScript website WordPress kamu, dimana plugin ini tidak menghapus file aslinya.

 

Bagi kamu yang sedang mencari hosting, Jakartawebhosting.com menyediakan WordPress Hosting, dengan kecepatan dan stabilitas pusat data dan server yang baik, up time server 99,9%, team support yang siap membantu 24 jam dan biaya langganan yang menarik.