Jika Anda terbiasa menyisipkan elemen <code> di dalam posting tutorial Anda, jangan sia-siakan kebiasaan rajin dan disiplin tersebut menjadi sesuatu yang tidak memperlihatkan arti khusus. Akan sangat memperlihatkan isu yang lebih besar bila Anda mengubah semua elemen tersebut menjadi link aktif. Dalam hal ini, kita akan menciptakan setiap teks yang berada di dalam tag <code> menjadi kata kunci untuk halaman hasil penelusuran dalam situs Anda. Pada pada dasarnya konsep ini masih tidak begitu jauh dari konsep Memanfaatkan jQuery untuk Mengizinkan Elemen Terlarang Masuk ke dalam Kometar Blogger. Hanya saja di sini kita harus memahami satu hal penting, yaitu format URL penelusuran di blog Anda:
Blogspot mempunyai bentuk URL pencarian menyerupai ini:
http://www.namablog.com/search/?q=Kata KunciWordpress biasanya mempunyai format URL pencarian yang berbeda menyerupai ini:
http://www.namablog.com/?s=Kata Kunci&submit=SearchTampilan-tampilan URL menyerupai itu dapat Anda temukan dikala Anda mengetik kata kunci pada kotak pencarian blog, lalu menekan tombol Submit atau Enter pada keyboard:
Oke, kita akan memakai format standar URL penelusuran tersebut sebagai materi nilai atribut href pada elemen <a> yang akan kita sisipkan memakai JavaScript sehabis ini.
Mengubah Teks di dalam Tag <code> menjadi Link Aktif
Caranya sederhana, kita hanya memerlukan kombinasi fungsi .replaceWith(), .html() dan .text() untuk mengitari elemen <code> dengan elemen <a> yang mengandung nilai href berupa URL pencarian yang mengandung kata kunci teks yang berada di dalam tag <code> secara otomatis. (Tulisan yang cukup panjang).
Pada pada dasarnya inilah yang kita inginkan. Kita ingin mengubah kumpulan teks ini:
Lorem ipsum dolor sit <code>amet</code> jabang bayi oek-oek consectetur <code>kampuang</code> nan jauh dimato ambo-ambo tempe goreng lezat rasanya.Menjadi menyerupai ini:
Lorem ipsum dolor sit <a href="//namablog.blogspot.com/search/?q=amet"><code>amet</code></a> jabang bayi oek-oek consectetur <a href="//namablog.blogspot.com/search/?q=kampuang"><code>kampuang</code></a> nan jauh dimato ambo-ambo tempe goreng lezat rasanya.Dan dengan metode yang sama persis dengan ini, kita akan mengubah semua teks di dalam elemen <code> menjadi link aktif:
$('div.post-body').children('code').each(function() { $(this).replaceWith(function() { return $('<a href="/search/?q=' + $(this).text() + '"><code>' + $(this).html() + '</code></a>'); }); });Kode di atas akan mengubah semua elemen <code>abc</code> yang merupakan anak level pertama dari elemen div.post-body menjadi <a href='/search/?q=abc'><code>abc</code></a>
Mengapa harus anak pertama? Oke, Anda dapat saja menuliskan kodenya menyerupai ini:
$('div.post-body code').each(function() { $(this).replaceWith(function() { return $('<a href="/search/?q=' + $(this).text() + '"><code>' + $(this).html() + '</code></a>'); }); });Tapi terkadang, selain menuliskan teks di dalam <code>, mungkin Anda juga suka/harus menulis teks di dalam tag <pre><code> ... </code></pre>. Jika kita tidak menargetkan elemen <code> yang merupakan anak level pertama saja, maka kemungkinan besar kita akan mengalami dilema menyerupai ini:
Itulah sebabnya mengapa di sini Saya memakai fungsi .children() yang hanya akan mencari anak elemen level pertama saja, sehingga elemen <code> yang berada di dalam elemen <pre> tidak akan ikut menjadi tautan lantaran elemen <code> yang berada di dalam elemen <pre> merupakan anak pertama dari <pre> namun akan menjadi anak ke dua dari <div class='post-body'>.
Atau dapat juga memakai metode selektor CSS3 menyerupai ini:
$('div.post-body > code').each(function() { ... });Untuk situs tutorial Wordpress dapat memakai konsep ini:
$('div.entry-content').children('code').each(function() { $(this).replaceWith(function() { return $('<a href="/?s=' + $(this).text() + '&submit=Search"><code>' + $(this).html() + '</code></a>'); }); });Pembaharuan: 16 Juli 2012Lebih efisien memakai jQuery .wrapInner():
$('div.entry-content').children('code').each(function() { $(this).wrapInner('<a href="/?s=' + encodeURIComponent($(this).text()) + '&submit=Search"></a>'); });Tapi Saya rasa Wordpress tidak memerlukan ini lantaran mereka dapat melaksanakan itu dengan PHP. Untuk melihat hasilnya, di sini Saya sudah menciptakan ilustrasi sederhana memakai JSFiddle. Coba Anda klik salah satu teks berupa instruksi di posting tersebut maka Anda akan pribadi diarahkan ke halaman hasil penelusuran posting yang terkait dengan kata kunci itu. Seperti halnya Wikipedia (kurang lebihnya begitu).
Pembaharuan
Saat kita memakai tanda petik yang tidak terduga di dalam tag <code>, hal-hal abnormal semacam ini seringkali akan terjadi:
Itu ialah konflik tanda petik. Jika kita menerapkan satu tipe tanda petik yang sama (petik ganda/petik tunggal) sebagai aksara dan juga sebagai penanda string dalam JavaScript, maka itulah yang akan terjadi. Masalahnya ada di sini, dikala JavaScript telah final memanipulasi elemen <code>:
<a href="/search/?q=<div id="mama">"><code><div id="mama"></code></a>dan ini ialah apa yang seharusnya terjadi:
<a href="/search/?q=<div id='mama'>"><code><div id="mama"></code></a>Cara paling sederhana untuk mengatasi konflik tersebut ialah dengan menerapkan method Cara paling sederhana untuk mengatasi konflik tersebut ialah dengan memparse konten menjadi aksara URI:.replace() embel-embel untuk memastikan bahwa tidak ada tanda petik ganda di dalam atribut href yang bertanda petik ganda
$('div.post-body').children('code').each(function() { $(this).replaceWith(function() { return $('<a href="/search/?q=' + $(this).text().replace(/\"/g, "'") + '"><code>' + $(this).html() + '</code></a>'); }); });$("div.post-body").children("code").each(function() { $(this).replaceWith(function() { return $("<a href='/search/?q=" + encodeURIComponent($(this).text()) + "'><code>" + $(this).html() + "</code></a>"); }); });