Простые шаги для кодирования пользовательской целевой страницы WordPress

Не требуется большого опыта в веб-дизайне, чтобы понять, что создать хорошую целевую страницу непросто. Вы должны иметь четкое представление о том, о чем должна быть ваша целевая страница . И вам нужно понимать своих посетителей и направлять их внимание на конверсию. К счастью, если вы знакомы с основами веб-кодирования, у вас будет необходимая свобода для оптимизации вашей страницы по своему усмотрению. Имея это в виду, давайте посмотрим, что такое кодирование пользовательской целевой страницы WordPress .

Важность целевой страницы

Прежде чем мы перейдем к конкретным шагам кодирования, давайте сначала остановимся на том, почему важно иметь хорошую целевую страницу. Вряд ли найдется онлайн-руководство по созданию веб-сайтов, в котором не упоминается жизненно важная важность наличия достойной целевой страницы . Независимо от того, предназначен ли ваш веб-сайт для продажи продукта, предложения услуги или сбора данных, вам нужна хорошая целевая страница.

К сожалению, создать хорошую целевую страницу непросто. Вы должны иметь четкое представление о том, какой должна быть ваша посадка. И вам нужно понимать свою аудиторию, чтобы направлять их к конверсиям. Плохо оптимизированная целевая страница может значительно снизить вашу эффективность и потенциально разрушить ваше звездное присутствие в Интернете. Помните, что целевая страница обычно является последним шагом перед тем, как посетитель превратится в покупателя . Итак, сделайте все возможное, чтобы сделать его как можно лучше. К счастью, если вы знаете основы веб-программирования, вы можете легко написать собственную целевую страницу. Это дает вам значительную свободу, которая обычно необходима для действительно функциональной страницы . Итак, имея это в виду, давайте шаг за шагом перейдем к необходимому коду для создания целевой страницы WP.

Кодирование пользовательской целевой страницы WordPress

Хотя шаги, которые мы опишем, довольно просты, вам всегда следует проконсультироваться с профессиональным веб-дизайнером. Некоторые веб-сайты могут быть довольно сложными с многочисленными плагинами, работающими в фоновом режиме . И некоторые из этих плагинов потенциально могут вызывать проблемы или вызывать проблемы, если вы не уверены, что делаете. Хотя вы можете отключить плагины без доступа к административной области, вам действительно следует избегать слишком больших проблем . Если у вас возникнут какие-либо трудности в будущем, обратитесь за помощью к профессиональному веб-дизайнеру.

Создать дочернюю тему

Хотя теоретически вы можете создать совершенно новую родительскую тему, вам следует использовать дочернюю тему. Они гораздо лучше подходят для настройки, что дает вам больше свободы для создания уникальных целевых страниц. Поскольку мы рассмотрели, как создать дочернюю тему, мы не будем повторяться здесь. Единственное, что мы упомянем, это то, что вам нужно иметь файлы style.css и functions.php в каталоге вашей дочерней темы, чтобы продолжить.

Создайте файл Style.css

В файле style.css вам просто нужно добавить следующий код:

/*

Название темы: Тема целевой страницы

Описание: Дочерняя тема с настраиваемой целевой страницей.

Автор: Автор по умолчанию

URI автора: https://www.wpfullcare.com

*/

Создайте файл Functions.php

В файл functions.php вам нужно добавить следующий код. Это позволит вам зарегистрировать дочерний файл таблицы стилей.

<?php

// Стили родительской темы //

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

функция theme_enqueue_styles () {

$parent_style = 'родительский стиль';

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

wp_enqueue_style('детский стиль',

get_stylesheet_directory_uri() . '/style.css',

массив ($parent_style)

);

}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

Установите и активируйте дочернюю тему

После этого вы можете приступить к установке и активации вашей дочерней темы. Когда дело доходит до тем WordPress в целом, вы хотите протестировать их локально на другом веб-сайте WP. Как мы уже упоминали, несчастные случаи случаются. И вам действительно следует избегать отключения вашего веб-сайта . После того, как вы настроите локальный сайт WordPress, загрузите свою тему. После активации убедитесь, что ваша дочерняя тема работает и что вы можете добавлять стили. Перейдите к файлу style.css и измените некоторые части кода, чтобы проверить, работает ли он.

Создайте пользовательскую страницу

Если все в порядке, можно переходить к созданию пользовательской страницы в дочерней теме. Для этого вам нужно создать новый файл в теме вашего ребенка. Как только вы это сделаете, сохраните его как page-landing.php. В этот файл нужно добавить следующий код:

<?php

/**

Название шаблона: Целевая страница

**/

?>

Теперь перейдите в раскрывающийся список шаблонов и выберите в меню свою целевую страницу. Вам нужно будет выбрать изображение, которое будет использоваться в качестве фона ( сейчас выберите что-нибудь большое и простое, так как вы сможете поэкспериментировать позже ). Затем добавьте свою копию и опубликуйте добавленную страницу. Попытка просмотреть свою страницу сейчас приведет только к черному экрану. Это потому, что вы до сих пор не добавили следующую разметку в page-landing.php.

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

<div class="сайт-брендинг">

<p class=”site-title aligncenter”><a href=”<?php echo esc_url(home_url('/')); ?>” rel="home"><?php bloginfo('имя'); ?></а></р>

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

После того, как вы добавите его и просмотрите свою страницу, вы должны увидеть заголовок своего сайта вместе с белым фоном и большим фоновым изображением.

Показать содержимое

Чтобы отобразить остальной контент на вашей целевой странице, вам нужно добавить следующую разметку в файл page-landing.php. Вам нужно сделать это чуть ниже строки <!– .site-branding –>, чтобы она работала правильно.

<div class="sidebar sidebar-взятка">

<?php если (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 в конце; ?>

<?php конец; ?> <!– mdl-cell-8 //#primary –>

</div>

Кодирование пользовательской целевой страницы WordPress почти завершено. Все, что вам нужно сделать, это настроить стиль для него. Самый простой способ сделать это — добавить только файл style.css и необходимый код к нему. Поскольку существует буквально безграничное количество вариантов того, как может выглядеть ваша страница, мы не будем давать вам строгий пример для подражания. Вместо этого мы порекомендуем вам найти стиль, который вам нравится, и скопировать его . Таким образом, вы поймете, как разные аспекты его функции.