NieR

WordPress telah menjadi platform blogging yang paling banyak digunakan di dunia, diperkirakan digunakan pada seperempat miliar situs online saat ini. 

WordPress berfungsi sebagai blog, tetapi juga sebagai sistem manajemen konten langsung, siap digunakan dengan URL yang ramah mesin pencari dan HTML dan CSS yang sepenuhnya valid. 

Dengan begitu banyak situs yang menggunakan WordPress dan hanya sekitar 1.200 tema yang terdaftar di WordPress.org, ada pasti ada banyak situs yang tampak persis sama. Anda dan klien Anda harus menonjol, atau akhirnya dicap sebagai "hanya blog WordPress lainnya". 

Dalam artikel ini, saya akan menunjukkan kepada Anda cara mengambil template situs HTML dan CSS yang ada dan mengubahnya menjadi tema untuk WordPress. Tentu saja, tema WordPress adalah topik yang terlalu luas untuk dibahas seluruhnya dalam satu artikel, jadi saya akan memberi Anda beberapa sumber daya di bagian akhir untuk memajukan pembelajaran Anda. 

Diharapkan, Namun, artikel ini akan berfungsi sebagai pengantar yang baik dan memberi Anda dasar yang kuat untuk mulai belajar membuat tema WordPress Anda sendiri. Saya anggap Anda sudah tahu HTML dan CSS, dan sudah memiliki desain situs yang ingin Anda adaptasi ke WordPress. 

Mengenal PHP tidak diperlukan, karena saya akan menjelaskan setiap fungsi yang Anda butuhkan saat kami menggunakannya.

Namun, sebelum kita memulai, Anda perlu menyiapkan lingkungan pengembangan WordPress. Jika Anda biasanya hanya bekerja dengan HTML / CSS, Anda mungkin tidak terbiasa dengan "penyiapan pengembangan".

Saat menggunakan WordPress (atau kerangka kerja PHP lainnya) Anda perlu bekerja dengan pengaturan pengembangan, karena mereka menjalankan kode sisi server yang membutuhkan database seperti MySQL untuk berfungsi, dan itu berarti Anda tidak dapat memeriksa apakah suatu tema berfungsi hanya dengan membuka file di browser. Entah Anda membuat situs pengembangan di server sebenarnya, atau Anda dapat menyiapkan lingkungan pengembangan lokal.

Keuntungan Pengembangan Tema WordPress Kustom

Tema yang dibuat khusus jauh lebih dari yang terlihat. Dan ada manfaat yang bisa didapat di mana-mana. Misalnya, dengan memulai dari awal, Anda tidak perlu membongkar kode pengembang lain untuk menyesuaikan berbagai elemen. Pada saat yang sama, Anda tidak dibatasi oleh pengaturan apa pun yang telah dibangun oleh pengembang ke dalam tema.

Selain itu, ada juga beberapa keuntungan signifikan yang bisa didapat dalam kinerja situs. Tema siap pakai cenderung menyertakan banyak skrip dan gaya - beberapa di antaranya mungkin tidak digunakan. Dengan mengembangkan sendiri tema WordPress, Anda hanya dapat menambahkan item yang Anda butuhkan. Ini mengurangi pembengkakan dan dapat meningkatkan waktu muat halaman.

Sejujurnya, kami hanya menggores permukaan dari apa yang bisa dicapai. Secara keseluruhan, ini tentang membangun tema WordPress yang memenuhi kebutuhan proyek Anda - tidak lebih dan tidak kurang. Bukankah itu seharusnya menjadi tujuan untuk setiap situs web yang Anda buat?

Jadi, mari kita lihat di balik layar tentang cara membuat tema WordPress Anda sendiri!

Pengembangan Tema WordPress untuk Pemula

Untuk pemula, pengembangan tema WordPress bisa jadi mengintimidasi. Itu bisa dimengerti, karena ini adalah subjek yang sangat luas dengan banyak kemungkinan. Dan jika Anda pernah melihat-lihat kode sumber dari tema yang sudah jadi , Anda akan mudah merasa kewalahan. Ada banyak hal yang harus dicerna.

Salah satu cara untuk meratakan kurva pembelajaran adalah memulai dari yang paling dasar. Karena, setelah Anda memahami apa yang membuat tema WordPress berfungsi, Anda dapat membangun fondasi itu satu per satu.

Sebelum kita membahas masalah ini, mari kita kurangi tugas mengembangkan tema WordPress menjadi beberapa konsep inti.

Keterampilan Dasar Yang Diperlukan Untuk Pengembangan Tema Wordpress

Hal pertama yang pertama: Anda tidak harus menjadi programmer ahli untuk membuat tema WordPress Anda sendiri. Itu tidak membutuhkan pengetahuan lanjutan tentang ilmu komputer.

Untuk memulai, Anda harus memiliki pemahaman dasar tentang bahasa-bahasa berikut:

• CSS
• HTML
• PHP

Dan tidak, kami belum melupakan JavaScript. Ini banyak digunakan dan penting untuk fungsionalitas tingkat lanjut. Tetapi bagi mereka yang baru belajar tentang cara kerja tema WordPress, itu tidak 100% diperlukan pada saat ini.

Kuncinya: jangan takut dengan apa yang tidak Anda ketahui. Mengembangkan tema WordPress sebenarnya adalah peluang bagus untuk meningkatkan keterampilan Anda di bidang-bidang ini. Semakin banyak Anda berlatih, semakin banyak Anda akan belajar.

Pelajari Hirarki Template Wordpress

Apa yang dimaksud dengan tema WordPress? Anda mungkin terkejut mengetahui bahwa tema dapat terdiri dari sedikitnya dua file:

index.php - Menyediakan template untuk tema Anda untuk menampilkan konten;

style.css - Berfungsi sebagai lembar gaya utama untuk tema Anda;

Cukup ringan, bukan? Untuk menambahkan sedikit lebih banyak fleksibilitas, tema "barebones" mungkin juga mencakup berikut ini:

header.php - Menampilkan bagian tajuk situs web Anda di setiap halaman;

footer.php - Menampilkan bagian footer situs Anda di setiap halaman;

functions.php - Mendefinisikan fungsionalitas opsional untuk tema Anda, termasuk skrip dan gaya yang diantrekan, bersama dengan potongan kode PHP, dll .;

Secara teori, setidaknya, Anda dapat menjalankan seluruh situs web hanya dengan file-file ini. Tetapi kami sering ingin menyesuaikan lebih lanjut. Di situlah Hierarki Template WordPress berperan.

Mengonversi Situs HTML ke Situs WordPress Bagaimana Anda memilih untuk mengubah situs HTML statis Anda menjadi situs WordPress tidak diragukan lagi akan bergantung pada preferensi pribadi Anda, investasi waktu / uang yang diinginkan, dan tingkat keahlian dengan kode. Anda harus menjadi orang yang memutuskan mana yang terbaik untuk Anda, tetapi dengan ringkasan di bawah ini Anda harus dapat memutuskan dengan cepat dan langsung beralih ke informasi yang paling relevan dalam posting ini untuk situasi spesifik Anda.

Ada tiga opsi utama:

1. Buat tema WordPress secara manual berdasarkan situs HTML statis Anda saat ini.

Ini akan meminta Anda untuk memasukkan kode Anda. Anda harus mengakses direktori situs Anda saat ini melalui FTP dan menggunakan kode yang ada sebagai titik awal. Dari sana Anda perlu membuat file yang diperlukan untuk tema WordPress dan menyalin sedikit kode dari kodeks WordPress. Ini cukup sederhana dan lurus ke depan jika Anda memiliki pengalaman dengan HTML, CSS, dan sedikit PHP.

2. Pasang tema yang sudah dibuat sebelumnya dan cukup migrasikan konten Anda.

Ini mungkin pilihan terbaik di persimpangan antara kesederhanaan dan nilai. Dengan asumsi Anda sudah memiliki hosting untuk situs web Anda saat ini, Anda hanya perlu mengeluarkan uang jika Anda memilih untuk membeli tema premium. Plugin yang akan kami gunakan untuk mengimpor konten tersedia secara gratis di Repositori Plugin WordPress resmi.

3. Membayar agar layanan konversi HTML ke WordPress membuat ulang situs Anda.

Ini adalah solusi termudah, karena tidak mengharuskan Anda melakukan banyak hal. Namun itu tidak akan berbuat banyak untuk membiasakan Anda dengan WordPress dan biayanya akan bervariasi tergantung pada siapa yang Anda pilih untuk dipekerjakan. Saya tidak akan membahas opsi ini di bagian di bawah ini karena jika ini adalah rute yang Anda minati, Anda cukup melakukan pencarian cepat untuk penyedia layanan dan mereka akan mengurus sisanya. Berikut cara Mengonversi Situs HTML ke Situs WordPress

Secara Manual Mengubah Situs HTML Statis Anda ke WordPress

Jika tujuan Anda adalah tidak hanya memasukkan konten dari situs HTML statis Anda ke WordPress tetapi juga menduplikasi desain Anda saat ini, ini berarti Anda perlu membuat tema kustom Anda sendiri. Untungnya, itu tidak seseram kedengarannya pada awalnya. Ini hanya melibatkan pembuatan beberapa folder dan file, sedikit salin dan tempel, dan kemudian mengunggah hasilnya.

Anda akan membutuhkan editor kode seperti Sublime atau Notepad ++ dan akses ke direktori situs HTML dan direktori instalasi WordPress baru Anda.

Langkah 1: Buat Folder Tema Baru dan File yang Diperlukan

Di desktop Anda, buat folder baru untuk menyimpan file tema Anda. Beri nama apa pun yang Anda inginkan untuk dinamai tema Anda.

Selanjutnya, buat beberapa file (yang semuanya masuk ke folder tema baru Anda) di editor kode Anda. Jangan lakukan apa pun untuk mereka dulu. Biarkan saja terbuka untuk pengeditan lebih lanjut.

Style.css

Index.php

header.php

sidebar.php

footer.php

Langkah 2: Salin CSS yang Ada Ke Stylesheet Baru

Jika Anda ingin menduplikasi desain, ini mungkin berarti Anda memiliki setidaknya beberapa CSS yang ingin Anda simpan. Jadi file pertama yang ingin Anda edit adalah file Style.css Anda.

Untuk memulai, tambahkan berikut ini ke atas file Anda.

/*

Theme Name: Replace with your Theme's name.

Theme URI: Your Theme's URI

Description: A brief description.

Version: 1.0

Author: You

Author URI: Your website address.

*/

Setelah bagian ini cukup tempelkan CSS yang ada di bawah ini. Simpan dan tutup file.

Langkah 3: Pisahkan HTML Anda Saat Ini

Sebelum kita masuk ke langkah ketiga, izinkan saya memberi Anda catatan singkat tentang cara kerja WordPress. WordPress menggunakan PHP untuk memanggil dan mengambil potongan data dari database dasarnya. Setiap file yang kami gunakan dalam tutorial kecil ini dirancang untuk memberi tahu WordPress bagian mana dari konten situs Anda yang akan ditampilkan dan di mana.

Jadi ketika saya mengatakan kami akan "memotong" HTML Anda yang ada, yang sebenarnya kami lakukan hanyalah memotong dan menempelkan bagian kode yang ada ke dalam file berbeda yang baru saja kami buat, sehingga WordPress akan tahu di mana harus menampilkan mereka.

Kita mulai.

Pertama, buka file index.html situs Anda saat ini  . Sorot semuanya mulai dari bagian atas file hingga tag pembuka  class = ”main” . Salin dan tempel bagian ini ke file header.php Anda  , simpan dan tutup.

Kedua, kembali ke file index.html Anda  . Sorot elemen  pinggir class = "sidebar" dan semua yang ada di dalamnya. Salin dan tempel bagian ini ke file sidebar.php Anda  , simpan dan tutup.

Ketiga, di index.html Anda   pilih semuanya setelah sidebar Anda dan salin dan tempel ke file footer.php Anda  , simpan dan tutup.

Terakhir, di file index.html Anda  , pilih semua yang tersisa (ini harus menjadi bagian konten utama) dan tempelkan ke file index.php Anda  . Simpan, tapi jangan tutup dulu.

Anda  dapat menutup file index.html Anda  sekarang dan melanjutkan ke langkah terakhir. Hampir selesai!

Langkah 4: Selesaikan File Index.php Anda

Untuk menyelesaikan file index.php tema baru Anda,  Anda perlu memastikannya dapat memanggil bagian lain (selain konten utama) yang disimpan di file lain yang telah Anda buat. Atau dengan kata lain, kumpulkan kembali elemen-elemen yang baru saja kita “potong”.

Di bagian paling atas file index.php Anda  , tempatkan baris berikut php.

<?php get_header(); ?>

Kemudian, di bagian paling bawah file index.php Anda  , tempatkan baris-baris php ini.

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Dan terakhir, kita harus menambahkan apa yang disebut The Loop. Ini adalah php utama yang digunakan WordPress untuk menampilkan konten posting Anda kepada pengunjung. Jadi langkah terakhir dalam membuat file index.php tema baru Anda  adalah menambahkan kode di bawah ini di dalam bagian konten.

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>

  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <div class="post-header">

       <div class="date"><?php the_time( 'M j y' ); ?></div>

       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

       <div class="author"><?php the_author(); ?></div>

    </div><!--end post header-->

    <div class="entry clear">

       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>

       <?php the_content(); ?>

       <?php edit_post_link(); ?>

       <?php wp_link_pages(); ?> </div>

    <!--end entry-->

    <div class="post-footer">

       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>

    </div><!--end post footer-->

    </div><!--end post-->

<?php endwhile;

/* rewind or continue if all posts have been fetched */

?>

    <div class="navigation index">

       <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>

       <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>

    </div><!--end navigation-->

<?php else : ?>

<?php endif; ?>

Langkah 5: Unggah Tema Baru Anda

Sekarang setelah Anda membuat file tema dan menyimpannya dalam folder tema baru, Anda perlu mengakses direktori pemasangan WordPress baru Anda.

Tempatkan folder tema baru Anda di dalam  / wp-content / themes / . Kemudian navigasikan kembali ke  Admin WP> Tampilan> Tema dan tema yang baru Anda buat akan muncul di sana. Silakan dan aktifkan!

Semua yang tersisa untuk dilakukan pada saat ini adalah mengisi situs WordPress baru Anda dengan konten situs lama Anda. Ikuti bersama dengan bagian di bawah ini (melompati bagian tentang menggunakan tema yang sudah dibuat sebelumnya) untuk melihat bagaimana hal itu dilakukan. selamat anda telah berhasil Mengonversi Situs HTML ke Situs WordPress.

Pada topic kali ini kita akan membahas mengnai bootstrap untuk web development. Untuk membuat sebuah web dari awal pastinya tidak mudah. Selain itu, waktu pembuatan website juga tidak sebentar. Yang mana developer benar-benar merancang website tersebut dari awal html, css bahkan java script. Hal ini pastinya sudah sangat tidak flexible.

Maka dari itu ada toolkit bernama bootstrap yang membantu dalam web development. Sehingga proses pengerjaan web tidak memakan waktu yang lama. Bootstrap awalnya dibuat oleh pengembang Twitter untuk penggunaan internal, tetapi setelah beberapa saat, bootstrap dibuat dalam akses terbuka dan menjadi seperangkat alat yang nyaman untuk mengembangkan antarmuka pengguna dengan kerumitan apa pun.

Bootstrap adalah kumpulan besar kode berguna dan dapat digunakan kembali yang ditulis dalam HTML, CSS, dan JavaScript. Ini juga merupakan kerangka kerja pengembangan frontend yang memungkinkan pengembang dan desainer untuk dengan cepat membangun situs web yang sepenuhnya responsif. Pada dasarnya, Bootstrap sudah menyelamatkan kita dari menulis banyak kode CSS yang bahkan sampai ribuan baris, memberi kita lebih banyak waktu untuk dihabiskan untuk mendesain halaman web.

Jadi, sekarang Bootstrap adalah toolkit HTML, CSS dan JS terbuka dan gratis yang digunakan oleh pengembang web untuk membuat desain situs web yang responsif dengan cepat dan efektif. Kerangka Bootstrap digunakan tidak hanya oleh pengembang independen tetapi juga oleh seluruh perusahaan. Area utama aplikasinya adalah pengembangan situs komponen front-end dan antarmuka admin.

Berikut adalah 5 alasan mengapa harus menggunakan bootstrap untuk web development:

Grid yang sudah responsive

Dengan ini kita tidak pelu menghabiskan waktu berjam-jam untuk membuat grid kita pribadi. Bootstap sudah menyediakannya.  Dimana kita bisa mendefinisikan breakpoint kustom untuk setiap kolom sangat mudah menggunakan jeda ekstra kecil, kecil, sedang, besar, dan ekstra besar. Kita juga dapat tetap menggunakan default karena mungkin sudah memenuhi kebutuhan situs.

Gambar yang responsive

Dengan menggunakan bootstrap untuk mengubah ukuran image agar sesuai dengan device lebih mudah.  Bootstrap memiliki kodenya sendiri untuk mengubah ukuran gambar secara otomatis berdasarkan ukuran layar saat ini. Cukup tambahkan kelas .img-responsive ke gambar, dan aturan CSS yang telah ditentukan akan menangani sisanya. Bootstrap bahkan dapat mengubah bentuk gambar website dengan penambahan kelas seperti img-circle dan img-rounded, dan itu tanpa bolak-balik antara kode dan perangkat lunak desain kita.

Mudah untuk dipelajari

Banyak tema untuk sistem manajemen konten (CMS) populer yang dikembangkan menggunakan Bootstrap, yang membuktikan tingkat kualitasnya. Intinya, ini adalah kerangka kerja yang berisi komponen CSS, HTML, dan JavaScript, serta gaya dan fontnya sendiri. 

Komponennya yang lengkap

Bootstrap memiliki banyak sekali komponen yang dapat kitatempelkan dengan mudah ke halaman web, termasuk: Bilah navigasi, Dropdown, Bilah kemajuan, Gambar kecil. Tidak hanya mudah untuk menambahkan elemen desain yang menarik ke halaman web , kita juga akan yakin mengetahui bahwa setiap elemen akan terlihat bagus tidak peduli ukuran layar atau perangkat yang digunakan untuk melihatnya. Ada banyak fungsi siap pakai di ujung jari Anda.

Template eksternalnya yang menarik

Seiring popularitasnya tumbuh, orang-orang mulai membuat template berdasarkan Bootstrap untuk mempercepat proses pengembangan web lebih jauh. Ada banyak situs web di luar sana yang didedikasikan untuk berbagi dan membeli templat khusus berdasarkan Bootstrap.

Apa itu Bootstrap ?

Bootstrap adalah kerangka kerja CSS yang khusus digunakan untuk pengembangan situs web front-end. Nama asli framework ini adalah Twitter Blueprint. Kata “Twitter” ada karena pada awalnya dikembangkan untuk media sosial. Twitter sangat populer saat ini, dengan hampir 326 juta pengguna.

Sebelum Bootstrap muncul, ada kerangka kerja lain yang tersedia. Hanya saja tingkat konsistensi dalam proses pembangunan masih kurang. Selain itu juga membutuhkan biaya perawatan yang mahal.

Berdasarkan pertanyaan tersebut, akhirnya pengembang menemukan Bootstrap. Tidak seperti framework sebelumnya, Boot-strap dikenal konsisten dan sederhana.

Boot-strap adalah kerangka kerja yang memungkinkan pengembang mengembangkan situs web dengan mudah dan cepat. Pengembang hanya perlu memanggil kelas tertentu untuk membuat tombol, panel, tabel, pesan peringatan, dll.

Fungsi Bootstrap

Sebagai pengguna, Anda hanya perlu menggunakan setiap kelas yang ada, misalnya navigasi, tabel, tombol, dll. Banyak fungsi bootstrap tersedia untuk situs web. Fungsi-fungsinya adalah berikut ini:

Dapat mempercepat waktu pengerjaan front end website.

Menunjukkan sisi situs web yang lebih modern dan juga merupakan representasi khas dari anak-anak masa kini.

Tampilan dari boot-strap sendiri sangatlah sensitif, sehingga sangat berguna untuk semua jenis resolusi seperti tablet, smartphone ataupun PC dan laptop.

Situs web yang menggunakan boot-strap umumnya lebih ringan karena lebih terstruktur secara logis.

Keunggulan Bootstrap

Menghemat waktu

Bootstrap sendiri menyediakan banyak pustaka, yang berisi berbagai skrip, yang dapat digunakan pemrogram saat mengembangkan situs web front-end. Dengan cara ini, pengembang tidak lagi menghabiskan waktu untuk menulis berbagai skrip SCC dari awal. Tentunya dengan menggunakan fragmen script tersebut, situs tersebut akan sangat menguntungkan.

Di tangan programmer yang handal, struktur website dapat meningkatkan produktivitas. Perlu Anda ketahui bahwa versi terbaru dari boot-strap dibuat dengan menggunakan fungsi LESS. Ini berarti boot-strap memiliki banyak aspek menguntungkan dalam desain situs web, yang membuatnya sangat mudah bagi pemrogram.

Lebih fleksibel

Menggunakan situs web panduan juga dapat membuat pekerjaan pengembang dan pemrogram lebih fleksibel. Ya, karena frameworknya bisa digunakan sesuka hati, dan gratis. Anda bisa lebih mudah memodifikasi berbagai script yang sudah ada. Tidak ada aturan khusus untuk menggunakan panduan Twitter ini.

Ini adalah bagaimana Anda bisa berkreasi dalam bentuk yang Anda inginkan dengan menggunakan berbagai alat yang sudah ada di boot-strap itu sendiri. Hal inilah yang membuat developer lebih leluasa dalam membangun website sendiri.

Kali ini kita akan ngerefresh sejenak ingatan kita mengenai HTML. Yah, artikel ini mungkin cocok buat yang baru mendalami pemrograman web.

HTML atau Hyper Text Markup Language. Adalah bahasa yang digunakan untuk mendisain dan

memformat halaman web. Kita mungkin sudah mendengar tentang bahasa program seperti C,

C++, Java, dan Visual basic. Masing-Masing bahasa ini terdiri dari perintah sintak

dan programming . Sintak ini adalah yang programmer gunakan untuk memanggil kode.

Sangatlah penting mengetahui bagaimana cara menulis kode menggunakan bahassa yang

relevan.

Lebih dari itu, kita harus konvensional dengan aturan menyangkut bahasa tertentu.

Didalam HTML, sintak ini disebut tag.Tag ditulis dengan tanda-kurung bersudut< dan

>.Ada kelompok tag yang sudah dikenal didalam HTML, yang mana digunakan untuk berbagai tujuan.

Sebagai contoh, dalam rangka memodifikasi satu baris teks ke dalam Bold, kita menerapkan

tag bold dengan suatu tag <b>, kemudian tulis beberapa teks atau suatu paragrap yang

berisi beberapa teks,dan tutup tag menggunakan tag </b> seperti dalam contoh listing 1.

Semua tag didalam HTML harus ditutup menggunakan sintak </>.Tetapi ada beberapa perkecualian pada aturan ini, yang mana kita akan mendiskusikanya nanti.Kita memakai tag ini

sebab HTML bukanlah bahasa yang sensitip seperti C++ dan Java.

Struktur

Setiap kode HTML perlu ditulis dalam suatu struktur yang mana dapat dihubungkan dengan

Word Wide Web.Tidaklah wajib untuk mengikuti struktur ini. Bagaimanapun juga,lebih

baik

mempraktekan langsung struktur ini sbg perancangan halaman web kita.

Listing 1 menunjukkan struktur suatu halaman HTML sederhana:

Listing 1

• <!– Ini komentar didalam HTML.Ini tidak akan diperliatkan pada browser–>
• 
  
• <HTML>
• <HEAD>
• <TITLE>
• Welcome to HTML
• </TITLE>
• </HEAD>
• <BODY>
• <!–halaman CONTENT dimulai –>
• <B>Yang ditampilkan di browser, cuma tulisan ini.
• </BODY>
• </HTML>

Kode diatas menggunakan Notepad dan menyimpan file sebagai satu.html. Kemudian, klik kanan file yang disimpan tadi. bagaimanakah keluarannya?

Listing 2

• <B>Untuk menampilkan tulisan cetak tebal</B><BR>
• <I>Untuk menampilkan tulisan cetak miring (italic) </I><BR>
• <U>Untuk menampilkan tulisan bergaris bawah (underline) </U><BR>
• <BR> digunakan untuk menampilkan baris baru.

Listing 3

<Pon> Bla bla bla bla, dan tulisan ini pun akan dianggap satu paragraf. kalau ga percaya, coba aja sendiri. dengan menggunakannya dua kali atau lebih bakal lebih keliatan hasilnya.

</P>

Tidak wajib untuk menutup tag <P>. Tetapi seperti dikatakan sebelumnya, menutup

tiap-tiap tag adalah suatu yang baik yang pemprogram praktekkan.

Listing 4

Bekerja dengan Heading

Kita dapat menggunakan heading untuk mengorganisir teks kita dalam berbagai

tingkatan. Ada lima tingkatan heading didalam HTML seprti di bawah:

• <H1>Level – 1 </H1>
• <H2>Level – 2 </H2>
• <H3>Level – 3 </H3>
• <H4>Level – 4 </H4>
• <H5>Level – 5 </H5>

Listing 5

Penempatan List contoh teks atau items.Ada dua jenis list didalam HTML.

sebagai berikut

• Ordered List
• Unordered List

Ordered List diwakili oleh tag <ol> tag secara otomatis menomori, dan

Unordered List diwakili oleh tag <ul> dan terlihat seperti bullet.

Cobalah kode di bawah ini:

<OL>

<LI>Java

<LI>C++

</OL>

kode diatas menghasilkan suatu daftar perintah bahasa. Jika kita

menginginkannya seperti bullet kemudian kita ubah tag <OL> menjadi tag <UL>

sebagai di bawah ini:

Listing 6

• <UL>
• <LI>Java
• <LI>C++
• </UL>

Listing 7

Penerapan Definisi List

Definisi List adalah serupa dengan daftar kata. Diterapkan menggunakan tag <DL>

dan <DT> seperti ditunjukkan listing 7 dibawah ini.

<DL>

<DT>Java

<DD>Developed by Sun Microsystems Inc

<DT>Yang kedua

<DD>Developed by saya sendiri

</DL>

Listing 8

Indenting Text

Tag <BLOCKQUOTE> yaitu teks yang menjorok lebih kedalam dari garis tepi secara

otomatis dari kiri ke kanan. Cobalah contoh berikut :

<BLOCKQUOTE>

You can use Sound Recorder to record, play, and edit sound files.

To use Sound Recorder, you must have a sound card and speakers

installed on your computer. If you want to record live sound,

you also need a microphone.

</BLOCKQUOTE>

Membuat Links

Suatu website bukanlah halaman tunggal.Terdiri dari beberapa halaman yang saling

berhubungan. Sebagai contoh,ketika kita klik suatu link nama ” About Us”,

pada browser secara otomatis Kita ke halaman web itu .

Bagaimana sihir ini terjadi? Itu merupakan suatu konsep Hyperlinks

Kita dapat menciptakan Hyperlinks menggunakan tag <a>.Dan harus ditutup menggunakan

tag </a> dan itu mewakili anchor.

Listing 9

<A href =“http://www.rumahweb.com”>Rumahweb </A>

href adalah suatu atribut yang digunakan untuk menetapkan link dan mewakili

Teks Reference. Atribut lain meliputi suatu target opsional, yang mana menandakan

bagaimana cara membuka link. Nilai atribut ini jadi kosong. Sebagai contoh,

kode berikut memanggil lokasi Rumahweb.com didalam suatu jendela browser baru

ketika seseorang mengklik teks.

Listing 10

<A href = http://mhdfzl.com>Fzl </A>

Selalu ingat untuk menyimpan file yang telah dibuat dalam ekstensi .html

Ada Beberapa cara untuk mendapatkan penghasilan dari membuat konten blog, diantaranya yaitu :

1. Adsense

Sebagai penayang blog, Anda bisa mendapatkan aliran pendapatan yang bagus untuk konten online Anda dari iklan. Pengiklan bersedia membayar untuk mendapatkan eksposur ke audiens Anda. Sama halnya seperti surat kabar dengan sirkulasi besar yang dapat mengenakan biaya yang lebih tinggi kepada pengiklan, semakin populer situs dan konten Anda, semakin besar penghasilan yang dapat Anda peroleh.

Cara kerja AdSense adalah lewat penayangan iklan yang relevan dengan konten yang muncul di halaman tertentu pada blog Anda. Misalnya, jika blog Anda adalah tentang wisata petualangan dan Anda baru saja mengupload sebuah postingan tentang perjalanan ke Gunung Rinjani, AdSense mungkin akan menampilkan iklan tentang asuransi perjalanan, Lombok, atau jaket. Sebagai pemilik situs tempat iklan ditampilkan, AdSense akan membayar Anda saat pengguna melihat atau berinteraksi dengan iklan.

2. Program Afiliasi

Marketing afiliasi adalah saat Anda menyertakan link di konten Anda ke produk atau layanan yang dijual di situs lain. Berikut cara kerjanya: saat seseorang mengklik link di situs Anda, membuka situs afiliasi, dan melanjutkan untuk membeli produk yang Anda promosikan, Anda mendapatkan komisi atas penjualan tersebut.

Bagi blog yang audiens-nya sangat aktif dan tertarik dengan rekomendasi produk, ini dapat menjadi model pendapatan yang realistis. Artikel informasi, petunjuk, dan gaya hidup menawarkan banyak peluang untuk mempromosikan produk afiliasi.

3. Menjual Produk Sendiri

Sebagai cara untuk memonetisasi blog, banyak blogger mengukuhkan kehadirannya di platform e-commerce, membuat toko online, dan mulai menjual produk. Produk Anda bisa dalam bentuk fisik atau digital. Pada contoh blog wisata petualangan, Anda dapat menjual kaos yang menampilkan logo Anda atau buku panduan digital untuk destinasi eksotis.

Apakah produk Anda berbentuk fisik atau virtual, Anda harus membuat sistem untuk menerima pembayaran. Menjual merchandise fisik mengharuskan Anda untuk memikirkan tentang penyimpanan stok barang, mengatur pengiriman, dan menangani pajak dan bea. Dari segi logistik, barang digital bisa lebih sederhana karena dapat dikirim secara elektronik.

4. Job Review

Pada job review kita menulis review, kita menulis review mengenai sebuah produk atau perusahaan dimana perusahaan membayar kita untuk menulis review tersebut. Ini juga merupakan salah satu cara mendapatkan uang dari blog dengan mudah dan praktis.  Akan tetapi, untuk menarik perusahaan tersebut agar mau memberi job kita juga harus meningkatkan kualitas blog agar lebih terkemuka. Dengan begitu, banyak  tawaran job review.

File WordPress sama seperti file website biasa. Agar bisa diakses, website memiliki 2 komponen utama. Yaitu file database dan file WordPress itu sendiri. Nah, untuk melakukan upload file WordPress ke Hosting pertama kali kamu harus melakukan konfigurasi database MySQL, upload file WordPress lalu mengganti konfigurasi database.

Setting Database MySQL

Sebelum kamu melakukan upload file WordPress, hal pertama yang harus anda lakukan yaitu setting database terlebih dahulu. Sesuaikan dengan jenis database MySQL yang digunakan. Jika database MySQL telah dibuat, maka silahkan lakukan impor database yang kamu gunakan dalam localhost melalui phpMyAdmin. Silahkan ikuti step by step berikut ini:

1. Login cPanel Hosting

Masuk ke dalam cPanel anda melalui https://namadomain/cpanel, lalu login sesuai email yang dikirim dari DomaiNesia mengenai Informasi Account Hosting

2. Membuat Database Baru

Untuk membuat database MySQL baru, maka kamu bisa membaca Panduan Membuat Database MySQL di cPanel. Pastikan kamu ingat nama database beserta username dan passwordnya!

3. Melakukan Impor Database

Setelah database berhasil dibuat, silahkan lakukan impor database terlebih dahulu. Kamu bisa impor database melalui phpMyAdmin agar lebih mudah. Silahkan ketikkan phpMyAdmin pada form pencarian. Lalu klik phpMyAdmin.

Klik database yang telah kamu buat tadi. Lalu klik tab Import. Pada bagian File to Import klik Choose File kemudian pilih sql yang telah anda ekspor dari server local atau localhost. Setelah itu pilih Go. Tunggu hingga proses upload selesai.

Maka proses upload database dari localhost ke hosting telah sukses.

Upload File WordPress ke Hosting

Setelah setting database MySQL, maka sekarang yang perlu kamu lakukan yaitu upload file WordPress ke hosting agar website anda dapat online dan dapat diakses banyak orang. Adapun langkah- langkahnya yaitu,

4. Memilih File Manager

Untuk melakukan hosting web WordPress, kamu bisa masuk kembali ke cPanel. Kemudian tulis file manager dan klik file manager

5. Memilih Folder Untuk Upload File (Domain)

Kamu akan diarahkan ke halaman file manager. Pada sebelah kiri, silahkan klik public_html. Terdapat berbagai folder dalam public_html. Folder tersebut merupakan anak folder atau subdomain dari domain utama. Jika kamu ingin file website ini berada di domain utama maka silahkan upload tepat pada direktori public_html. Jika file website ingin diletakkan di subdomain, maka silahkan upload pada nama folder subdomain. Untuk mengupload file website tersebut, kamu bisa pilih Upload.

6. Memilih File WordPress

Kemudian pilih  file WordPress yang ingin di upload. Pastikan file WordPress yang ingin diupload ke hosting telah berbentuk .zip. Hal ini untuk memudahkan kamu dalam proses upload. Klik Select File lalu pilih file folder yang akan diupload. Atau bisa juga kamu melakukan drag and drop. Drag folder WordPress dari lokal ke dalam halaman ini. Usahakan folder yang ingin diupload telah berformat .zip terlebih dahulu. Tunggu hingga proses upload selesai

7. Melakukan Ekstrak File WordPress

Setelah selesai cek pada file manager. Kemudian ekstrak file website berformat .zip yang telah diupload tadi. Caranya klik kanan pada file .zip pilih Extract. Hasil ekstrak akan muncul seperti gambar berikut.

Sinkronisasi Database WordPress dengan Hosting

Setelah semua file WordPress terupload, maka kamu harus melakukan sinkronisasi database. Hal ini bertujuan agar semua data dalam website WordPress yang ada di hosting bisa terbaca. Jika kamu tidak mengganti pengaturan database seperti nama database, username dan passwordnya maka dapat dipastikan akan muncul “Error establishing a aatabase connection!”. Untuk melakukan editing pengaturan database, biasanya terletak di file wp-config.php. Adapun caranya,

8. Mengubah Setting Database di wp-config.php

Silahkan disesuaikan dengan database yang telah dibuat pada step awal tadi. Kamu harus menyesuaikan nama database, username serta passwordnya. Caranya, silahkan pilih file wp-config.php lalu klik Edit. Kemudian ubah setting databasenya. Jika sudah selesai, jangan lupa untuk klik Save Changes.

define(‘DB_NAME’, ‘nama database’);

/* MySQL database username /

define(‘DB_USER’, ‘username’);

/* MySQL database password /

define(‘DB_PASSWORD’, ‘password’);

Jika lupa, kamu bisa membuka kembali pada menu MySQL Databases di cPanel.

Selain itu, kamu juga harus melakukan sinkronisasi wpna_options atau wp_options. Silahkan masuk ke phpMy Admin, kemudian pilih database baru yang telah dilakukan import file .sql tadi. Kemudian pilih wpna_options dan lihat kolom option_name terdapat siteurl dan home.

Silahkan klik Edit. Pada kolom option_value, silahkan ganti dengan domain/ subdomain baru.

Setelah semua step telah terselesaikan maka WordPress kamu telah siap. Silahkan akses sesuai dengan domain. Apabila belum diarahkan secara otomatis maka hapus file default.php.

Sebelum Anda mulai: lakukan penelitian kata kunci
Ketika Anda telah melakukan penelitian kata kunci dan memiliki daftar kata kunci fokus untuk ditulis, inilah waktunya untuk mulai menulis. Berikut adalah 9 tips untuk membantu Anda mendapatkan postingan blog yang luar biasa!
Tips menulis postingan blog yang ramah SEO
    1. Berpikirlah sebelum Anda menulis!
Sebelum Anda mulai, pikirkan baik-baik tentang pesan dari karya Anda. Apa yang ingin Anda sampaikan kepada pembaca Anda, atau pertanyaan utama mana yang ingin Anda jawab? Apa tujuan artikel Anda? Dan apa yang Anda ingin pembaca lakukan di akhir halaman? Tuliskan jawaban atas pertanyaan-pertanyaan ini sebelum Anda mulai dan pikirkan tentang maksud pencarian yang mungkin dimiliki seseorang. Cara mudah untuk mendapatkan wawasan tentang hal ini adalah dengan melihat hasil pencarian untuk istilah pencarian yang ingin Anda rangking.
Untuk menulis postingan blog yang mudah dibaca dan ramah SEO, Anda perlu membuat struktur yang jelas . Artinya, setiap postingan harus memiliki:
    - semacam pengantar (di mana Anda memperkenalkan topik Anda);
    - tubuh (di mana pesan utama ditulis);
    - kesimpulan (di mana Anda meringkas ide-ide utama atau menarik kesimpulan).
Dalam beberapa kalimat, tuliskan apa yang ingin Anda katakan di ketiga bagian. Anda sekarang telah membuat ringkasan posting Anda. Ini akan membantu Anda membuat postingan blog yang terstruktur dan dapat dibaca. Sekarang tulisan yang sebenarnya bisa dimulai.
Semua orang menggunakan paragraf, tetapi tidak semua orang menggunakannya dengan baik. Jangan memulai setiap kalimat baru di baris baru hanya karena terlihat bagus. Selain itu, cobalah untuk tidak membuatnya terlalu panjang, karena setiap paragraf harus memiliki ide atau subjeknya sendiri. Tanyakan pada diri Anda apa ide utama setiap paragraf. Anda harus bisa meringkas gagasan utama itu dalam satu kalimat. Jika itu tidak memungkinkan dan Anda membutuhkan lebih banyak kalimat untuk menjelaskan gagasan utama, Anda hanya perlu menggunakan lebih banyak paragraf .
    4. Gunakan kata-kata transisi
Kata transisi membantu orang memindai teks Anda dan memahami hubungan antara kalimat dan paragraf. Misalnya, ada tiga alasan orang membeli produk Anda. Anda harus menggunakan kata-kata isyarat seperti: 'pertama-tama'; 'kedua' dan 'akhirnya'. Juga, kata-kata seperti 'bagaimanapun', 'serupa' dan 'misalnya' memberikan sinyal yang jelas kepada pembaca Anda. Pembaca akan langsung mendapatkan kesimpulan akan mengikuti kata-kata seperti 'menyimpulkan' atau 'singkatnya'. Oleh karena itu, kata - kata transisi sangat penting untuk menambahkan struktur pada teks Anda.
    5. Gunakan kata kunci terkait
Menjejali artikel Anda dengan kata kunci fokus membuatnya kurang menarik untuk dibaca, tetapi juga dapat merusak peringkat Anda. Google semakin pintar, dan ingin Anda menulis konten yang disukai pengguna. Itu tidak ingin Anda menggunakan kata kunci fokus Anda di setiap kalimat lain dan memiliki cara lain untuk menganalisis tentang apa teks Anda. Salah satu cara Google memahami topik teks Anda adalah dengan mengenali sinonim dan kata kunci lain yang terkait dengan fokus keyphrase Anda. Itulah mengapa Anda harus menggunakan sinonim dan kata kunci terkait di seluruh salinan Anda.
    6. Optimalkan panjang artikel Anda
Pastikan posting blog Anda memiliki minimal 300 kata tetapi jaga keseimbangan panjang artikel Anda. Google menyukai artikel yang panjang, namun, jika artikel Anda terlalu panjang, hal itu dapat membuat takut pengguna. Saya akan menyarankan untuk hanya menulis artikel panjang jika Anda tahu bahwa Anda adalah seorang penulis yang ahli. Ini meminta banyak pengunjung Anda untuk membaca seluruh posting Anda ketika itu panjang.Dan ingat untuk tetap menggunakan fokus keyphrase Anda di seluruh teks Anda untuk memastikan Anda mendapatkan posting blog yang ramah SEO!
    7. Tautan ke konten yang ada
Jika Anda telah menulis konten dengan topik yang sama dengan postingan Anda saat ini, jangan lupa untuk menautkan ke dan dari postingan ini. Ini akan membuat posting blog baru Anda, dan posting yang sudah ada, lebih kuat karena Anda menunjukkan otoritas pada subjek tersebut. Selain itu, struktur tautan Anda juga penting untuk peringkat Anda di Google. Dan jangan lupa bahwa menautkan ke konten lain tentang suatu subjek sangat bagus untuk pembaca Anda, karena mereka mungkin juga tertarik untuk membaca posting terkait ini. Ini membantu mereka menavigasi situs Anda.
Kami menyebutnya tautan internal dan pembaca Anda serta Google akan berterima kasih untuk itu. Ini membantu mereka mengelola konten Anda dan memahami hubungan antara konten yang berbeda di situs Anda, jadi luangkan waktu untuk menautkan ke dan dari konten Anda sebelumnya. Alat tautan internal kami dapat membantu Anda dengan menyarankan halaman dan posting yang relevan di situs Anda yang dapat Anda tautkan.
    8. Biarkan orang lain membaca posting Anda
Sebelum memublikasikan posting Anda, pastikan untuk mengizinkan orang lain membacanya terlebih dahulu. Tanyakan apakah mereka memahami konsep utama kiriman Anda dan undang mereka untuk memperbaiki kesalahan ketik dan tata bahasa. Ini dapat membantu Anda dengan memberikan pandangan obyektif tentang keterbacaan dan daya tarik teks Anda. Jika Anda memiliki seseorang di tim Anda yang kebetulan ahli dalam topik yang Anda tulis, pastikan untuk memasukkan pos Anda melewati mereka. Dengan begitu mereka dapat memeriksa apakah Anda mencakup semua yang Anda butuhkan dan memberikan saran untuk membuat posting Anda lebih baik.
    9. Tambahkan konten secara teratur
Menambahkan posting blog baru ke situs web Anda secara teratur memberi tahu Google bahwa situs web Anda hidup. Ini penting karena jika situs Anda tidak aktif, Google akan lebih jarang merayapinya dan ini dapat memengaruhi peringkat Anda secara negatif. Namun jangan hanya sekedar memposting demi postingan. Pastikan semua yang Anda posting adalah konten berkualitas tinggi : artikel informatif dan ditulis dengan baik yang menghibur pembaca dan sesuai dengan maksud pencarian mereka .
x

Sebelum Anda mulai menulis , Anda harus melakukan  penelitian kata kunci . Jika Anda ingin mendominasi hasil pencarian, Anda harus mencari tahu kata-kata yang sebenarnya dicari oleh audiens Anda. Ini adalah topik yang harus Anda tulis dan kata kunci yang harus Anda gunakan dalam teks Anda.

Yang terpenting, posting blog Anda harus menjadi tulisan yang bagus. Saat memulai posting blog baru, banyak blogger yang baru mulai menulis, mengetik apa pun yang terlintas di benak mereka. Meskipun ini mungkin berhasil untuk beberapa orang yang memiliki bakat menulis alami, yang lain mungkin membutuhkan bantuan. Secara pribadi, saya selalu mengikuti 'aturan' ini ketika saya menulis blog baru.

    2. Rancang struktur untuk posting Anda

    3. Gunakan paragraf dan judul

Langkah satu: Buat sketsa wireframe Anda

Perkiraan waktu: 1-2 jam. Saya merekomendasikan melakukan latihan ini dengan pemangku kepentingan utama.

Mari kita mulai dengan premis bahwa Anda telah ditugaskan untuk membuat aplikasi seluler. Hal pertama yang harus Anda tanyakan adalah, "Masalah apa yang saya selesaikan dan untuk siapa saya menyelesaikannya?" Jawaban atas pertanyaan majemuk ini akan menetapkan dasar untuk desain Anda karena jawaban tersebut akan memberikan wawasan yang dapat mendorong fitur dan fungsi desain Anda. Jawaban ini juga pasti akan membantu Anda memutuskan apa MVP (produk yang layak minimum) akan untuk desain Anda.

Misalnya, Anda mungkin memiliki banyak fitur di peta jalan produk, tetapi Anda hanya perlu fokus pada fitur penting agar berhasil meluncurkan versi pertama aplikasi. Anda dapat memulai dengan menanyakan "Fitur dan fungsi apa yang perlu kami buat agar demografis target kami dapat menyelesaikan tujuan / tugas mereka?"

Untuk menjawab pertanyaan ini, Anda dapat membuat alur pengguna berdasarkan "jalur menyenangkan" dari pengguna utama Anda (Anda dapat fokus pada semua kasus edge nanti). Saya merekomendasikan papan tulis tempat Anda pertama kali menuliskan semua langkah kunci pengguna. Setelah Anda menuliskan langkah-langkah penting tersebut, Anda dapat mulai membuat sketsa tingkat tinggi dari langkah-langkah ini. Ini membantu Anda menentukan kemampuan apa yang dibutuhkan pengguna di setiap langkah dan menjaga ruang lingkup merayap.

Catatan: Cobalah untuk menghentikan diri Anda dari membuat sketsa tanpa terlebih dahulu menulis alur pengguna. Pikiran kita bisa menjadi sangat kreatif dan keluar jalur jika kita langsung membuat sketsa.

Berikut tampilan latihan ini setelah Anda menuliskan alur pengguna dan membuat sketsa kasar di bawahnya. Ingat, itu tidak harus cantik, tetapi harus cukup menyampaikan ide-ide Anda sehingga Anda melanjutkan ke langkah berikutnya, gambar rangka digital. 

 Plugin WordPress pada dasarnya adalah sedikit kode yang "dihubungkan" ke situs WordPress yang dihosting sendiri. Dalam istilah manusia, itu berarti plugin WordPress adalah sesuatu yang menambahkan fungsionalitas baru ke situs WordPress Anda atau memperluas fungsionalitas yang ada di situs Anda.

Salah satu manfaat WordPress adalah pengembang yang giat telah menulis puluhan ribu plugin WordPress yang dapat Anda tambahkan ke situs Anda.

Plugin dapat membuat segalanya mulai dari perubahan kecil hingga perubahan besar pada situs Anda. Misalnya, beberapa plugin bahkan dapat mengubah situs WordPress Anda menjadi toko eCommerce , jejaring sosial, atau forum yang berfungsi penuh .

Atau, mereka juga dapat menambahkan fitur yang lebih kecil seperti umpan Instagram . Beberapa plugin WordPress bahkan tidak memiliki efek menghadap ke depan. Misalnya, Anda dapat memasang plugin untuk meningkatkan kinerja situs Anda atau membantunya mendapatkan peringkat yang lebih baik di mesin pencari seperti Google. 

Mengapa  Menggunakan Child Theme?

Child Theme memungkinkan Anda untuk menggunakan atau memodifikasi tema utama tanpa harus mempengaruhi kode yang ada di tema utama. Jadi Child Theme adalah sebuah tema dalam bentuk sub-theme berdasarkan karakteristik dari tema utama.

Ketika Anda menggunakan Child Theme di WordPress, segala pengubahan yang Anda lakukan di Child Theme akan mempengaruhi tema utama dan ketika Anda menghapus Child Theme, tema utama akan kembali ke semula.

Child theme seharusnya Anda gunakan saat berencana memodifikasi tema bahkan ketika hanya memodifikasi satu karakter di tema utama. Ada dua alasan yang harusnya Anda pertimbangkan: pembaruan (update) dan ogranisasi.

Cara Kerja Child Theme

Child Theme berada di direktori yang berbeda dengan tema utama. Supaya Child Theme dapat berfungsi dengan normal, setiap direktori Child Theme harus memiliki file style.css dan functions.php. Selain kedua file ini, Anda dapat menambahkan file tambahan yang dikustomisasi sesuai dengan kebutuhan.

File .css dan .php di direktori Child Theme membuat Anda dapat memodifikasi apapun mulai dari styling dan parameter layout hingga mengubah dan menambahkan baris kode.

Ketika pengunjung mengakses website, WordPress pertama kali akan memuat Child Theme terlebih dahulu. Kemudian WordPress menurunkan style dan fungsi dari tema utama untuk melengkapi Child Theme.

Hasilnya, mayoritas pengaturan akan mengambil dari tema utama namun sudah dimodifikasi oleh Child Theme sebelum akhirnya dikirimkan ke browser.

Langkah langkah untuk membuat Child Theme adalah sebagai berikut:

• Download tema yang ingin dijadikan tema parent, kemudian install.
• masuk ke folder wordpress, ../wp-content/themes
• buat folder baru untuk tema child.
• kemudian buka folder dari tema yang telah diinstall dan yang menjadi tema parent.
• copy screenshot dan style.css
• Paste ke folder yang telah dibuat sebelumnya untuk tema child.
• Selanjutnya buka file style.css, edit nama tema, theme url, dll.

/*
Theme Name: (nama tema)
Theme URI: (url tema)
Author: the (author)
Author URI: (url author)
Description: (deskripsi)
Version: (versi)
Template: (isikan dengan nama tema parent)
*/

• Sekarang masuk ke dashboard wordpress dan aktifkan tema yang telah dibuat
• Jadi, jika ingin memodifikasi tema, anda bisa melakukannya di tema child yang telah dibuat tanpa mengubah tema parent

Warna

Warna merupakan hal penting dalam desain sebuah web, membuat sebuah web menjadi lebih menarik

Menurut teori Brewster, untuk menyederhanakan warna yang ada di alam, warna dibagi menjadi 4 kelompok, yaitu:

• Warna Primer

• Warna Sekunder

• Warna Tersier

• Warna Netral

Psikologi Warna

Psikologi warna dapat kita pahami salah satunya dengan mengetahui perlambangan warna. Warna memiliki pengaruh yang kuat terhadap sikap dan emosi.

Memahami psikologi warna akan membantumu merancang antarmuka yang efektif dan tepat sasaran.

Warna Yang Disukai Wanita

Dalam survei tentang warna dan gender:

• 35% wanita suka warna biru
• 23% wanita suka warna ungu
• 14% wanita suka warna hijau
• 33% wanita tidak suka warna oranye
• 33% wanita tidak suka warna coklat
• 17% wanita tidak suka warna abu-abu

Warna Yang Disukai Pria

• Pria menyukai biru
• Pria menyukai hijau
• Pria menyukai hitam
• Pria tidak menyukai ungu
• Pria tidak menyukai orange
• Pria tidak menyukai coklat

Palette Warna

Color palette adalah sekumpulan warna yang di mix and match sehingga menghasilkan kombinasi warna yang unik dan menarik. Contoh: https://colorhunt.co.

RGB

Warna umum yang digunakan untuk website model RGB

Kode RGB menggunakan bilangan Hexadecimal basis 16

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Contoh kode warna RGB:

Type Font

Serif menggunakan tips atau flag dekoratif. Serif biasanya digunakan untuk dokumen atau layar yang mengandung banyak text

Sans Serif tidak menggunakan tips atau flag dekoratif. Sans Serif biasanya digunakan untuk komputer karena dianggap memiliki kontras yang lebih tajam

Pemilihan Font

• Pahami target pengunjung website
• Perhatikan tingkat keterbacaan website
• Perhatikan type font (serif & sans serif)
• Perhatikan style font (B, I, U)
• Perhatikan lowercase atau UPPERCASE font
• Perhatikan pewarnaan font (Nyaman di lihat)
• Tidak menggunakan terlalu banyak jenis font(Rekomendasi 2 font berbeda)
• Perhatikan lisensi font (free atau tidak), disarankan font yang benar-benar gratis untuk apapun.

Tipografi

1. Judul (Heading)

• H1
• H2
• H3
• H4
• ...

2. Body (Paragraf)

• Ketegasan dan keterbacaan
• Nyaman untuk dibaca

3. Aksen (Penekanan)

• Bold
• Italic
• Underline

Metode Pembuatan Desain UI Website

Ada 3 prinsip dalam mendesain sebuah website menurut Veen’s design principles, yaitu bisa menjawab pertanyaan:

1. Di mana saya?

2. Kemana saya bisa pergi?

3. Ada apa di sini?

Veen’s Design Principles

1. Menggambarkan websiteharus memiliki header yang menjelaskan website apa (Di mana saya?)

2. Menggambarkan adanya navigasi yang diposisikan di sidebar (Kemana saya bisa pergi?)

3. Menggambarkan konten dari website (Ada apa di sini?)

Jenis Layout Desain Website

• Static - Desain web memiliki ukuran tetap pada semua resolusi browser (pixel)

• Fluid - Desain web dapat menyesuaikan lebar layout sesuai dengan resolusi browser (%)

• Responsive – Desain web dapat berganti layout pada resolusi tertentu (desktop&mobile)

• Responsive fluid – Gabungan Responsive & Fluid (%)

• Horizontal Scrolling -Desain web dengan menampilkan konten Horizontal atau menyamping)

• Parallax Scrolling- Desain web dengan layer atau hanya 1 halaman (one page/single page)

Responsive Web Design

2010 Ethan Marcotte memperkenalkan istilah Responsive Web Design yaitu sebuah metode untuk mengoptimalkan pengalaman pengguna melakukan surfing internet di berbagai perangkat, baik mobile, tablet, maupun desktop.

Langkah 1: Unduh dan Install XAMPP di Komputer Anda

Langkah pertama untuk menginstal WordPress secara lokal adalah mengunduh dan menginstal perangkat lunak XAMPP. Anda dapat mengunduh file penginstal Windows dari Apache Friends . Ini adalah file besar, sekitar 110 MB, jadi mungkin perlu waktu satu menit atau lebih tergantung pada koneksi Anda. Setelah unduhan selesai, jalankan file yang Anda unduh untuk meluncurkan penginstal XAMPP.

Buka Xampp dan start Apache dan MySQL 

Langkah 2: Unduh dan Extract File WordPress

Unduh file WordPress dari wordpress.org untuk mendapat versi terbaru

kemudian extract ke dalam folder htdocs xampp (default nya ada di : C:/xampp/htdocs) sehingga folder wordpress berada di dalam folder htdocs.

Langkah 3: Buat Database Untuk WordPress

Masuk ke localhost phpmyadmin di browser (http://localhost/phpmyadmin), kemudian buat database baru.

Langkah 4: Install WordPress

Buka http://localhost/FOLDERNAME (nama folder yang ada didalam htdocs), contoh disini menggunakan nama folder "wordpress" sehingga url-nya menjadi http://localhost/wordpress. maka akan muncul tampilan seperti dibawah ini. Pilih bahasa.

kemudian klik Lets Go

Isikan nama database yang telah dibuat sebelumnya, username dan password xampp (defaultnya username : root, password : (kosong)), database hostnya diisikan dengan localhost, table prefix wp_

Jalankan instalasi

Isikan data-data untuk website, kemudian install wordpress.

WordPress telah berhasil di install di localhost, silahkan login.

Login menggunkan username dan password yang telah dibuat sebelumnya.

WordPress telah berhasil di install di localhost.