wordpress
WordPressTinyMCE使用時、ドラッグして選択した任意の文字列を指定のタグでラップする
最終更新日: 2025年2月26日
投稿時に任意に段落なりを異なるタグ・クラスにして、見やすくまた変化を付けたりしたいと。
色々なソフト使っていて、ドラッグ選択してボタン一発ってのが速いなと思ったので、それができるfunction.php追記コードを考えた。
例によってGutenbergでは使えない、あれscriptで制御してる部分が多くて（ボタンとか）差し込むの面倒なんだわ。比較的制御が届いていないTinyMCEならではのインスタントなもの。と、言いますか、Gutenberg大嫌いなので。UIとしてもアメーバとか慣れてる一般人にはTinyMCEのが楽だし。
今回のは1ラップ１ボタン。
こういうのっていずれあれこれ増やしたくなるもので、管理画面にフィールド作ってとかもいずれできるが、サイトのコンテンツとかに合わせてカスタム的に1ｘ1で。
function add_custom_editor_button() {?><style>.custom-wrap-button {margin: auto;padding: 0 10px;background: #FFFFFF;color: #0a4b78;border:1px solid #0a4b78;cursor: pointer;border-radius: 3px;font-size: 14px;line-height:2;}.custom-wrap-button:hover {opacity:.85;}</style>
<script>document.addEventListener("DOMContentLoaded", function() {var editorToolbar = document.querySelector("#wp-content-editor-tools"); // エディタ上部に追加if (editorToolbar) {var wrapButton = document.createElement("button");wrapButton.innerText = "p wrapped";wrapButton.className = "custom-wrap-button";wrapButton.type = "button";wrapButton.onclick = function() {var editor = tinymce.activeEditor;if (editor) {var selectedText = editor.selection.getContent();if (selectedText.length > 0) {editor.insertContent('<p class="wrapped">' + selectedText + '</p>');} else {alert("テキストを選択してください。");}}};editorToolbar.appendChild(wrapButton);}});</script><?php}
add_action("admin_head", "add_custom_editor_button");
書いて指定するのが
wrapButton.innerText = “p wrapped”;ボタンの表示名
editor.insertContent(‘<p class=”wrapped”>’ + selectedText + ‘</p>’);タグと属性
ここの2ケ所。
欠点は、pの場合段落替えを含む文字列は段落替え以降をはじく。
これは自動成形機能によるものだが、文字列をp生成にかかわらないdiv.指定クラスで囲むなと複数行でautopが働かないとpが入らないなど問題がある。
既にp以外でインライン要素がはっきりしていればdivで囲うのもありかと思う。
自動成形がないとエディタが何であれ記事を書き辛いので、本邦「p装飾」限定だが、単一段落での装飾用、またはインライン要素が確たる部位のラップ用としかならないが、コンテンツ内にいくつかこうした装飾部分が欲しい場合は使えるかも。
これでやや凝った投稿もtext-editor見なくてもできるかも。