Cara Membuat ‘Read More’ di Setiap Artikel dengan Wordpress

Informasi ini mungkin sudah banyak yang tahu, tapi tidak ada salahnya kalau dibagikan ulang, karena banyak pertanyaan dari para blogger bagaimana cara membuatnya, termasuk blogger muda kita, WILL. :)

Sebenarnya caranya gampang banget sih, tinggak klik tombol ‘more’ aja, dan jangan lupa meletakkan cursor mouse di bagian artikel yang akan dipotong.

Oya, untuk wordpress versi 2.2 dan selanjutnya, fitur HTML editor telah disediakan, jadi tersedia 2 tab untuk membuat artikel, yaitu tab Visual dan Code. Tab Visual digunakan untuk langsung melihat hasil posting kita seperti apa nantinya, misalnya kita memberikan tag italic atau huruf miring, atau bold (huruf tebal), atau tampilan gambar yang kita masukkan di artikel kita. Sedangkan tab Code biasanya digunakan oleh pengguna yang mengerti bahasa HTML dan lebih terbiasa mengetikkan langsung tag-tag HTML yang diinginkan.

Tombol MoreKamu bisa lihat tombol ‘more’ untuk kondisi pada tab Code (yang diberi kotak ungu pada gambar pertama). Untuk tampilan dengan tab Visual di wordpress tombolnya akan berbeda, bisa dilihat pada gambar di bawah.Tombol More Visual.

Mudah bukan? Jika ingin mengetikkan sendiri juga bisa (khusus untuk tab Code), ketikkan saja tag HTML seperti berikut:

<!--more-->

Jangan lupa, tag HTML di atas harus ditulis tepat di bagian artikel yang akan dipotong.

Nah, itu tadi bagian yang mudah. Sekarang, pertanyaannya adalah bagaimana caranya untuk mengganti kata-kata yang akan muncul setelah kita memotong artikel tadi? Kamu mengerti kan? Yang saya maksud itu kata-kata seperti “Read More” atau “Baca Selengkapnya” atau “Read the Rest of this Entry” atau “Continue Reading” atau kata-kata lain seperti itu.

Jawabannya sedikit tidak mudah. :)

Untuk bisa melakukannya kamu harus mengerti dasar-dasar bahasa HTML. Pertama, kamu harus tahu dulu letak folder theme atau template wordpress kamu. Biasanya sih letaknya ada di folder seperti berikut:

/home/usernamekamu/public_html/wp-content/themes/namatemplatekamu

Bukalah folder itu, kemudian cari file index.php, lakukan editing terhadap file index.php (buka dengan text editor pilihan kamu), kemudian cari kata-kata seperti ini di file tersebut:

<?php the_content('Read More') ?>

Kalau sudah ketemu, kamu ubah kata-kata Read More menjadi kata-kata pilihan kamu, misal seperti ini:

<?php the_content('Baca Selengkapnya') ?>

Untuk mengganti kata-kata menjadi gambar tertentu juga bisa dilakukan. Tapi syaratnya kamu harus punya tautan langsung menuju gambar yang akan dipakai atau gambar yang akan dipakai harus sudah ter-upload di internet. Contohnya:

<?php the_content('<img src='/wp-content/themes/default/images/more.gif' alt='' />') ?>

atau

<?php the_content('<img src='http://yourdomain.com/images/more.gif' alt='' />') ?>

Update:
Untuk membuat ‘read more’ yang berbeda-beda di tiap artikel atau posting caranya cukup mudah, tinggal ketikkan kode berikut:

<!--more Bersambung -->

atau

<!--more Lihat cerita serunya di sini -->

Contoh di atas adalah untuk dua artikel yang berbeda, kamu cukup mengganti kata-kata seperti ‘Bersambung’ atau ‘Lihat cerita serunya di sini’ dengan kata-kata kamu sendiri.

Oya, untuk referensi lebih lanjut silahkan baca selengkapnya di situs berikut:

http://codex.wordpress.org/Customizing_the_Read_More

Seep, mudah-mudahan bermanfaat ya… :d

You may Leave a comment or Subscribe to Comments RSS or Trackback this entry.

Informasi Pemasangan Iklan
Ads by AdaQue.com

35 comments so far

  1. bakazero October 24, 2007 6:49 am
    Indonesia Indonesia

    wah, membantu sekali postingannya.

    mau tanya, bisa tidak kalau pada setiap posting kata “read more” nya berbeda2.

    misal pada postingan pertama, pake “bersambung”, trus postingan kedua pake “liat cerita serunya disini”, dst…

  2. daniel October 24, 2007 9:22 am
    Indonesia Indonesia

    bisa, silahkan lihat update di atas… :)>-

  3. jhal October 28, 2007 10:36 am
    Australia Australia

    kalo di blogspot gimana bang… bingung neh… terpaksa deh blogku tak oprek abis… and bikin link-link sendiri…

    o iya boss kalo ente pake windows dan lisensinya belum genuine lihat/baca artikel ini boss

    salam kenal

    mampir yuk

  4. delita manihuruk November 12, 2007 5:03 pm
    Australia Australia

    pertanyaan sama, kalo di blogspot gmana caranya ya ?

  5. triyani December 11, 2007 8:42 am
    Indonesia Indonesia

    Thanks atas postingannya yang sangat membantu.

    Pak, kalau deretan dibawah tab visual dan code “link, b-quote, del.. more” tidak muncul di halaman new posting bagaimana merubahnya?

    Mungkin kemarin saya salah setting, shg bagian tsb tidak muncul di halaman “write new”. Thanks

  6. daniel December 11, 2007 10:04 am
    Indonesia Indonesia

    to triyani:
    sepertinya itu hanya sedikit error di browser kamu, coba gunakan mozilla firefox yang paling update…

    eh tapi kalo tab visual memang tidak ada tombol-tombol ‘link’, ‘b-quote’ dan yang lain, karena untuk tab visual tombol-tombol tersebut berupa gambar, bukan tulisan, tombol yang berupa tulisan terdapat di tab code :)

  7. triyani December 11, 2007 12:41 pm
    Indonesia Indonesia

    terima kasih pak Daniel atas respons-nya.
    barusan saya langsung download mozilla firefox dan re-install.. tapi munculnya tetap sama :(

    entah satu baris di bawah tab ‘visual’ ato ‘code’ itu ilang kemana hiks…:(. mungkin ada salah setting, tp ga tau salahnya dimana :(

  8. Rado Raja Habeahan December 22, 2007 8:45 pm
    Australia Australia

    Terima kasih tips nya appara…!
    terus terang blog appara ini bagus…!
    bisa dong ajari appara mu ini supaya bisa meng-edit blog ku (habeahan.wordpress.com)
    mauliate bah…

  9. massigit December 24, 2007 7:58 pm
    Indonesia Indonesia

    Blog yang cantik Pak. ;) Trims atas artikelnya. sangat membantu untuk saya yang pemula

  10. hideyoshi January 2, 2008 12:26 am
    Australia Australia

    terima kasih postnya mas :D

    eh kl misal kita pake hostingan gratis dr wp sendiri, ga bisa ya di rubah kyk gt?

  11. pratanti January 10, 2008 8:06 pm
    Canada Canada

    Thanks, penjelasannya sangat membantu :D
    Salam kenal…

  12. citra January 13, 2008 5:53 pm
    Australia Australia

    wah makasi ngebantu banget ni:d

  13. afif January 21, 2008 6:16 am
    Indonesia Indonesia

    pak, jika tidak bisa bagaimana? saya sudah mencoba, tapi tidak ada halaman yang terpotong, mohon bantuannya ya….

  14. Indra January 22, 2008 5:43 pm
    Indonesia Indonesia

    Terima kasih mas, pencerahannya…

    mau nambahin aja nih… kalau mau pengen jalan pintasnya, bisa dengan menekan tombol alt dan huruf “T” bersamaan…

    :-b

  15. rafkirasyid February 20, 2008 10:21 am
    Indonesia Indonesia

    Ma kasih petunjuknya sangat membantu. Kalau boleh saya memberi masukan tambahan untuk masalah afif yang halamannya tak mau terpotong. Pastikan bahwa Anda tidak memberi tanda spasi antar teks dengan tag more. Kemudian, paragraf tak akan terpotong jika cuma satu posting yang ada di halaman tersebut. Jadi minimal harus dua postingan barulah tag more bisa bekerja. Mohon betulkan jika saya salah. Thanks.

  16. arlin March 3, 2008 4:30 pm
    Indonesia Indonesia

    klo lebih dari satu artikel bikin read more gimana caranya mas?
    klo satu artikel dah bisa..nuwun

  17. arlin March 3, 2008 4:32 pm
    Indonesia Indonesia

    klo lebih dari satu artikel bikin read morenya gimana yang…

  18. sigit March 4, 2008 7:56 am
    Australia Australia

    mas masuk ke folder ini gimana ? cari /home/usernamekamu/public_html/wp-content

    untuk menganti read morenya
    apakah harus punya hosting sendiri atao yang lainnya.

    thanks

  19. rafkirasyid March 5, 2008 12:01 am
    Indonesia Indonesia

    Mau komentar lagi nih…
    Sebaiknya bedakan dulu apakah Anda memakai blog wordpress (www.nama_anda.wordpress.com) dengan apakah Anda memakai wordpress engine (www.nama_anda.com). Jika Anda memakai blog wordpress maka Anda tidak akan bisa menemukan home/public_html/wp-content. Karena untuk mengakses ini Anda harus memakai hosting sendiri dan wordpress engine (http://wordpress.org). Ini menjawab pertanyaan mas sigit kenapa tidak bisa menemukan wp-content. Thanks, semoga membantu.

  20. rafkirasyid March 5, 2008 12:15 am
    Indonesia Indonesia

    Jawaban buat Arlin…
    Yang dimaksud dua artikel atau lebih di sini yang bisa dipotong dengan tag more adalah, apabila postingan tersebut terdapat hanya di halaman pertama (home) saja. Apabila Anda membuat halaman baru maka artikel yang Anda buat di halaman tersebut tidak bisa dipotong dengan tag more. Begitu aja. Sory mas Admin, jadi ngegantiin fungsinya nih. he he he…

  21. sigit March 5, 2008 8:32 am
    Australia Australia

    Thanks mas sudah saya coba sendiri berhasil.
    saya coba-coba bagian saya ubah menjadi dan bisa tampil. memang harus sering mencoba.

  22. daniel March 5, 2008 9:52 am
    Indonesia Indonesia

    @rafkirasyid:
    seeep, memang inilah yang kita semua butuhkan, saling berbagi dan saling belajar :D

  23. seegatez March 11, 2008 1:51 pm
    Australia Australia

    Keren abis deh penjelasannya.. membantu sekali.. kalau gak di domain sendiri (misal : aa.wordpress.com) gimana boss bikin “read this entry” berubah jadi “selanjutnya”. bisa gak ya?

    thx

  24. rafkirasyid March 12, 2008 3:06 pm
    Indonesia Indonesia

    Buat seegatez, kalau anda tidak memakai hosting sendiri melainkan hostingnya wordpress, Anda bisa merubah kata ‘read this entry’ sesuka Anda sesuai dengan penjelasan mas admin pada bagian ‘update’ di atas.

    Tapi Anda mesti pastikan dulu bahwa Anda memilih ‘code’ bukannya ‘visual’ pada text editor artikel Anda. Jadi ketika Anda mengklik pemenggal paragraf yang muncul adalah . Anda tinggal menambahkan kata yang Anda inginkan setelah kata more tersebut. Misal . Maka paragraf Anda akan terpenggal dan kata yang muncul bukannya ‘read this entry’ melainkan ’selanjutnya’. Tapi ingat, kata ‘more’nya jangan dihapus ya. Semoga bermanfaat. Thanks mas Admin.

  25. rafkirasyid March 12, 2008 3:29 pm
    Indonesia Indonesia

    Buat seegatez, kalau anda tidak memakai hosting sendiri melainkan hostingnya wordpress, Anda bisa merubah kata ‘read this entry’ sesuka Anda sesuai dengan penjelasan mas admin pada bagian ‘update’ di atas.

    Tapi Anda mesti pastikan dulu bahwa Anda memilih ‘code’ bukannya ‘visual’ pada text editor artikel Anda. Jadi ketika Anda mengklik pemenggal paragraf yang muncul adalah (). Anda tinggal menambahkan kata yang Anda inginkan setelah kata more tersebut. Misal (). Maka paragraf Anda akan terpenggal dan kata yang muncul bukannya ‘read this entry’ melainkan ’selanjutnya’. Tapi ingat, kata ‘more’nya jangan dihapus ya. Semoga bermanfaat. Thanks mas Admin.

  26. daniel March 12, 2008 3:32 pm
    Indonesia Indonesia

    @rafkirasyid:
    thanks juga ya atas penjelasannya :)>-

  27. rafkirasyid March 12, 2008 3:33 pm
    Indonesia Indonesia

    Sory sampelnya nggak bisa muncul.:((
    Pokoknya liat aja contoh yang dikasih mas admin di atas pada bagian update: Untuk membuat read more yang berbeda-beda . . .. :)>-

  28. Fariss March 23, 2008 10:30 am
    Indonesia Indonesia

    Ya lumayan mass aku dah bisa, tambah dikit momoriku dikepala.:)

  29. Hot Model March 28, 2008 1:23 pm
    Australia Australia

    :d/
    mantap bossss,
    nice for beginner :x

  30. syiena April 2, 2008 11:13 am
    United States United States

    :d mantab bos

  31. wahde April 12, 2008 1:59 pm
    Indonesia Indonesia

    Makasi artikelnya , sangat membantu saya:d

  32. Nitz April 15, 2008 8:41 pm
    Australia Australia

    :(( gara2 server blogspot yg bbrp kali down, so aku impor smua file yg di blogspot ke WP, skr aku kesulitan buat ngatur filenya. ga mungkin musti2 satu2 di edit trus ditambahin script readmore tadi kan..
    cuapeee.. bisa bantu gaaa :((

  33. adit April 27, 2008 10:21 am
    Australia Australia

    saia kok masih blm bisa ganti nama gt ya??
    pake wp 2.5 sama aja kah?:((:((:((

  34. dhuwai April 30, 2008 2:35 pm
    Indonesia Indonesia

    makasih banget kawan…
    kini read more di blog ku yang mulai ku pelajari dah jadi:d/

  35. wew May 3, 2008 5:04 am
    Australia Australia

    koq ga bisa?????

Leave a comment

Please be polite and on topic. Your e-mail will never be published.

:) :( :d :"> :(( \:d/ :x 8-| /:) :o :-? :-" :-w ;) [-( :)>- more »