Belajar WordPress: Menambahkan Materi

posted in: Tutorial Pemrograman | 0

Untuk menambahkan materi di WordPress, sebaiknya kita memahami dasar-dasar dokumen HTML. Minimal kita bisa memahami format dan tag yang paling sering dipakai untuk membuat content/materi web.

Beberapa elemen HTML yang sering dipakai akan dibahas di bawah ini, seperti: paragraf, baris baru, heading, table, list, link, dan gambar.

Dasar Dokumen HTML

Apa itu HTML

  • HTML adalah bahasa untuk mendeskripsikan halaman web.
  • HTML singkatan dari Hyper Text Markup Language
  • HTML adalah bahasa markup
  • Sebuah bahasa markup adalah seperangkat tag markup
  • Tag menggambarkan isi dokumen
  • Dokumen HTML berisi tag HTML dan teks biasa
  • Dokumen HTML juga disebut halaman web

 

Mengenal Tag HTML

  • Tag markup HTML biasanya disebut tag HTML.
  • Tag HTML adalah kata kunci (nama tag) diapit oleh kurung sudut seperti:  <tagname>content</tagname>
  • Tag HTML umumnya selalu berpasangan
  • Contoh: <html></html>, <h1></h1>,<p> dan </ p>
  • Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir
  • Tag akhir ditulis seperti tag awal, dengan garis miring sebelum nama tag
  • Tag awal dan tag akhir juga disebut tag pembuka dan penutup tag

 

Tag HTML yang sering dipakai

Tag Heading
Digunakan untuk membuat heading pada halaman web. Tag heading ada 6 level, yaitu : h1, h2, sampai h6.

Contoh Tag Heading

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Tag Paragraf
Digunakan untuk membuat teks paragraf dalam halaman web.

Contoh Tag Paragraf

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dignissim, est nec maximus mattis, felis sem bibendum erat, eu pharetra felis ante sit amet purus. </p>
<p> Cras at massa id ligula luctus suscipit. Morbi eget euismod augue. Nulla blandit augue ac mi placerat, eget venenatis libero faucibus. Donec vulputate tellus non quam ultricies, at ultricies ipsum placerat. Nam rhoncus vestibulum cursus.</p>

Tag Break
Digunakan untuk membuat membuat baris baru pada teks di html.

Contoh Tag Break

Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />In dignissim, est nec maximus mattis, felis sem bibendum erat, eu pharetra felis ante sit amet purus. <br />

Tag Image
Dipakai untuk menampilkan gambar dari lokasi/alamat tertentu.

Sintak

<img src=”url” alt=”some_text”>

src: berisi lokasi gambarContoh Tag Link

<img src=”ruang-kelas-kursusweb.jpg” alt=”Ruang Kelas Kurus Web”style=”width:300px;height:200px;”>

Tag Link
Dipakai untuk membuat LINK. Pengunjung dapat meng-klik link yang ada padanya untuk membuka alamat baru.

Sintak Tag Link

<a href=”url”>link text</a>

href: berisi alamat yang dituju (url)
Link text: tulisan yang akan tampil (untuk di klik).

Contoh Tag Link

<a href=”http://www.w3schools.com/html/”>Visit our HTML tutorial</a>

Tag List
Digunakan untuk membuat daftar dalam bentuk Bullets. Ada dua jenis list dalam HTML.

kursus web modul wordpress- tag list

Contoh Tag Unordered list

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Contoh Tag Ordered list

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Tag Table
Digunakan untuk membuat table pada halaman HTML.

kursus web modul wordpress-tag table

Contoh Tag Table

<table style=”width:100%”>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Atribut Tag HTML
Atribut digunakan untuk menambahkan informasi tambahan pada tag HTML.

Aturan penambahan atribut

1.       Atribut digunakan untuk menambahkan informasi tambahan

2.       Atribut selalui disimpan pada tag awal

3.       Atribut mempunyai bagian nama dan nilai seperti: nama=”nilai”

Contoh Atribut HTML

  • href untuk link:
<a href=”http://www.w3schools.com”>This is a link</a>
  • size dan alt untuk img:
<img src=”w3schools.jpg” alt=”W3Schools.com” width=”104″ height=”142″>
  • title untuk tip pop-up:
<p title=”John ‘ShotGun’ Nelson”>This is a paragraf</p>

Menambahkan Materi Baru

Post dan Page dalam WordPress

Untuk menambahkan materi baru, kita perlu memahami lebih dulu tentang Post dan Page, apa perbedaannya, dan kapan menggunakan Post atau Page.

Post
Post digunakan untuk membuat halaman yang sifatnya kronologis (berurutan), atau selalu baru. Contohnya: berita, event, blog, dan seterusnya. Struktur untuk tipe Post ini adalah Kategori dan Tag. Tag adalah kata kunci pilihan yang mewakili sekelompok artikel.

Page
Page digunakan untuk membuat halaman yang statis atau jarang berubah. Contohnya: About Us, Product/Service, Form Contact, dan seterusnya. Page kadang juga dibuat untuk halaman Home/Frontpage.

 

Membuat Materi Baru (Post/Page)

Untuk membuat Post/Page baru

  • Pilih menu Posts => Add New, atau Pages => Add New.kursus web modul wordpress-membuat materi baru
  • Isilah isi materi pada jendela teks editor.
  • Gunakan Toolbar yang terdapat pada teks editor untuk memformat teks.

kursus web modul wordpress-toolbar teks editor

Cara Memformat Teks
Teks editor pada WordPress telah dibuat senyaman mungkin untuk memformat teks. Prosesnya sama dengan teks editor yang umum dipakai seperti Microsoft Word.

  • Blok pada teks yang mau diformat
  • Pilih tombol dari Toolbar. Seperti: Bold untuk tebal, Italic untuk huruf miring, Paragraph dan Heading untuk style, Justify, Warna, dan seterusnya.

Cara Memasukan Link
Proses menambahkan link persis sama dengan memformat teks.

  • Blok teks yang ingin dijadikan link
  • Klik tombol Link/Unlink dari toolbar.kursus web modul wordpress -link; unlink
  • Isilah form Insert/edit link.  Masukan alamat tujuan di URL, sedangkan teks yang akan tampil di Link Text. Tersedia opsi Open link in a new tab dan link to existing content.
  • Kemudian klik Add Link.

kursus web modul wordpress- insert, edit link

Cara Menambahkan Gambar

  • Tentukan lebih dulu lokasi targetnya dengan menempatkan kursor disanakursus web modul wordpress- menentukan lokasi gambar
  • Klik tombol Add Media. Tombol untuk menambahkan gambar ada di bagian atas teks editor.

Anda akan dibawa ke halaman Media Library.

  • Pilih gambar dengan meng-klik salah satu, setelah itu klik tombol Insert Into post.kursus web modul wordpress- media library
  • Jika gambar yang ingin dipilih belum ada, tambahkan gambar baru ke Media Library dengan mengklik tab Upload Files.kursus web modul wordpress -upload file gambar
  • Kemudian drop files gambar ke halaman ini atau pilih tombol Select Files.
  • Klik Insert into post untuk menambahkan gambar ke teks Editor.

Categories
Post pada WordPress dapat memiliki Kategori. Satu Post bisa memiliki beberapa kategori sekaligus. Anda dapat membuat menu sendiri untuk menampilakn materi-materi yang berasal dari satu kategori.

kursus web modul wordpress- kategori

Untuk mengelola menu, seperti menambah, mengedit, dan menghapus, dilakukan melalui menu Posts => Categories

Untuk membuat kategory baru, masukan dalam form Add New Category di bagian kiri.

kursus web modul wordpress- add kategori baru

Sedangkan untuk mengedit atau menghapus, arahkan mouse ke atas salah satu kategori yang ingin di edit. Pilihan menu-nya akan otomatis muncul di bawah Kategori.

kursus web modul wordpress- edit kategori

Tags
Selain kategori, materi juga dapat dipasangi Tags. Tags adalah kata-kunci atau istilah yang umum terkait dengan isi materi tersebut. Pemilihan Tags yang bagus adalah kata yang juga muncul pada materi web tersebut.

kursus web modul wordpress- tags

Untuk menambahkan Tag, Anda tinggal menulis kata kuncinya, kemudian klik tombo Add.

Anda dapat memasukan beberapa Tags sekaligus dengan menambahkan tanda koma (,) diantara kata tag.

Untuk menghapus Tags, klik tanda (X) di depan Tags.

Pilihan Mode Visual atau Text
Di bagian kanan atas, terdapat pilihan Visual dan Teks.

kursus web modul wordpress- pilihan mode visual atau text

Pilihan Visual dipakai untuk melihat langsung seperti apa tampilannya di halaman web.
Pilihan Text dipakai untuk melihat dan mengedit halaman dalam format kodeHTML.

Menyimpan dan Mempublikasi Situs
Wordpress menyediakan 2 opsi bagi teks yang sudah dibuat. Disimpan sebagai draft atau langsung dipublikasi.

kursus web modul wordpress- menyimpan dan mempublish

  • Save Draft akan menyimpan materi tapi belum dipublikasi. Biasanya karena belum selesai/masih akan diedit.
  • Pubilsh akan membuat materi tampil di situs web.

WordPress juga menyediakan status lain seperti Visibility dan Publish Immediately. Setting Visibility menentukan hak akses siapa saja yang boleh membuka materi tersebut. Setting Publish Immediately  adalah konfigurasi tanggal mulai tayang jika materi sudah status publish.

 

Tips dalam membuat teks untuk materi web:

  • Untuk sub-judul, pakailah heading h2 sampai h6.
  • Mulailah dari heading level h2 untuk level paling tinggi, karena h1 biasanya sudah dipakai untuk judul oleh themes.
  • Jika perlu daftar, gunakan order list/unorderd list untuk tulisan pendek. Jika panjang atau berbentuk paragraf, lebih baik gunakan heading dengan tambahan nomor sendiri.
  • Jangan menggunakan huruf tebal dan miring untuk tujuan heading.
  • Karena seting format teks dari setiap theme berbeda, lakukan percobaan lebih dulu.

 

Media Library

Anda telah dikenalkan dengan Media Library ini pada saat menambahkan materi/artikel. Media Library digunakan oleh WordPress untuk mengelola file media, seperti menambah, mengedit dan menghapus.

  • Untuk menambah  gambar baru klik Add New                     kursus web modul wordpress- menambah gambar baru
  • Drop file yang baru ke kotak di upload atau klik Select Files untuk memilih file yang akan diupload.kursus web modul wordpress- drop file
  • Untuk mengedit atau menghapus gambar, klik gambar yang dimaksud. Anda akan dibawa ke halaman edit.kursus web modul wordpress- mengedit dan menghapus gambar

Klik Edit Image, atau Delete permanently sesuai keperluan Anda.

Leave a Reply