エディターの文章装飾スタイルを追加するには?

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも エディターの文章装飾スタイルを追加するには?

  • このトピックには4件の返信、2人の参加者があり、最後にmakisushiにより8年、 1ヶ月前に更新されました。
4件の返信スレッドを表示中
  • 投稿者
    投稿
    • #39197
      makisushi
      ゲスト

      2.1.4でエディターに搭載された文章装飾スタイル機能はとても便利ですね!いつも初心者に優しい機能をありがとうございます。
      これにアンダーラインとか、マーカーとか、補足情報など、simplisicyで用意してくださっている他のスタイルを表示させるにはどうすればよいですか?

    • #39203
      アバター画像わいひら
      キーマスター

      これにアンダーラインとか、マーカーとか、補足情報など、simplisicyで用意してくださっている他のスタイルを表示させるにはどうすればよいですか?

      全て、スタイルに追加していたはずと確認してみたら、記事のキャプチャを撮影するために、コメントアウトしていたところを、そのままにしていたようです。
      修正したものを、アップしておいたので、よろしかったら試してみてください。

    • #39205
      アバター画像わいひら
      キーマスター

      一応、新たにタグを追加する方法も書いておきます。
      テキストエディターにタグ挿入ボタンを追加するには、親テーマの「lib/qtags.php」テンプレートファイルを開いて、add_quicktags_to_text_editor関数を丸々コピーして、子テーマのfunctions.phpに貼り付けます。
      あとは、追加したいボタンなどを以下のように追加してきます。

      function add_quicktags_to_text_editor() {
        //スクリプトキューにquicktagsが保存されているかチェック
        if (wp_script_is('quicktags')){?>
          <script>
            QTags.addButton('qt-bold','太字','<span class="bold">','</span>');
            QTags.addButton('qt-red','赤字','<span class="red">','</span>');
            //省略
           //以下にQTags.addButtonを使って、ボタンを追加するコードを書く
          </script>
        <?php
        }
      }
      endif;
    • #39206
      アバター画像わいひら
      キーマスター

      ビジュアルエディターにスタイルメニューを追加するには、親テーマの「lib/qtags.php」テンプレートファイルを開いて、initialize_tinymce_styles関数を丸々コピーして、子テーマのfunctions.phpに貼り付けます。
      あとは、追加したいボタンなどを以下のように追加してきます。

      function initialize_tinymce_styles($init_array) {
        //追加するスタイルの配列を作成
        $style_formats = array(
          array(
            'title' => '太字',
            'inline' => 'span',
            'classes' => 'bold'
          ),
          array(
            'title' => '赤字',
            'inline' => 'span',
            'classes' => 'red'
          ),
          //省略
          //以下にarrayを使って配列を追加していく
        );
        //JSONに変換
        $init_array['style_formats'] = json_encode($style_formats);
        return $init_array;
      }
      endif;

      書き方は、以下の記事を参考にしてみてください。
      WordPressのビジュアルエディター(TinyMCE)に独自タグ挿入用のスタイル選択ボックスを追加するカスタマイズ

    • #39209
      makisushi
      ゲスト

      わいひらさん、早速のご対応ありがとうございます。これは便利すぎます!(^^)

4件の返信スレッドを表示中
  • トピック「エディターの文章装飾スタイルを追加するには?」には新しい返信をつけることはできません。