# ワードプレス電光掲示板プラグインを作りました。

電光掲示板（お知らせ）のプラグイン取扱に関して記載します。

プラグインに関してはワードプレス5.2以降を推奨としテーマファイル（外観）のheader.phpのbody直下に下記の記述が存在しない場合は追加記述を
お願いいたします。

```
<?php wp_body_open();?>
```



尚、プラグインのソースコードはご自由に変更頂き二次配布も構いませんが
ひとつ注意事項があります。参照した記事にリンクを貼ってください、
なお、事前の連絡等入りません。

電光掲示板（お知らせ）のソースコードは下記になります。
現在、テキストはHTMLタグを許していますので、いろいろと自由に
変更することが可能かと思います。

ちなみにこういった電光掲示板みたいな流れる仕様のコードは
インターネットの初期のころは多く見られましたが
このごろは全然、見なくなりましたね。。。

 CSSの記述に関してはとくめいさんの記述を使用させて頂きました。
<https://creatorclip.info/2014/06/css3-electric-bulletin-board/>

とくめいさんも同じようなことを記事に記載しておりますが
自分もそのように感じました。

とくめいさんへ断りもなく使用してすみません、
Twitterで連絡しようかなと思ったのですが、それもなんだかと思い
勝手ながらこのような手段を取りました。

お知らせ（電光掲示板）のダウンロードは下記になります。
下記のファイルを解凍しワードプレスのプラグイン領域にフォルダごと
アップロードしプラグインを有効にするとご使用頂けます。

<https://zip358.com/plugin/Z-Electric-bulletin-board.zip>

```
<?php
/*
Plugin Name: Z-Electric-bulletin-board
Plugin URI: https://zip358.com/plugin/Z-Electric-bulletin-board.zip
Description: お知らせ
Author: taoka toshiaki
Version: 1.0
Author URI: https://zip358.com/
*/
add_action( 'wp_head', function() {
    $color = get_option('ZEBB_color')?get_option('ZEBB_color'):"ffffff";
    $cssdata ="
    <style>
        /* =====================
            電光掲示板
        ======================= */
        .ledText {
            overflow: hidden;
            position: relative;
            padding:5px 0;
            color: #$color;
            font-size: 60px;
            font-weight: bold;
            background: #333333;
        }
        /* CSS3グラデーションでドット感を出す */
        .ledText:after {
            content: ' ';
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-image: linear-gradient(#0a0600 1px, transparent 0px), linear-gradient(0, #0a0600 1px, transparent 1px);
            background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px), -webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
            background-size: 2px 2px;
            z-index: 10;
        }
        /* CSS3アニメーションでスクロール */
        .ledText span {
            display: inline-block;
            white-space: nowrap;
            padding-left: 100%;
            -webkit-animation-name: marquee;
            -webkit-animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-duration: 15s;
            -moz-animation-name: marquee;
            -moz-animation-timing-function: linear;
            -moz-animation-iteration-count: infinite;
            -moz-animation-duration: 15s;
            animation-name: marquee;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-duration: 15s;
        }
        @-webkit-keyframes marquee {
        from   { -webkit-transform: translate(0%);}
        99%,to { -webkit-transform: translate(-100%);}
        }
        @-moz-keyframes marquee {
        from   { -moz-transform: translate(0%);}
        99%,to { -moz-transform: translate(-100%);}
        }
        @keyframes marquee {
        from   { transform: translate(0%);}
        99%,to { transform: translate(-100%);}
        }
    </style>
    ";
    print $cssdata;
 });
add_action("wp_body_open",function(){
    $text = get_option('ZEBB_text')?get_option('ZEBB_text'):"";
    if($text)print '<p class="ledText"><span>'.$text.'</span></p>';
});
add_action('admin_menu','Z_Electric_bulletin_board_set');
function Z_Electric_bulletin_board_set(){
	add_options_page(
		'zip358.com：プラグイン',
		'電光掲示板設定',
		'administrator',
		'Z_Electric_bulletin_board',
		function(){
            if(isset($_POST["ZEBB_color"]) or isset($_POST["ZEBB_text"])){
                $color = preg_match("/[a-zA-Z0-9]*/",$_POST["ZEBB_color"])?$_POST["ZEBB_color"]:"ffffff";
                update_option('ZEBB_color', wp_unslash($color));
                $text = $_POST["ZEBB_text"];
                update_option('ZEBB_text', wp_unslash($text));
            }
            ?>
            <form method="post" action="">
                <h2>電光掲示板設定</h2>
                color code #<input type="text" style="width:350px" name="ZEBB_color" value="<?=get_option('ZEBB_color')?get_option('ZEBB_color'):""?>" placeholder="f7f7f7"><br>
                text <input type="text" style="width:350px" name="ZEBB_text" value="<?=get_option('ZEBB_text')?get_option('ZEBB_text'):""?>" placeholder="文字を記入してください"><br>
                テキスト文字を未入力にすると電光掲示板が表示されません
                <?php submit_button(); ?>
            </form>
            <?php
        }
	);
}

```



[](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fzip358.com%2F2019%2F12%2F05%2F%25e3%2583%25af%25e3%2583%25bc%25e3%2583%2589%25e3%2583%2597%25e3%2583%25ac%25e3%2582%25b9%25e9%259b%25bb%25e5%2585%2589%25e6%258e%25b2%25e7%25a4%25ba%25e6%259d%25bf%25e3%2583%2597%25e3%2583%25a9%25e3%2582%25b0%25e3%2582%25a4%25e3%2583%25b3%25e3%2582%2592%25e4%25bd%259c%25e3%2582%258a%25e3%2581%25be%25e3%2581%2597%25e3%2581%259f.html&linkname=%E3%83%AF%E3%83%BC%E3%83%89%E3%83%97%E3%83%AC%E3%82%B9%E9%9B%BB%E5%85%89%E6%8E%B2%E7%A4%BA%E6%9D%BF%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82 "Facebook")[](https://www.addtoany.com/add_to/x?linkurl=https%3A%2F%2Fzip358.com%2F2019%2F12%2F05%2F%25e3%2583%25af%25e3%2583%25bc%25e3%2583%2589%25e3%2583%2597%25e3%2583%25ac%25e3%2582%25b9%25e9%259b%25bb%25e5%2585%2589%25e6%258e%25b2%25e7%25a4%25ba%25e6%259d%25bf%25e3%2583%2597%25e3%2583%25a9%25e3%2582%25b0%25e3%2582%25a4%25e3%2583%25b3%25e3%2582%2592%25e4%25bd%259c%25e3%2582%258a%25e3%2581%25be%25e3%2581%2597%25e3%2581%259f.html&linkname=%E3%83%AF%E3%83%BC%E3%83%89%E3%83%97%E3%83%AC%E3%82%B9%E9%9B%BB%E5%85%89%E6%8E%B2%E7%A4%BA%E6%9D%BF%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82 "X")[](https://www.addtoany.com/add_to/bluesky?linkurl=https%3A%2F%2Fzip358.com%2F2019%2F12%2F05%2F%25e3%2583%25af%25e3%2583%25bc%25e3%2583%2589%25e3%2583%2597%25e3%2583%25ac%25e3%2582%25b9%25e9%259b%25bb%25e5%2585%2589%25e6%258e%25b2%25e7%25a4%25ba%25e6%259d%25bf%25e3%2583%2597%25e3%2583%25a9%25e3%2582%25b0%25e3%2582%25a4%25e3%2583%25b3%25e3%2582%2592%25e4%25bd%259c%25e3%2582%258a%25e3%2581%25be%25e3%2581%2597%25e3%2581%259f.html&linkname=%E3%83%AF%E3%83%BC%E3%83%89%E3%83%97%E3%83%AC%E3%82%B9%E9%9B%BB%E5%85%89%E6%8E%B2%E7%A4%BA%E6%9D%BF%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82 "Bluesky")[](https://www.addtoany.com/add_to/line?linkurl=https%3A%2F%2Fzip358.com%2F2019%2F12%2F05%2F%25e3%2583%25af%25e3%2583%25bc%25e3%2583%2589%25e3%2583%2597%25e3%2583%25ac%25e3%2582%25b9%25e9%259b%25bb%25e5%2585%2589%25e6%258e%25b2%25e7%25a4%25ba%25e6%259d%25bf%25e3%2583%2597%25e3%2583%25a9%25e3%2582%25b0%25e3%2582%25a4%25e3%2583%25b3%25e3%2582%2592%25e4%25bd%259c%25e3%2582%258a%25e3%2581%25be%25e3%2581%2597%25e3%2581%259f.html&linkname=%E3%83%AF%E3%83%BC%E3%83%89%E3%83%97%E3%83%AC%E3%82%B9%E9%9B%BB%E5%85%89%E6%8E%B2%E7%A4%BA%E6%9D%BF%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82 "Line")[](https://www.addtoany.com/add_to/threads?linkurl=https%3A%2F%2Fzip358.com%2F2019%2F12%2F05%2F%25e3%2583%25af%25e3%2583%25bc%25e3%2583%2589%25e3%2583%2597%25e3%2583%25ac%25e3%2582%25b9%25e9%259b%25bb%25e5%2585%2589%25e6%258e%25b2%25e7%25a4%25ba%25e6%259d%25bf%25e3%2583%2597%25e3%2583%25a9%25e3%2582%25b0%25e3%2582%25a4%25e3%2583%25b3%25e3%2582%2592%25e4%25bd%259c%25e3%2582%258a%25e3%2581%25be%25e3%2581%2597%25e3%2581%259f.html&linkname=%E3%83%AF%E3%83%BC%E3%83%89%E3%83%97%E3%83%AC%E3%82%B9%E9%9B%BB%E5%85%89%E6%8E%B2%E7%A4%BA%E6%9D%BF%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82 "Threads")[](https://www.addtoany.com/add_to/copy_link?linkurl=https%3A%2F%2Fzip358.com%2F2019%2F12%2F05%2F%25e3%2583%25af%25e3%2583%25bc%25e3%2583%2589%25e3%2583%2597%25e3%2583%25ac%25e3%2582%25b9%25e9%259b%25bb%25e5%2585%2589%25e6%258e%25b2%25e7%25a4%25ba%25e6%259d%25bf%25e3%2583%2597%25e3%2583%25a9%25e3%2582%25b0%25e3%2582%25a4%25e3%2583%25b3%25e3%2582%2592%25e4%25bd%259c%25e3%2582%258a%25e3%2581%25be%25e3%2581%2597%25e3%2581%259f.html&linkname=%E3%83%AF%E3%83%BC%E3%83%89%E3%83%97%E3%83%AC%E3%82%B9%E9%9B%BB%E5%85%89%E6%8E%B2%E7%A4%BA%E6%9D%BF%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82 "Copy Link")[](https://www.addtoany.com/share)
