Wordpressで自作のショートコードをビジュアルエディタで表示させるには

Question

※Wordpress初心者といかないまでも、あまり得意ではありません。※

まずはじめに

Wordpressの投稿画面をタグが分からない人にも
簡単に記事が書けるようにカスタマイズしたく、
ショートコードの検討をしたところから、今回の問題が発生しました。

ショートコード自体は無事に表示が出来、プレビュー・出力も問題ありませんでした。
ただ、これをビジュアルエディタで表示させるとなると
勝手が異なり、調べてみてもあまり例が無いのかうまく検索にも引っかからず、
唯一あったサイトも分からずじまいで頭を抱えています。

前提・実現したいこと

• Wordpressの投稿画面より、ビジュアルエディタでショートコードを

　プレビュー・公開後と同様の表示にしたい。

• エディタ内では一例ですが、登録しているショートコードを

　呼び込みすると、[midashi1]テキストをここに追加[/midashi1]のように表示されます。

• テキストエディタではもちろんこのままでいいのですが、

　ビジュアルエディタに切り替えた際には、タグが適応された
プレビュー画面と同じ表示をさせたい。

ヒントにしたサイト

https://capitalp.jp/2017/01/25/enhance-shortcode-on-visual-editor/

• ステップ1までは登録するだけなので問題ないのですが、ステップ2. Shortcakeに登録するからが

分からず、手が止まっています。そもそもに全く同じコードを入れてみても
ビジュアルエディタには出力がうまくいきませんでした。（入力したテキストすら表示されない）

現状・補足・疑問

• ショートコード自体は作成し終えている
• WordPress のClassic Editor（プラグインで旧エディターに変更）を使用、Ver.WordPress 5.3.2
• ビジュアルエディタへのクイックタグ登録・呼び込みはAddQuicktagを使用しています。
• ビジュアルエディタ用のcssは読み込み済みです。
• プラグインは出来れば使わない形にしたいですが、難しそうであればもちろん検討します。
• ヒントにした上記サイトも、もしかしたらコードを追加するところすら

間違っていたのでは？とも考えています。基本的には全てfunctions.phpに追加しています。

作成したショートコードはこちらです。（あくまで一部です）

//見出し１
function hogeFunc( $atts, $content = null ) {
return '<p class="midashi_d1">' . $content . '</p>';
}
add_shortcode('midashi1', 'hogeFunc');

追記です

参考URLの手順をそのまま、コードをすべて
functions.phpに追加したところ、表示はされたのですが、
ここから上記の作成したショートコードにカスタマイズ・
置き換えるのが分かりません。
上記を追加すると仮定した上でコードをご教授頂けますと助かります。

参考サイトを元にfunctions.phpに記述した内容

表示されれば問題なかったので、一旦以下に修正しています。

add_shortcode( 'capitalp_author', function( $attributes = [], $content = '' ) {
  static $users = [];
  $author_id = get_the_author_meta( 'ID' );
  ob_start();
  ?>
  <p class="<? echo $author_id; ?>"><? echo $content; ?></p>
  <?php
  $content = ob_get_contents();
  ob_end_clean();
  return $content;
} );
/** Register short code UI */
add_action( 'register_shortcode_ui', function() {	// Interviews
  shortcode_ui_register_for_shortcode(  'capitalp_author', [
    'label'     => '著者の発言',
    'post_type' => [ 'post' ],
    'listItemImage' => 'dashicons-format-status',
    'inner_content' => [
      'label'        => '発言内容',
      'description'  => '自動で改行が入ります。',
    ],
    'attrs' => [
      [
      'label'    => '発言者',
      'attr'     => 'user_id',
      'type'     => 'user_select',
      'multiple' => false,
      ],
    ],
  ] );
} );

大変恐縮ですが、解決策をお知りの方、
いらっしゃいましたら少しでも構いません。
解決に近づける助言・ご指導のほどよろしくお願いいたします。

Comments

[退会済みユーザー]

プラグインの「Shortcake (Shortcode UI)」はインストール済みでしょうか。

[mykyofit]

onodaさま
質問ありがとうございます。
はい、まずは参考URLを元に試してみておりますので、既にインストール済みです。
ただ使い方・カスタマイズの方法がうまくいかず今に至ります。

[退会済みユーザー]

「ビジュアルエディタには出力がうまくいきませんでした」とのことですが、参考URL先のステップ2のコードを書いても、「メディアを追加」ボタンの隣りに「Add Post Element」が表示されないと言うことですか？（参考画像：https://ncstatewpresources.wordpress.ncsu.edu/n-c-state-shortcodes/adding-shortcodes-to-your-pages/）

[CHERRY]

ショートコードのコードは、記載いただいていますが、Step2の部分で、ショートコード以外にも必要なコード( add_action( 'register_shortcode_ui', 〜 ) )がありますが、この部分は、どのようなコードを記載しているのか質問に追記していただけないでしょうか？

[mykyofit]

onodaさま
ご返信ありがとうございます。
少し状況が変わりました。※追記しました。
Add Post Element自体は表示されていますが、
参考サイトのコードをカスタマイズ・書き換えるのに現在はぶつかっております。

[mykyofit]

CHERRYさま
質問ありがとうございます。
一旦現状を追記しました、分かりずらくて恐縮なのですがよろしくお願いいたします。

Answer 1

一旦自己解決致しました。
こちらのページ（　https://desarrollowp.com/blog/tutoriales/shortcake-user-interface-para-los-shortcodes-de-wordpress/　）を参考に以下作成しました。

ただ、一部そのまま利用しているので回りくどい・余計なコードも含まれている可能性があります。
そこはうまく調整させつつ理想に近づけたいと思います。
コメント下さったお二方、ありがとうございました。

**ショートコード本体**
function midashi1s( $attr, $content ) { ob_start();?>
    <p class="midashi_d1"><? echo $content; ?></p>
    <?php
    $content = ob_get_contents();
    return ob_get_clean();
}
add_shortcode( 'midashi1', 'midashi1s' );

**Shortcakeおよびビジュアルエディタ登録用**
function midashi1a() {
    $fields = array(
        array(
            'label' => esc_html__( 'Fuente', 'shortcode-ui-example' ),
            'attr' => 'source',
            'type' => 'text',
            'encode' => true,
            'meta' => array(
                'placeholder' => esc_html__( 'Fuente', 'shortcode-ui-example' ),
                'data-test' => 1,
            ),
        ),
    );
 
    $shortcode_ui_args = array(
        // タイトル
        'label' => esc_html__( '見出し１', 'shortcode-ui-example' ),
        // Icon
        'listItemImage' => 'dashicons-format-status',
        // Limitar el uso del shortcode a tipos de posts especificos. Opcional.
        'post_type' => array( 'post' ),
        // UI para el contenido interno del shortcode. Opcional
        'inner_content' => array(
            'label' => esc_html__( '見出しテキストを入力してください', 'shortcode-ui-example' ),
        ),
    );
    shortcode_ui_register_for_shortcode( 'midashi1', $shortcode_ui_args );
}
add_action( 'register_shortcode_ui', 'midashi1a' );