Tips Mendesain Ulang Situs WordPress Anda

Tidak ada platform lain yang memberi Anda kemampuan untuk menyesuaikan tampilan dan nuansa situs web Anda seperti WordPress. Itulah salah satu alasan mengapa WordPress populer di kalangan penerbit dan pengembang web.

Anda dapat mengambil tema WP dasar (dan menjemukan), menambahkan logo, mengedit beberapa baris kode, mengubah CSS, dan memiliki situs web yang terlihat profesional (namun menarik) dalam waktu singkat. Ini pekerjaan mudah dan tutorial ini akan menunjukkan cara melakukannya.

Apakah kamu siap? Mari kita mulai dengan hal pertama yang pertama; warna.

Merancang Skema Warna

Saat mengembangkan skema warna untuk situs WordPress Anda, ada banyak hal yang perlu dipertimbangkan. Anggap saja seperti mengecat rumah Anda, atau toko batu dan mortir Anda. Anda harus menentukan warna yang akan digunakan pada dinding Anda dan warna pintu yang Anda inginkan.

Cara Anda mengecat eksterior dan interior akan bergantung pada beberapa faktor selain preferensi pribadi Anda.

Mewarnai situs WordPress Anda juga tidak berbeda. Warna apa yang Anda inginkan untuk tautan Anda? Latar belakang Anda, bagaimana Anda membuatnya paling menarik dan membuat pesaing Anda ternganga? Warna manakah yang akan melengkapi (atau bahkan memberdayakan) pesan Anda? Bagaimana Anda ingin teks Anda? Pilihan warna yang dapat Anda gunakan di situs WP Anda hanyalah batasnya.

Anda harus menentukan semua warna yang akan Anda gunakan sejak awal. Saya sarankan Anda hanya menggunakan tiga warna, tetapi Anda bebas menggunakan warna sebanyak yang Anda inginkan.

Hanya saja, jangan berlebihan atau Anda akan melemahkan pesan pemasaran Anda dengan semua warna itu. Bagaimanapun, segala sesuatu yang berlebihan itu beracun, jadi apa pun warna yang Anda pilih, penting untuk memastikan adanya keselarasan.

Yang terbaik adalah menggunakan warna terbanyak di tempat yang akan dilihat (dan mudah-mudahan) disukai oleh sebagian besar orang. Saya sedang berbicara tentang logo dan kepala tiang Anda. Area-area ini adalah tempat yang paling Anda butuhkan warnanya; sisa situs web Anda mungkin kurang berwarna tetapi lebih informatif.

216 Warna versus 12 Warna

Kita semua akrab dengan dua belas warna dasar, namun web penuh dengan warna dan corak yang berbeda-beda. Oleh karena itu, memilih warna yang memancarkan kehangatan pribadi sekaligus menciptakan tampilan profesional dapat menjadi tugas yang menantang.

Namun Anda beruntung, karena saya mencari di Internet dan menemukan alat berikut untuk membantu Anda memulai:

KULER

Kuler dirancang oleh Adobe untuk membantu pengembang web membuat skema warna terbaik di kelasnya. Kuler adalah alat online, artinya Anda dapat membawanya kemana-mana dan menggunakannya dari mana saja, namun ada juga aplikasi desktop untuk membantu Anda mengembangkan skema warna langsung dari desktop Anda. Selain itu, jika Anda memiliki ID Adobe, Anda dapat menyimpan skema warna Anda dengan satu klik.

Ada berbagai aturan warna yang dapat digunakan dengan Kuler termasuk Monochromatic, Compound, Complementary, Analogous dan Triad.

Lihat Kuler.

BAGAN WARNA HTML

Mengetahui warna yang akan Anda gunakan hanyalah setengah dari pekerjaan. Untuk menerapkan warna Anda, Anda harus menerjemahkannya ke dalam kode HTML.

Di sinilah Bagan Warna HTML berperan. Ini adalah bagan berwarna dengan lebih dari 200 (sebenarnya 216) kode warna web. Berbekal bagan tersebut, tidak ada warna di bawah matahari yang terbukti sulit untuk diterapkan.

Kode tersebut akan berfungsi dengan HTML, CSS, Adobe PhotoShop, dan alat manipulasi grafis lainnya, sehingga Anda memiliki kebebasan untuk bermain-main dengan warna sebanyak yang Anda inginkan.

Lihat Bagan Warna HTML.

UMUM

Jika Anda memerlukan bantuan dalam memilih warna, GenoPal adalah aplikasi yang Anda inginkan. Ini adalah aplikasi web yang sangat sederhana yang “menyematkan” palet warna ke jendela browser Anda. Saat Anda memilih warna, warna tersebut akan muncul di browser Anda dalam bentuk “catatan tempel” berwarna. ?

Dengan GenoPal, Anda dapat meningkatkan kecerahan dan mengontrol saturasi warna, sehingga Anda mendapatkan warna yang diinginkan.

Di situs web mereka, aplikasi seluler sedang dalam proses. Setelah diluncurkan, Anda dapat membawa aplikasi dan mengembangkan warna di perangkat seluler Anda. Desain mereka cerdik, dan fakta bahwa aplikasi ini benar-benar berfungsi merupakan tanda yang jelas bahwa GenoPal berarti bisnis.

WARNAHEXA

ColorHexa adalah versi online dari pelat cat artis. Situs web ini memberi Anda kemampuan untuk mencampur warna hanya dengan memasukkan kode warna. Aplikasi pendahulunya adalah alat pencampuran warna tetapi mereka juga memiliki generator gradien dan pengurang warna. Bukankah seorang jenius sejati sedang bekerja di sini?

Bagaimana cara kerja Blender ColorHexa? Yang harus Anda lakukan adalah mengetikkan kode warna Anda dipisahkan dengan “+” dan ColorHexa akan melakukan sisanya. Misalnya, saya mencoba:

#ff0000 + #0000ff + #ff00ff dan saya mendapat #aa00aa. Terlebih lagi, mereka memberi Anda seluruh halaman informasi warna (pada warna akhir Anda, misalnya #aa00aa). Ini adalah salah satu alat yang harus Anda coba sendiri untuk merasakan pencampuran warna yang belum pernah ada sebelumnya.

Lihat ColorHexa.

GENERATOR GRADIEN CSS ULTIMATE

Ini mungkin alat terbaik dalam menghasilkan gradien warna. Ini sepenuhnya online dan membantu Anda menghasilkan titik tengah yang menyegarkan dan kode CSS yang sesuai. Mereka juga menyediakan Add-On Chrome dan Firefox yang memungkinkan Anda mengintegrasikan aplikasi ke browser Anda untuk akses yang lebih mudah dan cepat.

Ada area pratinjau tempat Anda melihat gradien, jadi yang perlu Anda lakukan hanyalah membuat gradien sesuai keinginan dan salin-tempel kode CSS yang dihasilkan. Ini sangat mudah dan mereka memiliki lebih banyak warna daripada yang pernah Anda gunakan.

Lihat Generator Gradien CSS Utama.

Memilih Font

Sekarang saya telah menunjukkan kepada Anda cara memilih dan memadukan warna seperti Picasso, mari bermain-main dengan font.

Warna dan desain web Anda akan menarik orang, tetapi kata-kata Anda, yaitu halaman dan postingan Anda, yang akan membuat orang bertahan.

Kita sibuk membuat cerita terbaik setiap saat, sehingga kebanyakan dari kita lupa bahwa font juga penting. Namun font yang Anda pilih memengaruhi cara orang berinteraksi dengan situs web Anda. Dengan font yang tepat, audiens target Anda akan ingin bertahan dan akhirnya mengklik ke halaman Anda yang lain, dan itulah yang Anda inginkan. Pertunangan.

Ada sejuta satu font di luar sana, tapi sayangnya, pengguna hanya akan melihat font yang diinstal di mesin mereka. Jika font yang Anda gunakan tidak diinstal pada mesin mereka, mereka akan melihat alternatif yang mirip (atau font yang sama sekali berbeda), yang tidak akan memiliki efek yang sama seperti yang Anda inginkan.

“Bermain font itu seperti bermain api. Terkadang hal itu dapat menyalakan korek api di halaman web, secercah teks yang cantik. Di lain waktu, api dapat membakar seluruh rumah.” – Lorelle dari cameraontheroad.com.

Anda dapat mengontrol font Anda (dan membuat efek yang Anda inginkan) dengan stylesheet Anda. Dalam tema Anda, stylesheet biasanya berupa file style.css. Anda dapat menggunakan file ini untuk mengontrol warna font, jenis font/keluarga font, ukuran font, dan aspek lain dari font pilihan Anda.

Berikut ini adalah contoh yang bagus:

#menu {font-family:Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; font-size: 0.8em; color:black;}

Kode di atas akan mengatur ukuran font di menu Anda menjadi 0.8em dan mengatur warna menjadi hitam. Ini juga akan mengatur font ke Arial, tetapi jika pengguna tidak memiliki Arial di mesin mereka, Helvetica akan mengambil alih. Jika mereka tidak memiliki Helvetica atau Arial, Verdana, Sans-serif atau Times New Roman akan mengambil alih.

Dengan mengontrol font, Anda dapat menciptakan tampilan dan nuansa yang lebih konsisten.

Namun, untuk mengatasi masalah ketidakkonsistenan font untuk selamanya, Anda dapat menggunakan font yang disematkan. Dengan menggunakan font yang tertanam (atau eksternal), pengguna tidak perlu memiliki font tersebut di mesin mereka.

Selain itu, ini adalah pekerjaan yang mudah dan mudah.

Yang harus Anda lakukan adalah membuka style.css Anda dan meletakkan kode berikut di atas.

@font-face{font-family: Museo300; src: url("fonts/museo300-regular.ttf") format: ('truetype'); font-weight:normal;}

CATATAN: Anda harus menentukan nama dan lokasi font Anda. Pada contoh di atas “Museo300” adalah font yang disimpan dalam folder bernama “font”.

Untuk menggunakan font di situs web Anda, misalnya, Anda dapat menulis:

body{font-family:Museo300;}

Anda dapat menggunakan font yang disematkan untuk elemen apa pun di situs web Anda. Misalnya…

#menu{font-family:Museo300;}

…akan mengatur Museo300 di menu Anda.

Cara di atas berarti Anda harus mengunduh font dan mengunggahnya ke server Anda, yang menurut saya cukup membosankan.

Namun, yAnda tidak perlu mengunduh font eksternal apa pun yang ingin Anda gunakan.

Anda cukup menautkan ke font dari bagian kepala Anda (header.php) seperti:

<link href="http://fonts.googleapis.com/css?family=over+the+rainbow" rel="stylesheet" type="text/css"/>

Bagaimana dan di mana menambahkan baris di atas? Anda perlu membuka Panel Administrasi WordPress –> Tampilan –> Editor –> header.php

Jika Anda tidak ingin atau tidak bisa mengedit file header.php, cukup impor font dengan mengetikkan baris berikut di style.css Anda:

@import url(http://fonts.googleapis.com/css?family=over+the+rainbow);

Contoh di atas memungkinkan Anda menggunakan font Over The Rainbow dari Google di mana saja di situs Anda. Misalnya, jika Anda ingin menggunakan Over The Rainbow di seluruh situs web Anda, Anda dapat menggunakan kode ini:

body{font-family:"Over The Rainbow";}

Google menyediakan lebih dari 600 jenis font gratis, jadi mainkan saja!

Pembaruan (07/12/13): Jika Anda ingin menambahkan Google Font ke situs WordPress Anda dengan mudah, Anda dapat menggunakan plugin Google Typography. Selain itu, Anda dapat mempelajari lebih lanjut tentang font Google dan cara menerapkannya dalam artikel ini Meningkatkan Tipografi Situs WordPress Anda Dengan Google Fonts oleh Tom Ewer.

Plugin WordPress Untuk Menambahkan Font

Dan bagi mereka yang tidak ingin mendalami kode, Anda selalu dapat menginstal plugin WordPress untuk melakukan beberapa pekerjaan berat untuk Anda. Berikut adalah beberapa plugin font gratis yang lebih populer dari WordPress.com:

  • WP Google Font
  • Font – Plugin Webfont Resmi
  • Gunakan Font Apa Pun

Apakah kamu bersenang-senang? Mari kita lanjutkan…

Memformat Tanggal dan Waktu

Pernahkah Anda mengunjungi situs WordPress yang menampilkan tanggal atau waktu dengan nada yang sangat bagus sehingga membuat Anda merasa seperti pemula dalam hal situs Anda? Pemilik situs ini hanya bermain-main dengan satu baris kode dan sekarang Anda tidak dapat puas dengan tanggal mereka. Ha ha.

Kabar baiknya, Anda dapat mengedit baris kode ini dan mengejutkan pembaca Anda juga.

Di Dasbor WP Anda, navigasikan ke Tampilan, lalu ke Editor seperti yang ditunjukkan di bawah ini:

Sesampai di sana, Anda akan dapat melihat daftar file .php Anda di paling kanan:

Klik pada postingan tunggal (single.php) dan setelah terbuka, buka bilah pencarian dengan menekan Ctrl+F. Di bilah pencarian yang muncul, ketik:

the_time

Anda akan segera melihat garis yang mungkin terlihat seperti:

<?php the_time('F Y'); ?>

Sekarang, area yang ingin Anda edit adalah ('F Y').

Izinkan saya menyempurnakan bagian ini agar Anda mendapatkan sesuatu yang lebih menarik untuk dimakan.

Huruf “F” pada (‘F Y’) adalah singkatan dari Nama lengkap bulan dan “Y” mewakili Tahun dalam 4 digit. Oleh karena itu, jika Anda menggunakan ('F Y'), tanggal Anda akan terlihat seperti:

September 2013

Jika Anda menambahkan koma antara F dan Y, Anda akan mendapatkan sesuatu seperti:

September, 2013

Jika Anda ingin menambahkan hari dan elemen lainnya, Anda dapat menggunakan karakter berikut:

l=Nama lengkap hari (huruf kecil L)

F=Bulan

j=Hari dalam sebulan (tanggal)

Y=Tahun dalam 4 digit

y=Tahun dalam 2 digit

Karakter lainnya dapat ditemukan pada tabel di bawah ini:

Dan berikut beberapa contohnya:

Ingatlah selalu untuk hanya mengedit karakter di dalam tanda kurung ('F Y') dan, perhatikan, jangan menghapus tanda kutip tunggal . Jangan ragu untuk menggunakan karakter sebanyak yang Anda inginkan untuk mencapai efek yang Anda inginkan dan ingatlah untuk menyimpan semuanya setelah selesai.

Terlebih lagi, Anda dapat menghilangkan tanggal tersebut dengan menghapus…

<?php the_time ('F Y') ?>

…seperti yang saya lakukan di blog saya belum lama ini. ? Sekarang, yang saya dapatkan hanyalah Diposting oleh Fred dalam kategori ini dan itu…bla bla. Tidak ada tanggal sama sekali.

Apakah Anda bersemangat untuk bagian selanjutnya? Sebaiknya kamu begitu.

Tidak menemukan fungsi the_time?

Tidak apa-apa, karena banyak tema sekarang yang menggunakan fungsi the_date() daripada fungsi the_time(), yang sebenarnya merupakan praktik yang lebih baik. Jika tema Anda menggunakan fungsi the_date() Anda tidak perlu melakukan pengeditan apa pun karena Anda cukup mengubah cara data Anda ditampilkan di dasbor di bawah “Pengaturan->Umum”.

Menggunakan Gambar

Ini mungkin bagian termudah (dan terpendek) dari tutorial ini. Namun jika Anda benar-benar baru mengenal WordPress, menambahkan gambar bisa menjadi sebuah tantangan.

WordPress memungkinkan Anda menambahkan gambar melalui utilitas unggah atau (tombol Tambah Media) saat membuat postingan atau halaman baru. Yang perlu Anda lakukan hanyalah menempatkan kursor di tempat yang Anda inginkan untuk menempatkan gambar di postingan atau halaman Anda, lalu klik “Tambahkan Media”.

Setelah utilitas pengunggahan terbuka, Anda dapat menambahkan detail lainnya seperti keterangan, ukuran, tautan, dan perataan.

Area ini terdapat di sisi kanan utilitas pengunggahan.

Untuk mempelajari lebih lanjut tentang menambahkan gambar, silakan lihat sumber daya berikut:

  • WordPress: Menggunakan Gambar
  • Desain Tema (Menambahkan Gambar)
  • Ukuran dan Kualitas Gambar
  • Optimasi Gambar WordPress
  • Mengedit Gambar Di WordPress

Dan jika Anda tidak yakin di mana menemukan beberapa gambar gratis yang mengagumkan, lihat postingan yang kami tulis yang mencakup sumber gambar terbaik untuk WordPress.

Melihat? Sudah kubilang ini akan menjadi yang terpendek ?

Menambahkan Favicon

Sebelum kita benar-benar melupakan gambar, izinkan kami membuat dan menambahkan favicon ke situs WordPress Anda. Favicon (atau ikon favorit) adalah ikon yang digunakan untuk menandai situs web.

Favicon akan membantu pembaca mengidentifikasi situs web Anda secara visual.

Umumnya, favicon adalah file grafik persegi berukuran 16 X 16 piksel dengan ekstensi .ico. Ekstensi adalah singkatan dari ikon.

Cara Membuat Favicon

Anda dapat membuat favicon secara online atau menggunakan program pengeditan gambar seperti GIMP, atau program lain yang memungkinkan Anda menyimpan file .ico. Sebagian besar layanan online gratis.

Meskipun gambar biasanya sangat kecil (16 kali 16 piksel), favicon harus mewakili blog Anda secara keseluruhan. Gambar atau teks yang Anda gunakan untuk membuat favicon harus mewakili bisnis online Anda.

Jika Anda menggunakan editor gambar:

  • Pangkas atau tambahkan ruang sesuai untuk memastikan gambar Anda berbentuk persegi
  • Ubah ukuran gambar menjadi 16 X 16 piksel, dan
  • Simpan gambar sebagai favicon.ico

Layanan online yang dapat Anda gunakan untuk membuat favicon meliputi (namun tidak terbatas pada):

  • Generator Favicon Asli
  • Penggerak Dinamis

Setelah Anda membuat favicon, mereka akan mengizinkan Anda mengunduhnya ke komputer Anda, jadi jangan khawatir.

Cara Memasang Favicon Anda di WordPress

Jika ada favicon lain di folder utama tema Anda, Anda harus menghapusnya menggunakan klien FTP atau metode apa pun yang tersedia untuk Anda. Klien FTP direkomendasikan karena mudah digunakan dan Anda dapat dengan cepat menemukan file apa pun yang Anda cari.

Untuk tutorial ini, saya menggunakan faviconer.com untuk membuat favicon untuk blog saya dan Filezilla untuk menghapus favicon yang ada.

Dengan file favicon.ico di tangan, unggah file tersebut ke folder utama tema Anda. Ini adalah folder tempat tema Anda saat ini disimpan.

Kemudian unggah salinan favicon Anda yang lain ke folder root (biasanya public_html) atau direktori utama tempat situs Anda disimpan, sehingga Anda dapat melihat favicon Anda saat Anda mengetik situsanda.com/favicon.ico. Ini secara otomatis akan menambahkan favicon Anda ke feed Anda.

Ketika Anda selesai mengunggah, saatnya favicon.ico Anda berfungsi. Inilah yang harus Anda lakukan:

Menambahkan Favicon Anda menggunakan plugin

Cara terbaik untuk menambahkan favicon Anda adalah menggunakan plugin. Saya akan merekomendasikan penggunaan plugin “All In One Favicon” untuk penggunaan lebih lanjut. Untuk pendekatan yang sangat sederhana, Anda dapat menggunakan plugin “Favicon Paling Sederhana” yang tidak memiliki opsi back-end apa pun, Anda hanya perlu mengunggah file bernama favicon. ico di tempat yang benar di server Anda.

Menambahkan favicon secara manual ke template Anda

Beberapa orang mungkin lebih suka (walaupun ini bukan cara terbaik) untuk menambahkan favicon secara manual ke template mereka, untuk melakukannya ikuti langkah-langkah berikut:

  • Masuk ke Dasbor Anda
  • Navigasikan ke Penampilan
  • Lalu ke Editor (Editor Tema)
  • Temukan dan buka file header.php (header)

Tambahkan baris ini ke file header Anda (sebaiknya di bagian atas tempat Anda melihat tag lainnya:

<link rel="shortcut icon" href="<? php echo gets_stylesheet_directory_uri(); ?> /favicon.ico"/>

Simpan setelah selesai.

Segarkan browser Anda untuk melihat perubahan baru.

Pada titik ini, Anda seharusnya dapat mengubah warna, memilih font yang lebih baik, memformat tanggal dan waktu, menggunakan gambar, dan menambahkan favicon.

Kesimpulan

Ada begitu banyak hal yang perlu didiskusikan tentang mendesain ulang situs WordPress Anda sehingga akan merugikan (bagi Anda) jika mencoba mencakup semuanya dalam satu posting.

Untuk mendapatkan manfaat maksimal bagi Anda, sebaiknya bagi tutorial ini menjadi beberapa bagian (ini adalah bagian 1). Kami akan membagikan lebih banyak trik desain ulang seiring berjalannya waktu, jadi waspadalah. Tujuan dari tutorial ini adalah untuk membantu Anda membuat situs WordPress terbaik dan membuat Anda merasa lebih bahagia karena Anda melakukan semuanya sendiri.

Jika Anda ingin membagikan pendapat Anda atau menambahkan sesuatu ke dalam diskusi, silakan tinggalkan komentar Anda di bagian komentar di bawah!