Mendesain Ulang Situs WordPress Anda (Untuk Menambahkan Sentuhan Pribadi)

Tidak ada platform lain yang memberi Anda kekuatan untuk menyesuaikan tampilan dan nuansa situs web Anda seperti WordPress. Itu 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 Anda dan memiliki situs web yang terlihat profesional (namun ramah) dalam waktu singkat. Ini pekerjaan yang mudah dan tutorial ini akan menunjukkan kepada Anda bagaimana 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 itu sebagai lukisan rumah Anda, atau toko batu-dan-mortir Anda. Anda harus menentukan warna yang akan menempel di dinding Anda dan warna yang Anda inginkan pintu Anda.

Cara Anda melukis eksterior dan interior Anda akan bergantung pada beberapa faktor utama yang menjadi preferensi pribadi Anda.

Mewarnai situs WordPress Anda juga tidak berbeda. Warna apa yang Anda inginkan dari tautan Anda? Latar belakang Anda, bagaimana Anda menjadikannya yang paling menarik dan membiarkan pesaing Anda ternganga? Warna apa yang akan melengkapi (atau bahkan memberdayakan) pesan Anda? Bagaimana Anda menginginkan teks Anda? Langit adalah batas untuk pilihan warna yang dapat Anda gunakan di situs WP Anda.

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

Jangan berlebihan atau Anda akhirnya akan mencairkan pesan pemasaran Anda dalam semua warna itu. Lagipula, kelebihan apa pun beracun, jadi apa pun warna yang Anda pilih, penting untuk memastikan ada harmoni.

Yang terbaik adalah menggunakan warna terbanyak di mana mayoritas orang akan melihat (dan mudah-mudahan) menyukainya. Saya berbicara tentang logo dan kepala surat Anda. Area-area ini tepat di tempat Anda paling membutuhkan warna; sisa situs web Anda bisa kurang berwarna tetapi lebih informatif.

216 Warna Versus 12 Warna

Kita semua akrab dengan dua belas warna dasar, tetapi web penuh warna dan corak yang berbeda. Untuk alasan ini, memilih warna yang akan memancarkan kehangatan pribadi sambil menciptakan tampilan profesional bisa menjadi tugas yang menantang.

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

KULER

penguasa

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

Ada berbagai aturan warna untuk digunakan dengan Kuler termasuk Monokromatik, Senyawa, Pelengkap, Analog dan Triad antara lain.

Lihat Kuler.

BAGAN HTML WARNA

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

bagan warna html

Di sinilah HTML Color Chart masuk. Ini adalah grafik warna-warni dengan lebih dari 200 (216 sebenarnya) kode warna web. Berbekal grafik, tidak ada warna di bawah matahari yang terbukti sulit untuk diterapkan.

Kode akan bekerja dengan HTML, CSS, Adobe PhotoShop dan alat manipulasi grafik lainnya, sehingga Anda memiliki semua kebebasan di dunia untuk bermain dengan warna Anda sebanyak yang Anda inginkan.

Lihat Bagan Warna HTML.

UMUM

Jika Anda perlu 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. Ketika Anda memilih warna Anda, mereka muncul di browser Anda dalam bentuk “catatan tempel” berwarna. ��

genopal

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

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

COLORHEXA

ColorHexa adalah versi online dari piring cat artis. Situs web ini memberi Anda kemampuan untuk mencampur warna dengan hanya memasukkan kode warna. Aplikasi sebelumnya mereka adalah alat pencampur warna tetapi mereka juga memiliki generator gradien dan pengurang warna. Bukankah itu jenius murni yang bekerja di sini?

colorhexa

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

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

Lihat ColorHexa.

ULTIMATE GENERATOR GRADIEN CSS

generator gradien warna pamungkas

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

Ada area pratinjau di mana Anda melihat gradien Anda, jadi yang harus Anda lakukan adalah menghasilkan gradien Anda saat Anda anggap cocok dan salin-tempel kode CSS yang dihasilkan. Sangat mudah dan memiliki lebih banyak warna daripada yang pernah Anda gunakan.

Lihat Pembuat Gradien CSS Utama.

Memilih Font

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

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

Kami sibuk membuat cerita terbaik kami setiap saat, jadi kebanyakan dari kita lupa bahwa font juga penting. Tetapi font yang Anda pilih memengaruhi cara orang berinteraksi dengan situs web Anda. Dengan font yang tepat, audiens target Anda ingin tetap bertahan dan akhirnya mengklik halaman lain, yang persis seperti yang Anda inginkan. Keterikatan.

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

“Bermain dengan font seperti bermain api. Terkadang bisa menyalakan kecocokan di halaman web, percikan teks cantik. Di lain waktu, itu bisa 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 adalah style.css mengajukan. Anda dapat menggunakan file ini untuk mengontrol warna font Anda, jenis font / font-family, ukuran font dan aspek lain dari font yang Anda pilih.

Berikut ini adalah contoh yang baik:

#menu {font-family: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; ukuran font: 0.8em; warna hitam;}

Kode di atas akan mengatur ukuran font di menu Anda menjadi 0.8em dan mengatur warnanya menjadi hitam. Ini juga akan mengatur font menjadi 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 mengendalikan font, Anda dapat membuat tampilan dan nuansa yang lebih konsisten.

Namun, untuk mengatasi masalah ketidakkonsistenan font sekali dan untuk semua, Anda dapat menggunakan font yang tertanam. Dengan menggunakan font yang tertanam (atau eksternal), pengguna tidak perlu memiliki font pada mesin mereka.

Selain itu, ini adalah pekerjaan yang sangat mudah.

Yang harus Anda lakukan adalah membuka style.css dan letakkan kode berikut di bagian 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. Dalam contoh di atas “Museo300” adalah font, yang disimpan dalam folder bernama “fonts”.

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. Sebagai contoh…

#menu {font-family: Museo300;}

… akan mengatur Museo300 di menu Anda.

Metode di atas berarti Anda harus mengunduh font dan mengunggah yang sama ke server Anda, yang jika Anda bertanya kepada saya cukup membosankan.

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

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

Bagaimana dan di mana Anda menambahkan baris di atas? Anda harus membuka Panel Administrasi WordPress -> Penampilan -> Editor -> header.php

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

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

Contoh di atas akan memungkinkan Anda menggunakan Over The Rainbow font 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 keluarga font gratis, jadi mainkan!

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

Sumber Daya Lain tentang Bermain dengan Font

Plugin WordPress Untuk Menambahkan Font

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

Apakah kamu bersenang-senang? Mari kita lanjutkan …

 Memformat Tanggal dan Waktu

Pernahkah Anda ke situs WordPress yang menampilkan tanggal atau waktu dengan nada yang benar-benar bagus yang membuat Anda merasa seperti noob total di mana situs Anda diperhatikan? Pemilik situs ini baru saja bermain dengan satu baris kode dan sekarang Anda tidak bisa mendapatkan cukup dari tanggal mereka. Ha ha.

Berita bagus, Anda bisa mengedit baris kode ini dan mengejutkan pembaca Anda juga.

Di Anda Dasbor WP, navigasi ke Penampilan, lalu ke Editor seperti yang ditunjukkan di bawah ini:

tanggal pemformatan

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

pos tunggal

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

waktu

Anda akan segera melihat garis yang mungkin terlihat seperti:

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

Izinkan saya untuk menyempurnakan bagian ini untuk memberi Anda sesuatu yang lebih daging untuk digigit.

“F” dalam (‘F Y’) adalah singkatan Nama lengkap bulan dan “Y” mewakili Tahun dalam 4 digit. Karenanya, jika Anda menggunakan (‘F Y’), tanggal Anda akan terlihat seperti:

September 2013

Jika Anda melemparkan koma antara F dan Y, Anda harus memiliki 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

Lebih banyak karakter dapat ditemukan pada tabel di bawah ini:

memformat tabel tanggal

Dan di sini, beberapa contoh:

memformat contoh tanggal

Selalu ingat untuk mengedit hanya karakter di dalam tanda kurung (‘F Y’) dan, perhatikan, jangan menghapus tanda kutip tunggal. Jangan ragu untuk menggunakan sebanyak mungkin karakter yang Anda inginkan untuk mencapai efek yang Anda inginkan dan ingat untuk menyimpan semuanya saat selesai.

Terlebih lagi, Anda dapat membuang tanggal dengan menghapus …

… 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 didorong untuk bagian selanjutnya? Anda sebaiknya.

Tidak menemukan fungsi the_time?

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

Menggunakan Gambar

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

WordPress memungkinkan Anda untuk menambahkan gambar melalui utilitas unggah atau (tombol Tambahkan Media) saat membuat posting atau halaman baru. Yang perlu Anda lakukan adalah menempatkan kursor di tempat yang Anda inginkan gambarnya berada di pos atau halaman Anda, dan kemudian klik “Tambah Media”.

tambahkan media

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

utilitas unggah

Area ini ditemukan di sisi kanan utilitas pengunggahan.

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

Dan jika Anda tidak yakin di mana menemukan beberapa gambar gratis yang luar biasa, periksa pos yang kami tulis mencakup sumber gambar terbaik untuk WordPress.

Lihat? Saya bilang itu akan menjadi yang terpendek ��

Menambahkan Favicon

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

Favicon akan membantu pembaca Anda mengidentifikasi situs web Anda secara visual.

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

Cara Membuat Favicon

Anda dapat membuat favicon online atau menggunakan program pengeditan gambar seperti GIMP, atau lainnya 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 Anda harus mewakili bisnis online Anda.

Jika Anda menggunakan editor gambar:

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

Layanan online yang dapat Anda gunakan untuk membuat favicons termasuk (tetapi tidak terbatas pada):

Setelah Anda membuat favicon Anda, mereka akan membiarkan 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 Anda atau metode apa pun yang tersedia untuk Anda. Klien FTP direkomendasikan karena mereka mudah digunakan dan Anda dapat dengan cepat menemukan file mana 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 hal yang sama 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 mengetik yoursite.com/favicon.ico. Ini akan secara otomatis 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 menggunakan plugin. Saya akan merekomendasikan menggunakan “Semua Dalam Satu Favicon“Plugin untuk penggunaan lebih lanjut untuk pendekatan yang sangat sederhana yang dapat Anda gunakan”Favicon Sederhana”Plugin yang tidak memiliki opsi back-end apa pun, Anda hanya perlu mengunggah file bernama favicon.ico di tempat yang benar di server Anda.

all-in-one-favicon

Menambahkan favicon secara manual ke template Anda

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

  • Masuk ke akun Anda Dasbor
  • Navigasi ke Penampilan
  • Lalu ke Editor (Editor Tema)
  • Temukan dan buka header.php (header) mengajukan

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

Simpan setelah selesai. 

Refresh browser Anda untuk melihat perubahan baru Anda.

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

Kesimpulan

Ada begitu banyak untuk dibahas tentang mendesain ulang situs WordPress Anda yang akan merugikan (untuk Anda) untuk mencoba mencakup semuanya dalam satu posting.

Untuk yang paling menguntungkan Anda, yang terbaik adalah membagi tutorial menjadi beberapa bagian (ini adalah bagian 1). Kami akan berbagi lebih banyak trik mendesain ulang saat hari tiba, 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 diskusi, silakan tinggalkan komentar Anda di bagian komentar di bawah ini!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map