Comment ajouter une Newsletter Signup Box Après votre post dans la Genèse cadre

Il est vraiment facile d'ajouter une boîte d'inscription newsletter après votre message dans les thèmes de l'enfant Genesis. Boostez nombre d'abonnés de messagerie en ajoutant la boîte d'inscription newsletter.

A+ A-

Combien d'abonnés email votre blog a? Voulez-vous augmenter le nombre d'abonnés par courriel? Alors pourquoi ne pas ajouter la boîte d'inscription newsletter après votre message? Après avoir publié Genesis modifications à thème article, de nombreux utilisateurs de thème Genesis nous a demandé d'écrire tutoriel sur l'ajout de boîte bulletin d'inscription. Donc, ici, dans cet article, nous allons partager une façon par laquelle vous pouvez ajouter une zone d'inscription newsletter après votre message dans les sites Web Genesis à propulsion.

Brian Gardner a déjà publié l'article sur même sujet, sa méthode est basée sur défaut 'Genesis eNews et mises à jour de widget. Mais alors que la mise en œuvre case d'inscription newsletter en utilisant ce guide, nous avons fait face à quelques difficultés. Méthode donnée par Brian fonctionne mais le problème principal est que vous ne pouvez pas ajouter la boîte d'inscription newsletter aux deux endroits - dans la zone widget ci - dessous et poste en raison même CSS appliquée à la fois zone afin case d'inscription dans la zone de widget air bizarre. Beaucoup d'utilisateurs veulent ajouter la boîte bulletin d'inscription aux deux endroits, donc ici, nous allons montrer la meilleure méthode pour le faire, ajoutez défaut 'Genesis eNews et mises à jour de widget dans le primaire zone widgets de la barre latérale et la méthode d'utilisation fourni ici pour ajouter la boîte bulletin d'inscription ci-dessous votre message . Bien que notre méthode est différente, encore elle est basée sur la méthode de Brian alors crédits va à lui.

Newsletter Signup Box Preview

L'ajout de cette case d'inscription dans les thèmes de l'enfant Genesis est relativement simple. Il suffit de suivre les étapes simples indiquées ci-dessous et ajoutez boîte d'inscription d'apparence professionnelle, comme indiqué dans l'image ci-dessus après vos messages.

Étape 1

Dans WordPress Dashboard -> Apparence -> Editeur -> Regardez dans la colonne de droite pour le fichier function.php, ouvrez ce fichier et ajouter le code suivant à la fin de celui - ci.

A) Code Snippet pour les utilisateurs FeedBurner:

/** 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);

Note: Ne pas oublier de changer "Google / FeedburnerID" texte par votre réelle Google / Feedburner ID à deux endroits.

B) Code Snippet pour les utilisateurs MailChimp:

/** 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);

Note: Ne pas oublier de changer "URL sous forme d'action" par votre MailChimp form action URL. Vous trouverez votre form action URL dans MailChimp -> Listes -> Pour votre onglet Site Web et choisissez la première option dans la liste déroulante - Inscription Form Code intégré et cherchez votre form action URL (<form action = "VOTRE Mailchimp ACTION URL").

Si vous utilisez AWeber ou tout autre service, alors il suffit de changer de code entre <form> </ form> en conséquence.

Étape 2

Télécharger les newletter box graphiques et les extraire dans "images / /" dossier de votre thème enfant Genesis. Ce graphismes impressionnants créés par Brian, nous avons juste ajouté un "enews-ruban blue.png" image et changé le fichier enews.png.

Étape 3

Dans WordPress Dashboard -> Apparence -> Editeur -> style.css. Ajoutez le code suivant et mettre à jour le fichier.

/* 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;
}

Ce CSS va travailler pour les utilisateurs FeedBurner et MailChimp, si vous utilisez tout autre service puis modifiez le code en conséquence, car il est difficile de nous fournir le code pour chaque service comme il y a un certain nombre de services différents que vous pouvez utiliser. Ne pas oublier de changer le nom de l'image à "enews-ribbon.png" si vous voulez utiliser une autre image colorée, par exemple enews-ruban blue.png.

Si vous êtes confronté à des difficultés lors de l'ajout d'une boîte d'inscription newsletter puis laissez-nous savoir sous forme de commentaires.