WordPressテーマCocoonではメインエリアの上に、ページに訪れた人への通知メッセージが設定で置けます。
記事で設定したカテゴリ毎、または記事毎によって『お知らせしたいコメント』を変えたら、より訪れたユーザーさんにメッセージが届きやすい！と、思いませんか？
子テーマ内tmp-userフォルダよりmain-before.phpで分岐してメッセージを変更するだけでOK！
- 記事・カテゴリ毎に訪れるユーザー層が全く違う
- 届けたいメッセージは記事やカテゴリによって違う
- メッセージからおすすめページへの誘導も
- 親しみを持ってもらえる内容を置けるなど…
- 目を止めた人はメッセージを読むのでその間にad読み込みも行える
2015年くらいに別テーマで実装したんですが、トップ固定ページのみ表示する方法でした。
LINKコピペでカスタマイズ！ブログに「お知らせ」を置いてユーザーに近況情報を伝えよう
今回は任意のページを指定し、Cocoon・Simplicityにあるmain-before.phpに表示したいメッセージをドンドン書きます。変更したい初心者さん向けに詳細な方法を紹介します！
はじめに。カスタマイズの流れ
カスタマイズの流れは、PHPファイルにWordPress分岐タグを使い『記事毎』『記事に付けたカテゴリごと』に付けられたIDを指定し各メッセージを表示する、こんな感じ。
ちょっとだけ詳細な方法は以下の通り。
- 記事上に表示したい『メッセージの出力したい範囲』を考える
- 記事ID・カテゴリIDをチェック
- main-before.phpに出力したい内容と記事ID・カテゴリID指定
- Cocoon設定の通知タブ、『通知エリアの表示』のチェックを外す
- PHPを更新後、出力されたメッセージを確認
PHPで分岐するので、メッセージを出力したい『範囲を考える』だけっちゃーだけです。
- もしAカテゴリのときは、Xのメッセージを。
- もしAカテゴリにある記事BとCだけ別メッセージにしたい
分岐するPHPの書きかたは以下ページをチェックしてください。
メッセージを囲むHTMLタグ・内容について
メーセージ欄が装飾されているのは、Cocoon側ですでにHTMLタグが用意されスタイルが付けられているからです。
そのタグを有効活用して記事・カテゴリ毎に内容を変えれば簡単！
デフォルトHTMLタグコピペver1、メッセージ表示の様子
以下HTMLタグでメッセージを表示
<div class="notice-area notice-area nt-notice">ここにメッセージ</div>
このHTMLでメッセージが長いときは以下。
メッセージが長いとき
PCビュー大画面、画面いっぱいメッセージ
PCビューでmainとsideの幅より大きな画面のとき、メッセージが画面いっぱいに広がります。読むのに首を動かすレベルで見にくい
パンくずリストの位置について
『Cocoon設定』『投稿』より『メインカラム手前』に設定した表示です。
メッセージエリア内、コメント領域アリ、タグのコピペVer2
HTMLタグを追加して装飾した例
mainとsideの幅と同じにするにはタグをもう1つ付け、mainとsideと同じ幅でメッセージが表示した例です。
HTMLタグ。
<div class="notice-area notice-area nt-notice"> <div class="notice-ele">ここにメッセージ</div> </div>
前述スタイルorこのスタイル（HTMLタグをコピペし）どちらかを採用してくださいね。
コメント領域のHTMLタグを装飾
HTMLタグを入れただけで画像のような表示にならないので、装飾します。
.notice-ele {
width: 1054px;
max-width: 100%;
margin: auto;
padding: 5px;
}
これで私の環境ではキレイに表示されます。width横幅を自分仕様に変更したい場合、mainとsidebarと余白を足せばOK！
Cocoon設定にあるカラムタブを開いて、メインの領域の幅・コンテンツ両サイドの余白など…足した数値。
領域の幅・余白の数値を変更できるテーマだから❦
または、要素の検証画面で<div id="content-in" class="content-in wrap cf">の幅をチェックする。
領域の横幅を検証画面でチェック！
メッセージに装飾やリンクを、楽に付ける方法
『カテゴリ分けした記事』毎に全てに同じメッセージを付けたい。とか『該当記事だけ』別メッセージを…。などあるかと思います。
メッセージにaタグでリンクをつけたり、太字・赤字など装飾を付ける事と見やすくなったり、気付いた人がリンクを踏むのでオススメです。
ビジュアルエディタでメッセージ作成
HTML手書きするのも面倒なのでビジュアルエディタの機能を使ってタグを入れ
テキストエディタで完成をコピー
テキストエディタでコピーすれば楽になります。
もし段落が必要なら<p>メッセージ段落</p>を、改行が欲しい場合は以下のように<br>を付けて、ここにメッセージ部分にペーストすればOK＾＾
子どもの誕生日・入園・入学祝いのプレゼントは、どうせなら<a href="url" target="_blank">知育玩具</a>か思い出に残る<a href="URL" target="_blank">サプライズグッズ</a>がオススメ！<br>
楽しみながら文字・英数字を覚えていたり、遊びながら体力もつき、大きくなったとき思い出にもなるので＾＾
<div class="notice-area notice-area nt-notice"> <div class="notice-ele">ここ：メッセージ貼り付け場所</div> </div>
上記を貼り付けたら以下のような表示になります。※CSSで装飾をプチ変更
完成イメージ子供の誕生日サプライズ：リンク先
main-before.phpに書く
PHPファイルに書く内容の一例として私専用のコードを一部紹介しますね。
<?php // カテゴリCocoon
// カテゴリIDが107で投稿ページで、さらにカテゴリ107の一覧ページに出力
if ( in_category( 107 ) && is_single() || is_category( 107 )) { ?>
<div class="notice-area notice-area nt-notice"><div class="notice-ele">
<div>Cocoonユーザーさんに</div>
やりたいカスタマイズがあれば、<a href="https://bibabosi-rizumu.com/contact-form/" target="_blank">お問い合わせ</a>よりお待ちしてます。
<br>または検索窓に『Cocoon ○○ カスタマイズ』など入力してください。
</div></div>
<?php } ?>
PHPで分岐してWordPress機能で付けられた記事ID・カテゴリIDを付ける必要があるので、以下リンク先をチェックしてください。
LINK複数カテゴリ・記事のPHP条件分岐！WordPress分岐タグif文・条件式の書きかた
リンク先のHTMLを出力する箇所に、上でコピペしたHTMLタグをに貼り付けたものを、main-before.phpにコピペすればOK！
更新すればスグ反映するので、冒頭どおり『Cocoon設定』よりの『通知』、『通知エリアの表示』のチェックを外し、PHPファイルを更新すれば2つ表示される事はありません。
さいごに
キチンと反映しているかサイト上を確認すれば完成！
ユーザーさんはどんな気持ちで訪問したかを考え、どんなメッセージを送ろかなぁ…❦とイメージを膨らませて考えるのも楽しくなりますよ。
1つやると色んなページのメッセージを変更したくなってやってみました。全ての人がチェックしなくても、目に留まる人はいるはずですので、オススメ記事紹介やプチ情報を楽しみながら書いてくださいね＾＾
結局…Cocoon機能、使ってなくない？？
そう見える？
HTML・CSSはCocoon標準装備だもん❦
だから使ってるよっ＾＾
それはさておき…。では、かうたっくでした！
Comments