【Cocoonカスタマイズ】ヘッダ下にカスタムウィジェットを追加して、収益UPを目指そう！

Cocoonテーマは本当に優秀なんですが、今回僕がやりたかったカスタマイズができなかったので、自分でカスタマイズして作ることにしました。

今回僕がやりたかったのは、ヘッダ下にカスタムウィジェットを追加して文字をスクロールさせてテキストをアニメーションで動かしたかったんです。

この機能は実はAffinger 5では標準で搭載されていそうな機能だったんですが、折角ならCocoonいじり倒して作ってみましょう。

完成イメージは、こんな感じです。

これでできることは、ヘッダ下にカスタムウィジェットを追加することができるので、表示のさせ方はもちろんのこと、特定のページ／投稿だけで表示させるように簡単に設定できたり、また自分でCSSデザインを作ることになるので、いくらでも見た目を修正可能になっています。

因みに実は作ってから気付いたんですが、Cocoonの標準機能でもある「通知」タブを使ってもほぼ似たようなことはできます。但し、あちらはどちらかと言えば、静的なテキストを使うということになっているので、今回僕のやりたかったこととは微妙にマッチしてくれませんでした。

具体的には通知メッセージにテキストボックス（但しhtmlタグは入力可能だが、編集後の見た目がおかしくなる時がある）だったり、通知バーの色を指定した場合にCSSがクリアされてしまったりと、設定はできるんですが、後々のメンテナンスの使い方にもう少しな部分がありました。

やり方によっては、Cocoon通知タブを使って似たようなことは設定可能です。

なので、今回のやり方は、「自分でコード(style.css, function.php)を修正してもメンテナンスできるよ（やりたい）」という方向けの方法になります。

修正方法

先ずは大まかに修正方法を書いていきます。

念のため、本カスタマイズ の前提条件として、Cocoonのテーマを使用していることと、Cocoon小テーマ は導入済みであることが条件になります。

あとはfunction.phpなどは記述方法を間違えると、Wordpressが動作しなくなってしまうかもしれないものになるので、修正の際にはバックアップはもちろんのこと、十分注意して作業してください。

Cocoon子テーマに/tmp/header-container.phpをコピーし修正

今回はヘッダ下にウィジェットを追加したいのですが、デフォルトのヘッダテンプレートでは、ここの部分にウィジェットがありません。その代わりに「通知」や「アピールエリア」があると思うのですが、今回は僕のイメージに合っていなかったので、新たに作っていきましょう。

調べたところ、Cocoonのヘッダのテンプレートは、Cocoon-Masterのフォルダの/tmp/header-container.phpにて記載がされているようでした。これを直接Cocoon親フォルダのファイルを直接修正してしまうと、今後の更新の時に折角の修正が上書きされてしまうので、先ずはこのファイルをCocoon子テーマのフォルダにコピーしましょう。

因みに子テーマ に同名のファイルがある場合には、子テーマのファイルを読み込むようにするのが、Wordpressのルールになっていますから、/tmpフォルダ内にheader-container.phpだけコピーすればOKです。

次にこのファイルを修正していきますが、外観＞テーマエディターから以下のように修正してもいいですし、直接ファイルをFTPなどを使って修正してもどちらでもOKです。

追加するのは、以下の2行だけです。追記する場所がポイントになっているので、注意して作業してくださいね。

  </div><!-- /.header-container-in -->
    //ここから
    <?php //ヘッダ下部にコードを挿入するためのアクションフック
    do_action( 'wp_header_after_open' ); ?>
    //ここまで
</div><!-- /.header-container -->

因みにはこれは、アクションフックと言って、この部分に”wp_header_after_open”というマーカーを残しているような処理になります。

次以降の処理で、このマーカーを使って具体的なコードを呼び出していくような形になります。

function.phpにアクションを追加

さて、次はfunction.phpになります。function.phpを触る際には必ずバックアップを取っておきましょうね。

同じくテーマエディタからファイルを開きます。

そして、以下をそのままコピーして貼ってください。全角スペースなどが入るとエラーになるので、注意してください。

//// ヘッダー下カスタムウィジェット
if (function_exists('register_sidebar')) {
    register_sidebar(array(
            'name' => 'ヘッダー領域追加コンテンツ',
            'id' => 'add-header-contents',
            'description' => 'ヘッダー領域に追加コンテンツを表示するウィジェットです。',
            'before_widget' => '<div class="add-header-contents">',
            'after_widget' => '</div>',
    ));
}

// ヘッダーロゴの下に出力をする
 add_filter('wp_header_after_open', 'add_header_contents');
 function add_header_contents() {
     dynamic_sidebar('add-header-contents');
 }

これで、ヘッダ下にカスタムウィジェットのエリアが追加されているはずです。

カスタムウィジェットで表示したいメッセージを追記

WordPressの管理画面でウィジェットを開いてもらうと、「ヘッダー領域追加コンテンツ」というものが追加されていることがわかると思います。

ここまでくれば、あとはテキストを書くなり、画像を貼るなりしてしまえばいいんですが、今回は「カスタムHTML」を追加して以下のように書いてみました。

リンクの部分は、自分のサイトのものに修正してくださいね。

<div class="st-marquee">
　<p><i class="fa fa-chevron-circle-right" style="color:red;"></i> 
　　　<a target="_blank" href="SITE-URL" style="color: white;text-decoration: none;">本日のAmazonタイムセールはこちら！！</a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=tkmshrtk-22&l=ur2&o=9" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
　</p>
</div>

style.cssにCSSデザインを追加

それでは最後にCSSを修正していきましょう。

修正は同じくテーマエディタ から開いていきます。

今回は、jQueryなどを使わずに全てCSSで記述するようにしています。CSS3からはCSSだけでJavascriptのような動作をしてくれるので、とても便利ですね。

テキストを右から左に流れていくようにしたいので、以下のように書いています。色やサイズ、スピードなどは適宜変えてみてください。

/**********************/
/*ヘッダ下ウィジェット　カスタマイズ*/
/**********************/
.st-marquee {
	margin : 0;
	width : 100%;
	font-size : 17px;  /*文字サイズ*/
	text-align : center;
	overflow : hidden;
	background: #4c6cb3;  /*背景色*/
}
.st-marquee p{
	margin:0;
	display : inline-block;
	padding-left: 100%;
	white-space : nowrap;
	line-height : 1em;
	animation : scrollst-marquee 20s linear infinite;  /*流れるスピード*/
}
@keyframes scrollst-marquee{
	0% { transform: translateX(0)}
	100% { transform: translateX(-100%)}
}

これで完成になります。

如何でしたか？無事に上手くいっていれば、このサイトでの表記のようにテキストが流れていってくれていると思います。

物販が多いサイトであれば、Amazonアソシエイト などのコードを付ければ収益UPを見込めそうですね。人間は本能的に動いているものを無意識に目で追ってしまう傾向があるそうです。なので、セール情報や、オススメしたい情報などをここに入れておくだけで、あたなのサイトの収益UP効果が狙えるかもしれませんね。