Menambahkan Form dan Menggunakan Ekstra Data User WordPress
30menit.com – Menambahkan form ektra data user pada halaman profil dan bagaimana menggunakan data tersebut.
Secara default form info kontak user pada halaman profil user adalah email dan situs web saja. Sesuai perkembangan informasi kontak user tidak bisa hanya sebatas itu. Kita perlu menambahkan informasi kontak pendukung lainnya. Sebagai contoh salah satunya adalah informasi akun media sosial dari user tersebut.
Dalam tutorial kali ini kita akan belajar bagaimana menambahkan form untuk menampung informasi tambahan yang berkaitan dengan user tersebut. Jenis data dan jumlah form yang ditambahkan tidak ada batasan tertentu sehingga anda bebas menemtukan jenis dan jumlahnya. Contoh tutorial kali ini kita akan menambahkan info akun sosial media dan kontak whatsapp yang dimiliki oleh user.
Tutorial ini merupakan pengembangan tingkat lanjut dari tutorial Belajar Membuat Template WordPress Dengan Framework Bootstrap Versi 4.0.0 Jadi alangkah baiknya anda juga membaca tutorial tersebut untuk pemahaman lebih mendalam. Serta membaca beberapa tutorial pengembangan lainnya pada tags #wp_advance.
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 baru dalam folder tersebut dengan nama “wp_add_profile_fields.php” (nama file tidak harus sama, silakan disesuaikan dengan keinginan) serta buka file yang sudah dibuat tersebut pada text editor. Tambahkan kode php berikut ke dalam file “wp_add_profile_fields.php”
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php // The function to ADD contact information at user profile page's function 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') . ' <code>08xx / +628xx</code>'; return $contactmethods; } add_filter('user_contactmethods','add_contact_info', 10, 1); |
Jika ingin menambahkan lebih banyak lagi form, tinggal menambahkan baris berikut sebanyak yang dibutuhkan. Tinggal sesuaikan “nama_form” ganti dengan nama data yang diinginkan (nama_form ini sebagai kata kunci data) dan “Judul Form” ganti dengan judul yang diinginkan (Judul Form ini akan muncul di halaman profil).
|
1 |
$contactmethods['nama_form'] = __('Judul Form', 'btpm'); |
Sekarang pindah ke file “functions.php” dan tambahkan kode berikut :
|
1 |
require ('inc/wp_add_profile_fields.php'); |
Sekarang kita test buka halaman profil user di admin area.
Jika sudah sesuai, pertanyaan selanjutnya adalah untuk apa data-data tersebut ditambahkan ? Pada tutorial ini karena data yang ditambahkan adalah akun media sosial, implementasi penggunaan datanya adalah untuk melengkapi informasi kontak author (penulis) artikel pada halaman single. Data tersebut di tampilkan dalam bentuk icon sosial media dengan link yang mengarah pada halaman akun media sosial yang dimiliki author (penulis). Karena bentuk penyajian datanya berupa icon, dibutuhkan file gambar. Silakan download file gambar yang saya gunakan di link [ gambar svg ]. Letakkan file-file gambar tersebut di folder “images” di folder tema “btpm”. Selanjutnya buat fungsi baru untuk menampilkan implementasi penggunaan ekstra data pada kontak author halaman single. Tambahkan kode berikut pada file “wp_add_profile_fields.php”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
// the function display function single_author_info() { ?> <div class="social-module" style="margin-bottom: -10px"> <ul class="op"> <?php if ( get_the_author_meta( 'googleplus' ) ) { ?> <li class="opt gplus"> <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> </li> <?php } if ( get_the_author_meta( 'facebook' ) ) { ?> <li class="opt facebook"> <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> </li> <?php } if ( get_the_author_meta( 'twitter' ) ) { ?> <li class="opt twitter"> <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> </li> <?php } if ( get_the_author_meta( 'instagram' ) ) { ?> <li class="opt instagram"> <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> </li> <?php } if ( get_the_author_meta( 'whatsapp' ) ) { echo '<li class="opt whatsapp">'; $phone = get_the_author_meta( 'whatsapp' ); echo '<a href="https://api.whatsapp.com/send?phone='; 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"><img class="icon" src="' . get_template_directory_uri() . '/images/whatsapp.svg" /></a></li>'; } ?> </ul> </div> <?php } |
Fungsi php pada kode diatas hanya akan menggeneralisasi tag-tag html. Sehingga jika dijalankan tampilannya masih berantakan. Di perlukan style css untuk mengatur tampilannya. Tambahkan kode fungsi berikut untuk menggeneralisasi css pada setiap halaman single.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
// Including styile for author info function btpm_style_author_info(){ if ( is_single() || is_page() ) { ?> <style type="text/css"> .social-module { overflow:hidden; position:relative; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); padding:0; margin:10px 0 0; } .social-module ul.op { padding:0; margin:0; } .social-module ul, .social-module li { list-style:none; } .social-module .opt { background-color:#df3531; margin:0 12px 0 0; transition:-webkit-transform 0.7s cubic-bezier(0.19, 1, 0.22, 1); transition:transform 0.7s cubic-bezier(0.19, 1, 0.22, 1); position:relative; overflow:hidden; width:40px; height:40px; display:inline-block; border-radius:22px; } .social-module .opt a { display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center; position:absolute; top:0; right:0; bottom:0; left:0; z-index:10; } .social-module .opt .icon {width:55%;} .social-module .opt .non-icon {width:100%;} .social-module .opt .inst {width:68%} .social-module .opt .icon, .social-module .opt .non-icon, .social-module .opt .inst {border:0;padding:0;border-radius:0;margin:0;float:left;} .social-module .whatsapp {background-color:#25d366;} .social-module .gplus, .social-module .facebook, .social-module .twitter {background-color:#fff;} .social-module .instagram {background-image:linear-gradient(#4c63d2,#bc3081,#f47133,#fed576);} </style> <?php } } add_action('wp_head', 'btpm_style_author_info'); |
Mari kita test dengan mengakses salah satu postingan. Harusnya di bagian elemen author akan muncul icon-icon media sosial milik author seperti gambar berikut.
Jika pada tutorial di atas ada yang kurang jelas silakan simak video berikut :
Semoga bermanfaat. Happy coding…
- Bagikan
-
-
-
-
-
-
Tulisan Terkait
Masyhuri Jamil
Tidak memiliki kompetensi di bidang coding. Tapi selalu semangat terus belajar html, css, php, mysql, java script (jquery). Suka oprek-oprek android juga dan yang pasti suka jalan-jalan (treveling).
