PHP

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

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

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

<?php wp_body_open();?>

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

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

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

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

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

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

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

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

<?php
/*
Plugin Name: Z-Electric-bulletin-board
Plugin URI: https://www.zip358.com/plugin/Z-Electric-bulletin-board.zip
Description: お知らせ
Author: taoka toshiaki
Version: 1.0
Author URI: https://www.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            
        }
	);
}


The following two tabs change content below.
zip358と申します。 まったりWEB日誌を更新している中の人です? 趣味は映画鑑賞とブログ書きです、 こちらで生活できるようになるのが目標です。 ブックマークやシェアして頂けると励みになります。 どうぞよろしくお願い致します。

関連記事

  1. 雑記

    難しいの基準(プログラム初心者へ)

    難しいの基準、プログラムが難しいと思っている人がいますがそん…

  2. 雑記

    【#映画 #きっと星 】きっと、星のせいじゃない。観に行ってきました。

    きっと、星のせいじゃない。っていう映画を観に行ってきました。結論から…

  3. 雑記

    見る春ドラマ:Dr倫太郎と戦う!書店ガール。

    久しぶりに見てみたいドラマが始まります。「Dr.倫太…

  4. 雑記

    新人研修なんてものは無かった。

    二日目、新人研修でもしてくれるのかなと思っていた自分の期待はあっさ…

  5. 雑記

    なんちゃってIT戦記(新人編:フィクション)をはじめました(*ノω・*)テヘ

    小さなIT会社へ就職した。なんちゃって君の物語を今日から書きはじめま…

  6. 雑記

    やっぱりChromeなんだなぁ・・・いまのブラウザ1位は。

    いまのブラウザの覇王はGoogle Chromeなんだなぁとネット…

2019年12月
 12
3456789
10111213141516
17181920212223
24252627282930

アクセスカウンター😅

とある高知県の気温や湿度

Twitter でフォロー

PAGE TOP