WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

【備忘録】WordPressの本文で特定の文字列をクリックするたびに表示/非表示(塗りつぶし)するコード

公開日:2018(平成30)年1月21日/最終更新日:

Knowledge Base Wordpress パソコン カスタマイズ 設定



おもしろい効果を教えていただきましたので今後の備忘録として掲載しておきます。

「クリックすると青い帯上に文字列が表示されます」という文字列をクリックすると青いバックで黒い文字列が登場し、そこをクリックすると元の表示に戻るという動作をします。

投稿などの本文には

<span onclick="document.all.item('moji2').style.visibility='visible'">
クリックすると青い帯上に文字列が表示されます
</span>
<div id="moji2" style="visibility: hidden; background: blue; width: 400px;" onclick="document.all.item('moji2').style.visibility='hidden'">クリックすると表示が消えます</div>

を書き、テーマのfunctions.phpへ

function my_tiny_mce_before_init( $init_array ) {
$init_array['valid_elements'] = '*[*]';
$init_array['extended_valid_elements'] = '*[*]';

return $init_array;
}
add_filter( 'tiny_mce_before_init' , 'my_tiny_mce_before_init' ); 

を追記するだけです。

面白い表現で、今後何か使えそうなのでメモしておきます。