Proste kroki do zakodowania niestandardowej strony docelowej WordPress

Nie potrzeba dużego doświadczenia z projektowaniem stron internetowych, aby dowiedzieć się, że stworzenie dobrej strony docelowej nie jest łatwe. Musisz mieć jasne wyobrażenie o tym, o czym ma być Twoja strona docelowa . Musisz zrozumieć odwiedzających i skierować ich uwagę na konwersję. Na szczęście, jeśli znasz podstawy kodowania stron internetowych, będziesz mieć niezbędną swobodę w optymalizacji strony według własnego uznania. Mając to na uwadze, zobaczmy, na czym polega kodowanie niestandardowej strony docelowej WordPress .

Znaczenie strony docelowej

Zanim przejdziemy przez poszczególne etapy kodowania, najpierw wyjaśnijmy, dlaczego dobra strona docelowa jest ważna. Prawie nie ma internetowego przewodnika po tworzeniu stron internetowych, który nie wspominałby o tym, jak ważne jest posiadanie przyzwoitej strony docelowej . Niezależnie od tego, czy Twoja witryna ma na celu sprzedaż produktu, oferowanie usługi czy gromadzenie danych, musisz mieć dobrą stronę docelową.

Niestety stworzenie dobrego landing page’a nie jest łatwe. Musisz mieć jasne wyobrażenie o tym, jak powinno wyglądać twoje lądowanie. Musisz też zrozumieć swoich odbiorców, aby poprowadzić ich do konwersji. Źle zoptymalizowana strona docelowa może znacznie obniżyć Twoją wydajność i potencjalnie zrujnować Twoją znakomitą obecność w Internecie. Pamiętaj, że strona docelowa jest zwykle ostatnim krokiem, zanim odwiedzający zmieni się w klienta . Więc postaraj się, aby było jak najlepiej. Na szczęście, jeśli znasz podstawy programowania internetowego, możesz łatwo zakodować niestandardową stronę docelową. Daje to znaczną swobodę, która jest zwykle niezbędna w przypadku naprawdę funkcjonalnej strony . Mając to na uwadze, przejdźmy krok po kroku do niezbędnego kodu do stworzenia strony docelowej WP.

Kodowanie niestandardowej strony docelowej WordPress

Chociaż kroki, które przedstawimy, są dość proste, zawsze powinieneś rozważyć skonsultowanie się z profesjonalnym projektantem stron internetowych. Niektóre strony internetowe mogą być dość skomplikowane z licznymi wtyczkami działającymi w tle . Niektóre z tych wtyczek mogą potencjalnie powodować lub powodować problemy, jeśli nie jesteś pewien, co robisz. Chociaż możesz wyłączyć wtyczki bez dostępu do panelu administracyjnego, naprawdę powinieneś unikać narażania się na zbyt duże kłopoty . Jeśli napotkasz jakiekolwiek trudności, skontaktuj się z profesjonalnym projektantem stron internetowych, aby Ci pomóc.

Utwórz motyw potomny

Chociaż teoretycznie możesz stworzyć zupełnie nowy motyw nadrzędny, powinieneś wybrać motyw potomny. Znacznie lepiej nadają się do personalizacji, co daje większą swobodę w tworzeniu unikalnych stron docelowych. Ponieważ omówiliśmy sposób tworzenia motywu podrzędnego, nie będziemy go tutaj ponownie omawiać. Jedyną rzeczą, o której wspomnimy, jest to, że aby kontynuować , musisz mieć zarówno pliki style.css, jak i functions.php w katalogu motywów potomnych.

Utwórz plik Style.css

W pliku style.css wystarczy dodać następujący kod:

/*

Nazwa motywu: Motyw strony docelowej

Opis: Motyw potomny z niestandardową stroną docelową

Autor: domyślny pisarz

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

*/

Utwórz plik Functions.php

W pliku functions.php musisz dodać następujący kod. Spowoduje to zarejestrowanie pliku podrzędnego arkusza stylów.

<?php

// Style motywów nadrzędnych //

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

function theme_enqueue_styles() {

$styl_rodzica = 'styl-rodzica';

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

wp_enqueue_style( 'styl-dziecko',

get_stylesheet_directory_uri() . '/styl.css',

tablica ($styl_nadrzędny)

);

}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Zainstaluj i aktywuj motyw potomny

Po wykonaniu tej czynności możesz przystąpić do instalacji i aktywacji motywu podrzędnego. Jeśli chodzi o ogólnie motywy WordPress, chcesz je przetestować lokalnie na innej witrynie WP. Jak wspomnieliśmy, wypadki się zdarzają. I naprawdę powinieneś unikać wyłączania swojej witryny . Po skonfigurowaniu lokalnej witryny WordPress przejdź do przesyłania motywu. Po aktywacji upewnij się, że motyw podrzędny działa i możesz dodawać style. Przejdź do pliku style.css i zmień niektóre części kodu, aby sprawdzić, czy działa.

Zbuduj niestandardową stronę

Jeśli wszystko jest w porządku, możesz przystąpić do tworzenia niestandardowej strony w motywie potomnym. Aby to zrobić, musisz utworzyć nowy plik w motywie Twojego dziecka. Gdy to zrobisz, zapisz go jako page-landing.php. W tym pliku musisz dodać następujący kod:

<?php

/**

Nazwa szablonu: Strona docelowa

**/

?>

Teraz przejdź do menu szablonów i wybierz z menu swój landing page. Musisz wybrać wyróżniony obraz, który będzie używany jako tło ( wybierz na razie coś dużego i prostego, ponieważ możesz później poeksperymentować ). Następnie dodaj swoją kopię i opublikuj dodaną stronę. Próba przejrzenia swojej strony teraz spowoduje tylko czarny ekran. Dzieje się tak, ponieważ nadal nie dodałeś następujących znaczników do page-landing.php.

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

<div class="branding witryny">

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

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

Po dodaniu i podglądzie strony powinieneś zobaczyć tytuł witryny wraz z białym tłem i dużym obrazem tła.

Wyświetlaj zawartość

Aby wyświetlić resztę treści na swoim landingu, musisz dodać następujący znacznik do page-landing.php. Musisz to zrobić tuż pod linią <!– .site-branding –>, aby działał poprawnie.

<div class=”sidebar sidebar-przekupstwo”>

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

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

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

<?php zawartość_(); ?>

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

<?php koniec; ?>

<?php endif; ?> <!– mdl-komórka-8 //#podstawowa –>

</div>

Kodowanie niestandardowej strony docelowej WordPress jest prawie gotowe. Wszystko, co musisz zrobić, to ustawić dla niego styl. Najprostszym sposobem, aby to zrobić, jest tylko plik style.css i niezbędny do niego kod. Ponieważ istnieją dosłownie nieograniczone możliwości wyglądu Twojej strony, nie podamy Ci ścisłego przykładu do naśladowania. Zamiast tego zalecamy znalezienie odpowiedniego stylu i skopiowanie go . W ten sposób dowiesz się, jak różne aspekty jego funkcji.