Markdown EditorとWordPress自動成型の相性が悪くて困った

雑記

WordPressの更新にMarkdown Editorというプラグインを使ってるのだけれど、どうもMarkdown式に画像を挿入するとWordPressの自動成型が干渉してズレてしまう模様。

Markdown Editor
Replaces the default WordPress editor with a Markdown editor for your posts and pages.

多分この画像もはみ出てるはず。直せた。

エディタ上の入力は以下

![alt](https://xxxxxxx/xxxxxxxxxxx.jpg)

多分この画像もはみ出てるはず。

で、実際の出力がこうなってる。この<p></p>要素が邪魔している。

<p>
    <img src="url" alt="">
</p>

画像挿入タグ直後の改行を取ってみたりしても改善せず。

![alt](https://xxxxxxx/xxxxxxxxxxx.jpg)
多分この画像もはみ出てるはず。
![alt](https://xxxxxxx/xxxxxxxxxxx.jpg)多分この画像もはみ出てるはず。

WordPressの自動整形を止めたら別の問題がある

remove_filter('the_content', 'wpautop');

WordPressの自動整形を止めてもこのMarkdown EditorプラグインはMarkdown式の改行(スペース2個)が機能せず、逆にWordPressの自動整形に依存してるから手動で<br>を入れなきゃいけなくなる。1年以上更新されてないプラグインだから仕方ない。

CSSのmargin/padding調整じゃどうせどっかで崩れるから意味がないし、プラグイン側を力業で直したり<br>直打ちするくらいならMarkdownじゃなくていいし、困った。

困ったときのDOM操作(てきとう)

現状![alt](src)この形式でしか画像は入れる予定がないので、しょうがないから以下で<img>要素を囲む<p>要素を削除。

// 記事内の<img>を囲む<p>を削除
$('img').unwrap('p');

$('img').unwrap();だけだと他の<img>要素、アイキャッチとかリンクサムネイルにも影響しちゃう。

これ他にいい方法あったら教えてほしい。

タイトルとURLをコピーしました