So codieren Sie eine Landingpage in Ihrem WordPress-Thema

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Final product image — What You'll Be Creating

Wenn Sie etwas im Internet gekauft haben, sind Sie wahrscheinlich auf eine Zielseite gestoßen. Sie sind eine sehr effektive Methode, um die Conversions einer Website zu maximieren.

Aber was ist eine Landingpage und wie erstellen Sie eine für Ihre WordPress-Site?

In diesem Tutorial werde ich zeigen, was eine Zielseite von einer normalen Seite auf Ihrer Website unterscheidet, und Ihnen zeigen, wie Sie eine Zielseitenvorlagendatei erstellen, damit Sie Ihre eigenen Zielseiten erstellen können.

Was ist eine Landingpage?

Eine Zielseite ist eine Seite auf Ihrer Website, die dazu bestimmt ist, etwas zu verkaufen.

Sie können Personen mithilfe von SEO oder über bezahlte Anzeigen oder von einem Aufruf zum Handeln oder einem Widget auf den anderen Seiten Ihrer Website darauf hinweisen. Es ist ein Ziel: irgendwo möchten Sie, dass die Leute etwas tun.

Ihre Zielseite hat nur einen Job. Dieser Job hängt von der Art Ihres Unternehmens ab, ist jedoch normalerweise eines von zwei Dingen: etwas zu verkaufen oder die E-Mail-Adresse eines Besuchers zu erhalten.

Wenn Sie also ein Abonnement, einen Service oder ein Produkt verkaufen, wird Ihre Zielseite so gestaltet, dass die Leute zum Kauf dieses Dings ermutigt werden. Der Inhalt soll Einwände überwinden, zeigen, wie das Produkt, die Dienstleistung oder das Abonnement die Bedürfnisse des Käufers erfüllen, und sie zum Kauf bewegen.

Wenn Ihre Zielseite E-Mail-Adressen erhalten soll, bietet sie normalerweise eine Gegenleistung. Das kann ein Beispiel, ein Gutschein oder ein Werbegeschenk sein, das Leute herunterladen können.

Wenn jemand auf dieser Seite landet (weshalb es als Zielseite bezeichnet wird), möchten Sie nicht, dass er irgendwohin geht, bis er entweder bei Ihnen gekauft oder Ihnen seine Kontaktdaten mitgeteilt hat.

Aus diesem Grund haben die effektivsten Zielseiten keine Links außer denen, die direkt mit dem Ziel der Seite zusammenhängen. Ihre Zielseite sollte kein Navigationsmenü enthalten, um Personen zu anderen Teilen der Website zu verleiten, kein anklickbares Logo, um sie auf Ihre Startseite zu bringen, und keine Seitenleisten oder Fußzeilen-Widgets, um Personen abzulenken.

Aus diesem Grund benötigen Sie eine spezielle Seitenvorlage, mit der all diese Dinge entfernt werden.

Hier ist die Zielseite auf einer meiner Websites:

Es ist wirklich einfach. Es hat keine Links, kein Navigationsmenü und nur eine Schaltfläche, die Sie zu einem Anmeldeformular führt.

Sie möchten den Nutzern nicht die Möglichkeit geben, auf Ihrer Zielseite etwas anderes zu tun. Aus diesem Grund benötigen Sie eine dedizierte Vorlagendatei. Die Seite enthält keine Links, die den Besucher vom Verkaufs- oder Abonnementprozess abhalten. Die einzigen Links auf dieser Seite (und es sollten große, offensichtliche Schaltflächen sein) repräsentieren die Oberseite Ihres Verkaufstrichters.

Wenn Sie zum Erstellen einer Zielseite eine Standardseitenvorlage verwenden, erhöhen Sie die Wahrscheinlichkeit, dass ein Besucher abgelenkt wird und sich vom Verkaufsprozess entfernt.

Beginnen wir stattdessen mit der Erstellung einer benutzerdefinierten Seitenvorlage.

Was werden Sie brauchen?

Dazu benötigen Sie Folgendes:

eine Entwicklungsinstallation Ihrer Site
Ihr eigenes Thema oder ein untergeordnetes Thema eines Drittanbieterthemas (bearbeiten Sie Drittanbieterthemen nicht direkt)
ein Code-Editor

Ich zeige Ihnen den Code aus der Zielseitenvorlage meiner eigenen Website.

WordPress

So erstellen Sie ein untergeordnetes WordPress-Thema

Rachel McCollin

Seitenvorlage erstellen

Erstellen Sie in Ihrem Thema (oder Ihrem untergeordneten Thema) eine neue Seitenvorlage. Sie können dies entweder tun, indem Sie die page.php-Vorlage duplizieren oder indem Sie eine leere Datei erstellen und den Inhalt von page.php in diese kopieren. Ich rufe meine landing-page.php an.

Hier ist meine vorhandene page.php-Datei:

<?php
/**
 * The template for displaying all pages.
 */
get_header(); ?>

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

	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>	
		
		<?php if ( has_post_thumbnail() ) { ?>
		
			<h2 class="entry-title desktop"><?php the_title(); ?></h2>
		
			<div class="quarter right"> 
				<?php the_post_thumbnail( 'large' ); ?>
			</div>
			
			<section class="entry-content three-quarters left">
				<h2 class="entry-title mobile"><?php the_title(); ?></h2>
				<?php the_content(); ?>
			</section><!-- .entry-content -->
		
		<?php }
			
		else { ?>
		
			<h2 class="entry-title desktop"><?php the_title(); ?></h2>
	
			<section class="entry-content">
				<?php the_content(); ?>
			</section><!-- .entry-content -->	
			
		<?php } ?>
		
	</article><!-- #post-## -->

<?php endwhile; ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Lassen Sie uns den Inhalt dieser Datei durchgehen:

Zuerst ein Aufruf der Datei header.php.
Als nächstes eine bedingte Überprüfung, um festzustellen, ob ein Bild vorhanden ist. Wenn ja, wird dies rechtsbündig angezeigt. Dies ist spezifisch für mein Thema - Ihr Thema kann etwas Ähnliches haben oder auch nicht.
Die Schleife zum Anzeigen des Seitentitels und des Inhalts.
Ein Anruf in der Seitenleiste.
Ein Anruf in die Fußzeile.

Um eine Zielseitenvorlage zu erstellen, müssen Sie einige Schritte mit dieser Datei ausführen:

Fügen Sie am Anfang kommentierten Text hinzu, damit WordPress weiß, dass dies eine Seitenvorlage ist
Entfernen Sie diese bedingte Anweisung
Entfernen Sie den Anruf an die Seitenleiste

Ich werde die Fußzeile nicht entfernen, da sie zum Schließen des body-Elements und des wp_footer-Hooks benötigt wird. Stattdessen erstellen wir eine Version der Fußzeilendatei, die von dieser Seitenvorlage verwendet wird.

Hinzufügen von kommentiertem Text zum Erstellen einer Seitenvorlage

Fügen Sie in Ihrer neuen landing-page.php-Datei eine Zeile mit auskommentiertem Text hinzu, um WordPress mitzuteilen, dass es sich um eine Seitenvorlage handelt. Hier ist meins:

/**
 * Template Name: Landing page
 * The template for displaying the landing page.
 *
 */

Wenn Sie jetzt eine Seite in Ihrem Seitenbearbeitungsbildschirm bearbeiten oder erstellen, können Sie diese Vorlage im Abschnitt Seitenattribute der Registerkarte Dokument rechts im Seitenbearbeitungsbildschirm auswählen:

selecting a page template in the WordPress admin

Entfernen des Bedingungscodes

Bearbeiten wir nun die bedingte Prüfung. Sie müssen dies nur tun, wenn Ihre page.php-Datei eine hat.

Auf meiner Zielseite wird immer ein Bild angezeigt. Ich muss nicht nach einem suchen. Dies liegt daran, dass ich ein Bild des kostenlosen Downloads habe, das Personen erhalten, wenn sie sich bei meiner Mailingliste anmelden. Ich möchte auch das Layout ändern. Hier ist die neue Version meines Codes in meiner Seitenvorlage:

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

	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					
		<h2 class="entry-title"><?php the_title(); ?></h2>
					
		<section class="featured-image one-third left">
			<?php if ( has_post_thumbnail() ) { 
				the_post_thumbnail( 'medium' );
			} ?>
		</section>	
            
        <section class="entry-content right two-thirds">
			<?php the_content(); ?>
		</section><!-- .entry-content -->
	</article><!-- #post-## -->

<?php endwhile: endif; ?>

Die CSS-Stile für das Layout auf dieser Seite befinden sich bereits im Stylesheet meines Themas. Wenn Sie dasselbe Layout oder Ihre Zielseite anders als andere Seiten gestalten möchten, fügen Sie das CSS dem Stylesheet Ihres Themas hinzu.

Entfernen des Sidebar-Anrufs

Entfernen wir nun diesen Seitenleistenaufruf.

Löschen Sie das Tag get_sidebar(). Lassen Sie den Fußzeilenaufruf dort - wir bearbeiten die Fußzeile, um alle Links in Kürze zu entfernen.

Bearbeiten der Kopf- und Fußzeile

Nicht alle Inhalte und Links auf jeder Seite Ihrer Website befinden sich in der Vorlagendatei. Die Kopfzeile enthält Ihr Navigationsmenü sowie einen Link zu Ihrer Homepage über Ihr Logo oder Ihren Site-Namen. Es kann auch andere Links in Ihrem Banner enthalten.

Ihre Fußzeile enthält wahrscheinlich ein Kolophon mit Links zu Ihrer Homepage sowie Widgets, die interne oder externe Links enthalten können.

Sie möchten all diese Dinge loswerden, damit die Nutzer die Zielseite nicht verlassen können, ohne sie zu kaufen oder sich anzumelden.

Navigation aus der Kopfzeile entfernen

Beginnen wir nun mit der Kopfzeile. Es gibt zwei Dinge, die Sie entfernen müssen: den Link in Ihrem Logo oder Site-Titel und das Navigationsmenü.

Erstellen Sie zunächst eine Kopie Ihrer Header-Datei. Nennen wir es header-landing.php.

Bearbeiten Sie nun in Ihrer landing-page.php-Datei den Aufruf des Headers so, dass er wie folgt lautet:

1	get_header( 'landing' ); ?>

Sobald Sie dies getan haben, können Sie die Datei header-landing.php bearbeiten.

Hier ist mein Code für den Site-Namen:

<hgroup class="site-name one-third left">
    <!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
    <h1 id="site-title" class="one-half-left">
        <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <?php bloginfo( 'name' ); ?>
        </a>
    </h1>
  
    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
  
</hgroup>

Wir möchten weiterhin den Site-Namen anzeigen, daher bearbeiten wir den Code, um ihn ohne den Link auszugeben:

<hgroup class="site-name one-third left">
    <!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
    <h1 id="site-title" class="one-half-left">
        <?php bloginfo( 'name' ); ?>
    </h1>
  
    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
  
</hgroup>

Entfernen wir nun das Navigationsmenü. Sie löschen einfach den gesamten Code für das Navigationsmenü in Ihrer header-landing.php-Datei.

Hier ist der Code:

<nav class="menu main right">

  <div class="skip-link screen-reader-text">
    <a href="#content" title="<?php esc_attr_e( 'Skip to content', 'tutsplus' ); ?>">
      <?php _e( 'Skip to content', 'tutsplus' ); ?>
    </a>
  </div>

  <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>

 </nav><!-- .main -->

Löschen Sie einfach alles. Einfach!

Entfernen von Links aus der Fußzeile

Fahren wir nun mit der Fußzeile fort.

Wie bei der Header-Datei müssen Sie eine andere Version der Footer-Datei erstellen. Duplizieren Sie footer.php und nennen Sie es footer-landing.php.

Bearbeiten Sie in Ihrer landing-page.php-Datei den Fußzeilenaufruf so, dass er wie folgt lautet:

1	<?php get_footer( 'landing' ); ?>

Jetzt bearbeiten wir die Datei footer-landing.php.

In meiner Fußzeilendatei habe ich einen Widget-Bereich:

if ( is_active_sidebar( 'footer-widget-area' ) ) { ?>
    <aside class="footer-widget-area full-width" role="complementary">
		<?php dynamic_sidebar( 'footer-widget-area' ); ?>
	</aside>
<?php }

Löschen Sie das einfach aus der footer-landing.php. Entfernen Sie alle Elemente, in die es eingewickelt ist, wenn Sie möchten: Experimentieren Sie, damit es so aussieht, wie Sie es möchten.

In meiner Datei habe ich auch Code für ein Kolophon, das Links enthält:

<section class="colophon" role="contentinfo">
    <small class="copyright left">
        &copy; <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <?php bloginfo( 'name'); ?>
        </a>
    </small><!-- #copyright -->

    <small class="credits right">
        Proudly powered by <a href="https://wordpress.org/">WordPress</a>.
    </small><!-- #credits -->
</section><!--#colophon-->

Ich muss das bearbeiten, um den Link zur Homepage und den WordPress-Link wie folgt zu entfernen:

<section class="colophon" role="contentinfo">
    <small class="copyright left">
        &copy; <?php bloginfo( 'name'); ?>
    </small><!-- #copyright -->

    <small class="credits right">
        Proudly powered by WordPress.
    </small><!-- #credits -->
</section><!--#colophon-->

Es werden jetzt keine Links in der Fußzeile oder Kopfzeile der Zielseite angezeigt.

Stylesheet bearbeiten

Der letzte Schritt besteht darin, das Styling für die Seitenvorlage so zu bearbeiten, dass der Inhalt in voller Breite angezeigt wird.

Ich habe standardmäßig das folgende Layout für meinen Inhalt und meine Seitenleiste:

#content {
  width: 65%;
  float: left;
}
.sidebar {
  width: 32%;
  float: right;
}

Ich muss etwas Styling hinzufügen, um den Inhalt nur auf dieser Seitenvorlage auszurichten:

1	.page-template-landing-page #content {
2	width: 100%;
3	float: none;
4	}

Sie müssen kein zusätzliches Styling für die Seitenleiste hinzufügen. Es wird nicht in Ihrer benutzerdefinierten Seitenvorlage angezeigt, da es nicht aus der Vorlagendatei aufgerufen wird.

Erstellen Sie Ihre Seiten

Der letzte Schritt besteht darin, Ihre Zielseite zu erstellen. Erstellen Sie eine neue Seite in Ihrem WordPress-Administrator mit Ihrer neuen Zielseitenvorlage. Es enthält Text, der zum Kauf oder zur Anmeldung verleitet, sowie ein Formular oder einen Kaufknopf.

Auf meiner Website habe ich tatsächlich zwei Zielseiten: Die erste ist die Seite, auf die die Benutzer gelangen, und die zweite ist die Seite, auf der die Benutzer ihre E-Mail-Adresse angeben. Ich habe es so gemacht, weil es Untersuchungen gibt, die zeigen, dass Menschen einen Prozess eher abschließen, wenn sie zuerst auf einen Link klicken mussten. Ich habe noch nicht getestet, ob es auf meiner Website einen Unterschied macht: Vielleicht sollte ich!

Wenn Sie auf der ersten Zielseite meiner Website auf die Schaltfläche klicken, erhalten Sie diese einfache Anmeldeseite:

a landing page with a one-field form and no other links

Diese Seite verwendet dieselbe Vorlage wie meine Zielseite. In beiden Fällen habe ich das gleiche Bild hinzugefügt. Auf diese Weise wird die Nachricht verstärkt, dass die Nutzer dieses Werbegeschenk erhalten, wenn sie sich anmelden. Durch das Einfügen von Grafiken wird Ihre Seite attraktiver und die Conversions steigen.

Eine Landingpage-Vorlage reduziert Ablenkungen und erhöht die Conversions

Durch das Erstellen einer Vorlagendatei für Ihre Zielseiten werden diese wesentlich effektiver. Jeder, der auf dieser Seite auf Ihrer Website ankommt oder auf eine Schaltfläche auf Ihrer Website klickt, um dorthin zu gelangen, kann nirgendwo anders hingehen.

Befolgen Sie die Schritte in diesem Tutorial, um eine Zielseite für Ihre Site zu erstellen. Wenn es größer als meins ist (Zielseiten, auf denen ein teures Produkt verkauft wird, benötigen möglicherweise viel Text, um den Verkauf abzuschließen), möchten Sie möglicherweise zusätzliches Styling hinzufügen, um den Inhalt aufzuteilen und den Lesern beim Lesen zu helfen.

Sobald Sie diese Vorlage haben, können Sie Ihrer Website in Zukunft problemlos zusätzliche Zielseiten hinzufügen, um zukünftige Kampagnen zu unterstützen oder neue Produkte zu verkaufen. Viel Glück!

1	<?php
2	/**
3	* The template for displaying all pages.
4	*/
5	get_header(); ?>
6
7	<?php
8	if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
9
10	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
11
12	<?php if ( has_post_thumbnail() ) { ?>
13
14	<h2 class="entry-title desktop"><?php the_title(); ?></h2>
15
16	<div class="quarter right">
17	<?php the_post_thumbnail( 'large' ); ?>
18	</div>
19
20	<section class="entry-content three-quarters left">
21	<h2 class="entry-title mobile"><?php the_title(); ?></h2>
22	<?php the_content(); ?>
23	</section><!-- .entry-content -->
24
25	<?php }
26
27	else { ?>
28
29	<h2 class="entry-title desktop"><?php the_title(); ?></h2>
30
31	<section class="entry-content">
32	<?php the_content(); ?>
33	</section><!-- .entry-content -->
34
35	<?php } ?>
36
37	</article><!-- #post-## -->
38
39	<?php endwhile; ?>
40
41	<?php get_sidebar(); ?>
42	<?php get_footer(); ?>