Özel WordPress Açılış Sayfasını Kodlamak İçin Kolay Adımlar

İyi bir açılış sayfası oluşturmanın kolay olmadığını öğrenmek web tasarımında fazla deneyim gerektirmez. Açılış sayfanızın ne hakkında olması gerektiği konusunda net bir fikriniz olması gerekir . Ve ziyaretçilerinizi anlamanız ve dikkatlerini dönüşüme yönlendirmeniz gerekir. Neyse ki, web kodlamanın temellerine aşinaysanız, sayfanızı uygun gördüğünüz şekilde optimize etmek için gerekli özgürlüğe sahip olacaksınız. Bunu akılda tutarak, özel bir WordPress açılış sayfasını kodlamanın neyle ilgili olduğunu görelim .

Bir açılış sayfasının önemi

Belirli kodlama adımlarını gözden geçirmeden önce, iyi bir açılış sayfasına sahip olmanın neden önemli olduğunu açıklayalım. İyi bir açılış sayfasına sahip olmanın hayati öneminden bahsetmeyen web sitesi oluşturmaya yönelik çevrimiçi bir rehber neredeyse yoktur. Web siteniz bir ürün satmak, bir hizmet sunmak veya veri toplamakla ilgili olsun, iyi bir açılış sayfanız olması gerekir.

Ne yazık ki, iyi bir açılış sayfası oluşturmak kolay değildir. İnişinizin nasıl olması gerektiği konusunda net bir fikriniz olması gerekir. Ve onları dönüşümlere yönlendirmek için kitlenizi anlamanız gerekir. Kötü optimize edilmiş bir açılış sayfası, performansınızı önemli ölçüde düşürebilir ve aksi takdirde mükemmel çevrimiçi varlığınızı potansiyel olarak mahvedebilir. Açılış sayfasının genellikle ziyaretçinizin müşteriye dönüşmeden önceki son adım olduğunu unutmayın . Bu nedenle, mümkün olduğunca iyi hale getirmek için elinizden gelenin en iyisini yapın. Neyse ki, web programlamanın temellerini biliyorsanız, özel bir açılış sayfasını kolayca kodlayabilirsiniz. Bu size , genellikle gerçekten işlevsel bir sayfa için gerekli olan önemli miktarda özgürlük sağlar. Bunu akılda tutarak, adım adım bir WP açılış sayfası oluşturmak için gerekli koda geçelim.

Özel bir WordPress açılış sayfasını kodlama

Ana hatlarıyla anlatacağımız adımlar oldukça basit olsa da, her zaman profesyonel bir web tasarımcısına danışmayı düşünmelisiniz. Bazı web siteleri , arka planda çalışan çok sayıda eklentiyle oldukça karmaşık olabilir. Ve ne yaptığınızdan emin değilseniz, bu eklentilerden bazıları potansiyel olarak sorunlara neden olabilir veya sorun yaşayabilir. Yönetici alanına erişmeden eklentileri devre dışı bırakabilseniz de, kendinizi çok fazla belaya sokmaktan gerçekten kaçınmalısınız . İleride herhangi bir zorlukla karşılaşırsanız, size yardımcı olması için profesyonel bir web tasarımcısıyla iletişime geçin.

Bir alt tema oluşturun

Teorik olarak yepyeni bir ana tema oluşturabilseniz de, bir alt tema ile gitmelisiniz. Özelleştirme için çok daha uygundurlar, bu da size benzersiz açılış sayfaları oluşturma konusunda daha fazla özgürlük sağlar. Bir çocuk temasının nasıl oluşturulacağını ele aldığımızdan, burada tekrar üzerinde durmayacağız. Bahsedeceğimiz tek şey, devam etmek için alt tema dizininizde hem style.css hem de functions.php dosyalarının olması gerektiğidir.

Bir Style.css dosyası oluşturun

style.css dosyasına aşağıdaki kodu eklemeniz yeterlidir:

/*

Tema Adı: Açılış Sayfası Teması

Açıklama: Özel açılış sayfasına sahip çocuk teması

Yazar: Varsayılan Yazar

Yazar URI'si: https://www.wpfullcare.com

*/

Bir Functions.php dosyası oluşturun

Functions.php dosyasına aşağıdaki kodu eklemeniz gerekiyor. Bunu yapmak, alt stil sayfası dosyanızı kaydetmenize olanak sağlar.

<?php

// Ana Tema Stilleri //

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

function theme_enqueue_styles() {

$parent_style = 'ebeveyn tarzı';

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

wp_enqueue_style( 'çocuk stili',

get_stylesheet_directory_uri() . '/style.css',

dizi( $parent_style )

);

}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

Alt temanızı kurun ve etkinleştirin

Bunu yaptıktan sonra, alt temanızı kurmaya ve etkinleştirmeye devam edebilirsiniz. Genel olarak WordPress temaları söz konusu olduğunda, bunları yerel olarak farklı bir WP web sitesinde test etmek istersiniz. Dediğimiz gibi kazalar oluyor. Ve gerçekten web sitenizi devre dışı bırakmaktan kaçınmalısınız . Yerel bir WordPress sitesi kurduktan sonra temanızı yüklemeye devam edin. Etkinleştirdikten sonra, alt temanızın çalıştığından ve stiller ekleyebildiğinizden emin olun. style.css dosyasına gidin ve çalışıp çalışmadığını görmek için kodun bazı kısımlarını değiştirin.

Özel bir sayfa oluşturun

Her şey yolundaysa, alt temanızda özel bir sayfa oluşturmaya devam edebilirsiniz. Bunu yapmak için çocuğunuzun temasında yeni bir dosya oluşturmanız gerekir. Bunu yaptıktan sonra onu page-landing.php olarak kaydedin. Bu dosyaya aşağıdaki kodu eklemeniz gerekir:

<?php

/**

Şablon Adı: Açılış Sayfası

**/

?>

Şimdi şablon açılır menüsüne gidin ve menüden açılış sayfanızı seçin. Arka planınız olarak kullanmak üzere öne çıkan bir resim seçmeniz gerekecek ( daha sonra deneyebileceğiniz için şimdilik büyük ve basit bir şey seçin ). Ardından kopyanızı ekleyin ve eklenen sayfayı yayınlayın. Sayfanızı şimdi incelemeye çalışmak sizi yalnızca siyah bir ekrana getirecektir. Bunun nedeni, page-landing.php dosyasına hala aşağıdaki işaretlemeyi eklememiş olmanızdır.

<div id=”açılış sayfası” class=”hfeed sitesi”>

<div class=”site-branding”>

<p class=”site başlığı hizalama merkezi”><a href=”<?php echo esc_url( home_url( '/' ) ); ?>” rel=”home”><?php bloginfo( 'isim' ); ?></a></p>

</div><!– .site-branding –>

Ekledikten ve sayfanızı önizledikten sonra, beyaz bir arka plan ve büyük bir arka plan resmiyle birlikte site başlığınızı görmelisiniz.

İçeriği görüntüle

İçeriğin geri kalanını açılış sayfanızda görüntülemek için page-landing.php dosyasına aşağıdaki işaretlemeyi eklemeniz gerekir. Düzgün çalışması için bunu <!– .site-branding –> satırının hemen altında yapmanız gerekir.

<div class=”kenar çubuğu kenar çubuğu-rüşvet”>

<?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 bitiş zamanı; ?>

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

</div>

Özel bir WordPress açılış sayfasını kodlamak neredeyse bitti. Tek yapmanız gereken, bunun için stili ayarlamak. Bunu yapmanın en basit yolu, yalnızca style.css dosyası ve bunun için gerekli kodu kullanmaktır. Sayfanızın nasıl görünebileceği konusunda kelimenin tam anlamıyla sınırsız seçenek olduğundan, size izlemeniz gereken katı bir örnek vermeyeceğiz. Bunun yerine, beğendiğiniz bir stil bulmanızı ve kopyalamanızı öneririz . Bu şekilde, işlevinin ne kadar farklı yönlerinin olduğunu anlayacaksınız.