<link rel="stylesheet" href="examplestyle.css">

<span id="site_description"></span>

let htmlcode = ["#efefef", "#181B39", "#262a2e", "#192734", "#1c483b", "#bf7800", "#83094f"].map(elm => `<span class='color_code' style='color:${elm}' data-color-code='${elm}'>■</span>`).join("\n");

const basecolor = "#262a2e";
let cookiefn = function (CodeColor) {
    let r = document.cookie.split(';');
    return r.length ? ((r) => {
        let changecolor = "";
        for (let ii = 0; ii < r.length; ii++) {
            let content = r[ii].split('=');
            for (let i = 0; i < content.length; i++) {
                if (content[i].replaceAll(" ", "") === "bgcolor_code") {
                    changecolor = content[i + 1];
                }
            }
        }
        return changecolor?changecolor:CodeColor;
    })(r) : CodeColor;
};

let old_color = cookiefn(basecolor);
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
[...document.querySelectorAll(".color_code")].forEach(elm => {
    elm.addEventListener("click", function (e) {
        color_set(elm.getAttribute("data-color-code"));
    });
});

color_set(old_color);

function color_set(color) {
    for (let ii = 0; ii < document.styleSheets.length; ii++) {
        if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
            for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
                let element_css_code = document.styleSheets[ii].cssRules[i];
                try {
                    element_css_code.style.backgroundColor = color;
                    if (color === "#efefef") {
                        element_css_code.style.color = "#000000";
                        
                    } else {
                        element_css_code.style.color = "#FFFFFF";
                    }
//いらないかも領域🤔👇
                    document.querySelectorAll("#wp-calendar > tbody > tr > td > a").forEach(elm=>{
                        elm.style.backgroundColor = "#909091";
                    });
                    document.getElementById("searchsubmit").style.backgroundColor = "#000";
                    document.querySelector("#s").style.backgroundColor = "#909091";
                    [...document.querySelectorAll("code")].forEach(elm=>{
                        [...elm.querySelectorAll("span")].forEach(childen_elm=>{
                            childen_elm.style.backgroundColor = "#565656";
                        });
                    });
//いらないかも領域🤔👆                    
                } catch (error) {
                }
            }

            document.cookie = "bgcolor_code=" + color;
        }
    }
}

let circle = document.getElementById("circle");
document.body.addEventListener("mousemove",function(e){
    let a = e.currentTarget.getBoundingClientRect();
    let x = e.clientX - a.left;
    let y = e.clientY - a.top; 
    circle.style.top = `${y}px`;
    circle.style.left = `${x}px`;
    circle.style.transform = `translate(50px,50px)`;
})

document.querySelector(".btn").addEventListener("click", () => {
    let p = [document.querySelector("[name='name']").value, document.querySelector("[name='text']").value];
    [...document.querySelectorAll(".put")].forEach((elm, index) => {
        elm.innerText = p[index];
    });
    document.querySelector("#box2").style.display = "none";
    document.querySelector("#data").insertAdjacentHTML("beforeend", `<button class="btn2" type="button">非同期送信</button>`);
    document.querySelector(".btn2").addEventListener("click", async () => {
        //submit code
        let url = "./submit.php";
        let data = (() => {
            return ([...document.querySelectorAll(".put")].map((elm, index) => {
                return "test" + index + "=" + elm.innerText;
            })).join("&");
        })();
        const options = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                "Content-Length": data.length,
                'Accept': 'application/json'
            },
            body: data //JSON.stringify(data)
        };
        await fetch(url, options).then(response =>
            response.json()
        ).then(resultdata => {
            document.getElementById("view").insertAdjacentHTML("beforeend", resultdata.test0 + "," + resultdata.test1);
        }).catch(error => {
            console.log(error);
        });
    });
});


function imgchg(imagename){
    document.body.setAttribute("style","background-image: url(./assets/images/" + imagename + ".jpg");
}

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo site</title>
    <style>
html {
    width: 100vw;
    height: 100vh;
}

body {
    background-color: rgb(0, 0, 0);
    color: aliceblue;
    background-image: url(./assets/images/aig-mid22910-120-xl_TP_V.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

div.box {
    border-color: aliceblue;
    border-style: inset;
    position: absolute;
    width: 300px;
    height: 450px;
    color: white;
    border-radius: 1em;
    padding: 1em;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    /* background-color: #ffffff80; */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow-wrap: break-word;
    text-align: center;
}

div>form>p {
    font-weight: bold;
    margin: 13px;
}

input {
    opacity: 0.5;
}

textarea {
    opacity: 0.5;
}

button {
    padding: 5px;
    border-radius: 1em;
    border-style: solid;
    border-color: aliceblue;
    background-color: aliceblue;
    color: rgb(0, 0, 0);
}
button:hover{
    border-color: rgb(255, 255, 255);
    border-style: inset;
    background-color: rgb(27, 76, 119);
    color: aliceblue;
}
.put:nth-child(2){
    overflow: auto;
    height: 120px;
}
    </style>
</head>
<body>
    <div class="box">
        <div id="box2">
            <form action="submit.php" method="post">
                <p>名前:<input type="text" name="name"></p>
                <p><textarea name="text" id="" cols="30" rows="10"></textarea></p>
                <p><button class="btn" type="submit">確認</button></p>
            </form>
        </div>
        <div id="data">
            <p class="put"></p>
            <p class="put"></p>
        </div>
    </div>
    <script src="./assets/js/main.js"></script>
</body>

</html>

<?php
var_dump(xss_d($_POST));
print(xss_d($_POST["name"])."<br>");
print(xss_d($_POST["text"])."<br>");

function xss_d(mixed $val){
    if(!isset($val))return false;

    if(is_array($val)){
        foreach ($val as $key => $value) {
            $val[$key] = strip_tags($value);
            $val[$key] = htmlspecialchars($val[$key],ENT_QUOTES);
        }
    }else{
        $val = strip_tags($val);
        $val = htmlspecialchars($val,ENT_QUOTES);
    }

    return $val;

}

"use strict";
document.querySelector("button").addEventListener("click",jsandcssreload);
function jsandcssreload(){
    let d = (new Date()).getTime();
    [...document.querySelectorAll("link")].forEach((elm)=>{
        elm.href = elm.href.replace(/(\.css)\??[0-9]{0,}$/,".css?" + d);
    });
    [...document.querySelectorAll("script")].forEach((elm)=>{
        elm.src = elm.src.replace(/(\.js)\??[0-9]{0,}$/,".js?" + d);
    });    
}

<?php
/*
Plugin Name: Rakuten_Seller
Plugin URI: https://zip358.com/
Description: 楽天アフィリエイトを表示
Author: @zip358com
Version: 0.1
Author URI: https://zip358.com/
*/
require_once plugin_dir_path( __FILE__ ).'/vendor/autoload.php';
define("RAKUTEN_YOUR_APPLICATION_ID","xxxxxxxxxxxxxxx");
define("RAKUTEN_YOUR_AFFILIATE_ID","xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");

define("AMAZON_YOUR_ACCESS_KEY_ID","");
define("AMAZON_YOUR_SECRET_KEY","");
define("AMAZON_YOUR_ENDPOINT","");
define("AMAZON_YOUR_URL","");


function Rakuten_Seller_content_plus($content) {
    if(is_single()) {
       $content.='［Rakuten_Seller_param type="auto"］';
    }
    return $content;
}

function Rakuten_Seller($params = array()){
     $htmlcode = "";
    extract(shortcode_atts(array(
        'type'=>'',
        'word'=>''
    ), $params));
    $client = new RakutenRws_Client();
    // アプリID (デベロッパーID) をセットします
    $client->setApplicationId(RAKUTEN_YOUR_APPLICATION_ID);
     
    // アフィリエイトID をセットします(任意)
    $client->setAffiliateId(RAKUTEN_YOUR_AFFILIATE_ID);

    if($type==="auto"){
        $tags = get_the_tags();
        $htmlcode.= "<div class='rakuten_seller_div'>";
        foreach( $tags as $tag) { 
            $htmlcode.= Rakuten_code($client,$tag->name);
        }        
        $htmlcode.= "</div>";
        
    }elseif($type==="search"){
        $htmlcode.= "<div class='rakuten_seller_div'>";
        $htmlcode.= Rakuten_code($client,$word);
        $htmlcode.= "</div>";
    }

    return $htmlcode;
 }

function Rakuten_code($client,$word="JavaScript"){
    $htmlcode = "";
   
    // IchibaItem/Search API から、keyword=$word を検索します
    $response = $client->execute('IchibaItemSearch', array(
      'keyword' => $word,
      'genreInformationFlag' => 1
    ));
    // レスポンスが正しいかを isOk() で確認することができます
    $cnt = 0;
    if ($response->isOk()) {
        foreach ($response as $item) {
           $htmlcode.= "<div class='rakuten_seller_item'>".
           "<img src='".$item["mediumImageUrls"][0]["imageUrl"]."'>".
           "<p>".$item["itemName"]."</p>".
           "<a class='rakuten_btn' href='".$item["affiliateUrl"] . "' title='".$item["itemName"]."'><span>楽天で購入"."</span></a></div>";
           $htmlcode.= amazon_code($item["isbn"],$item["jan"]);
           if($cnt>0){
                break;
           }
           $cnt++;
        }

    } else {
        //echo 'Error:'.$response->getMessage();
    }
    return $htmlcode;
}

function amazon_code($isbn="",$jan=""){
    $htmlcode = "";

    return $htmlcode;
}


add_shortcode('Rakuten_Seller_param', 'Rakuten_Seller');
add_filter('the_content', 'Rakuten_Seller_content_plus');

pip install PyQt5

404.php
archive.php
category.php
footer.php
functions.php
header.php
index.php
page.php
screenshot.jpg
search.php
sidebar.php
single.php
style.css

/*
Theme Name : 自作テンプレート名(英字)
*/

<?php wp_body_open();?>

<?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
        }
	);
}

<!DOCTYPE html>
<html>
    <head>
        <title>ANA旅割逆算日導きサービス（mobile）</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <script src="jquery-mobile/jquery.js"></script>
    <script src="jquery-mobile/jquery.mobile-1.4.5.min.js"></script>
    <style>
        .ui-page{
           background:#73cbe6;
        }
    </style>
    <script>
        $(function(){
            $("#ckday").click(function(){
                //alert($("#day").val().replace(/\-/g,'\/'));
            $.ajax({
                type: 'POST',
                url: "../ana_calendar/json.php",
                data:{day:$("#day").val().replace(/\-/g,'\/')},
                dataType: 'json',
                success: function(obj){
                    var str =   '<ul id="ana_listview" data-role="listview">\n';
                    str = str + '<li>予定日：' + obj.anaday + '</li>\n';
                    str = str + '<li>75日［旅割］の予約期日：' + obj.day75 + '</li>\n';
                    str = str + '<li>55日［旅割］の予約期日：' + obj.day55 + '</li>\n';
                    str = str + '<li>45日［旅割］の予約期日：' + obj.day45 + '</li>\n';
                    str = str + '<li>28日［旅割］の予約期日：' + obj.day28 + '</li>\n';
                    str = str + '<li>21日［旅割］の予約期日：' + obj.day21 + '</li>\n';
                    str = str + '</ul>\n';
                    $("#ana_api").html(str);
                    $("#ana_listview").listview().listview('refresh'); ;
                    }
                });
            });
        });
    </script>
    </head>
    <body>
        <div data-role="page" data-title="ANA旅割逆算日導きサービス（mobile）">
          <!--ヘッダー領域-->
          <div data-role="header">
            <h1>ANA旅割逆算日導きサービス（mobile）</h1>
          </div>
          <div role="main" class="ui-content">
              <input type="date" id="day">
              <button id="ckday" class="ui-btn">逆算する。</button>
              <span id="ana_api"></span>
          </div>
          <div data-role="footer">
            <h3>Copyright zip358.com</h3>
          </div>
        </div>
    </body>
</html>