■하고 싶은 일

워드프레스의 비주얼 에디터에 독자적인 스타일을 맞출 수 있는 버튼을 추가한다.
링크 버튼을 설치하고 싶을 때 등에 편리하다고 생각합니다 ♪
※ TinyMCE Advanced 를 사용하고 있는 것이 전제입니다.

1. 관리 화면에서 설정

wordpress 관리 화면의 설정 > TinyMCE Advanced 고급 옵션의 CSS 클래스 메뉴 만들기를 선택합니다.
※미리 editor-style.css 을 작성해, 읽어들이도록 하고 있지 않으면 체크 할 수 없습니다.



아래의 "사용하지 않는 버튼"에서 "스타일"버튼을 드래그하여 상단의 도구 모음에 놓습니다.

2. functions.php에서 설정

functions.php에 다음을 추가

functions.php

/*------------
 エディター独自スタイル追加
------------*/
//TinyMCE追加用のスタイルを初期化
if ( !function_exists( 'initialize_tinymce_styles' ) ):
function initialize_tinymce_styles($init_array) {
  //追加するスタイルの配列を作成
  $style_formats = array(
    array(
      'title' => 'ボタン（白）',
      'inline' => 'a',
      'classes' => 'button button-01',
      'attributes' => array(
        'href' => 'https://qiita.com/m_t_of'
      )
    )
    array(
      'title' => 'ボタン（ピンク）',
      'inline' => 'a',
      'classes' => 'button button-02',
      'attributes' => array(
        'href' => 'https://qiita.com/m_t_of'
      )
    ),
    array(
      'title' => 'ボタン（黄色）',
      'inline' => 'a',
      'classes' => 'button button-03',
      'attributes' => array(
        'href' => 'https://qiita.com/m_t_of'
      )
    )
  );
  //JSONに変換
  $init_array['style_formats'] = json_encode($style_formats);
  return $init_array;
}
endif;
add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000);

해설:
'title' => '버튼(노란색)'
"스타일"에서 선택할 때 나오는 스타일의 이름입니다.

'inline' => 'a'
인라인 요소 스타일일 때는 ‘’inline’ => ‘넣고 싶은 요소’, 블록 요소 스타일일 때는 ‘’block’ => ‘넣고 싶은 요소’’.

'classes' => 'button button-03'
클래스를 부여합니다.

'attributes' => array(
'href' => 'htps : // 이 m/m_t_오f'
)
속성을 넣을 수 있습니다. 여러가지 할 것 같네요♪

즉 상기의 경우, 「스타일」에서 「버튼(노란색)」을 선택하면,<a class="button button-03" href="https://qiita.com/m_t_of"></a>가 삽입됩니다.

또한 editor-style.css의 캐시가 남아 관리 화면에서 css가 반영되지 않도록 방지하기 위해 다음을 추가합니다.

functions.php

/*------------
 editor-style.cssのキャッシュクリア
------------*/
function extend_tiny_mce_before_init( $mce_init ) {

    $mce_init['cache_suffix'] = 'v='.time();

    return $mce_init;
}
add_filter( 'tiny_mce_before_init', 'extend_tiny_mce_before_init' );

3. editor-style.css, style.css에 스타일 추가

관리 화면에서 편집기에 반영하기 위한 css와 실제 페이지에 반영하기 위한 css를 각각 추가합니다.

style.css

.button {
    display: inline-block;
    max-width: 600px;
    margin: 10px 5px;
    padding: 15px 60px;
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
}
/*ボタン（白）*/
.button-01 {
    background: #fff;
    box-shadow: 0px 5px 0px #e5e4e5;
    color: #000;
}
/*ボタン（ピンク）*/
.button-02 {
    background: #f26161;
    box-shadow: 0px 5px 0px #ca3434;
    color: #fff;
}
/*ボタン（黄色）*/
.button-03 {
    background: #ffbe1e;
    box-shadow: 0px 5px 0px #d89005;
    color: #fff;
}

이런 식으로 평소 CSS와 마찬가지로 스타일을 씁니다.

4. 완성

참고 사이트:
· htps : // 여기 x. rdp rs. rg / chi nyM Se_ku s와 m_Sty ぇ s
· TinyMCE
· WordPress 비주얼 편집기(TinyMCE)에 자체 태그 삽입을 위한 스타일 선택 상자 추가
· WordPress 「TinyMCE Advanced」의 투고 화면을 커스터마이즈