Cocoonユーザーさんに
やりたいカスタマイズがあれば、お問い合わせよりお待ちしてます。
または検索窓に『Cocoon ○○ カスタマイズ』など入力してください。

Cocoon、main上『通知メッセージ』をカテゴリ・ページ毎に変更するカスタマイズ!HTML編

スポンサーリンク

Cocoon通知エリアをカテゴリ・記事毎に表示切替

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の書きかたは以下ページをチェックしてください。

LINK複数カテゴリ・記事のPHP条件分岐!WordPress分岐タグif文・条件式の書きかた

記事・カテゴリ毎に表示変更するので、リンク先:PHPカスタマイズは必須

メッセージを囲むHTMLタグ・内容について

メーセージ欄が装飾されているのは、Cocoon側ですでにHTMLタグが用意されスタイルが付けられているからです。

そのタグを有効活用して記事・カテゴリ毎に内容を変えれば簡単!

HTMLタグは2バージョン用意したので、好きなほうをコピペして使いまわしてください。

デフォルト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!

ローカル環境で一度試すのがベスト。サーバー上にあるFTPを使って編集!これオススメ。ない場合はFTPソフトでアップロードでもOK!念のためバックアップと復元準備してくださいね。

更新すればスグ反映するので、冒頭どおり『Cocoon設定』よりの『通知』、『通知エリアの表示』のチェックを外し、PHPファイルを更新すれば2つ表示される事はありません。

さいごに

キチンと反映しているかサイト上を確認すれば完成!

ユーザーさんはどんな気持ちで訪問したかを考え、どんなメッセージを送ろかなぁ…❦とイメージを膨らませて考えるのも楽しくなりますよ。

1つやると色んなページのメッセージを変更したくなってやってみました。全ての人がチェックしなくても、目に留まる人はいるはずですので、オススメ記事紹介プチ情報を楽しみながら書いてくださいね^^

説明ぼうや
説明ぼうや

結局…Cocoon機能、使ってなくない??

かうたっく
かうたっく

そう見える?
HTML・CSSはCocoon標準装備だもん❦
だから使ってるよっ^^

それはさておき…。では、かうたっくでした!

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る