Einfache Schritte zum Codieren einer benutzerdefinierten WordPress-Zielseite

Es braucht nicht viel Erfahrung mit Webdesign, um zu lernen, dass das Erstellen einer guten Zielseite nicht einfach ist. Sie müssen eine klare Vorstellung davon haben, worum es auf Ihrer Zielseite gehen soll . Und Sie müssen Ihre Besucher verstehen und ihre Aufmerksamkeit auf die Konversion lenken. Glücklicherweise haben Sie, wenn Sie mit den Grundlagen der Webcodierung vertraut sind, die nötige Freiheit, Ihre Seite nach Belieben zu optimieren. Lassen Sie uns vor diesem Hintergrund sehen, worum es beim Codieren einer benutzerdefinierten WordPress-Zielseite geht .

Die Bedeutung einer Landingpage

Bevor wir auf bestimmte Programmierschritte eingehen, wollen wir zunächst erläutern, warum eine gute Zielseite wichtig ist. Es gibt kaum einen Online-Leitfaden zum Erstellen von Websites, der nicht die entscheidende Bedeutung einer anständigen Zielseite erwähnt. Unabhängig davon, ob es auf Ihrer Website darum geht, ein Produkt zu verkaufen, eine Dienstleistung anzubieten oder Daten zu sammeln, Sie müssen eine gute Zielseite haben.

Leider ist es nicht einfach, eine gute Landingpage zu erstellen. Sie müssen eine klare Vorstellung davon haben, wie Ihre Landung aussehen soll. Und Sie müssen Ihr Publikum verstehen, um es zu Conversions zu führen. Eine schlecht optimierte Zielseite kann Ihre Leistung erheblich beeinträchtigen und möglicherweise Ihre ansonsten hervorragende Online-Präsenz ruinieren. Denken Sie daran, dass die Zielseite normalerweise der letzte Schritt ist, bevor Ihr Besucher zu einem Kunden wird . Geben Sie also Ihr Bestes, um es so gut wie möglich zu machen. Glücklicherweise können Sie, wenn Sie die Grundlagen der Webprogrammierung kennen, ganz einfach eine benutzerdefinierte Zielseite programmieren. Dies gibt Ihnen einen beträchtlichen Freiheitsgrad, der normalerweise für eine wirklich funktionierende Seite erforderlich ist . In diesem Sinne gehen wir also Schritt für Schritt in den notwendigen Code zum Erstellen einer WP-Zielseite.

Codieren einer benutzerdefinierten WordPress-Zielseite

Obwohl die Schritte, die wir skizzieren, ziemlich einfach sind, sollten Sie immer in Betracht ziehen, einen professionellen Webdesigner zu konsultieren. Bestimmte Websites können mit zahlreichen Plugins, die im Hintergrund laufen , ziemlich kompliziert sein. Und einige dieser Plugins können möglicherweise Probleme verursachen oder auftreten, wenn Sie sich nicht sicher sind, was Sie tun. Sie können Plugins zwar ohne Zugriff auf den Admin-Bereich deaktivieren, aber Sie sollten wirklich vermeiden, sich zu viele Probleme zu machen . Wenn Sie später auf Schwierigkeiten stoßen, wenden Sie sich an einen professionellen Webdesigner, der Ihnen weiterhilft.

Erstellen Sie ein untergeordnetes Thema

Während Sie theoretisch ein brandneues Parent-Theme erstellen können, sollten Sie sich für ein Child-Theme entscheiden. Sie eignen sich viel besser für die Anpassung, was Ihnen mehr Freiheit gibt, einzigartige Zielseiten zu erstellen. Da wir bereits behandelt haben, wie man ein Child-Theme erstellt, gehen wir hier nicht noch einmal darauf ein. Das einzige, was wir erwähnen werden, ist, dass Sie sowohl die style.css- als auch die functions.php-Datei in Ihrem Child-Theme-Verzeichnis haben müssen, um fortzufahren.

Erstellen Sie eine Style.css-Datei

In der style.css-Datei müssen Sie lediglich den folgenden Code hinzufügen:

/*

Designname: Zielseitendesign

Beschreibung: Child-Theme mit benutzerdefinierter Zielseite

Autor: Standardautor

Autor-URI: https://www.wpfullcare.com

*/

Erstellen Sie eine Functions.php-Datei

In der Datei functions.php müssen Sie den folgenden Code hinzufügen. Dadurch können Sie Ihre untergeordnete Stylesheet-Datei registrieren.

<?php

// Übergeordnete Themenstile //

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

Funktion theme_enqueue_styles() {

$parent_style = 'Elternstil';

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

wp_enqueue_style( 'Kind-Stil',

get_stylesheet_directory_uri() . '/style.css',

array( $parent_style )

);

}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Installiere und aktiviere dein Child-Theme

Wenn dies erledigt ist, können Sie mit der Installation und Aktivierung Ihres untergeordneten Designs fortfahren. Wenn es um WordPress-Themes im Allgemeinen geht, möchten Sie sie lokal auf einer anderen WP-Website testen. Wie bereits erwähnt, passieren Unfälle. Und Sie sollten es wirklich vermeiden, Ihre Website zu deaktivieren . Sobald Sie eine lokale WordPress-Site eingerichtet haben, fahren Sie mit dem Hochladen Ihres Designs fort. Stellen Sie nach der Aktivierung sicher, dass Ihr untergeordnetes Thema funktioniert und dass Sie Stile hinzufügen können. Gehen Sie zur Datei style.css und ändern Sie einige Teile des Codes, um zu sehen, ob es funktioniert.

Erstellen Sie eine benutzerdefinierte Seite

Wenn alles in Ordnung ist, kannst du damit fortfahren, eine benutzerdefinierte Seite in deinem Child-Theme zu erstellen. Dazu müssen Sie eine neue Datei im Thema Ihres Kindes erstellen. Sobald Sie dies getan haben, speichern Sie es als page-landing.php. In dieser Datei müssen Sie den folgenden Code hinzufügen:

<?php

/**

Vorlagenname: Zielseite

**/

?>

Gehen Sie nun zum Vorlagen-Dropdown und wählen Sie Ihre Zielseite aus dem Menü aus. Sie müssen ein vorgestelltes Bild auswählen, das Sie als Hintergrund verwenden möchten ( wählen Sie zunächst etwas Großes und Einfaches, da Sie später experimentieren können ). Fügen Sie dann Ihre Kopie hinzu und veröffentlichen Sie die hinzugefügte Seite. Wenn Sie jetzt versuchen, Ihre Seite zu überprüfen, wird Ihnen nur ein schwarzer Bildschirm angezeigt. Das liegt daran, dass Sie das folgende Markup noch nicht zur page-landing.php hinzugefügt haben.

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

<div class="site-branding">

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

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

Sobald Sie es hinzugefügt und eine Vorschau Ihrer Seite angezeigt haben, sollten Sie Ihren Website-Titel zusammen mit einem weißen Hintergrund und einem großen Hintergrundbild sehen.

Inhalte anzeigen

Um den Rest des Inhalts auf Ihrer Zielseite anzuzeigen, müssen Sie das folgende Markup zur page-landing.php hinzufügen. Sie müssen dies direkt unter der Zeile <!– .site-branding –> tun, damit es richtig funktioniert.

<div class="sidebar sidebar-bestechung">

<?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 endwhile; ?>

<?php endif; ?> <!– mdl-cell-8 //#primär –>

</div>

Das Codieren einer benutzerdefinierten WordPress-Zielseite ist fast fertig. Alles, was Sie tun müssen, ist, den Stil dafür einzurichten. Der einfachste Weg, dies zu tun, besteht darin, nur die style.css-Datei und den erforderlichen Code dafür zu verwenden. Da es buchstäblich unbegrenzte Möglichkeiten gibt, wie Ihre Seite aussehen kann, geben wir Ihnen kein strenges Beispiel, dem Sie folgen können. Stattdessen empfehlen wir Ihnen, einen Stil zu finden, der Ihnen gefällt, und ihn zu kopieren . Auf diese Weise werden Sie herausfinden, wie verschiedene Aspekte seiner Funktion.