如何添加通讯注册框中输入您的帖子在创世记框架后

这真的很容易在创世纪儿童主题您的文章后添加简报注册框。 通过添加简报注册箱升压电子邮件用户数量。

A+ A-

您的博客有多少电子邮件用户拥有? 你想提高电子邮件的用户数量? 那么,为什么不给你的帖子后添加简报注册框? 创世纪发布修改主题文章后,很多创世纪主题的用户要求我们写的教程添加简报注册框。 所以在这里在这篇文章中,我们将分享的方式,通过它可以在创动力网站您的文章后添加简报注册框。

布莱恩加德纳已经发表了关于同一主题的文章,他的方法是基于默认的“创世纪电子新闻和更新”窗口小部件。 不过,虽然使用指南执行简报注册中,我们所面临的一些困难。 由Brian给定的方法工作,但主要的问题是你不能在两个地方添加简报注册箱-因为同时适用于面积相同的CSS所以在小工具区域注册框看起来很怪异的小工具区域和后下。 许多用户希望在两地添加简报注册框所以在这里我们将介绍最好的方法要做到这一点,添加默认“创世纪电子新闻和更新”在这里所提供的主要部件侧边栏面积和使用方法小部件添加到您的下方后简报注册箱。 虽然我们的方法是不同的,它仍然是基于Brian的方法,以便币转到他。

Newsletter Signup Box Preview

添加在创世记子主题此注册框是相对简单的。 只要按照下面给出的简单步骤,并添加专业外观的注册框喜欢你的帖子后显示​​在上面的图像。

步骤1

在WordPress的仪表板- >外观- >编辑- >查找到右列的function.php文件,打开该文件,并在它的末尾添加以下代码。

A)代码段为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);

注意:不要忘记更改您的实际谷歌/ Feedburner的ID“谷歌/ FeedburnerID”文本在两个地方。

B)代码段为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);

注意:不要忘记您的MailChimp表单操作URL改变“的形式操作URL”。 你会发现在你的MailChimp表单操作URL - >列表 - >为您的网站标签,然后从下拉列表中第一个选项 - 申请表单嵌入代码,查看您的表单操作URL(<形式行动=“您MAILCHIMP ACTION URL”)。

如果你正在使用AWeber或任何其他服务的话,只需要修改的<form>之间的代码</ form>标记相应。

第2步

下载的newletter盒的图形和你的孩子成因主题“/图片/”文件夹中提取它们。 由Brian创建此真棒图形,我们只是增加了一个“电子新闻 - 带状blue.png”的形象,改变enews.png文件。

步骤#3

在WordPress的仪表板 - >外观 - >编辑 - > style.css文件。 添加以下代码,并更新文件。

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

这个CSS将为FeedBurner的和MailChimp用户的工作,如果你使用的任何其他服务,相应的修改代码,因为它很难给我们每个服务提供代码,也有许多不同的服务,您可以使用。 不要忘了改变形象的名称为“电子报-ribbon.png”如果你想使用其他颜色的图像,如电子通讯,带状blue.png。

如果你面对任何困难,同时增加了简报注册框,然后让我们知道在评论形式。

Ads

分享

最近

最好的Ubuntu的替代寻找,如果你是一个Linux爱好者

首先,让我们越来越熟悉的东西; 基本的,但有点偏离轨道! 你有没有得到使用Linux和Ubuntu方面困惑? 你任何机...

如何在Gmail收件箱中添加签名 - 添加在Gmail谷歌的签名

收件箱由谷歌为谷歌的在过去几年推出的最好的事情之一。 它带入一个统一的收件箱几乎所有我们想要的一切。 我们必须说,设计...

每周科技新闻:诺基亚,谷歌和任天堂

大家好,这是星期五,3月3日,只是像往常一样,我们又回到我们的每周新闻综述。 本周的新闻有很多有趣的报道。 从诺基亚的...

树莓派项目入门 - 你可以用树莓派做些什么

树莓Pi为一系列低功耗,由莓裨基金会创建单板计算机。 最初创建教孩子们计算机科学和编程的基础知识在发展中国家中,树莓派...

Android的2017年最佳VPN - 如何使用VPN在安卓

一去不复返的VPN只为高科技,savvies和黑客的天! 而且,承认这一点,我们已经受够了易怒的演讲有关这些服务的。 ...

注释