JavaScript・PHP・Vue.jsのサンプルやWordPressのテーマ・無料フォント、ブログの運営方法等の紹介

WordPressのウィジェットでHTMLやJavaScriptの記述なら「カスタム HTML」

この記事を簡単に書くと…

  • 新しいテキストウィジェットは余計なタグが追加されたりして不便
  • ビジュアルエディタを無効にしなくても「カスタム HTML ウィジェット」で解決
  • 構文チェックやタグの色分け、開始タグと終了タグの対応関係まで教えてくれる
ブログランキング・にほんブログ村へ

WordPressのウィジェットでHTMLやJavaScriptの記述なら「カスタム HTML」

WordPressの「テキスト」ウィジェットですが、バージョン4.8以降から「ビジュアルエディタ」が使えるようになりました。HTMLなどのタグが分からないユーザーには、とても良い機能なのですが、<p>や<br>タグなどが勝手に追加されてしまったり、JavaScriptの記述が消えてしまったり、HTMLタグを直接記述するユーザーにとっては、とても不便なものでした。

もちろん、直接HTMLを記述する「テキストモード」に切り替えられるのですが、ウィジェットページを開いた時には、必ず「ビジュアルエディタ」の状態で開いてしまうのです。その為、必ず余計な<p>や<br>タグが追加されてしまったり、JavaScriptの記述は消えてしまいます。

そこで、今までは「Add Paragraphs Option to Text Widget」などのプラグインを使ったり、functions.phpを編集して、「テキスト」ウィジェットのビジュアルエディタを、無効化することで対処できました。

ところがWordPressのバージョン4.8.1からは「カスタムHTML」というウィジェットが追加されたことにより、こちらのウィジェットを使うことで、テキストウィジェットの問題は解決されました!この「カスタムHTML」の存在を知らないユーザーも多いのではないでしょうか。ということで、今回は「カスタムHTML」ウィジェットを紹介します。

 

カスタム HTML ウィジェットを使えば解決

WordPressを4.8以前から使っていた場合、ある時からテキストウィジェットに以下のような記述が表示されるようになりました。

このウィジェットには、新しい「カスタム HTML ウィジェット」でよりうまく動作するコードが含まれている可能性があります。そちらのウィジェットを試してみませんか?

WordPressを4.8以前から使っていた場合、ある時からテキストウィジェットに以下のような記述が表示される

私は、このメッセージは、旧テキストウィジェットを使っているユーザーに対して、“使いづらくなった” 新しいテキストウィジェットへの乗り換えを促しているメッセージかと思っていました。

新しいテキストウィジェットは、ビジュアルエディタがデフォルトになってしまうので、なるべく旧ウィジェットを使いたかったのです。とはいえ、新しくテキストウィジェットを追加すると、もう旧テキストエディタが使えない為、とても不便を感じていました。

ところが、このメッセージは「カスタムHTML」が追加されたことに対するメッセージだったのです!つまり、HTMLやJavaScriptを直接記述したい場合には「カスタムHTML」を使い、HTMLが分からないユーザーやテキストだけを記述したい時には「テキスト」ウィジェットを使う、というような使い分けができるようになったのです。

 

構文チェックやタグの対応関係も教えてくれる

こちらが「カスタム HTML ウィジェット」になります。

こちらが「カスタム HTML ウィジェット」

 

ウィジェットエリアにHTMLやJavaScriptなどを記述したい時には、こちらのウィジェットを使うようにしましょう。Googleのアドセンスコードや、JavaScriptの記述をしたい時には、まさにうってつけかと思います。

しかも、この「カスタム HTML ウィジェット」は、行数が書かれていたり、構文をチェックしてくれたり、タグなどの色分けがされていたり、タグの開始タグと終了タグの対応関係を教えてくれたりする機能が備わっているのです!これでタグの閉じ忘れなども防げますね。

行数が書かれていたり、構文をチェックしてくれたり、タグなどの色分けがされていたり、タグの開始タグと終了タグの対応関係を教えてくれたりする機能が備わっている

 

まとめ

毎日のようにWordPressを使っていますが、「カスタム HTML ウィジェット」の存在には、なかなか気が付きませんでした(^^; WordPressは常に進化しているので、今後も楽しみですね。

この記事をSNSでシェアする

関連記事

こちらの記事も読まれています

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Follow us on Twitter Subscribe RSS Follow us in feedly
NATURAL PRESS

カテゴリー

このサイトについて

JavaScript・PHP・Vue.jsのサンプルや参考リンク、WEBサイト(ホームページ)で使えるアイコンや写真等の素材をダウンロード出来ます。

他にも、無料で使えるブロガーやアフィリエイター向けの、WordPressマガジンテーマ「NATURAL PRESS」を公開しています。ダウンロードや更新情報は、こちらのサイトで公開しています。

また、「WEB上手」は全ページリンクフリーですのでご自由にリンクしていただけます。リンクしていただけますと嬉しいです。

WordPress Theme NATURAL PRESS by WEB-JOZU.com