WordPressのビジュアルエディタでHTMLを直挿入するプラグイン「Paste Raw 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製のブログパーツを貼り付けることができます。

本プラグインを作った背景については下記記事を参照ください。

WordPressのビジュアルエディタにHTML直挿入ボタンを追加するカスタマイズ方法
こんにちは、先日WordPressに引っ越したばかりのNAEです。ぼくはこれまでずっと、Markdown記法でブログ記事を書...

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

ダウンロードはこちらからどうぞ。
(WordPress 4.7.2、PHP7、SimplicityおよびAFFINGER4にて動作確認済)

インストール方法は、通常のプラグインと変わりありません。

「プラグインを追加」画面から「プラグインをアップロード」した後、「有効化」していただければOKです。

インストールに成功している場合、「インストール済みプラグイン」の一覧にこちらのプラグインが表示されているはずです。

Paste Raw HTMLプラグインのインストール後画面

ビジュアルエディタに移動し、ツールバーに「HTMLを挿入」ボタンが表示されていることをご確認ください。

Paste Raw HTMLの使い方

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

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

普通のコピー&ペーストと異なり、HTMLの文字列(<a href=”https://www.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環境にて十分に導入テストを行ってください。

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

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

スポンサーリンク

更新履歴

  • 2017-03-03:ver 0.1 初版公開
スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする

おすすめ記事

関連記事