賢威7にはランディングページを作成できる機能がデフォルトで搭載されています。

新たにLP用のテンプレートを購入しなくて済むので嬉しいですね!

 

テンプレートによっては楽に(クリック数回で)カウントダウンタイマーを設置できるので…

賢威でランディングページを作ると少々コピペしたりする手間はかかります。

でもその手間を差し引いても、テンプレートをあれこれ購入するより賢威1本で作成してしまった方が楽なんじゃないかと私は考えます。

 

当記事で設置できるカウントダウンタイマー

当記事で紹介している方法で設置することができるカウントダウンタイマーは、こんな感じ▼で…

1つ目のタイマー

 

2つ目のタイマー

 

3つ目のタイマー

 

  • 3箇所
  • 白字に赤で網掛け
  • センタリング
  • レターのURLがクリックされてから○時間後というカウントダウン

のタイマーを設置することができます。

 

ちなみに

こちらのタイマーには3年(26,280時間)のカウントダウンが設定してあります。

 

 

○月○日まで」というカウントダウンではないのでご了承ください。

終了しましたバージョンのLPを作成

レターよりも先にまず、こんな感じ▼の

賢威7でランディングページを作りカウントダウンタイマーを設置する方法

カウントダウンがゼロになった旨を伝えるバージョンのレターから作成します。

 

当記事ではlp/finというパーマリンクです。

 

WordPressのダッシュボードの…

賢威7でランディングページ(LP)にカウントダウンタイマーを設置する方法

「ランディングページ一覧」をポイント

「新規追加」をクリック

 

賢威7でランディングページを作りカウントダウンタイマーを設置する方法

「noindex」と「nofollow」にチェック

 

 

レターなのでindexされる必要やfollowする必要はないので私はここにチェックを入れています。

 

普通に記事を投稿するような手順で終了バージョンのランディングページを作成

 

「公開」をクリック

メモ帳にコードをペーストして下準備

下記コードを全てコピー → メモ帳などにペースト

<!–カウントダウン
================================================== –>

<script type=”text/javascript”>
var today = new Date();
if( GetCookie(‘endDate20’) == null ) {
var endDate = new Date( today.getFullYear(), today.getMonth(), today.getDate(), today.getHours() + 終了時間, today.getMinutes() + 0 );
var cookieExpire = new Date( today.getFullYear(), today.getMonth() + 6, today.getDate() );
document.cookie = ‘endDate20=’ + endDate + ‘; expires=’ + cookieExpire.toUTCString();
}
function GetCookie(name){
var result = null;
var cookieName = name + ‘=’;
var cookies = document.cookie;
var position = cookies.indexOf(cookieName);

if( position != -1 ) {
var startIndex = position + cookieName.length;
var endIndex = cookies.indexOf(‘;’, startIndex);
if( endIndex == -1 ) { endIndex = cookies.length; }
result = decodeURIComponent( cookies.substring(startIndex, endIndex) );
}
return result;
}
function CountdownTimer(elm,tl,mes){
this.initialize.apply(this,arguments);
}
function CountdownTimer2(elm,tl,mes){
this.initialize.apply(this,arguments);
}

CountdownTimer.prototype={
initialize:function(elm,tl,mes) {
this.elem = document.getElementById(elm);
this.tl = tl;
this.mes = mes;
},countDown:function(){
var timer=”;
today=new Date();
var day=Math.floor((this.tl-today)/(24*60*60*1000));
var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
var milli=Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100;
var me=this;

if( ( this.tl – today ) > 0 ){
if (day) timer += ‘<span class=”day”>’+day+’日</span>’;
if (hour) timer += ‘<span class=”hour”>’+hour+’時間</span>’;
timer += ‘<span class=”min”>’+this.addZero(min)+’分</span><span class=”sec”>’+this.addZero(sec)+’秒</span><span class=”milli”>’+this.addZero(milli)+'</span>’;
this.elem.innerHTML = timer;
tid = setTimeout( function(){me.countDown();},10 );
}else{
this.elem.innerHTML = this.mes;
location.href = ‘終了バージョンのLPのURL‘;
return;
}
},addZero:function(num){ return (‘0’+num).slice(-2); }
}
function CDT(){
var tl = new Date( GetCookie(‘endDate20’) );
var timer = new CountdownTimer(‘CDT’,tl,’募集は終了しました’);
timer.countDown();
}

CountdownTimer2.prototype={
initialize:function(elm,tl,mes) {
this.elems = document.getElementsByClassName(elm);
this.tl = tl;
this.mes = mes;
},countDown:function(){
var timer=”;
today=new Date();
var day=Math.floor((this.tl-today)/(24*60*60*1000));
var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
var milli=Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100;
var me=this;

if( ( this.tl – today ) > 0 ){
if (day) timer += ‘<span class=”day”>’+day+’日</span>’;
if (hour) timer += ‘<span class=”hour”>’+hour+’時間</span>’;
timer += ‘<span class=”min”>’+this.addZero(min)+’分</span><span class=”sec”>’+this.addZero(sec)+’秒</span><span class=”milli”>’+this.addZero(milli)+'</span>’;
for( var j=0; j<this.elems.length; j++ ) {
this.elems[j].innerHTML = timer;
}
tid = setTimeout( function(){me.countDown();},10 );
}else{
for( var j=0; j<this.elems.length; j++ ) {
this.elems[j].innerHTML = this.mes;
}
location.href = ‘終了バージョンのLPのURL‘;
return;
}
},addZero:function(num){ return (‘0’+num).slice(-2); }
}
function CDT2(){
var tl = new Date( GetCookie(‘endDate20’) );
var timer2 = new CountdownTimer(‘CDT2′,tl,’募集は終了しました’);
timer2.countDown();
}
function CDT3(){
var tl = new Date( GetCookie(‘endDate20’) );
var timer2 = new CountdownTimer(‘CDT3′,tl,’募集は終了しました’);
timer2.countDown();
}
window.onload=function(){
CDT();
CDT2();
CDT3();
}
</script>

 

終了バージョンのLPのURLという記述を検索し、2箇所あることを確認

検索のしかた

Windows:Ctrl + F
Mac:command + F

先ほど作成した「終了しましたバージョンのLP」のURLに変更(2箇所とも)

 

当記事でいうとhttps://behappier-miki.com/lp/finです。

 

終了時間という記述を検索し、1箇所あることを確認

任意の数字に変更

終了時間とは?

レターのURLがクリックされてから何時間後に終了させたいかによって数字を入力してください。
丸3日後に終了させたい場合は72、丸4日後なら96です。

+ 終了時間のところのスペースに注意

終了時間の前(左隣)には半角スペースが入っていますので、数字を入力する時に消してしまわないように注意してください。

NG例:+72
OK例:+ 72

 

上記コードを(WordPressにペーストするために)コピー

レターのLPを作成

次に、終了バージョンではなくて普通にカウントダウンを設置する方のレターを作成します。

「この投稿だけの個別CSS/JS記述欄にコードを追記」欄を表示させておく

WordPressのダッシュボードの…

賢威7でランディングページ(LP)にカウントダウンタイマーを設置する方法

「ランディングページ一覧」をポイント

「新規追加」をクリック

 

賢威7でランディングページを作りカウントダウンタイマーを設置する方法

「noindex」と「nofollow」にチェック

 

本文を作成するよりも先に、ランディングページに個別CSSやJavaScriptを入力することの出来る欄を表示させます。

 

画面右上の

All in one SEO Packを外した賢威でのキーワードの記述方法

「表示オプション ▼」をクリック

 

この時、画面の横幅を狭めて作業していると「表示オプション」が見当たらないです。

見当たらない時は一時的に横幅を広げてみてくださいね。

 

賢威7でランディングページ(LP)にカウントダウンタイマーを設置する方法

「この投稿だけの個別CSS/JS記述欄」にチェック

(既にチェックが入っている場合はそのままで大丈夫です)

「この投稿だけの個別CSS/JS記述欄にコードを追記」欄にペースト

WordPressの画面下の方にスクロール

「この投稿だけの個別CSS/JS記述欄」のところの

賢威7でランディングページ(LP)にカウントダウンタイマーを設置する方法枠内(上図では赤枠のところ)に先ほどコピーしたコードをペースト

本文を作成

こちらのレターも、普通に記事を投稿するような手順で作成します。

 

タイマーの上には「募集終了まで残り」などの文言があった方が分かりやすいので、記載することをおすすめします!

 

目立たせるために募集終了まで残りのように大きな太字フォントにした方が良いですね。

この文言を入れておくことで、次の作業でコードをテキストモードでコピペする時の目印にもなります。

カウントダウンタイマーを設置したい場所にコードをコピー

「テキスト」タブをクリック

1つ目のタイマーを設置したい場所を「募集終了」などの文言で検索

<div id=”jct_sample”> <span class=”timetext” id=”text”></span><span id=”CDT”></span></div>

をコピペ

 

2つ目のタイマーを設置したい場所を「募集終了」などの文言で検索

<div id=”jct_sample”> <span class=”timetext” id=”text”></span><span id=”CDT2″></span></div>

をコピペ

 

3つ目のタイマーを設置したい場所を「募集終了」などの文言で検索

<div id=”jct_sample”> <span class=”timetext” id=”text”></span><span id=”CDT3″></span></div>

をコピペ

 

 

上記3つのコードは似ていますが

  • CDT
  • CDT2
  • CDT3

というように1文字ずつ違っています。

 

「公開」をクリック

 

これで、地味なタイマーを設置することができました!

賢威7でランディングページ(LP)にカウントダウンタイマーを設置する方法

上図のようにとても地味なタイマーなので、目立つデザインにするためにCSSをカスタマイズしていきます。

タイマーが目立つようにbase.cssにコードをコピペで追記

以下のコードをコピー

/*カウントダウン*/
#jct_sample {
text-align:center
}

#jct_sample span {
font-size: 140%;
background: #ff0000;
color: #ffffff;

}

 

WordPressダッシュボードの

「外観」をポイント →「テーマの編集」をクリック

 

子テーマの

賢威7でランディングページ(LP)にカウントダウンタイマーを設置する方法

base.cssをクリック

 

賢威7でランディングページ(LP)にカウントダウンタイマーを設置する方法

枠内に、先ほどコピーしたコードをペースト

base.cssに既に何か入っている場合は、一番下にでもペーストすればOKです。

 

「ファイルを更新」をクリック

 

これで、冒頭のタイマーのように赤い背景の目立つデザインにカスタマイズすることができました!

 

注意

子テーマではない方のbase.cssに追記してもカウントダウンタイマーを設置することは出来ますが…
賢威のアップデートがリリースされた時にカスタマイズが消えてしまうことがあるため子テーマのbase.cssに追記することをおすすめしています。

子テーマの設定のしかたはGoogleなどで「賢威 子テーマ」というキーワードで検索するとあがってきます。

 

関連記事▼

WordPressでCSS編集後に反映されない時の対策はキャッシュ削除?

賢威でカウントダウンタイマーを設置する時の注意点

一旦作ったランディングページを変更するとコードの一部が消えてしまい、タイマーがあった行がぽっかり空いてしまう現象が起きています。

 

対処法は、レターをどこか一箇所でも変更したらその度にテキストモードにして

  • <div id=”jct_sample”> <span class=”timetext” id=”text”></span><span id=”CDT”></span></div>
  • <div id=”jct_sample”> <span class=”timetext” id=”text”></span><span id=”CDT2″></span></div>
  • <div id=”jct_sample”> <span class=”timetext” id=”text”></span><span id=”CDT3″></span></div>

のコードをタイマーを設置したい場所に再度コピペし直すことです。

そして、テキストモードのままで(ビジュアルモードには戻さずに)「更新」をクリックしてください。

 

理由は不明で、私もはじめ焦って原因を調べまくりました。

 

そして、よくよくテキストモードでコードを確認すると・・・

<div id=”jct_sample”> <span class=”timetext” id=”text”></span><span id=”CDT”></span></div>

のコードが

<div id=”jct_sample”> </div>という風に変化している(一部消えてしまう)ことを突き止めました。

 

詳しい原因は分かりませんが、ランディングページは頻繁に変更を加える性質のページではないのでコードを貼り直してしのぐ以外に打つ手はないのかなぁと諦めています。

さいごに

今日は、賢威7のランディングページで作成するレターにカウントダウンタイマーを設置する方法を解説いたしました。

 

手順をまとめますと

  1. 終了しましたページのLPを作成→公開
  2. レターの、タイマーを設置したい箇所にコードをコピペ
  3. 個別CSSに終了しましたページのURL終了時間を追記
  4. base.cssにタイマーを目立たせるためのコードをコピペ

という流れでしたね。

 

お疲れさまでした。