Langkah Mudah untuk Mengkodekan Halaman Landing WordPress Kustom

Tidak perlu banyak pengalaman dengan desain web untuk mengetahui bahwa membuat halaman arahan yang baik tidaklah mudah. Anda harus memiliki gagasan yang jelas tentang apa yang seharusnya menjadi halaman arahan Anda . Dan Anda perlu memahami pengunjung Anda dan mengarahkan perhatian mereka ke arah konversi. Untungnya, jika Anda terbiasa dengan dasar-dasar pengkodean web, Anda akan memiliki kebebasan yang diperlukan untuk mengoptimalkan halaman Anda sesuai keinginan Anda. Dengan mengingat hal itu, mari kita lihat apa itu pengkodean halaman arahan WordPress kustom .

Pentingnya halaman arahan

Sebelum kita membahas langkah-langkah spesifik pengkodean, pertama-tama mari kita jelaskan mengapa memiliki halaman arahan yang baik itu penting. Hampir tidak ada panduan online untuk membangun situs web yang tidak menyebutkan pentingnya memiliki halaman arahan yang layak . Apakah situs web Anda tentang menjual produk, menawarkan layanan, atau mengumpulkan data, Anda harus memiliki halaman arahan yang baik.

Sayangnya, membuat halaman arahan yang baik tidaklah mudah. Anda harus memiliki gagasan yang jelas tentang seperti apa seharusnya pendaratan Anda. Dan Anda perlu memahami audiens Anda untuk membimbing mereka menuju konversi. Halaman arahan yang dioptimalkan dengan buruk dapat sangat menurunkan kinerja Anda, dan berpotensi merusak kehadiran online Anda yang luar biasa. Ingat, halaman arahan biasanya merupakan langkah terakhir sebelum pengunjung Anda berubah menjadi pelanggan . Jadi, lakukan yang terbaik untuk membuatnya sebaik mungkin. Untungnya, jika Anda mengetahui dasar-dasar pemrograman web, Anda dapat dengan mudah membuat kode halaman arahan khusus. Ini memberi Anda banyak kebebasan, yang biasanya diperlukan untuk halaman yang benar-benar berfungsi . Jadi, dengan mengingat hal itu, mari kita selangkah demi selangkah ke dalam kode yang diperlukan untuk membuat halaman arahan WP.

Mengkodekan halaman arahan WordPress khusus

Meskipun langkah-langkah yang akan kami uraikan cukup sederhana, Anda harus selalu mempertimbangkan untuk berkonsultasi dengan desainer web profesional. Situs web tertentu bisa sangat rumit dengan banyak plugin yang berjalan di latar belakang . Dan beberapa plugin tersebut berpotensi menyebabkan atau mengalami masalah jika Anda tidak yakin dengan apa yang Anda lakukan. Meskipun Anda dapat menonaktifkan plugin tanpa akses ke area admin, Anda benar-benar harus menghindari terlalu banyak masalah . Jika Anda mengalami kesulitan, hubungi desainer web profesional untuk membantu Anda.

Buat tema anak

Meskipun Anda dapat, secara teoritis, membuat tema induk baru, Anda harus menggunakan tema anak. Mereka jauh lebih cocok untuk penyesuaian, yang memberi Anda lebih banyak kebebasan untuk membuat halaman arahan yang unik. Karena kita telah membahas cara membuat tema anak, kita tidak akan membahasnya lagi di sini. Satu-satunya hal yang akan kami sebutkan adalah Anda harus memiliki file style.css dan functions.php di direktori tema anak Anda untuk melanjutkan.

Buat file Style.css

Dalam file style.css Anda hanya perlu menambahkan kode berikut:

/*

Nama Tema: Tema Halaman Arahan

Deskripsi: Tema anak dengan halaman arahan khusus

Penulis: Penulis Default

Penulis URI: https://www.wpfullcare.com

*/

Buat file Functions.php

Dalam file functions.php, Anda perlu menambahkan kode berikut. Melakukannya akan memungkinkan Anda untuk mendaftarkan file lembar gaya anak Anda.

<?php

// Gaya Tema Induk //

// https://codex.wordpress.org/Child_Themes //

fungsi theme_enqueue_styles() {

$parent_style = 'gaya induk';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'gaya anak',

get_stylesheet_directory_uri() . '/style.css',

array( $parent_style )

);

}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Instal dan aktifkan tema anak Anda

Setelah ini selesai, Anda dapat melanjutkan untuk menginstal dan mengaktifkan tema anak Anda. Ketika datang ke tema WordPress secara umum, Anda ingin mengujinya secara lokal di situs web WP yang berbeda. Seperti yang kami sebutkan, kecelakaan memang terjadi. Dan Anda benar-benar harus menghindari menonaktifkan situs web Anda . Setelah Anda menyiapkan situs WordPress lokal, lanjutkan untuk mengunggah tema Anda. Setelah Anda mengaktifkannya, pastikan tema anak Anda berfungsi dan Anda dapat menambahkan gaya. Buka file style.css dan ubah beberapa bagian kode untuk melihat apakah itu berfungsi.

Buat halaman khusus

Jika semuanya beres, Anda dapat melanjutkan untuk membuat halaman khusus di tema anak Anda. Untuk melakukannya, Anda perlu membuat file baru di tema anak Anda. Setelah Anda melakukannya, simpan sebagai page-landing.php. Dalam file itu Anda perlu menambahkan kode berikut:

<?php

/**

Nama Template: Halaman Arahan

**/

?>

Sekarang, buka dropdown template dan pilih halaman arahan Anda dari menu. Anda harus memilih gambar unggulan untuk digunakan sebagai latar belakang Anda ( pilih sesuatu yang besar dan sederhana untuk saat ini, karena Anda dapat bereksperimen nanti ). Kemudian tambahkan salinan Anda dan publikasikan halaman yang ditambahkan. Mencoba meninjau halaman Anda sekarang hanya akan membawa Anda ke layar hitam. Ini karena Anda masih belum menambahkan markup berikut ke halaman-landing.php.

<div id="landing-page" class="hfeed site">

<div class="situs-branding">

<p class=”site-title aligncenter”><a href="<?php echo esc_url( home_url( '/' ) ); ?>” rel=”rumah”><?php bloginfo( 'nama' ); ?></a></p>

</div><!– .branding situs –>

Setelah Anda menambahkannya dan melihat pratinjau halaman Anda, Anda akan melihat judul situs Anda bersama dengan latar belakang putih dan gambar latar belakang yang besar.

Tampilkan konten

Untuk menampilkan sisa konten di halaman arahan Anda, Anda perlu menambahkan markup berikut ke halaman-landing.php. Anda perlu melakukannya tepat di bawah baris <!– .site-branding -> agar berfungsi dengan baik.

<div class="sidebar sidebar-suap">

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<h1 class=”landing-title”><?php the_title(”); ?></h1>

<?php the_content(); ?>

<!– https://codex.wordpress.org/Function_Reference/wp_link_pages –>

<?php akhir; ?>

<?php endif; ?> <!– mdl-cell-8 //#primer –>

</div>

Pengkodean halaman arahan WordPress kustom hampir selesai. Yang harus Anda lakukan adalah mengatur gaya untuk itu. Cara paling sederhana untuk melakukannya adalah dengan hanya file style.css dan kode yang diperlukan untuk itu. Karena ada opsi yang benar-benar tidak terbatas untuk tampilan halaman Anda, kami tidak akan memberi Anda contoh yang ketat untuk diikuti. Sebagai gantinya, kami akan menyarankan Anda menemukan gaya yang Anda sukai dan menyalinnya . Dengan begitu Anda akan mengetahui betapa berbedanya aspek fungsinya.