htmlタグを簡易挿入できるClassic Editor専用プラグイン

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

ワードプレスのClassic Editorをより便利にするプラグインをご紹介いたします。

本日は業務効率化を実現するプラグインのお知らせです。一般的にクラシックエディターではhtmlの差し込み時に「ビジュアルモードからテキストモードへ切り替えて操作」しなければなりませんよね。

最新のエディター「Gutenberg(グーテンベルグ)」ではさらに操作が複雑なのでいまだに「クラシックエディター」を愛用しています。理想を言えば「クラシックエディターのままでhtmlタグを手間なく挿入できる」こと。そこで「WP HTML Easy Insert Classic Editor」が役に立ちます。

htmlタグを簡易挿入できるClassic Editor専用プラグイン

たとえば以下のテーブルを差し込みたいシーンがあったと仮定しましょう。

クラシックエディターではビジュアルモードにコピペで貼り付けるとhtmlを正しく認識できません。カンタンに言えば「タグの前後にある括弧」をhtmlタグとして認識できずに自動変換するのが原因ですね。

例)テーブルを差し込むコード

念のためにテスト用htmlタグ(コピペ用)を貼っておきます。ぜひお試しください。

<table>
<tr>
<th>タイトル1</th>
<td>説明が入ります</td>
</tr>
<tr>
<th>タイトル2</th>
<td>説明が入ります</td>
</tr>
<tr>
<th>タイトル3</th>
<td>説明が入ります</td>
</tr>
</table>

htmlタグを差し込むテスト

参考として「ビジュアルモード」のままにしてhtmlタグを貼り付けてみましょう。

さきほどのコピペ用htmlを「ビジュアルモード」で貼り付けた状態が以下です。

プレビューでテーブル表示をチェックしてみましょう。htmlを認識できていません。

正しい手順としては「ビジュアルモード」から「テキストモード」へ切り替えて貼り付けなければなりません。

同時に「テキストモード」へ切り替えると「さきほどのタグが自動変換されている」のも確認できますね。

htmlタグの括弧が「特殊文字として認識されている」のでテーブルを認識できていないわけです。正しい手順としては「ビジュアルモード」から「テキストモード」へ切り替えてから貼り付ける必要があります。

htmlタグの入力を補完する

とはいえ「毎回テキストモードに切り替えてからhtmlを差し込むのは手間」ですよね。そこでビジュアルモードのままhtmlタグを差し込める効率化プラグイン「WP HTML Easy Insert Classic Editor」の出番。

プラグインは有効化するだけでOK。右端に「html」というボタンが追加されます。

htmlボタンの使い方

ビジュアルモードのままで「html」ボタンを押せば差し込みウィンドウが表示。

入力ボックスに直接htmlタグを差し込みましょう。改行も気にしなくてOKです。

💻手に職をつけて安定的に働きたい人

⇒ 完全無料のプログラミングスクール - 受講料無料でプログラミング習得 -

htmlをそのまま貼り付けたら「OK」。

エディター内でテーブルを認識できます。

もし「テキストモード」に変えても問題なし。改行も正しく反映されていますね。

念のためプレビューした状態もスクリーンショットを撮っておきます。テーブルを表示するhtmlタグとしてしっかり認識されています。htmlタグを使うシチュエーションが多ければ必見のプラグインですね。

まとめ

本日は「Classic Editorのhtml入力を補完するプラグイン」をご紹介いたしました。

これまでhtmlタグの入力は「毎回テキストモードに切り替えて使っていた」という方にとっては無駄な作業を省略できる便利なプラグインとして活躍するはずです。ぜひ一度ダウンロードしてお試しください。

本プラグインのダウンロードは以下「無料ダウンロードはこちら」から行えます。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください