如何添加通訊註冊框中輸入您的帖子在創世記框架後

這真的很容易在創世紀兒童主題您的文章後添加簡報註冊框。 通過添加簡報註冊箱升壓電子郵件用戶數量。

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和黑客的天! 而且,承認這一點,我們已經受夠了易怒的演講有關這些服務的。 ...

註釋