Como adicionar uma inscrição Box Boletim Após seu post em Gênesis Framework

É realmente fácil de adicionar uma caixa de boletim de inscrição após o seu posto de trabalho em crianças temas Genesis. Aumentar o número de assinantes e-mail, acrescentando caixa de boletim de inscrição.

A+ A-

Quantos assinantes de e-mail o seu blog tem? Você quer aumentar o número de assinantes de e-mail? Então por que não para adicionar caixa de boletim de inscrição após a sua mensagem? Depois de publicar Genesis artigo modificações tema, muitos usuários temáticos Genesis solicitado nós escrever tutorial sobre como adicionar caixa de boletim de inscrição. Então, aqui neste artigo vamos compartilhar uma maneira pela qual você pode adicionar uma caixa de boletim de inscrição após o seu posto de trabalho em sites Genesis alimentados.

Brian Gardner já publicou artigo sobre mesmo tema, o método baseia-default 'Genesis eNews e atualizações de widget. Mas enquanto implementa caixa de boletim de inscrição usando esse guia, que já enfrentou algumas dificuldades. Método dada por Brian funciona, mas principal problema é que você não pode adicionar caixa de boletim de inscrição em ambos os lugares - na área widget e abaixo post, porque mesmo CSS aplicado tanto área para que a caixa de inscrição na área widget irá olhar estranho. Muitos usuários querem adicionar a caixa boletim de inscrição em ambos os lugares por isso aqui vamos mostrar melhor método para fazer isso, adicione default 'Genesis eNews e atualizações' widget na área de widgets da barra lateral primária e método de utilização fornecidas aqui para adicionar caixa de boletim de inscrição abaixo sua mensagem . Embora o nosso método é diferente, ainda que é baseado no método de Brian créditos assim vai para ele.

Newsletter Signup Box Preview

Adicionando esta caixa de inscrição em criança temas Genesis é relativamente simples. Basta seguir os passos simples indicados abaixo e adicionar caixa de inscrição com aparência profissional, como mostrado na imagem acima, após as suas mensagens.

Passo 1

No WordPress Dashboard -> Aparência -> Editor -> Olhe em coluna da direita para arquivo function.php, abrir esse arquivo e adicione o seguinte código no final do mesmo.

A) Código de trechos para usuários do 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);

Nota: Não se esqueça de alterar o texto "Google / FeedburnerID" pelo seu actual Google / Feedburner ID em dois lugares.

B) Código de trechos para usuários 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);

Nota: Não se esqueça de mudar "URL ação de formulário" pelo seu MailChimp URL ação de formulário. Você vai encontrar o seu URL de ação de formulário no MailChimp -> Lists -> Por seu guia site e escolher primeira opção da lista suspensa - Formulário de Inscrição Código embutido e olhar para o seu URL de ação de formulário (<form action = "SEU Mailchimp AÇÃO URL").

Se você estiver usando AWeber ou qualquer outro serviço em seguida, basta alterar o código entre <form> </ form> marcas em conformidade.

Passo 2

Baixar a caixa de gráficos newsletter e extraí-los na pasta "/ images /" do seu tema criança Genesis. Este gráficos impressionantes criados por Brian, que acabou de adicionar um "enews-fita blue.png" imagem e mudou arquivo enews.png.

Passo 3

No WordPress Dashboard -> Aparência -> Editor -> style.css. Adicione o seguinte código e atualizar o arquivo.

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

Este CSS irá funcionar para os usuários do FeedBurner e MailChimp, se você estiver usando qualquer outro serviço, em seguida, alterar o código em conformidade, porque é difícil para nós para fornecer o código para cada serviço, pois há um número de diferentes serviços que você pode usar. Não se esqueça de alterar o nome da imagem para "enews-Ribbon.png" se você quiser usar outra imagem colorida, por exemplo enews-ribbon-Blue.png.

Se você está enfrentando qualquer dificuldade ao adicionar uma caixa de inscrição no boletim informativo, em seguida, deixe-nos saber em forma de comentários.