サポート » 使い方全般 » ビジュアルエディタで独自ボタン/Visual Editor Custom Buttonsが表示されない

  • bysooooo7

    (@bysooooo7)


    閲覧いただきありがとうございます。
    当方PHP初心者です。

    自作テーマを用いてブログを運営しております。
    今まではテキストエディタを使用していたのですが、ビジュアルエディタに切り替えようと試みているところです。

    ローカル環境にてClassic EditorとTinyMCEをインストールしました。
    テキストエディタで使用していたような(QTagsのような)独自ボタンが欲しかったため、色々なサイトをめぐりfunction.phpを直接編集して独自ボタンを追加する方法を試みましたが、追加したボタンが表示されませんでした。
    また、Visual Editor Custom Buttonsプラグインを用いてボタンの追加を試みましたが、こちらでも表示されませんでした。
    つまりはビジュアルエディタにデフォルトで用意されているボタン以外表示されない状態です。

    function.phpの編集は怖いのでできれば後者であるVisual Editor Custom Buttonsを用いて独自ボタンを追加したいと考えております。
    使用テーマは先の通り自作テーマです。

    プラグインの相性が悪い、こういった場合に独自ボタンが表示されないことがあるなど心当たりのある方いらっしゃいましたらご教示いただけませんでしょうか。
    不足している情報がございましたら追記いたします。
    プラグインや本体のバージョンは最新版です。

    何卒よろしくお願いいたします。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • CG

    (@du-bist-der-lenz)

    「Classic Editor」だからではないですか、必要であれば、「Visual Editor Custom Buttons」プラグインを確かめる用意はあります。

    ishitaka

    (@ishitaka)

    こんにちは

    Visual Editor Custom Buttons プラグインは Classic Editor でも動作するようです。
    設定が正しくできていない可能性があります。設定内容を教えてもらえません?

    ishitaka

    (@ishitaka)

    設定が正しいようでしたら、自作テーマということなので、デフォルトのテーマに切り替えて、自作テーマに問題がないか確認してください。

    • この返信は1 週前に  ishitaka さんが編集しました。
    bysooooo7

    (@bysooooo7)

    みなさま、お返事いただきありがとうございます。

    @du-bist-der-lenz

    「Classic Editor」だからではないですか、必要であれば、「Visual Editor Custom Buttons」プラグインを確かめる用意はあります。

    すみません、Visual Editor Custom Buttonsプラグインのどこを確認するとよいでしょうか。

    @ishitaka
    まず、テーマを『Twenty Nineteen』にしてみました(プラグインの設定等は変更しておりません)。
    ですが自作テーマ同様、Visual Editor Custom Buttonsプラグインで作成した独自ボタンはビジュアルエディタに表示されませんでした。

    試しにVisual Editor Custom Buttonsプラグインで追加したボタンは下記になります。

    ■名前
    『ピンク文字』
    ■Button Content
    (Wrap Selectionにチェック)
    ・Before
    <strong class="un_line1">
    ・After
    </strong>
    ■Display in Editor
    ・Visual Editor / Text Editor 両方にチェック
    ・Button Icon (独自のものを設定)
    ・Quicktag Label
    pink-un
    ■Visual Editor Content Styling
    空欄(editor-style.cssで定義済み)
    設定しているCSSは下記。

    
    strong.un_line1{
    background: linear-gradient(transparent 40%, rgba(255, 0, 78, 0.23) 60%);
    font-family:vdl-v7gothic, sans-serif;
    font-weight: 600;
    font-style: normal;
    }
    

    ・・・以上です。
    上記の設定でいきますと、テキストエディタの方には『ピンク文字』のボタンが表示され、自分の意図した通りに動きました。

    また、Setting画面はデフォルトのままで何にもチェックを入れていません。

    お手数ですがご確認よろしくお願いいたします。

    ishitaka

    (@ishitaka)

    Visual Editor Custom Buttons プラグインで、同じ設定のボタンを作成し、ビジュアルエディターにボタンが表示されることを確認しました。

    検証環境
    PHP 7.3
    WordPress 5.2.3
    テーマ: Twenty Nineteen 1.4
    プラグイン:
    Classic Editor 1.5
    Visual Editor Custom Buttons 1.5.2.3
    TinyMCE Advanced 5.2.1(有効/無効)
    ブラウザ: Chrome

    他のプラグインが影響しているのかもしれません、上記以外のプラグインを停止してみてください。
    また、下記もお試しください。

    • この返信は1 週前に  ishitaka さんが編集しました。
    • この返信は1 週前に  ishitaka さんが編集しました。
    bysooooo7

    (@bysooooo7)

    @ishitaka

    お世話になっております。
    お返事いただきありがとうございます。

    ・Button Icon で既定のアイコンを選択する。

    ・ブラウザのキャッシュ(閲覧履歴、Cookie など)を削除する。

    ・別のブラウザ(Firefox など)を使用する。

    ・JavaScript 連結を無効化する。

    上記試しましたが変化は見られませんでした。

    ・JavaScript のエラーメッセージを確認する。

    上記を試す前に、Classic Editor,Visual Editor Custom Buttons,TinyMCE Advanced以外のプラグインの停止を試みたところなんとVisual Editor Custom Buttonsで作成したボタンが無事表示されました。

    この後、停止したプラグインを一つ一つ有効にしていきたいと思います。
    原因と思しきプラグインが分かり次第またJavaScriptのエラーメッセージを確認し報告、相談させていただきます。

    取り急ぎお礼のみ、失礼いたします。

    • この返信は1 週前に  bysooooo7 さんが編集しました。
    bysooooo7

    (@bysooooo7)

    【追記】

    プラグインを一つずつ有効にしていったところ、『Native Emoji』プラグインを有効にした時だけ再現できることを確認いたしました。
    自作テーマの方でもこのプラグインをオフにすればVisual Editor Custom Buttonsで作成した独自ボタンがビジュアルエディタに表示させられることを確認済みです。

    『Native Emoji』は最悪切っても良いプラグインなのでその方向で考えておりますが、JavaScriptエラーを見るとどこが問題になっているのかがよく分かりませんでした。
    Native Emojiを切った状態/有効にした状態でもpost.phpにエラーが出るようです。
    wp-admin/post.phpの1行目に
    <!DOCTYPE html>
    という宣言(?)があり、これに対し
    『Unchecked runtime.lastError: The message port closed before a response was received.』
    というエラーが出ておりました。

    今までプラグインの干渉のようなものに当たったことがなく、目から鱗でした。
    ご教示いただきありがとうございました。
    根本的な解決に至れるかわからず、『Native Emoji』を切ることで解決(プラグインの干渉等に問題があると見てよい)ということにしてよいものでしょうか。

    CG

    (@du-bist-der-lenz)

    TinyMCE Advancedプラグインと併用している、ということ。この箇所のチェックは、どうしていますか。

    プラグイン同士の干渉は、同じJSを組み込んでいたりして、バージョンがぶつかるようなこともあります。よく併用される事象のあるプラグインも少なくないので、干渉を回避する対応ができるプラグインも増えました。

    こんにちは

    「Unchecked runtime.lastError: The message port closed before a response was received.」で検索したらいろいろ出てきますね。
    chrome extension が原因ではないでしょうか。

    Native Emoji プラグインの設定を変更すると、表示されるようになるかもしれません。

    [Admin editor] の [Enable] をチェックする。既にチェックされている場合は、一度チェックを外し保存してから、再度チェックし保存する。

    • この返信は6 日、 16 時間前に  ishitaka さんが編集しました。
10件の返信を表示中 - 1 - 10件目 (全10件中)
  • このトピックに返信するにはログインが必要です。