Indonesian (Bahasa Indonesia) translation by ibnuhadis83 (you can also view the original English article)
Salah satu tujuan dari sebuah situs web adalah untuk menghasilkan prospek. Hal ini dapat terjadi dengan beberapa cara: Anda mungkin memiliki formulir agar orang-orang menghubungi Anda untuk penawaran tertentu, Anda mungkin mendorong orang untuk membuat sebuah akun saat membeli barang di situs Anda, atau Anda mungkin memiliki magnet utama yang Anda berikan kepada orang-orang sebagai imbalan untuk alamat email mereka.
.Jika Anda menggunakan magnet utama atau Anda memiliki sebuah halaman di situs Anda yang khusus dirancang untuk menjual satu barang — apakah itu berlangganan, layanan atau produk — maka Anda ingin mencegah orang-orang mengklik dari halaman tersebut tanpa membeli atau memberi Anda alamat email mereka.
Halaman semacam ini disebut halaman arahan. Ini adalah halaman yang dirancang untuk menjadi bagian dari corong pemasaran Anda, untuk menghasilkan prospek atau untuk menjual sesuatu. Tujuan dari halaman sangat sederhana, dan Anda tidak ingin orang melakukan hal-hal lain setelah mereka mendarat di atasnya.
Untuk meminimalkan kemungkinan orang menavigasi sebelum mereka membeli atau mendaftar, Anda ingin mengurangi jumlah tautan di halaman arahan Anda. Seharusnya tidak ada widget, tidak ada menu navigasi. Anda tidak ingin orang-orang meninggalkannya untuk menjelajahi situs Anda. Bahkan tautan ke halaman beranda di tajuk harus pergi, bersama dengan tautan apa pun di colphon Anda di bagian paling bawah halaman.
Dalam tutorial ini saya akan menunjukkan Anda cara membuat template halaman untuk tema Anda yang mencapai itu. Ini tidak akan berisi tautan apa pun di luar konten halaman. Pengunjung ke halaman tidak akan memiliki pilihan selain menekan tombol Buy atau Sign Up.
Untuk melakukan ini kami akan bekerja dengan beberapa file dalam tema kami.
- Kami akan membuat sebuah template halaman kustom baru untuk halaman arahannya.
- Kami akan mengedit file headernya sehingga ketika template itu ditampilkan, tautannya tidak ada.
- Kami akan mengedit file footer untuk menghapus widget dan tautan apa pun di dalam colophon.
Jadi, mari kita mulai!
Apa yang Anda Butuhkan
Untuk mengikuti tutorial ini, Anda akan membutuhkan:
- Instalasi pengembangan WordPress — jangan tambahkan halaman arahan ke situs Anda yang aktif sampai Anda mengujinya.
- Tema yang dapat Anda edit. Jika itu tema pihak ketiga, buat sebuah tema anak dan edit itu.
- Editor kode.
Halaman Awal
Saya telah membuat sebuah dummy halaman di situs saya untuk digunakan sebagai halaman arahan. Berikut adalah apa yang tampak seperti menggunakan template halaman normal:
Selama tutorial ini, saya akan menghapus menu navigasi, sidebar dan area widget di footer, dan memastikan tidak ada konten di luar yang dapat diklik.
Membuat Template Halaman Arahan
Pertama Anda perlu membuat template halaman arahan. Lakukan ini dengan salah satu dari dua cara berikut :
Jika Anda bekerja dengan tema Anda sendiri, buatlah duplikat dari page.php dan ganti namanya.
Jika Anda bekerja dengan tema pihak ketiga, buat tema anak. Buat duplikat page.php dari tema induk dalam tema anak dan ganti namanya.
Jangan berikan nama file yang diawali dengan page- karena ini akan membingungkan WordPress jika Anda kemudian membuat halaman dengan siput yang Anda gunakan setelah page-. Saya memanggil landing-page-template.php saya.
Sekarang buka template fie Anda. Tambahkan baris kode ini di bagian atas:
1 |
*/ |
2 |
Template Name: Landing Page Template |
3 |
/* |
Simpan ini dan Anda sekarang akan melihat bahwa Anda dapat memilih template baru ketika Anda membuat halaman baru di situs Anda:
Sekarang hapus panggilan sidebar dari file. Temukan baris ini:
1 |
<?php get_sidebar(); ?> |
... dan hapus. Simpan file Anda. Template halaman baru Anda sudah siap. Tapi kamu belum selesai.
Mengedit File Header
Langkah selanjutnya adalah mengedit file header.php, untuk menghapus tautan apa pun saat template halaman itu digunakan. Untuk ini kita akan menggunakan tag kondisional is_page_template ().
Buka file header.php Anda dan temukan kode untuk judul situs Anda.
Catatan: Jika Anda menggunakan tema pihak ketiga, buat file header.php di tema anak Anda yang merupakan duplikat dari tema induk dan edit itu.
Dalam tema saya terlihat seperti ini:
1 |
<a href="<?php echo site_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> |
2 |
<?php bloginfo( 'name' ); ?> |
3 |
</a>
|
Editlah sehingga membaca sesuatu seperti ini, membuat penyesuaian untuk tema Anda sendiri:
1 |
<h1 id="site-title"> |
2 |
|
3 |
<?php if ( is_page_template( 'landing-page-template.php' ) ) { |
4 |
bloginfo( 'name' ); |
5 |
}
|
6 |
else { ?> |
7 |
<a href="<?php echo site_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> |
8 |
<?php bloginfo( 'name' ); ?> |
9 |
</a>
|
10 |
<?php } ?> |
11 |
|
12 |
</h1>
|
Jika template halaman arahan digunakan, nama situs akan tetap ditampilkan, tetapi tidak akan ditampilkan sebagai tautan.
Anda juga perlu menghapus navigasi. Temukan kodenya untuk menu utama Anda. Dalam tema saya terlihat seperti ini:
1 |
<nav class="menu main"> |
2 |
|
3 |
<div class="skip-link screen-reader-text"> |
4 |
<a href="#content" title="<?php esc_attr_e( 'Skip to content', 'tutsplus' ); ?>"><?php _e( 'Skip to content', 'tutsplus' ); ?></a> |
5 |
</div>
|
6 |
|
7 |
<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?> |
8 |
|
9 |
</nav><!-- .main --> |
Edit sehingga semua kode untuk menu ditempatkan di dalam tag kondisional yang memeriksa bahwa kami TIDAK menggunakan template halaman arahan:
1 |
<?php if ( ! is_page_template( 'landing-page-template.php' ) ) { ?> |
2 |
|
3 |
<nav class="menu main"> |
4 |
|
5 |
<div class="skip-link screen-reader-text"> |
6 |
<a href="#content" title="<?php esc_attr_e( 'Skip to content', 'tutsplus' ); ?>"><?php _e( 'Skip to content', 'tutsplus' ); ?></a> |
7 |
</div>
|
8 |
|
9 |
<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?> |
10 |
|
11 |
</nav><!-- .main --> |
12 |
|
13 |
<?php } ?> |
Jika ada menu atau tautan lain di file header Anda, kelilingi mereka dengan tag kondisional yang sama — hal yang sama berlaku untuk setiap area widget.
Sekarang simpan file header.php dan tutup.
Mengedit File Footer
Tahap terakhir adalah memastikan bahwa setiap area widget tidak ditampilkan di footer.
Kami akan menggunakan tag kondisional yang sama hanya untuk area output widget jika tidak menggunakan template halaman arahan.
Buka template footer.php Anda (atau buat duplikat pada tema anak Anda jika relevan).
Temukan kode untuk menampilkan widget Anda. Ini milik saya:
1 |
<div class="fatfooter"> |
2 |
|
3 |
<?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) { ?> |
4 |
<div class="one-third left widget-area first"> |
5 |
<?php dynamic_sidebar( 'first-footer-widget-area' ); ?> |
6 |
</div><!-- .first .widget-area --> |
7 |
<?php } ?> |
8 |
|
9 |
<?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) { ?> |
10 |
<div class="one-third left widget-area second"> |
11 |
<?php dynamic_sidebar( 'second-footer-widget-area' ); ?> |
12 |
</div><!-- .first .widget-area --> |
13 |
<?php } ?> |
14 |
|
15 |
<?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) { ?> |
16 |
<div class="one-third left widget-area third"> |
17 |
<?php dynamic_sidebar( 'third-footer-widget-area' ); ?> |
18 |
</div><!-- .first .widget-area --> |
19 |
<?php } ?> |
20 |
|
21 |
</div>
|
Sekarang bungkus dengan tag kondisional dengan cara yang sama seperti yang Anda lakukan di file header.
1 |
<?php if ( ! is_page_template( 'landing-page-template.php' ) ) { ?> |
2 |
|
3 |
<div class="fatfooter"> |
4 |
|
5 |
<?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) { ?> |
6 |
<div class="one-third left widget-area first"> |
7 |
<?php dynamic_sidebar( 'first-footer-widget-area' ); ?> |
8 |
</div><!-- .first .widget-area --> |
9 |
<?php } ?> |
10 |
|
11 |
<?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) { ?> |
12 |
<div class="one-third left widget-area second"> |
13 |
<?php dynamic_sidebar( 'second-footer-widget-area' ); ?> |
14 |
</div><!-- .first .widget-area --> |
15 |
<?php } ?> |
16 |
|
17 |
<?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) { ?> |
18 |
<div class="one-third left widget-area third"> |
19 |
<?php dynamic_sidebar( 'third-footer-widget-area' ); ?> |
20 |
</div><!-- .first .widget-area --> |
21 |
<?php } ?> |
22 |
|
23 |
</div>
|
24 |
|
25 |
<?php } ?> |
Selanjutnya, kita perlu untuk mengubah colophon. Ini mungkin termasuk tautan ke beranda Anda dan / atau ke situs WordPress.
Ini milik saya:
1 |
<section class="colophon" role="contentinfo"> |
2 |
<small class="copyright left"> |
3 |
Copyright <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> |
4 |
<?php bloginfo( 'name' ); ?> |
5 |
</a>
|
6 |
</small><!-- #copyright --> |
7 |
|
8 |
<small class="credits right"> |
9 |
Proudly powered by <a href="https://wordpress.org/">WordPress</a>. |
10 |
</small><!-- #credits --> |
11 |
</section><!--#colophon--> |
Sekarang gunakan tag kondisional untuk menampilkan colophon tanpa tautan di halaman arahan:
1 |
<?php if ( is_page_template( 'landing-page-template.php' ) ) { ?> |
2 |
|
3 |
<section class="colophon" role="contentinfo"> |
4 |
<small class="copyright left"> |
5 |
Copyright <?php bloginfo( 'name' ); ?> |
6 |
</small><!-- #copyright --> |
7 |
|
8 |
<small class="credits right"> |
9 |
Proudly powered by WordPress. |
10 |
</small><!-- #credits --> |
11 |
</section><!--#colophon--> |
12 |
|
13 |
<?php } |
14 |
|
15 |
else { ?> |
16 |
|
17 |
<section class="colophon" role="contentinfo"> |
18 |
<small class="copyright left"> |
19 |
Copyright <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> |
20 |
<?php bloginfo( 'name' ); ?> |
21 |
</a>
|
22 |
</small><!-- #copyright --> |
23 |
|
24 |
<small class="credits right"> |
25 |
Proudly powered by <a href="http://wordpress.org/">WordPress</a>. |
26 |
</small><!-- #credits --> |
27 |
</section><!--#colophon--> |
28 |
|
29 |
<?php } ?> |
Periksa kembali file footer Anda untuk tautan lain dan jika ada, bungkus juga dengan tag kondisional.
Mengatur Styling
Anda mungkin menemukan bahwa setelah menghapus sidebar dari template halaman arahan Anda, Anda perlu menyesuaikan styling untuk kontennya. Jika area konten masih hanya mengambil dua pertiga layar, Anda dapat menggunakan kelas body yang dihasilkan oleh WordPress untuk template halaman untuk memperbaikinya.
:Jadi, katakanlah Anda memiliki gaya berikut untuk konten dan sidebar Anda:
1 |
.content { |
2 |
float: left; |
3 |
width: 65%; |
4 |
}
|
5 |
.sidebar { |
6 |
float: right; |
7 |
width: 32%; |
8 |
}
|
Anda harus menambahkan beberapa gaya tambahan di bawah itu untuk menargetkan kelas konten di template halaman arahan Anda:
1 |
.page-template-landing-page-template .content {
|
2 |
width: 100%; |
3 |
} |
Anda harus menyesuaikan ini untuk memperhitungkan setiap margin atau padding yang Anda gunakan tetapi ini memberikan Anda gambaran umum.
Halaman Akhir
Ini adalah halaman arahan saya tanpa tautan apapun:
Ini terlihat sedikit telanjang sekarang tetapi Anda akan mengisinya dengan banyak konten menarik yang bertujuan mendorong orang untuk membeli atau mendaftar — gambar, tombol merah besar, hal semacam itu! Dan Anda dapat melihat disana bahwa tidak ada apapun yang mengalihkan perhatian pengunjung dari konten halaman.
Saya berharap halaman arahan Anda memberikan Anda banyak bisnis. Semoga berhasil!
