() translation by (you can also view the original English article)
Eine Landingpage auf Ihrer WordPress-Site ist ein unschätzbares Werkzeug, wenn Sie etwas verkaufen oder die Besucher dazu bringen möchten, sich anzumelden. In diesem Beitrag erfahren Sie, wie Sie kostenlos eine Landingpage in WordPress erstellen und andere dazu ermutigen können, Ihren Service zu kaufen oder sich bei ihm anzumelden.
Wir erstellen eine Landingpage, indem wir ein WordPress-Theme eines Drittanbieters anpassen. Dies ist der beste Weg, um WordPress kostenlos als Landingpage zu erstellen, und bietet Ihnen die größte Flexibilität, erfordert jedoch etwas Codierungs-Know-how. Wenn Sie eine Landingpage ohne Codierung erstellen möchten, lesen Sie einige unserer anderen Beiträge.
LandingpagesWie man schnell eine Landingpage in WordPress erstellt
LandingpagesTop 25 Landingpages WordPress-Themes für 2020-Websites
WordPressErstellen Sie eine reaktionsschnelle Landingpage mit WPBakery (Visual Composer)
Eine Landingpage ist eine Schlüsselseite, auf der Benutzer Maßnahmen ergreifen können. Was diese Aktion ist, hängt von Ihrem Unternehmen ab, aber es ist wahrscheinlich eines von zwei Dingen:
- Kaufen Sie etwas, wahrscheinlich ein großes Ticket, da Sie Produktseiten für kleinere Produkte verwenden würden
- Registrieren Sie sich für etwas, das ein Abonnement für einen Dienst oder Kurs oder eine Mailingliste sein kann
Sie müssen so viel Verkehr wie möglich auf diese Seite bringen, da dies für Ihre Website wichtig ist. Sie können dies über SEO, Werbung oder Direktmarketing tun. Oder vielleicht eine Kombination.
Sobald die Leute auf dieser Landingpage angekommen sind, müssen Sie sicherstellen, dass sie kaufen oder sich anmelden.
Der Inhalt der Seite ist Teil Ihrer Vorgehensweise - nicht nur der Inhalt selbst, sondern auch die Art und Weise, wie Sie ihn gestalten. Je teurer der Artikel, desto mehr Text und desto mehr Handlungsaufforderungen werden Sie im Allgemeinen benötigen.
Es geht aber nicht nur um den Inhalt. Sie müssen auch sicherstellen, dass die einzige Option, die jemandem zur Verfügung steht, wenn er auf dieser Seite landet, darin besteht, auf die Schaltfläche "Kaufen" zu klicken. Wenn es ein Navigationsmenü, einige Widgets oder ein anklickbares Logo gibt, besteht die Möglichkeit, dass sie wegklicken, um den Rest Ihrer Website zu untersuchen, und niemals zur Landingpage zurückkehren.
Hier kommt das Erstellen einer Landingpage in Ihrem Thema ins Spiel. Sie enthält keine Links außerhalb des Inhalts. Es gibt kein Menü, keine Widgets und keine anklickbaren Links in der Kopf-, Fuß- oder anderen Position. Es ist normalerweise in voller Breite (da Sie Ihre Seitenleisten-Widgets nicht benötigen) und verfügt über ein sauberes Layout, das die Aufmerksamkeit auf den Inhalt lenkt.
In diesem Tutorial zeige ich Ihnen, wie Sie eine Vorlage für Ihr Thema erstellen. Dies besteht aus drei Dingen:
- Erstellen einer Seitenvorlage dafür
- Erstellen eines Headers für die Landingpage ohne Links
- Erstellen einer Fußzeile für die Landingpage ohne Links
- Verwenden der Vorlage zum Erstellen Ihrer Landingpage
Also lasst uns anfangen. Ich werde diese Vorlage für das Thema Twenty Twenty erstellen. Dies bedeutet, dass ein untergeordnetes Thema erstellt wird, damit ich kein Thema eines Drittanbieters bearbeite.
Was du brauchen wirst
Um diesem Tutorial zu folgen, benötigen Sie:
- eine Test- oder Entwicklungsinstallation von WordPress
- ein Code-Editor
- ein Thema installiert
Also, lassen Sie uns anfangen.
Erstellen Sie ein untergeordnetes Thema
Wenn Sie an Ihrem eigenen Thema arbeiten, können Sie diesen Abschnitt überspringen. Wenn Sie jedoch ein Thema eines Drittanbieters verwenden, das Sie aus dem Themenverzeichnis heruntergeladen oder bei ThemeForest oder einer anderen Quelle gekauft haben, benötigen Sie ein untergeordnetes Thema.
Befolgen Sie unsere Anleitung zum Erstellen eines untergeordneten Themas und speichern Sie Ihr neues Thema im Verzeichnis wp-content/themes auf Ihrer Site.
Erstellen Sie eine Landingpage-Vorlagendatei
Jetzt müssen Sie eine Seitenvorlage erstellen, die Ihre Landingpagevorlage ist. Sie müssen die Vorlage, die für Seiten in Ihrem Thema verwendet wird, duplizieren und die neue Datei umbenennen. Für viele Themen ist das page.php. Für zwanzig zwanzig ist das singular.php. Sie können die WordPress-Vorlagenhierarchie verwenden, um herauszufinden, welche Vorlagendatei verwendet wird.
Wenn Sie mit einem untergeordneten Thema arbeiten, kopieren Sie Ihr Duplikat in das untergeordnete Thema. Wenn Sie im Hauptthema arbeiten, speichern Sie das Duplikat im Hauptthema. Hinweis: Tun Sie dies nicht auf Ihrer Live-Site!
Wenn Ihr Thema eine Seitenvorlage in voller Breite hat, verwenden Sie diese anstelle von page.php, da das Layout bereits so eingerichtet ist, dass die Seite keine Seitenleiste enthält und die Seitenleiste entfernt wurde.
Ich habe meine Datei landing-page-template.php benannt. Geben Sie ihm keinen Namen, der mit Seite beginnt. Wenn Sie dann eine Seite mit diesem Namen erstellen, weist WordPress die Vorlage dieser Seite automatisch zu. Es ist besser, die Dinge manuell zu halten, damit Sie mehr Kontrolle haben.
Hier ist der vollständige Inhalt meiner neuen landing-page-template.php-Datei. Ihre sieht anders aus, wenn Sie mit einem anderen Thema arbeiten.
1 |
<?php
|
2 |
/**
|
3 |
* The template for displaying single posts and pages.
|
4 |
*
|
5 |
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
|
6 |
*
|
7 |
* @package WordPress
|
8 |
* @subpackage Twenty_Twenty
|
9 |
* @since Twenty Twenty 1.0
|
10 |
*/
|
11 |
|
12 |
get_header(); |
13 |
?>
|
14 |
|
15 |
<main id="site-content" role="main"> |
16 |
|
17 |
<?php
|
18 |
|
19 |
if ( have_posts() ) { |
20 |
|
21 |
while ( have_posts() ) { |
22 |
the_post(); |
23 |
|
24 |
get_template_part( 'template-parts/content', get_post_type() ); |
25 |
}
|
26 |
}
|
27 |
|
28 |
?>
|
29 |
|
30 |
</main><!-- #site-content --> |
31 |
|
32 |
<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> |
33 |
|
34 |
<?php get_footer(); ?> |
Jetzt ist es Zeit, die Datei zu bearbeiten. Beginnen Sie mit dem auskommentierten Text oben. Ersetzen Sie es durch den Text, der für Seitenvorlagen benötigt wird:
1 |
<?php
|
2 |
/**
|
3 |
* Template Name: Landing Page
|
4 |
*
|
5 |
*/
|
Der nächste Schritt besteht darin, alle Aufrufe für die Seitenleiste oder Fußzeile zu entfernen. Wie Sie dies tun, hängt von Ihrem Thema ab und davon, ob Sie zunächst eine Vorlage in voller Breite verwendet haben.
In Twenty Twenty gibt es keinen Anruf in der Seitenleiste, daher muss ich das nicht entfernen. Wenn Sie diese Zeile in Ihrer Vorlage haben, müssen Sie sie entfernen:
1 |
<?php get_sidebar(); ?> |
Hinweis: Nach Abschluss der Bearbeitung dieser Vorlagendatei kann es vorkommen, dass das Layout eine Lücke hinterlässt, in der sich die Seitenleiste befinden sollte. Bearbeiten Sie das CSS für die Vorlage oder ändern Sie die Klassen im Inhaltsbereich, um die volle Breite zu erhalten.
Nun zur Fußzeile. Sie möchten die Fußzeile nicht vollständig entfernen, da Sie noch Ihr Kolophon und Ihren Aufruf von wp_footer benötigen. Anstatt den Aufruf get_footer() zu entfernen, lassen Sie ihn dort und erstellen eine neue Fußzeilendatei für Ihre Landingpage.
In Twenty Twenty funktioniert die Fußzeile nicht wie gewohnt. In meiner Vorlagendatei befinden sich zwei Aufrufe:
1 |
<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> |
2 |
|
3 |
<?php get_footer(); ?> |
Die erste ruft eine Include-Datei auf, die nur Widgets enthält. Die zweite nennt die Fußzeile, die ich benötige, aber wir werden sie später bearbeiten. Also lösche ich einfach diese Zeile:
1 |
<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> |
Speichern Sie nun Ihre Datei. Wir werden in Kürze darauf zurückkommen.
Erstellen Sie eine Kopfzeile für Ihre Landingpage
Jetzt ist es an der Zeit, eine Kopfzeile für Ihre Landingpage ohne Navigation, Widgets oder Links zu erstellen.
Erstellen Sie ein Duplikat der Datei header.php Ihres Themas (entweder im Hauptthema oder im untergeordneten Thema) und nennen Sie es header-landing.php.
Entfernen Sie den Link im Logo oder im Site-Titel
Suchen Sie den Site-Namen oder das Logo in Ihrer Header-Datei. Meins besteht aus einer Funktion:
1 |
twentytwenty_site_logo(); |
Anstatt zu versuchen, diese Funktion zu bearbeiten, werde ich sie durch einen Aufruf des Logos ersetzen:
1 |
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/xxx.jpg” > |
Ersetzen Sie xxx.jpg im obigen Code durch den Namen Ihres eigenen Logos und stellen Sie sicher, dass Sie den richtigen Pfad verwenden.
Wenn Ihre Site kein Logo in der Kopfzeile, sondern einen Site-Titel enthält, verwenden Sie stattdessen Folgendes:
1 |
<div class="site-title faux-heading"> |
2 |
|
3 |
<?php bloginfo( 'name' ); ?> |
4 |
|
5 |
</div>
|
Hinweis: Die Klassen, die ich oben verwendet habe, sind spezifisch für zwanzigundzwanzig. Bearbeiten Sie sie entsprechend Ihrem Thema.
Wenn Ihr Thema standardmäßiger als zwanzigundzwanzig funktioniert, werden Sie wahrscheinlich feststellen, dass dieser Code bereits vorhanden ist. Sie müssen lediglich alle <a> Elemente entfernen, die die Umgebung umgeben, damit der Site-Titel oder das Protokoll noch vorhanden sind, diese jedoch nicht als Links fungieren.
Entfernen Sie das Navigationsmenü h3
Jetzt ist es Zeit, das Navigationsmenü zu entfernen. Den Code dafür finden Sie in Ihrem Header-Filer. In Twenty Twenty befindet es sich in einem Element, das so aussieht:
1 |
<div class=“header-navigation-wrapper"> |
2 |
|
3 |
</div><!-- .header-navigation-wrapper —> |
Wenn Sie mit 20 arbeiten, entfernen Sie das und alles darin. Wenn nicht, müssen Sie ein div, eine aside oder einen section mit einem ähnlichen Namen finden.
Twenty Twenty verfügt außerdem über zwei Navigationsschaltflächen für Mobilgeräte, die sich in folgenden Elementen befinden:
1 |
<button class="toggle search-toggle mobile-search-toggle"> |
2 |
|
3 |
</button>
|
1 |
<button class="toggle nav-toggle mobile-nav-toggle"> |
2 |
|
3 |
</button>
|
Entfernen Sie diese, und stellen Sie sicher, dass Sie den Site-Titel und die Beschreibung zwischen ihnen nicht entfernen. Wenn Ihr Thema etwas Ähnliches hat, entfernen Sie das.
Entfernen Sie alle Widget-Bereiche oder anderen Code mit Links
Twenty Twenty hat auch einen Code für die Suche, den ich ebenfalls entfernen werde. Ihr Thema hat dies möglicherweise in einem Widget. In diesem Fall entfernen Sie alle Widget-Bereiche in der Header-Datei.
Und schließlich gibt es in Twenty Twenty am Ende der Datei ein modales Menü, das ich ebenfalls entfernen möchte. Auch hier kann es sein, dass Ihr Thema dies nicht hat - zwanzigundzwanzig ist komplexer als viele!
Meine header-landing.php-Datei sieht jetzt viel einfacher aus:
1 |
<?php
|
2 |
/**
|
3 |
* Header file for the Twenty Twenty WordPress default theme.
|
4 |
*
|
5 |
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
|
6 |
*
|
7 |
* @package WordPress
|
8 |
* @subpackage Twenty_Twenty
|
9 |
* @since Twenty Twenty 1.0
|
10 |
*/
|
11 |
|
12 |
?><!DOCTYPE html>
|
13 |
|
14 |
<html class="no-js" <?php language_attributes(); ?>> |
15 |
|
16 |
<head>
|
17 |
|
18 |
<meta charset="<?php bloginfo( 'charset' ); ?>"> |
19 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" > |
20 |
|
21 |
<link rel="profile" href="https://gmpg.org/xfn/11"> |
22 |
|
23 |
<?php wp_head(); ?> |
24 |
|
25 |
</head>
|
26 |
|
27 |
<body <?php body_class(); ?>> |
28 |
|
29 |
<?php
|
30 |
wp_body_open(); |
31 |
?>
|
32 |
|
33 |
<header id="site-header" class="header-footer-group" role="banner"> |
34 |
|
35 |
<div class="header-inner section-inner"> |
36 |
|
37 |
<div class="header-titles-wrapper"> |
38 |
|
39 |
<div class="header-titles"> |
40 |
|
41 |
<?php
|
42 |
// Site title or logo.
|
43 |
bloginfo( 'name' ); |
44 |
|
45 |
// Site description.
|
46 |
twentytwenty_site_description(); |
47 |
?>
|
48 |
|
49 |
</div><!-- .header-titles --> |
50 |
|
51 |
</div><!-- .header-titles-wrapper --> |
52 |
|
53 |
|
54 |
</div><!-- .header-inner --> |
55 |
|
56 |
</header><!-- #site-header —> |
Speichern Sie die Datei und kehren Sie zu Ihrer Vorlagendatei zurück. Suchen Sie die Zeile, die den Header aufruft:
1 |
get_header(); |
Bearbeiten Sie es so, dass es die neue Header-Datei aufruft:
1 |
get_header( ‘landing’ ); |
Speichern Sie nun Ihre Datei.
Erstellen Sie eine Fußzeile für die Landingpage
Jetzt ist es Zeit, eine Fußzeile für Ihre Landingpage zu erstellen.
Machen Sie ein Duplikat von footer.php und nennen Sie es footer-landing.php. Öffnen Sie Ihre neue Datei.
Suchen Sie nach Code für Widget-Bereiche und entfernen Sie diesen. Twenty Twenty hat keine Widget-Bereiche in der Datei footer.php. Sie befinden sich in einer Include-Datei, zu der ich den Aufruf bereits entfernt habe.
Sie müssen auch das Kolophon bearbeiten, um Links zu entfernen. Hier ist das Kolophon in zwanzig:
1 |
<div class="footer-credits"> |
2 |
|
3 |
<p class="footer-copyright">© |
4 |
<?php
|
5 |
echo date_i18n( |
6 |
/* translators: Copyright date format, see https://www.php.net/date */
|
7 |
_x( 'Y', 'copyright date format', 'twentytwenty' ) |
8 |
);
|
9 |
?>
|
10 |
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a> |
11 |
</p><!-- .footer-copyright --> |
12 |
|
13 |
<p class="powered-by-wordpress"> |
14 |
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>"> |
15 |
<?php _e( 'Powered by WordPress', 'twentytwenty' ); ?> |
16 |
</a>
|
17 |
</p><!-- .powered-by-wordpress --> |
18 |
|
19 |
</div><!-- .footer-credits --> |
Entfernen Sie alle Links im Code. Meins liest sich jetzt so:
1 |
<div class="footer-credits"> |
2 |
|
3 |
<p class="footer-copyright">© |
4 |
<?php
|
5 |
echo date_i18n( |
6 |
/* translators: Copyright date format, see https://www.php.net/date */
|
7 |
_x( 'Y', 'copyright date format', 'twentytwenty' ) |
8 |
);
|
9 |
?>
|
10 |
<?php bloginfo( 'name' ); ?> |
11 |
</p><!-- .footer-copyright --> |
12 |
|
13 |
<p class="powered-by-wordpress"> |
14 |
<?php _e( 'Powered by WordPress', 'twentytwenty' ); ?> |
15 |
</p><!-- .powered-by-wordpress --> |
16 |
|
17 |
</div><!-- .footer-credits --> |
Speichern Sie nun die Fußzeilendatei und kehren Sie zu Ihrer Vorlagendatei zurück. Finden Sie den Anruf in der Fußzeile:
1 |
<?php get_footer(); ?> |
Bearbeiten Sie es, um die neue Fußzeilendatei aufzurufen:
1 |
<?php get_footer( 'landing' ); ?> |
Meine Vorlagendatei ist jetzt abgespeckt und lautet wie folgt:
1 |
<?php
|
2 |
/**
|
3 |
* Template Name: Landing Page
|
4 |
*
|
5 |
*/
|
6 |
|
7 |
get_header(); |
8 |
?>
|
9 |
|
10 |
<main id="site-content" role="main"> |
11 |
|
12 |
<?php
|
13 |
|
14 |
if ( have_posts() ) { |
15 |
|
16 |
while ( have_posts() ) { |
17 |
the_post(); |
18 |
|
19 |
get_template_part( 'template-parts/content', get_post_type() ); |
20 |
}
|
21 |
}
|
22 |
|
23 |
?>
|
24 |
|
25 |
</main><!-- #site-content --> |
26 |
|
27 |
<?php get_footer( 'landing' ); ?> |
Speichern Sie Ihre Vorlagendatei und aktivieren Sie sie im WordPress-Administrator, wenn Sie mit einem untergeordneten Thema arbeiten.
Verwenden Sie die Vorlage, um Ihre Landingpage zu erstellen
Erstellen Sie eine neue statische Seite für Ihre Landingpage und geben Sie ihr einen Titel, der Ihren Wünschen entspricht.
Erstellen Sie den Inhalt und wählen Sie dann im Abschnitt Seitenattribute des Dokumentbereichs rechts in der Dropdown-Liste Vorlage die Option Landingpage aus.
Veröffentlichen Sie die Seite.
Wenn Sie es jetzt im Frontend besuchen, werden Sie feststellen, dass es keine Links oder Navigation enthält und dass die Benutzer nur auf die Schaltfläche "Aufruf zum Handeln" klicken können.
Abschluss
Eine Landingpage ist viel leistungsfähiger, wenn Sie sicherstellen, dass die einzige Aktion, die Personen ausführen können, wenn sie dazu gelangen, darin besteht, auf die Schaltfläche "Kaufen" zu klicken. Durch das Erstellen einer Vorlage dafür in Ihrem WordPress-Design können Sie Ihre Ladingpageeffektiver gestalten und mehr Verkäufe oder Abonnements erzielen.
Befolgen Sie diese Anleitung und Sie erhalten eine leistungsstarke Landingpage für Ihr Thema!
