【WordPress】編集画面のビジュアルエディタでタグが消える問題の解決策

aタグでリンクブロックを作ったときなどに、WordPressのビジュアルエディタを使うと該当のタグが削除されるため、それを回避するためのスニペット。 SVGとか消されてしまうのも解消できるようにしております。

<?php

function growp_override_mce_options( $init_array ) {
  global $allowedposttags;

  $init_array['valid_elements']          = '*[*]';
  $init_array['extended_valid_elements'] = '*[*]';
  $init_array['valid_children']          = '+a[' . implode( '|', array_keys( $allowedposttags ) ) . ']';
  $init_array['indent']                  = true;
  $init_array['wpautop']                 = false;
  $init_array['force_p_newlines']        = false;

  return $init_array;
}

add_filter( 'tiny_mce_before_init', 'growp_override_mce_options' );

function growp_allowed_post_tags() {
  global $allowedposttags;
  $additional_tags = array(
    'div'    => array(
      'style' => true
    ),
    'ruby'   => array(
      'class'        => true,
      'src'          => true,
      'width'        => true,
      'height'       => true,
      'frameborder'  => true,
      'scrolling'    => true,
      'marginheight' => true,
      'marginwidth'  => true,
      'style'        => true
    ),
    'rp'     => array(
      'class'        => true,
      'src'          => true,
      'width'        => true,
      'height'       => true,
      'frameborder'  => true,
      'scrolling'    => true,
      'marginheight' => true,
      'marginwidth'  => true,
      'style'        => true
    ),
    'rt'     => array(
      'class'        => true,
      'src'          => true,
      'width'        => true,
      'height'       => true,
      'frameborder'  => true,
      'scrolling'    => true,
      'marginheight' => true,
      'marginwidth'  => true,
      'style'        => true
    ),
    'iframe' => array(
      'class'        => true,
      'src'          => true,
      'width'        => true,
      'height'       => true,
      'frameborder'  => true,
      'scrolling'    => true,
      'marginheight' => true,
      'marginwidth'  => true,
      'style'        => true
    ),
    'main'   => array(
      'class'        => true,
      'src'          => true,
      'width'        => true,
      'height'       => true,
      'frameborder'  => true,
      'scrolling'    => true,
      'marginheight' => true,
      'marginwidth'  => true,
      'style'        => true
    ),
    'aside'  => array(
      'class'        => true,
      'src'          => true,
      'width'        => true,
      'height'       => true,
      'frameborder'  => true,
      'scrolling'    => true,
      'marginheight' => true,
      'marginwidth'  => true,
      'style'        => true
    ),
    'script' => array(
      'class'        => true,
      'src'          => true,
      'width'        => true,
      'height'       => true,
      'frameborder'  => true,
      'scrolling'    => true,
      'marginheight' => true,
      'marginwidth'  => true,
      'style'        => true
    ),
    'svg'    => array(
      'class'        => true,
      'src'          => true,
      'width'        => true,
      'height'       => true,
      'frameborder'  => true,
      'scrolling'    => true,
      'marginheight' => true,
      'marginwidth'  => true,
      'style'        => true,
      'xmlns'        => true,
      'xmlns:xlink'  => true,
    ),
    'path'   => array(
      'class'        => true,
      'src'          => true,
      'width'        => true,
      'height'       => true,
      'frameborder'  => true,
      'scrolling'    => true,
      'marginheight' => true,
      'marginwidth'  => true,
      'transform'    => true,
      'data-name'    => true,
      'style'        => true,
      'xmlns'        => true,
      'xmlns:xlink'  => true,
      'fill-rule'    => true,
      'd'            => true,
      '/'            => true,
    ),
  );
  foreach ( $additional_tags as $tag => $allow_elements ) {
    if ( ! isset( $allowedposttags[ $tag ] ) ) {
      $allowedposttags[ $tag ] = $allow_elements;
    } else {
      $new_allowed             = array_merge( $allowedposttags[ $tag ], $allow_elements );
      $allowedposttags[ $tag ] = $new_allowed;
    }
  }
}
add_action( 'after_setup_theme', 'growp_allowed_post_tags' );

 

---

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

• 【体験談】主婦が「自宅で働きたい」を叶えるために、広告バナー制作を学んでみた
• 【体験談】全くの初心者がUdemyでモーショングラフィックスを学んでみた
• 【体験談】Udemy「みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習」を実際にやってみた感想
• 【体験談】無料！？Udemyで学ぶはじめてのAI（ディープラーニング、機械学習）
• 【体験談】UdemyでWeb開発を学びました【コスパ最強】