Cara menggunakan cara edit html wordpress

Sebenarnya untuk mengedit code html di theme atau template wordpress sangatlah mudah. Kita tinggal masuk ke menu editor pada appearance WP admin kita. Terus tinggal pilih bagian yang mau kita edit. Dan klik tombol “update file“. Selesai! Kita tinggal cek hasil editannya.

Cuma masalahnya, terkadang tombol “update file” itu tidak ada. Artinya template yang kita pake tidak writable untuk diedit. Kita tidak bisa mengubah apapun pada templatenya. Ini yang jadi masalah. Karena tidak semua template menginzinkan penggunanya untuk mengedit. Apalagi jika wordpress kita gratisan. Dijamin kita tidak bisa mengeditnya.

Nah loh, terus gimana dong? Gimana caranya biar bisa diedit?

Calm down! it’s easy kawan. Untuk wordpress yang berbayar atau self hosting kita diperbolehkan untuk mengedit. Yang harus kita lakukan adalah bagaimana biar template yang kita pake itu jadi writable. Lalu giman caranya? Ada beberapa cara. Salah satunya adalah dengan menggunakan FTP program. Aku sendiri pake FileZilla, software untuk mengupload file-file ke server hosting. Silahkan download dulu filezilla terbaru di sini. kemudian ikuti langkah berikut!

1. Jalankan FileZilla dan login ke server hosting. Isi host, username dan password sesuai yang diberikan oleh penyedia hosting. Untuk port biasanya diisi dengan “21″

2. Setelah itu masuk ke wp-content/theme dan cari template yang sedang kita gunakan.

3. Blok file-file yang akan kita ubah menjadi writable. Kemudian klik kanan. Dan masuk ke “file permission”. Contohnya lihat pada gambar.

4. Ubah numeric value menjadi “666″. nanti dengan sendirinya akan option ‘write’ akan tercentang. Klik “OK”

Beres. Tinggal dicek di menu editor pada WP admin kita. Disitu akan terlihat tombol “update file”. Artinya kita sudah bisa mengubah-ubah template sesuai keinginan.

Share and Comment as you like, but irrelevant comment will never be published. Product review, please only if you have experience with the product.Thank you for sticking with us!.

TokoDaring.Com – Cara Menambahkan Kode HTML di WordPress. Tampaknya kita saat ini sudah benar-benar memasuki era yang di sebut ‘No Code’. Bahkan platform toko online (web based) yang kompleks bisa di setup hanya dengan beberapa klik dan benar-benar tanpa harus mengetikan sebarispun kode atau script pemrograman.

Table of Contents

WordPress dan WooCommerce

Hampir semua orang, grup atau perusahaan teknologi saat ini menawarkan pengalaman membuat program tanpa harus menuliskan sebaris kode.

Salah satunya adalah WordPress, bukan hanya tanpa kode, tapi juga minimum proses setup.

Untuk membuat website eCommerce menggunakan WordPress, (proses setup) mungkin hanya membutuhkan tidak lebih dari 10 kali klik dan anda bisa mulai berbisnis online.

Model bisnis anda mungkin unik dan ada hal di mana anda harus menampilkannya. Ada saat dimana anda harus melakukan perubahan layout atau menambahkan fitur yang anda inginkan.

Tapi sayangnya layout atau fitur dasar tidak memungkinkan anda untuk mengekspose hal tersebut. Dan itu bukan berarti WordPress membatasi kreatifitas anda atau anda tidak bisa untuk lebih kreatif.

Lisensi WordPress (GNU GPLv2)

Membuat desain atau memiliki fitur unik yang anda inginkan, sangat memungkinkan karena WordPress di rilis di bawah GPL v2 (atau versi yang lebih baru) dari Free Software Foundation.

Lisensi ini juga tentu berlaku untuk software pendukungnya, seperti plugin atau tema website dari pihak ketiga yang anda gunakan.

Di luar batasan-batasan yang ada di bawah lisensi GPL, anda dapat dengan bebas menggunakan, memodifikasi, atau mendistribusikan kembali perangkat lunak tanpa batasan apa pun.

Selengkapnya tentang apa yang boleh dan tidak boleh terkait software di bawah lisensi GPL, anda bisa mempelajarinya dari halaman Free Software Foundation.

Memodifikasi dan mengkustomisasi website eCommerce WordPress

Menggunakan WordPress memang semudah anda menggunakan tema starter WordPress yang sudah jadi. Lalu ada bagian atau section yang anda tidak suka dan ingin mengubahnya.

Itu artinya anda memasuki ranah untuk memodifikasi website toko daring anda dan hal itu memang sangat di mungkinkan.

Untuk mengkustom website WordPress, sudah pasti harus menambahkan skrip kode ke dalam website itu sendiri.

HTML, CSS, dan Javascript memang di mungkinkan untuk di tambahkan ke dalam website WordPress itu sendiri.

Anda bisa menambahkan element HTML apa saja ke dalam desain website eCommerce anda. Kami mencatat ada beberapa cara edit HTML WordPress, yaitu :

• Menuliskan kode menggunakan HTML block (page dan post level).
• Dengan membuat child theme (theme level).
• Menggunakan plugin.
• Mengedit file function.php
• Mengkatrol hook menggunakan plugin editor buatan anda sendiri.

Untuk menambahkan kode CSS atau JS ke dalam desain WordPress anda, lihat artikel kategori coding for fun yang kami tag sebagai CSS dan JS.

Cara menambahkan kode HTML di WordPress

Cara memasukkan kode html ke website WordPress menggunakan HTML blok (Page / post level)

Page atau post level adalah ketika anda hanya ingin membuat desain di satu atau beberapa halaman saja.

Misalnya anda ingin mendesain sendiri sebuah halaman landing page dengan slider yang interaktif.

Maka hal tersebut bisa di lakukan dengan hanya menggunakan HTML blok.

Dari jendela blok library, pilih Custom HTML. Lalu tuliskan script HTML yang ingin anda buat.

Tentu saja untuk menuliskan script HTML menggunakan html blok, maka anda harus menuliskan lengkap tag, class ataupun atribut id yang sesuai.

Berikut adalah contoh membuat element HTML menggunakan HTML blok di dalam post/page sesuai snippet berikut.

<div class="cara-edit-html-wordpress">
<p>“<span style="background-color:yellow">Innovation will come from an explosion of machine-learning startups</span>. For top-tier industry leaders, data is often in good shape, but it’s not all held in the same place”.</p>
</div>

“Innovation will come from an explosion of machine-learning startups. For top-tier industry leaders, data is often in good shape, but it’s not all held in the same place”.

Dengan membuat child theme (theme level)

cara memasukkan kode html ke website yang mungkin paling di rekomendasikan adalah melalui child theme. Membuat child theme adalah bahasan topik yang lebih besar.

Itu berarti anda benar-benar ingin merubah sistem tema WordPress anda, termasuk menambahkan fungsi dan fitur tambahan. Bukan sekedar ingin merubah layout atau tampilan saja.

Lihat artikel berikut tentang apa itu child theme dan bagaimana mengkustom website eCommerce WordPress dengan child theme.

Mengkatrol hook (theme level)

Selain membuat child theme, ada cara menambahkan kode html di wordpress yang lebih simple. Yaitu dengan menggunakan plugin editor (code snippet).

Tapi ini membutuhkan sedikit pengetahuan anda mengenai WordPress hooks. Tentang apa itu hook, lihat artikel kami berikut, apa itu WordPress hook.

Dua cara memasukkan kode html ke website WordPress di dalam PHP yaitu menambahkannya via file function.php atau menggunakan plugin code editor yang anda buat sendiri.

Mengkatrol hook via file function.php

File function.php bisa anda buka dan bisa di tambahkan dengan kode-kode kustom apa saja. Di WordPress, file functions.php adalah file fungsi tema yang disertakan dalam package tema WordPress yang anda gunakan.

File functions.php menggunakan kode PHP untuk menambahkan fitur atau mengubah fitur default di situs WordPress.

Melalui file function.php anda dapat menambahkan element HTML di setiap post atau page secara otomatis. Atau mengaturnya hanya di tampilkan element tersebut di post atau page tertentu saja.

Mengkatrol hook menggunakan plugin editor

Cara memasukkan kode html ke website eCommerce WordPress lainnya adalah dengan menggunakan plugin editor.

Plugin editor adalah plugin yang bisa anda buat sendiri, yang fungsinya untuk ‘menampung’ setiap kode kustom milik anda.

Plugin editor bisa jadi sebuah alat yang sangat anda perlukan. Ketimbang menginstall plugin pihak ketiga, plugin editor yang anda buat sendiri sangat efisien dan hampir tidak menambah beban instalasi WordPress.

Sebenarnya menggunakan plugin editor adalah cara lain untuk menuliskan kode kustom anda selain menulisnya langsung di dalam file function.php.

File function.php adalah file aktif bawaan dari tema yang anda gunakan, jika misalnya anda menambahkan kode kustom ke dalam file tersebut, lalu terdapat penyempurnaan file tema (update), maka semua kode tambahan anda akan hilang terhapus.

Maka untuk menyiasatinya, anda perlu membuat sebuah file di dalam folder tersendiri, dimana anda sendiri yang akan memaintainnya.

Kode anda tidak akan pernah terhapus meskipun terdapat update baik update tema maupun CMS. Berikut cara edit website WordPress dengan menambahkan script menggunakan plugin editor yang anda buat sendiri.

File function.php atau plugin editor yang anda buat adalah sebuah file php. Jika anda ingin menambahkan file HTML, maka harus di tulis menggunakan format bahasa php (

<?php

/* 
 * menambahkan catatan di halaman 
 * registrasi WooCommerce
 */

// Catatan di tampilkan menggunakan hook 'woocommerce_register_form_start'
add_action('woocommerce_register_form_start','nama_fungsi');
    function nama_fungsi() { ?>
        <style type="text/css">
            p.catatan-html {
                color:#35b729;
                border:.0625rem solid #35b729;
                padding:0.4em 1em 0.5em 1em;
                box-shadow:0 10px 6px -6px #777;
            }
        </style>
    <?php
    
    echo '<p class="div-catatan-html"><i><strong><u>Info Resgitrasi :</u></strong><br>Untuk pendaftaran kustomer baru, mohon agar menghubungi kami terlebih dahulu (WA/SMS/Telp: 0812-1234-1234). Diskon 10% untuk customer baru/order pertama (b2b).</i></p>';
    }
?>

<?php

/* 
 * menambahkan catatan di halaman 
 * registrasi WooCommerce
 */

// Catatan di tampilkan menggunakan hook 'woocommerce_register_form_start'
add_action('woocommerce_register_form_start','nama_fungsi');
    function nama_fungsi() { ?>
        <style type="text/css">
            p.catatan-html {
                color:#35b729;
                border:.0625rem solid #35b729;
                padding:0.4em 1em 0.5em 1em;
                box-shadow:0 10px 6px -6px #777;
            }
        </style>
    <?php
    
    echo '<p class="div-catatan-html"><i><strong><u>Info Resgitrasi :</u></strong><br>Untuk pendaftaran kustomer baru, mohon agar menghubungi kami terlebih dahulu (WA/SMS/Telp: 0812-1234-1234). Diskon 10% untuk customer baru/order pertama (b2b).</i></p>';
    }
?>

Contoh cara menambahkan kode html di wordpress di dalam file php

Berikut adalah contoh ketika anda ingin memasukan element HTML ke halaman registrasi kustomer.

Anda berfikir bahwa halaman registrasi website eCommerce anda terlihat begitu ‘plain’ dan kaku. Lalu ada catatan informasi penting yang ingin anda tambahkan di dalamnya.

<?php

/* 
 * menambahkan catatan di halaman 
 * registrasi WooCommerce
 */

// Catatan di tampilkan menggunakan hook 'woocommerce_register_form_start'
add_action('woocommerce_register_form_start','nama_fungsi');
    function nama_fungsi() { ?>
        <style type="text/css">
            p.catatan-html {
                color:#35b729;
                border:.0625rem solid #35b729;
                padding:0.4em 1em 0.5em 1em;
                box-shadow:0 10px 6px -6px #777;
            }
        </style>
    <?php
    
    echo '<p class="div-catatan-html"><i><strong><u>Info Resgitrasi :</u></strong><br>Untuk pendaftaran kustomer baru, mohon agar menghubungi kami terlebih dahulu (WA/SMS/Telp: 0812-1234-1234). Diskon 10% untuk customer baru/order pertama (b2b).</i></p>';
    }
?>

Pada contoh di atas, terdapat element html dalam sebuah paragraf sebagai informasi yang ingin di tampilkan di halaman registrasi kustomer.

Elemen html digambarkan oleh tag

<?php

/* 
 * menambahkan catatan di halaman 
 * registrasi WooCommerce
 */

// Catatan di tampilkan menggunakan hook 'woocommerce_register_form_start'
add_action('woocommerce_register_form_start','nama_fungsi');
    function nama_fungsi() { ?>
        <style type="text/css">
            p.catatan-html {
                color:#35b729;
                border:.0625rem solid #35b729;
                padding:0.4em 1em 0.5em 1em;
                box-shadow:0 10px 6px -6px #777;
            }
        </style>
    <?php
    
    echo '<p class="div-catatan-html"><i><strong><u>Info Resgitrasi :</u></strong><br>Untuk pendaftaran kustomer baru, mohon agar menghubungi kami terlebih dahulu (WA/SMS/Telp: 0812-1234-1234). Diskon 10% untuk customer baru/order pertama (b2b).</i></p>';
    }
?>

<?php

/* 
 * menambahkan catatan di halaman 
 * registrasi WooCommerce
 */

// Catatan di tampilkan menggunakan hook 'woocommerce_register_form_start'
add_action('woocommerce_register_form_start','nama_fungsi');
    function nama_fungsi() { ?>
        <style type="text/css">
            p.catatan-html {
                color:#35b729;
                border:.0625rem solid #35b729;
                padding:0.4em 1em 0.5em 1em;
                box-shadow:0 10px 6px -6px #777;
            }
        </style>
    <?php
    
    echo '<p class="div-catatan-html"><i><strong><u>Info Resgitrasi :</u></strong><br>Untuk pendaftaran kustomer baru, mohon agar menghubungi kami terlebih dahulu (WA/SMS/Telp: 0812-1234-1234). Diskon 10% untuk customer baru/order pertama (b2b).</i></p>';
    }
?>

<?php

/* 
 * menambahkan catatan di halaman 
 * registrasi WooCommerce
 */

// Catatan di tampilkan menggunakan hook 'woocommerce_register_form_start'
add_action('woocommerce_register_form_start','nama_fungsi');
    function nama_fungsi() { ?>
        <style type="text/css">
            p.catatan-html {
                color:#35b729;
                border:.0625rem solid #35b729;
                padding:0.4em 1em 0.5em 1em;
                box-shadow:0 10px 6px -6px #777;
            }
        </style>
    <?php
    
    echo '<p class="div-catatan-html"><i><strong><u>Info Resgitrasi :</u></strong><br>Untuk pendaftaran kustomer baru, mohon agar menghubungi kami terlebih dahulu (WA/SMS/Telp: 0812-1234-1234). Diskon 10% untuk customer baru/order pertama (b2b).</i></p>';
    }
?>

Dan supaya catatan informasi tersebut berada sesuai pada halaman registrasi kustomer, maka anda harus tau hook yang di gunakan, dalam hal ini adalah function.php1.

Bukan hanya HTML, CSS juga bisa di tuliskan menggunakan plugin editor, dan artikel ini menjelaskan cara menambahkan kode css di website eCommerce WordPress.

Dengan hook dan prioritas yang tepat, kita juga bisa mengkustom halaman produk yang di jual.

Misalnya artikel yang pernah kami tulis ini adalah tentang cara membuat variasi satuan unit harga produk WooCommerce.

Yaitu dengan memberikan keterang atau informasi apakah produk tersebut di jual per kilogram, per pcs atau bahkan per ekor.

Cara menambahkan kode HTML di WordPress menggunakan plugin

Sebagian orang mungkin sulit untuk mengkustom website WordPress karena keterbatasan pengetahuan bahasa pemrograman. Maka opsinya adalah dengan memasang plugin.

Plugin yang kami temukan untuk membantu anda adalah WP Coder, yang memungkinkan anda untuk menulis HTML, CSS dan JS sekaligus.

Apakah WordPress menggunakan HTML?

Bagaimana cara edit WordPress melalui melalui editor tema?

Apakah WordPress bisa di edit?

Program apa saja yang dapat digunakan untuk mengedit HTML?