Wie man einen Newsletter anmelden Box Nachdem Ihr Beitrag in Genesis Framework hinzufügen

Es ist wirklich einfach, ein Newsletter-Abonnement-Box nach dem Eintrag in Genesis Kind Themen hinzuzufügen. Steigern Anzahl von E-Mail-Abonnenten per Newsletter Anmeldung Box hinzufügen.

A+ A-

Wie viele E-Mail-Abonnenten einen Blog hat? Wollen Sie Anzahl der E-Mail-Abonnenten zu erhöhen? Warum dann nicht Newsletter-Abonnement-Box nach Ihrem Beitrag hinzufügen? Nach der Veröffentlichung Genesis Thema Änderungen Artikel, forderte viele Genesis Thema Benutzer uns Tutorial zu schreiben auf Newsletter-Abonnement-Box hinzugefügt wird. Also hier in diesem Artikel werden wir einen Weg teilen, mit dem Sie einen Newsletter Anmeldung Box nach dem Eintrag in Genesis basierte Websites hinzufügen können.

Brian Gardner hat bereits Artikel auf demselben Thema veröffentlicht wurde, ist seine Methode basiert auf default 'Genesis eNews und Updates' Widget. Aber während Newsletter-Abonnement-Box zur Umsetzung dieser Anleitung verwenden, haben wir einige Schwierigkeiten. Verfahren gegeben von Brian arbeitet aber Hauptproblem ist , dass Sie nicht Newsletter - Abonnement - Box an beiden Orten hinzufügen können - in Widget - Bereich und unterhalb Post , weil gleiche CSS sowohl Bereich angewendet , so die Registrierung Box in Widget - Bereich wird seltsam aussehen. Viele Anwender wollen wir so hier an beiden Orten Newsletter-Abonnement Feld hinzufügen werden beste Methode zeigen, dass zu tun, fügen Sie default 'Genesis eNews und Updates' Widget in primären Sidebar-Widgets Bereich und verwenden Sie die Methode hier zur Verfügung gestellt, um Newsletter-Abonnement-Box unter Ihrem Beitrag hinzufügen . Obwohl unser Verfahren verschieden ist, noch ist es auf Brian Methode basiert, so dass Kredite an ihn geht.

Newsletter Signup Box Preview

Das Hinzufügen dieser Anmeldungen Box in Genesis Kind Themen ist relativ einfach. Folgen Sie einfach den einfachen Schritten unten angegeben und professionell aussehende Anmeldungen Box hinzufügen, wie nach deine Beiträge in das obere Bild gezeigt.

Schritt 1

In Wordpress - Dashboard -> Darstellung -> Editor -> Schauen Sie in der rechten Spalte für function.php Datei, die Datei öffnen und folgenden Code am Ende hinzufügen.

A) Code Snippet für Feedburner Benutzer:

/** Add a Newsletter Signup Box After Posts */
function add_newsletter_box() {
if(is_single()) {
?>

<div id="newsletterbox">
<div class="white-border">
<div class="newsletterbox-wrap">
<h4>Join Our Newsletter</h4>
<p>Join over 5,000 people who get free and fresh content delivered automatically each time we publish.</p>
<form id="subscribe" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=Google/FeedburnerID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input id="subbox" type="email" name="email" onblur="if ( this.value == '' ) { this.value = 'Enter your email address...' } " onfocus=" if ( this.value == 'Enter your email address...') { this.value = '' }" value="Enter your email address..." />
<input type="hidden" value="Google/FeedburnerID" name="uri">
<input type="hidden" value="en_US" name="loc">
<input id="subbutton" type="submit" value="Sign Up">
</form>
</div>
</div>
</div> <?php
}
}
add_action ( 'genesis_after_post_content', 'add_newsletter_box', 10, 1);

Hinweis: Vergessen Sie nicht "Google / FeedburnerID" Text durch Ihre tatsächliche Google / Feedburner - ID an zwei Stellen zu ändern.

B) Code Snippet für MailChimp Benutzer:

/** Add a Newsletter Signup Box After Posts */
function add_newsletter_box() {
if(is_single()) {
?>
<div id="newsletterbox">
<div class="white-border">
<div class="newsletterbox-wrap">
<h4>Join Our Newsletter</h4>
<p>Join over 5,000 people who get free and fresh content delivered automatically each time we publish.</p>
<form target="_blank" class="validate" name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form" method="post" action="http://techlila.us5.list-manage.com/subscribe/post?u=eefa99bc3d40d94a1820fed4b&id=b28d5bf727">
<input type="email" required="" placeholder="Enter your email address ..." id="mce-EMAIL" class="email" name="EMAIL" value="">
<input type="submit" class="button" id="mc-embedded-subscribe" name="subscribe" value="Sign Up">
</form>
</div>
</div>
</div>
<?php
}
}
add_action ( 'genesis_after_post_content', 'add_newsletter_box', 10, 1);

Hinweis: Vergessen Sie nicht , "form action URL" durch Ihre MailChimp form action - URL zu ändern. > Listen - -> für Ihre Website Registerkarte und erste Option aus Dropdown wählen - Sie werden Ihre Form Action-URL in MailChimp finden Anmeldeformular Embed Code und suchen Sie nach Ihrer Form Aktion URL (<form action = "IHRE Mailchimp ACTION URL").

Wenn Sie AWeber oder andere Dienst verwenden, dann ändern Sie einfach Code zwischen <form> </ form> entsprechend.

Schritt 2

Laden Sie die newletter Box Grafiken und extrahieren Sie sie in "/ images /" Ordner Ihrer Genesis Kind - Thema. Diese beeindruckende Grafik von Brian erstellt, haben wir nur ein "eNews-Band-blue.png" Bild hinzugefügt und geändert enews.png Datei.

Schritt 3

In Wordpress-Dashboard -> Darstellung -> Editor -> style.css. Fügen Sie folgenden Code und die Datei zu aktualisieren.

/* Newsletter Box below Posts
------------------------------------------------------------- */
#newsletterbox {
background-color: #f5f5f5;
border: 10px solid #e4e4e4;
margin-top: 30px;
}
#newsletterbox .white-border {
border: 1px solid #fff;
}
.newsletterbox-wrap {
background: url(/p;quot;images/enews-ribbon.png&quot;) no-repeat scroll left top transparent;
margin: -17px -18px;
overflow: hidden;
padding: 45px 30px 40px;
text-align: center;
text-shadow: 1px 1px #fff;
}

.newsletterbox-wrap h4 {
text-align: center;
}

.newsletterbox-wrap p {
margin: 0 35px 20px;
text-align: center;
}
.newsletterbox-wrap input[type=&quot;email&quot;] {
background: url(/p;quot;images/enews.png&quot;) no-repeat scroll left center #fff;
box-shadow: 0 0 5px #ccc inset;
color: #999;
font-family: 'proxima-nova',sans-serif;
font-size: 12px;
margin: 0 5px;
padding: 15px 0 15px 45px;
width: 40%;
}

.newsletterbox-wrap input[type=&quot;submit&quot;] {
box-shadow: 0 1px 1px #a24a1d;
font-size: 14px;
font-weight: bold;
padding: 10px 15px;
text-transform: uppercase;
}

Diese CSS wird für Feedburner und MailChimp Anwender arbeiten, wenn Sie einen anderen Dienst verwenden sind dann entsprechend den Code ändern, weil es uns schwer Code für jeden Dienst zur Verfügung zu stellen, da es eine Reihe von verschiedenen Dienstleistungen, die Sie verwenden können. Vergessen Sie nicht, den Namen des Bildes zu ändern, um "eNews-Ribbon.png", wenn Sie ein anderes farbiges Bild verwenden möchten, zB eNews-Band-blue.png.

Wenn Sie irgendwelche Schwierigkeiten konfrontiert sind, während ein Newsletter-Abonnement Box Zugabe dann lassen Sie uns in Form von Kommentaren wissen.