ジェネシスフレームワークであなたの投稿した後にニュースレターのサインアップボックスを追加する方法

それは、創世記の子テーマであなたのポストの後にニュースレターの登録ボックスを追加するのはとても簡単です。 ニュースレターの登録ボックスを追加することで、電子メールの加入者数を高めます。

A+ A-

あなたのブログには、どのように多くの電子メールの加入者を持っていますか? あなたは電子メールの加入者数を増やしたいですか? そして、なぜあなたのポストの後にニュースレターの登録ボックスを追加するには? 創世記のテーマの変更の記事を公開した後、多くの創世記のテーマユーザーは、ニュースレターの登録ボックスを追加することに関するチュートリアルを書くことを要求しました。 そこでここでは、この記事で私たちは、あなたが創世記電力供給のウェブサイトであなたのポストの後にニュースレターの登録ボックスを追加することが可能な方法を共有しましょう​​。

ブライアンガードナーがすでに同じトピックに関する記事を公開しています、彼の方法は、デフォルトの「創世記eニュースとアップデート」ウィジェットに基づいています。 そのガイドを使用して、ニュースレターの登録ボックスを実装しながら、しかし、我々はいくつかの困難に直面してきました。 ブライアンによって与えられた方法は動作しますが、主な問題は、あなたが両方の場所でニュースレターの登録ボックスを追加することはできませんです-ウィジェット領域に、ポストの下に同じCSSが両方の領域に適用されるので、ウィジェットエリアの申し込みボックスは奇妙に見えるようにします。 多くのユーザーはので、ここで私たちはあなたのポスト下のニュースレターの登録ボックスを追加するには、ここで提供される主要なサイドバーのウィジェットエリアと使用方法で、デフォルトの「創世記eニュースとアップデート」ウィジェットを追加し、それを行うための最善の方法を紹介し、両方の場所でニュースレターの登録ボックスを追加したいです。 我々の方法は異なりますがクレジットは彼に行くので、まだそれはブライアンの方法に基づいています。

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

注意:二つの場所であなたの実際のGoogle / 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(<フォームアクション= "YOUR MAILCHIMP ACTION URL")を探します。

あなたがAWeberまたは任意の他のサービスを使用している場合は、単に</フォーム>タグに応じて、<form>の間のコードを変更します。

ステップ2

ダウンロード newletterボックスグラフィックを、あなたの創世記の子のテーマの"/画像/」フォルダに解凍します。 ブライアンによって作成されたこの素晴らしいグラフィックは、私たちは一つの「eニュース - リボン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ユーザーのために動作します。 あなたは別の着色画像を使用したい場合は、「eニュース-ribbon.png」に画像の名前を変更するには、例えばeニュース - リボンblue.pngを忘れないでください。

ニュースレターの登録ボックスを追加しながら、あなたが任意の困難に直面している場合、私たちは、コメントの形で知らせてください。

Ads

シェア

最近

あなたがLinuxの恋人している場合を探すために、ベストUbuntuの代替

さんが何かに精通取得することから始めましょう。 基本的な、少しオフトラック! あなたは今までLinuxとUbuntuの...

Gmailの受信トレイに署名を追加する方法 - GmailでGoogleの署名を追加します。

Googleによる受信トレイには、Googleが過去数年間に発売された最高のものの一つでした。 これは、統一された受信...

週刊技術のニュース:ノキア、Googleと任天堂

みなさん、こんにちは、それは金曜日、3月3日だとちょうどいつものように私たちは毎週のニュースラウンドアップに戻っていま...

初心者のためのラズベリーパイプロジェクト - あなたはラズベリーパイで何ができますか

ラズベリーパイは、低消費電力、ラズベリーパイ財団が作成したシングルボードコンピュータのシリーズです。 もともと発展途上...

Androidの2017のためのベストVPN - Androidの中でVPNを使用する方法

ゴーンは、VPNはハイテクsavviesやハッカーのためだけであった時代です! そして、私たちはこれらのサービスについ...

コメント