.wpcf7-submit:disabled{cursor:not-allowed}よく試し、よく作るブログ実験室naelabWordPressのビジュアルエディタにHTML直挿入ボタンを追加するカスタマイズ方法カスタマイズ2017.02.24WordPressのビジュアルエディタって便利ですよね。ビジュアルエディタではHTMLを直に挿入できません。カエレバやヨメレバをはじめ、HTML製パーツを記事に挿入するには、テキストエディタに頼るしかありませんでした。そこでちょっとカスタムを入れて、ビジュアルエディタにHTMLを直挿入するボタンを作ってみました。今回はそのカスタマイズ方法を紹介します。ビジュアルエディタを主に使っている方、ビジュアル/テキストエディタを行き来するのが面倒だと思っている方はぜひ組み込んでみてください。HTML」を作成しました。ビジュアルエディタ好きの方はぜひどうぞ。2.5.1にて同じ機能が追加されましたSimplicity2.5.1公開。AMP用のトラッキングID設定項目追加。CDNにキャッシュされたAMPページ用に別のプロパティのトラッキングIDを設定できるように機能追加しました。ビジュアルエディターからHTMLをそのまま挿入できる機能を追加しました。注意事項まとめWordPressのビジュアルエディタはとても便利WordPressのビジュアルエディタは非常に便利にできています。デフォルトでさまざまなボタンが準備されていますし、使うテーマによっては独自の装飾ボタンが組み込まれています。AdvancedやAddQuicktag等のプラグインを使えば幅広い機能追加・拡張が可能です。基本的な装飾やリンクの挿入などのキーボードショートカットも豊富に準備されています。ビジュアルエディタではHTMLを直書きできないこのようにブログ執筆をサクサク書ける機能が豊富に盛り込まれているビジュアルエディタ。ひとつ、大きな弱点があります。それは、HTMLが直書きできないということ。「HTMLを書きたいならテキストエディタ使えば?」と思われるかもしれません。ビジュアルエディタとテキストエディタを切り替えるのは下記理由からとても面倒なんです。切り替えるるとカーソル位置がリセットされてしまい、スクロールが面倒ビジュアルエディタに切り替えると記事全文に再描画がかかって重い「だったら最初からテキストエディタで書けばいいじゃん」と思うかもしれません。HTMLタグが邪魔くさいんです。ぼくたちはコンテンツを書きたいのであって、HTMLタグを書きたいわけではないのです。見えなくてもいいものは見えないところでよしなにやっておいていただきたい。そもそもビジュアルエディタを使っている人にとって、テキストエディタはHTMLを貼るためにしょうがなく開いているものです。本当はテキストエディタなんて触りたくないですし、ビジュアルエディタで執筆を完結させたいんです。ビジュアルエディタでHTMLを直挿入したいと思うシチュエーションビジュアルエディタでHTMLを直挿入したいな、と思うシチュエーションについて、具体例を挙げてみたいと思います。カエレバ・ヨメレバを貼るときブログを書いている人の多くはカエレバやヨメレバを使っていると思います。ブログで商品や書籍を紹介するのにとても便利なサービスですよね。ぼくも長い間お世話になっています。これらサービスで提供されるのは生身のHTMLであり、ビジュアルエディタではそのまま貼れません。テキストエディタを開いて、挿入する場所に移動し、ペーストする必要があります。利用されている方は、アフィリエイトのリンクやバナーを貼る機会も多いかと思います。それら素材は全てコピペ用の生HTMLで提供されていますよね。HTMLの改変が禁止されていることがほとんどのため、泣く泣くテキストエディタを開いて貼りつけている方がほとんどなのでは。HTMLで作られた広告素材をビジュアルエディタに直挿入できればこんな面倒さから開放されるんです。した引用をするときそしてぼくが一番面倒だと感じているのは、引用です。引用の際は<blockquote>で囲った上で出典元リンクを明記するのが鉄則ですよね。やろうとするとタグの取り回しなど少し面倒なもの。そのため、これまでさまざまなブックマークレットが提供されてきました。いずれも吐き出すのは直書きHTML。これじゃビジュアルエディタにそのままコピペできません。引用パーツを一発で作る仕組みがあるのに、テキストエディタをわざわざ開いて貼らないといけないのです。ビジュアルエディタにHTML直挿入ボタンを追加する方法こういった事情から、ビジュアルエディタのカーソル位置にコピー済のHTMLを直挿入できたらなあと思ってプラグインを探しまわったんですが、観測範囲内では見つかりませんでした。突貫で作ってみました。以下、ビジュアルエディタにHTMLを直挿入するボタンの作り方です。※子テーマの編集やサーバーへのファイルアップロードを伴いますので、バックアップをお忘れなく!手順の概要と完成イメージカスタマイズ手順をざっくり言うと、JavaScriptファイルとPNGファイルを準備するそれらを子テーマのfunction.phpのあるフォルダにアップロードする子テーマのfunction.phpにコードを追記するです。手順が完了した時点で、次回ビジュアルエディタを開くと下記に示すボタンが現れているはず。PNGファイルを準備するまず、ボタンの見た目を決めるPNGファイルを準備します。サイズは20px×20pxです。ぼくはこちらのページに掲載されているものを拝借しました。Qiitabutton_insert_html.pngという名前で保存してください。JavaScriptファイルを準備する次に、ボタンの挙動を定義するJavaScriptファイルを準備します。下記コードをコピペして、button_insert_html.jsという名前で保存してください。);})();JavaScriptファイルとPNGファイルをアップロードするここまででbutton_insert_html.pngbutton_insert_html.jsの2つのファイルが手元にあるはずです。次は、これらを利用中の子テーマのfunction.phpのあるフォルダにアップロードしてください。ここでアップロード先を間違えるとボタンがちゃんと動作しません。Simplicity2の子テーマを使っている場合、アップロード先フォルダはこちらです。ドメイン名/public_html/wp-content/theme/simplicity2-child他のテーマをご利用の方は、適宜読み替えてください。子テーマのfunction.phpと上記2ファイルが同じフォルダにあることが重要です。function.phpに追記するここまできたらもう一息です。次は、function.phpに下記コードを追記します。既存コードを上書きしないよう気をつけてください。);技術的な細かいところは下記サイトを参照ください。memocarilog手順は以上です。ビジュアルエディタを開き直して、下記のボタンがツールバーのどこかに表示されていることを確認してください。「HTMLを挿入」ボタンの使い方このボタンの使い方は簡単です。挿入するHTMLを事前にコピーしておくビジュアルエディタでHTMLを挿入したい場所にカーソルをあわせる「HTMLを挿入」ボタンを押す現れたプロンプト(上写真)にコピーしたHTMLをペーストするOKボタンを押すカエレバ・ヨメレバのような長いHTMLでも大丈夫です。このカスタマイズは子テーマの編集(function.phpへの追記)を伴います。4.7.2、Simplicity2)では上記手順で正しく動いていますが、あらゆる環境での動作を保障するものではありません。場合によってはPHPの関数名重複などで正しく動作しない可能性があります。テスト環境で動作確認をしてから作業をお願いします。まとめ以上、WordPressのビジュアルエディタにHTMLを直挿入するためのボタンを追加するカスタマイズのご紹介でした。本当はプラグインにまとめて一発導入できるようにしたかったんですが、とりあえずの突貫工事ということでカスタマイズ方法のみ公開させていただきました。ビジュアルエディタ好きな方々の助けになれば幸いです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。管理人NAEただのブログ好き。お問合わせはこちらもしくはTwitterのDMまでどうぞ。ブログ実験室naelab.タイトルとURLをコピーしました。