Cara Mudah Cara Memasang Script HTML Di WordPress – Cara memasang script HTML ini bisa diterapkan di WordPress.com dan WordPress.org. Yang nantinya script HTML tersebut bisa kita pasang di Halaman Posting dan di Widget.
Script HTML tidak bisa dipasang begitu saja, jika kita menginginkan yang tampil adalah bentuk kode. Artinya cara pasang script HTML disini adalah bukan untuk dijalankan. Jadi ada trik khusus agar script HTML bisa ditampilkan di halaman posting dan di widget.
Selain script HTML seperti kode CSS, PHP, Javascipt, jika kita ingin menampilkannya di halaman dan di widget harus menambahkan kode khusus. Contoh sebuah blog yang menyajikan tutorial WordPress. Tentunya trik menampilkan kode pada tutorialnya sangat diperlukan.
Cara Memasang Script HTML Di WordPress.com
Lalu apa bedanya WordPress.com dan WordPress.org ? Ya jelas beda, karena di WordPress.com kita tidak bisa menambahkan Plugin. Memang kenapa dengan Plugin ? Di WordPress.org untuk menampilkan kode seperti HTML, PHP, CSS, dan Javascript dapat memanfa’atkan sebuah Plugin. Contoh Plugin untuk menampilkan kode di WordPress.org adalah Syntax Highlighter.
Nah kalau di WordPress.com untuk menampikan kode kita siasati agar bisa menerapkannya juga layaknya WordPress.org.
Untuk WordPress.com agar bisa memasang kode HTML dan lainnya, caranya seperti yang akan saya terangkan dibawah ini. Misalnya saya akan memasang kode HTML berikut di halaman posting atau wirdget.
<a title="Berbagi Info & Tips Trik Menarik" href="http://info-menarik.net/" target="_blank"><img src="http://info-menarik.net/wp-content/uploads/2014/11/header_new.png" alt="Info_UpToDate" /></a>
Maka sebelum Anda copy paste ke halaman posting atau widget, agar kode HTML diatas bisa ditampilkan bukan dijalankan, ganti dulu kode-kode berikut :
Kode < Ganti dengan <
Kode > Ganti dengan >
Kode “ Ganti dengan "
Contoh jika Anda sudah merubahnya setiap kode yang saya jelaskan diatas, kira-kira nanti kode HTMLnya akan seperti ini :
<a title="Berbagi Info & Tips Trik Menarik"href="http://info-menarik.net/"target="_blank"><img src=" http://info-menarik.net/wp-content/uploads/2014/11/header_new.png" alt="Info_UpToDate"/></a>
Nah jika sudah Anda rubah, sekarang kode HTML tersebut bisa Anda pasang di halaman posting atau di widget WordPress. Namun agar kode berjalan normal ketika di copy paste, terutama pada bagian tanda kutifnya (“) maka tambahkan pada awal script <code> dan akhir script </code>.
<code><a title="Berbagi Info & Tips Trik Menarik" href="http://info-menarik.net/" target="_blank"><img src="http://info-menarik.net/wp-content/uploads/2014/11/header_new.png" alt="Info_UpToDate" /></a></code>
Setelah semuanya beres, sekarang Anda copy paste kodenya ditempat yang ingin Anda tampilkan. Misal di halaman posting, maka tempatkan kode pada mode Text.
Agar proses pengerjaan merubah kode HTML lebih cepat, maka sebaiknya gunakan pihak ketiga untuk merubahnya. Tool converter HTML to Text saya rekomendasikan web www.textfixer.com.
Modifikasi juga tampilan kode HTMLnya dengan background atau ditambah garis pinggir.
<a title="Berbagi Info & Tips Trik Menarik" href="http://info-menarik.net/" target="_blank"><img src="http://info-menarik.net/wp-content/uploads/2014/11/header_new.png" alt="Info_UpToDate" /></a>
Maka kodenya adalah sebagai berikut :
<p style="overflow: auto; background-color: #eaf9d4; text-align: center; border: 3px solid #999999; padding: 5px;">letakkan script HTML disini</p><a title="Berbagi Info & Tips Trik Menarik" href="http://info-menarik.net/" target="_blank"><img src="http://info-menarik.net/wp-content/uploads/2014/11/header_new.png" alt="onesetia82" /></a>
Maka kodenya adalah sebagai berikut :
<p style="overflow:auto;width:auto;height:60px;">letakkan script HTML disini</p>
Cara memasang script HTML di WordPress sudah selesai. Langkah selanjutnya mari kita bahas cara memasang script HTML di WordPress.org.
Seperti yang sudah disinggung diawal paragraf, bahwa untuk WordPress.org cara memasang kode HTML, PHP, CSS, dan Javasript bisa memanfa’atkan sebuah Plugin. Dari sekian banyak Plugin untuk memasang kode Syntax diantaranya adalah Syntax Highlighter by Alex Mills. Anda bisa dapatkan Plugin Syntax Highlighter by Alex Mills dulu, lalu installkan di WordPress.
Cara menggunakan Plugin Syntax Highlighter by Alex Mills cukup mudah, setelah Anda install pluginnya tempatkan kode di mode Visual atau Text Halaman Posting. Dengan shortcodes seperti berikut, setiap tanda (< >) ganti dengan tanda ([ ]) :
Contoh Shortcodes PHP :
<php>letakkan script PHP disini</php>
Contoh Shortcodes CSS Autolinks :
<css autolinks="false" classname="myclass" collapse="false" firstline="1" gutter="true" highlight="1-3,6,9" htmlscript="false" light="false" padlinenumbers="false" smarttabs="true" tabsize="4" toolbar="true" title="example-filename.php">letakkan script CSS disini</css>
Contoh Shortcodes Javascript :
<code lang="js">letakkan script Javascript disini</code>
Contoh Shortcodes Sourcecode Language :
<sourcecode language="plain">letakkan script Sourcecode Language disini</sourcecode>
Contoh sekarang saya akan pasang Script PHP
footer.php blog ini dengan Shortcodes PHP :<?php $options = get_option('groovy'); ?>
</div><!--#page-->
</div><!--.container-->
</div>
<footer>
<div class="container">
<div class="footer-content">
<div class="copyrights">
<?php mts_copyrights_credit(); ?>
</div>
</div><!--.footer-content-->
</div><!--.container-->
</footer><!--footer-->
<?php mts_footer(); ?>
<?php wp_footer(); ?>
</body>
</html>
<a id="top" href='#'><i class="icon-up-bold"></i></a>
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
var toper = $('a#top');
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
toper.fadeIn( 200 );
} else {
toper.fadeOut( 200 );
}
});
toper.click(function(){
$('html, body').animate({scrollTop:0}, 500);
return false;
});
</script>
<script type="text/javascript">
var s = skrollr.init();
</script>