WPテーマCocoonの「通知エリア」を「流れる文字」にする方法

　WordPress[※1]ワードプレステーマ「Cocoon[※2]コクーン」の上部にある、通知エリアをCSS[※3]シーエスエスを利用して流れる文字に変更します。

スポンサーリンク

流れる文字に変更手順

　テーマのスタイルシート(styleスタイル.css)に流れる文字用のコードを記述するため、通知エリア用コードファイル(noticeノウティス.php)にspan[※1]スパンタグを追記します。コード記述後、Cocoonの設定で流れる文字が使用できるように変更します。

通知エリアコードを編集する

①Cocoonの子テーマに「/tmpテンプ/notice.php」が存在しない場合は、子テーマディレクトリに「tmp」ディレクトリを作成して、親テーマから子テーマに「notice.php」をコピーしてください。

②先ほど作成した子テーマ内の「/tmp/notice.php」を開き、24行目にある「$msg」を「”<span>{$msg}</span>”」に書き換えて保存します。

    <div id="notice-area" class="notice-area nt-<?php echo get_notice_type(); ?>">
      <?php echo "<span>{$msg}</span>"; ?>
    </div>

テーマスタイルシートを編集する

①子テーマの「styleスタイル.css」を開き、「子テーマ用のスタイルを書く」の下あたりに下記のコードを追記します。

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* cocoon通知エリアを流れる文字に変更 */
.notice-area {
    width: 100%;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
}
.notice-area span {
    display: inline-block;
    padding-left: 100%;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
}
@keyframes marquee {
    0% {
        transform: translateX(0);
    }    
    100% {
        transform: translateX(-100%);
    }
}

Cocoonの通知設定を行う

①WordPressの管理画面左メニューの「Cocoon 設定」ボタンをクリックして、Cocoon設定ページに移動します。

②Cocoon設定ページの「通知」タブをクリックして通知エリアの設定ページに移動します。

③「通知表示」の通知エリアの表示にチェックをします。

④「通知メッセージ」に、流れる文字に表示したい文言を入力します。

⑤リンクや色の変更がしたい場合はその他の設定を行い、「変更をまとめて保存」をクリックすると設定の保存ができ、流れる文字が表示されるようになります。

流れる文字のコード解説

　「通知エリア」を「流れる文字」に変更するために使用したコードの解説を行います。

通知エリアコードの解説

テーマスタイルシートのコード解説

まとめ

　通知エリアを流れる文字にすることで、複数行必要だった長文が1行で書けるようになり、サイト説明文やお知らせなど複数のコンテンツをまとめて記載することが可能になります。
　また、CSSに記述した内容を変更することで逆向きに文字を流したり、すこしずつ速度アップするなど、お好みのデザインに変更することも可能です。