Connect with us

Cara Menambahkan Form dan Memakai Extra Data User WordPress

Technology

Cara Menambahkan Form dan Memakai Extra Data User WordPress

Add Form dan Menggunakan Ekstra Data User Wp – Menambahkan form ektra data user pada halaman profil dan bagaimana memakai data tersebut.

Secara default form info kontak user pada halaman profil user yakni email dan situs web saja. Sesuai perkembangan informasi kontak user tidak mampu cuma sebatas itu. Kita perlu menyertakan info kontak penunjang lainnya. Sebagai teladan salah satunya yakni isu akun media umum dari user tersebut.

Dalam bimbingan kali ini kita akan mencar ilmu bagaimana menyertakan form untuk menampung keterangan aksesori yang berafiliasi dengan user tersebut. Jenis data dan jumlah form yang ditambahkan tidak ada batasan tertentu sehingga anda bebas menemtukan jenis dan jumlahnya. Contoh panduan kali ini kita akan menyertakan info akun sosial media dan kontak whatsapp yang dimiliki oleh user.

Mari masuk ke tutorialnya. Silakan buka folder template (tema) btpm. Cari file “functions.php” dan buka file tersebut pada text editor. Kemudian buka folder “inc” dan buat sebuah file gres dalam folder tersebut dengan nama “wp_add_profile_fields.php” (nama file tidak harus sama, silakan diadaptasi dengan impian) serta buka file yang sudah dibuat tersebut pada text editor. Tambahkan instruksi php berikut ke dalam file “wp_add_profile_fields.php”

<br/><?php<br/>// The function to ADD contact information at user profile page’s<br/>function add_contact_info( $contactmethods ) <br/>$contactmethods[‘googleplus’]= __(‘Google Plus Account’, ‘btpm’);<br/>$contactmethods[‘facebook’]= __(‘Facebook Account’, ‘btpm’);<br/>$contactmethods[‘twitter’]= __(‘Twitter Account’, ‘btpm’);<br/>$contactmethods[‘instagram’]= __(‘Instagram Account’, ‘btpm’);<br/>$contactmethods[‘whatsapp’]= __(‘No Whatsapp’, ‘btpm’) . ‘ <code>08xx / +628xx</code>’;<br/>return $contactmethods;<br/><br/>add_filter(‘user_contactmethods’,’add_contact_info’, 10, 1);


1234567891011
// The function to ADD contact information at user profile page’sfunction add_contact_info( $contactmethods ) $contactmethods[‘googleplus’]= __(‘Google Plus Account’, ‘btpm’);$contactmethods[‘facebook’]= __(‘Facebook Account’, ‘btpm’);$contactmethods[‘twitter’]= __(‘Twitter Account’, ‘btpm’);$contactmethods[‘instagram’]= __(‘Instagram Account’, ‘btpm’);$contactmethods[‘whatsapp’]= __(‘No Whatsapp’, ‘btpm’) . ‘ 08xx / +628xx‘;return $contactmethods;add_filter(‘user_contactmethods’,’add_contact_info’, 10, 1);

Jika ingin menambahkan lebih banyak lagi form, tinggal menyertakan baris  berikut sebanyak yang diharapkan. Tinggal sesuaikan “nama_form” ganti dengan nama data yang diharapkan (nama_form ini selaku keyword data) dan “Judul Form” ganti dengan judul yang dikehendaki (Judul Form ini akan timbul di halaman profil).

<br/>$contactmethods[‘nama_form’]= __(‘Judul Form’, ‘btpm’);


1
$contactmethods[‘nama_form’]= __(‘Judul Form’, ‘btpm’);

Sekarang pindah ke file “functions.php” dan tambahkan petunjukberikut :

<br/>require (‘inc/wp_add_profile_fields.php’);


1
require (‘inc/wp_add_profile_fields.php’);

Sekarang kita test buka halaman profil user di admin area.

Jika sudah sesuai, pertanyaan berikutnya merupakan untuk apa data-data tersebut ditambahkan ? Pada bimbingan ini alasannya adalah data yang ditambahkan merupakan akun media umum, implementasi penggunaan datanya merupakan untuk melengkapi gunjingan kontak author (penulis) artikel pada halaman single. Data tersebut di tampilkan dalam bentuk icon sosial media dengan link yang mengarah pada halaman akun media umum yang dimiliki author (penulis). Karena bentuk penyajian datanya berbentukicon, diperlukan file gambar. Letakkan file-file gambar tersebut di folder “images”  di folder tema “btpm”. Selanjutnya buat fungsi gres untuk menawarkan implementasi penggunaan tambahan data pada kontak author halaman single. Tambahkan isyarat berikut pada file “wp_add_profile_fields.php”.

<br/>// the function display<br/>function single_author_info() ?><br/><div class=”social-module” style=”margin-bottom: -10px”><br/> <ul class=”op”><br/> <?php if ( get_the_author_meta( ‘googleplus’ ) ) ?><br/> <li class=”opt gplus”><br/> <a href=”http://plus.google.com/<?php the_author_meta( ‘googleplus’ ); ?>” title=”<?php the_author_meta( ‘googleplus’ ); ?>” target=”_blank” class=”gplus”><img class=”non-icon” src=”<?php echo get_template_directory_uri(); ?>/images/google+-with-circle.svg” /></a><br/> </li><br/> <?php <br/> if ( get_the_author_meta( ‘facebook’ ) ) ?><br/> <li class=”opt facebook”><br/> <a href=”http://www.facebook.com/<?php the_author_meta( ‘facebook’ ); ?>” title=”<?php the_author_meta( ‘facebook’ ); ?>” target=”_blank” class=”facebook”><img class=”non-icon” src=”<?php echo get_template_directory_uri(); ?>/images/facebook-with-circle.svg” /></a><br/> </li><br/> <?php <br/> if ( get_the_author_meta( ‘twitter’ ) ) ?><br/> <li class=”opt twitter”><br/> <a href=”http://www.twitter.com/<?php the_author_meta( ‘twitter’ ); ?>” title=”<?php the_author_meta( ‘twitter’ ); ?>” target=”_blank” class=”twitter”><img class=”non-icon” src=”<?php echo get_template_directory_uri(); ?>/images/twitter-with-circle.svg” /></a><br/> </li><br/> <?php <br/> if ( get_the_author_meta( ‘instagram’ ) ) ?><br/> <li class=”opt instagram”><br/> <a href=”http://www.instagram.com/<?php the_author_meta( ‘instagram’ ); ?>” title=”<?php the_author_meta( ‘instagram’ ); ?>” target=”_blank” class=”instagram”><img class=”inst” src=”<?php echo get_template_directory_uri(); ?>/images/instagram.svg” /></a><br/> </li><br/> <?php <br/> if ( get_the_author_meta( ‘whatsapp’ ) ) <br/> echo ‘<li class=”opt whatsapp”>’;<br/> $phone = get_the_author_meta( ‘whatsapp’ );<br/> echo ‘<a href=”https://api.whatsapp.com/send?phone=’;<br/> if (substr($phone, 0, 1) == ‘0’) echo ’62’ . substr($phone, 1) . ‘” title=”62’ . substr($phone, 1); <br/> else if (substr($phone, 0, 1) == ‘+’) echo substr($phone, 1) . ‘” title=”‘ . substr($phone, 1); <br/> else echo $phone . ‘” title=”‘ . $phone; <br/> echo ‘” target=”_blank” class=”whatsapp”><img class=”icon” src=”‘ . get_template_directory_uri() . ‘/images/whatsapp.svg” /></a></li>’;<br/> ?><br/> </ul><br/> </div><br/><?php


123456789101112131415161718192021222324252627282930313233343536
// the function displayfunction single_author_info() ?><div class=”social-module” style=”margin-bottom: -10px”>        <ul class=”op”>             if ( get_the_author_meta( ‘googleplus’ ) ) ?>                <li class=”opt gplus”>                <a href=”http://plus.google.com/ the_author_meta( ‘googleplus’ ); ?>” title=” the_author_meta( ‘googleplus’ ); ?>” target=”_blank” class=”gplus”><img class=”non-icon” src=” echo get_template_directory_uri(); ?>/images/google+-with-circle.svg” /></a>                </li>                         if ( get_the_author_meta( ‘facebook’ ) ) ?>                <li class=”opt facebook”>                <a href=”http://www.facebook.com/ the_author_meta( ‘facebook’ ); ?>” title=” the_author_meta( ‘facebook’ ); ?>” target=”_blank” class=”facebook”><img class=”non-icon” src=” echo get_template_directory_uri(); ?>/images/facebook-with-circle.svg” /></a>                </li>                         if ( get_the_author_meta( ‘twitter’ ) ) ?>                <li class=”opt twitter”>                <a href=”http://www.twitter.com/ the_author_meta( ‘twitter’ ); ?>” title=” the_author_meta( ‘twitter’ ); ?>” target=”_blank” class=”twitter”><img class=”non-icon” src=” echo get_template_directory_uri(); ?>/images/twitter-with-circle.svg” /></a>                </li>                         if ( get_the_author_meta( ‘instagram’ ) ) ?>                <li class=”opt instagram”>                <a href=”http://www.instagram.com/ the_author_meta( ‘instagram’ ); ?>” title=” the_author_meta( ‘instagram’ ); ?>” sasaran=”_blank” class=”instagram”><img class=”inst” src=” echo get_template_directory_uri(); ?>/images/instagram.svg” /></a>                </li>                         if ( get_the_author_meta( ‘whatsapp’ ) )             echo ‘ ‘;            $phone = get_the_author_meta( ‘whatsapp’ );            echo ‘;             if (substr($phone, 0, 1) == ‘0’) echo ’62’ . substr($phone, 1) . ‘” title=”62’ . substr($phone, 1);             else if (substr($phone, 0, 1) == ‘+’) echo substr($phone, 1) . ‘” title=”‘ . substr($phone, 1);             else echo $phone . ‘” title=”‘ . $phone;             echo ‘” target=”_blank” class=”whatsapp”> . get_template_directory_uri() . ‘/images/whatsapp.svg” />’;             ?>        </ul>    </div>

Fungsi php pada instruksi diatas cuma akan menggeneralisasi tag-tag html. Sehingga jika dikerjakan tampilannya masih awut-awutan. Di perlukan style css untuk menertibkan tampilannya. Tambahkan instruksi fungsi berikut untuk menggeneralisasi css pada setiap halaman single.

<br/>// Including styile for author info<br/>function btpm_style_author_info()<br/>add_action(‘wp_head’, ‘btpm_style_author_info’);


12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
// Including styile for author infofunction btpm_style_author_info() is_page() ) ?> add_action(‘wp_head’, ‘btpm_style_author_info’);

Mari kita test dengan mengakses salah satu postingan. Harusnya di pecahan elemen author akan timbul icon-icon media umum milik author seperti gambar berikut.

Semoga berkhasiat. Happy coding…

Click to comment

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

More in Technology

To Top