WordPressのビジュアルエディタでHTMLを直挿入するプラグイン「Paste Raw HTML」

先日、WordPressのビジュアルエディタにHTMLを挿入するボタンを追加するカスタマイズ方法をご紹介しました。

が、この方法はファイルのアップロードやfunction.phpの編集などが必要で、なにかと面倒です。

そのため上記カスタマイズを一発で導入できるプラグイン「Paste Raw HTML」を作りましたので公開します。

Paste Raw HTMLとは

Paste Raw HTMLは、WordPressのビジュアルエディタに「HTML挿入」ボタンを追加するプラグインです。

WordPressのビジュアルエディタで記事を作成する際、外部サービスで作ったブログパーツなどのHTMLを貼り付けるためには、わざわざテキストエディタへ切り替える必要がありました。

Paste Raw HTMLで追加される「HTML挿入」ボタンを使うと、テキストエディタへの切り替えなしにHTML製のブログパーツを貼り付けることができます。

Paste Raw HTMLの使い方

Paste Raw HTMLの使い方は下記のとおりです。

1. 挿入したいHTMLをコピーしておく
2. ビジュアルエディタでHTMLを挿入したい場所にカーソルをあわせる
3. 「HTMLを挿入」ボタン（）を押す
4. プロンプトにHTMLをペーストしてOKを押す
5. ペーストしたHTMLがビジュアルエディタに挿入される

普通のコピー＆ペーストと異なり、HTMLの文字列（<a href=”https://bloglab.naenote.net/”>NaeNote</a>）ではなく、実際に記事に表示される内容（NaeNote）が貼り付けられるはずです。

A8.netやもしもアフィリエイトなどで提供される広告素材のHTMLも、ビジュアルエディタから一発で貼れます。

Paste Raw HTMLのおすすめの使い方

Paste Raw HTMLは、ビジュアルエディタにスタイルシート（CSS）を当てることで本領を発揮します。

たとえば商品紹介ブログパーツ カエレバで作ったHTMLのパーツならこんな感じで直コピペできます。

同じように、自前で作った吹き出し用のパーツもこんな感じでコピペできます。

ビジュアルエディタの見た目を本物に近づける方法はこちらのサイトをどうぞ。

参考 WordPressのビジュアルエディタを実際の見た目に近づける簡単な方法 | 株式会社bridge

また当ブログで利用しているテーマSimplicityの場合、ビジュアルエディタ向けのCSSファイル（editor-style.css）が標準装備されています。

下記コードをeditor-style.cssへコピペすれば、本物の見た目をだいたい再現できる（はず）です。

@import url('style.css');

注意事項、お問い合わせ、動作報告、バグ報告など

当プラグインをご利用の際は、テスト用のWordPress環境にて十分に導入テストを行ってください。

お問い合わせや動作報告、バグ報告などは当ページのコメント欄にてお願いいたします。

不具合については可能な範囲でサポートさせていただきますが、お返事が遅くなる場合があります。事前にご了承ください。

ダウンロードとインストール

以下環境にて動作確認済です

• WordPress 4.7.2以上、PHP7以上
• Simplicity、Luxeritas、AFFINGER4、STORK 

更新履歴

• 2018-04-27：ver 0.2 一部テーマで動作しなかった不具合修正
• 2017-03-03：ver 0.1 初版公開