LoginSignup
1

More than 1 year has passed since last update.

Wordpress用のショートコードを自作して穴埋め問題を簡単に作れるようにしてみた

Posted at

1. 用途

wordpressの記事に「穴埋め問題」を埋め込みたい時などに参考にしてください。

2. サンプル

wordpressショートコード
[fill_blank A=弱者男性 B=8 C=4]
この法人は、「特定非営利活動法人日本{{A}}センター」といいます。
設立日(2022年{{B}}月{{C}}日)時点において、
日本で唯一、「{{A}}」の文字列を名称に含む法人となっています。
[/fill_blank]

上記のショートコードにより、次のような穴埋め問題が生成されます。

See the Pen fill_blank by 平田 智剛 (@17ec084) on CodePen.

3. 導入方法

functions.phpの末尾に、次の内容を追記します。

functions.phpの末尾に追記
function fill_blank_func( $atts, $content = "" ){
    $keys = array_keys($atts);
    foreach($keys as $key){
        $value = $atts[$key];
        $button = "<span class='fill_blank_$key'><button onclick='";
        $button.= <<<EOT
(function(){
    var elements = document.getElementsByClassName("fill_blank_$key");
    for( let i = 0 ; i < elements.length ; i ++ ) {
        var element = elements[i];
        var button = element.children[0];
        var answer_span = element.children[1];
        if (answer_span.style.display == "inline"){
            answer_span.style.display = "none";
            button.style= "";
            button.innerHTML = " " + button.innerHTML + " ";
        }else{
            answer_span.style.display = "inline";
            button.style = "font-size: 0.2rem";
            button.innerHTML = button.innerHTML.replaceAll(" ", "");
        }
    }
})()
EOT;
        $button.= "'> " . strtoupper($key). " </button><span style='display:none; color:red'>$value</span></span>";
        $content = str_ireplace( "{{".$key."}}" , $button , $content);
    }
    return $content;
}
add_shortcode('fill_blank', 'fill_blank_func');

やっていることとしては、穴の名前(サンプルでいう「A」~「C」)ごとにclass属性を与え、各classに対してjavascriptを使い、穴の中身(答え)に対応する要素のstyle属性、displayプロパティを切り替えることにより、表示/非表示を入れ替えるというものです。

同じ記事が、自社ブログにも掲載されています!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1