エディタ画面でのwrapのやり方

sebon77
(@sebon77)

6年、 10ヶ月前

TinyMCEと言うか正しくはTinyMCEAdvanceです。
多分どちらでも良いのですが、カスタムしてドロップダウンに独自のスタイルを追加しています。

そこで使い方の問題なのか分からないのですが、前提と言うか実現したいのは

<div class=”aaa”>
<p class=”a-1″>word1</p>
<p class=”a-2″>word2</p>
</div>

こういう形のHTMLがあり、a-1とa-2はaaaの子要素になるのでクラスaaa内で無いと適用されません。
この場合の3つともTinyMCEの独自スタイルとして追加はしてあるのですが、どうやってもこの形にならないのです。

a-1とa-2をエディタ画面で作成し、両方選択してaaaを適用すると

<p class=”a-1 aaa”>word1</p>
<p class=”a-2 aaa”>word2</p>

になってしまいます。

どういう形を取れば全体をwrap出来ますでしょうか？

使い方の問題なのかよく分からないのでここ数日ネットで調べても分からなかったので質問します。

よろしくお願い致します。

5件の返信を表示中 - 1 - 5件目 (全5件中)

CG
(@du-bist-der-lenz)

6年、 10ヶ月前

<div class="aaa">が、<p class="a-1">と<p class="a-2">に属しているので、いずれも結果は同じではないでしょうか。すべてをdiv、そしてpで比べてみませんか。

トピック投稿者 sebon77
(@sebon77)

6年、 10ヶ月前

返信ありがとうございます。

ごめんなさい、言葉足らずでした。

実際は枠のようになっており、

<p class=”a-1 aaa”>word1</p>
<p class=”a-2 aaa”>word2</p>

の形だとそれぞれ一つずつを囲んでしまいます。

==========
word1
==========
==========
word2
==========

こういう感じなのですが分かって頂けますでしょうか？

本来は全体を括った中にword1とword2が表示されて欲しいのです。
==========
word1
word2
==========
上の図が本来なって欲しい形です。

それが質問文のHTMLだとちゃんと表示されるのでそれをエディタで入力できるようにしたいのです。

言葉足らずで申し訳ございませんでした。
gblsm
(@gblsm)

6年、 10ヶ月前
面倒かもしれませんがショートコードを利用する方法があります。
例えば
```
[myblock c="aaa" c1="a-1" w1="word1" c2="a-2" w2="word2"]
```
と入力されたらショートコードを展開して
```
<div class="aaa">
<p class="a-1">word1</p>
<p class="a-2">word2</p>
</div>
```
を出力します。c, c1, c2 を省略するとデフォルトのクラスが入ります。
```
add_shortcode( 'myblock', 'mysc_myblock' );
function mysc_myblock( $atts ) {
  $atts = shortcode_atts( array(
      'c'  => 'aaa',    // divのclass
      'c1' => 'a-1',    // 最初のpのclass
      'w1' => 'word1',  // 最初のpの内容
      'c2' => 'a-2',    // 次のpのclass
      'w2' => 'word2'   // 次のpの内容
    ),
    $atts );

  $s = "<div class=\"{$atts['c']}\">";
  $s .= "<p class=\"{$atts['c1']}\">{$atts['w1']}</p>";
  $s .= "<p class=\"{$atts['c2']}\">{$atts['w2']}</p>";
  $s .= "</div>";

  return $s;
}
```
nobita
(@nobita)

6年、 10ヶ月前
こんにちは、

@gblsm さんの方法がいいと思いますが、ビジュアルモードで編集していて　チョット一部分だけビジュアルエディタで書けないといった事はよくあると思います。

専用のショートコードをその都度作っていくと、後で思い出せなくなるようなことは　私の場合　頻発します。

なのでちょっとしたアイディア書いておきます。

カスタムフィールド　custom_html を作って、そこに必要なhtmlを書きます。

後は、投稿本文に[custom_html]と書けば、その場所にカスタムフィールドのhtmlが表示できます。
```
add_shortcode( 'custom_html' , 'custom_field_html' );

function custom_field_html() {
	global $post;

	if( metadata_exists( 'post', $post->ID,'custom_html' ) ) {
	  
		$custom_html	 = get_post_meta($post->ID,'custom_html',true );
		return $custom_html;
	}
	return;
}
```
このコードを、functions.php に追加

PHPが嫌いな場合には、Code Snippets — WordPress Plugins（カスタムコードを追加できるプラグインで、PHPコードにエラーがあった場合には、お知らせしてくれます）等を使うといいかも
ishitaka
(@ishitaka)

6年、 10ヶ月前
こんにちは

TinyMCE Advanced プラグインを有効にしていてスタイルボタンを表示している場合は、下記のコード（wrapper に true を指定）でスタイルに追加できると思います。
```
function my_mce_before_init_insert_formats( $init_array ) {
	$style_formats = array(
		array( 'title' => 'AAA', 'block' => 'div', 'classes' => 'aaa', 'wrapper' => true ),
	);
	$init_array['style_formats'] = json_encode( $style_formats );
	return $init_array;
}
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
```
下記のページが参考になると思います。
https://codex.wordpress.org/TinyMCE_Custom_Styles
- この返信は6年、 10ヶ月前にishitakaが編集しました。