wordpress
WordPressでカスタムコードを登録・挿入するfunction.phpコード
最終更新日: 2025年1月7日
以前は投稿時にカスタムしたタグ挿入する際にはadd quick tag（だっけかな）プラグインを使っていたが、WPがver6.7.1になってからエラーが出て使えなくなった。
3年ほど前からPLの更新がされていなかったが、開発からの更新等がされなくなったのだろう。
だからプラグインが豊富と言われてもね。
通常WPサイト作っても本体やPLまたはサーバーのアップなどせずに、納品時維持で運用することが多いのだろうけど、システム更新などをする運用の場合はPLに頼りすぎると困ることもある。
制作サイドとしてはテーマに合わないものが増えても困るわけで、やはり非プラグインでの機能アップがベスト。PHPもひっきりなしにアップなどがあるので折角作ったコードが使えなくなるケースもあるが、PL頼るよりはマシ。
ということで、投稿フィールドにカスタムで作ったタグを登録し呼び出すためのfunction.php追記で働くコードを作った。
TinyMCEとGutenbergどちらでも動くはず。作成者がGutenberg嫌いなのでこちらは試していないがTinyMCEなら普通に使える。・・・Gutenbergでは使えません。
こんなもん使って投稿するのは多少はソースコードを理解している人（若しくはそういうレクチャーを受けた）だからTinyMCEで充分と思うが、一応デフォルトのGutenbergでも使えるようにした。
一応環境的にはWP6.7.1、PHP8、SQL8環境、でなら働くということで。
作成したコードはDB保存されるが現状ではエクスポートもインポートも考えてない。大したものを保存する前提ではないからね。function.phpに追記すれば、既述部分との不整合（add_actionの重複とか）が無ければ使えるはず。
先ずはコード。
function create_custom_code_table() {global $wpdb;$table_name = $wpdb->prefix . 'custom_codes';$charset_collate = $wpdb->get_charset_collate();
$sql = "CREATE TABLE $table_name (id mediumint(9) NOT NULL AUTO_INCREMENT,code_title text NOT NULL,code_text longtext NOT NULL,PRIMARY KEY (id)) $charset_collate;";
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');dbDelta($sql);}register_activation_hook(__FILE__, 'create_custom_code_table');
// 管理画面でカスタムコードを登録できるメニューを追加function custom_code_menu() {add_menu_page('カスタムコード管理', // ページタイトル'カスタムコード', // メニュー名'manage_options', // 権限'custom-code-management', // メニューURL'custom_code_management_page', // コールバック関数'dashicons-editor-code', // アイコン100 // 表示位置);}add_action('admin_menu', 'custom_code_menu');
// カスタムコード管理ページの内容function custom_code_management_page() {global $wpdb;$table_name = $wpdb->prefix . 'custom_codes';
// 登録処理if (isset($_POST['submit_code'])) {$code_title = sanitize_text_field($_POST['code_title']);$code_text = wp_kses_post($_POST['code_text']);
if (!empty($code_title) && !empty($code_text)) {$wpdb->insert($table_name,['code_title' => $code_title, 'code_text' => $code_text]);echo '<div class="updated"><p>コードを登録しました。</p></div>';} else {echo '<div class="error"><p>すべてのフィールドを入力してください。</p></div>';}}
// コードの表示と削除処理if (isset($_GET['delete_id'])) {$wpdb->delete($table_name, ['id' => intval($_GET['delete_id'])]);echo '<div class="updated"><p>コードを削除しました。</p></div>';}
$codes = $wpdb->get_results("SELECT * FROM $table_name");
echo '<div class="wrap">';echo '<h1>カスタムコード管理</h1>';echo '<form method="POST">';echo '<table class="form-table">';echo '<tr><th><label for="code_title">タイトル</label></th><td><input type="text" name="code_title" id="code_title" class="regular-text"></td></tr>';echo '<tr><th><label for="code_text">コード</label></th><td><textarea name="code_text" id="code_text" class="large-text" rows="5"></textarea></td></tr>';echo '</table>';echo '<p><input type="submit" name="submit_code" class="button button-primary" value="登録"></p>';echo '</form>';
if ($codes) {echo '<h2>登録済みコード</h2>';echo '<table class="widefat">';echo '<thead><tr><th>タイトル</th><th>コード</th><th>操作</th></tr></thead><tbody>';foreach ($codes as $code) {echo '<tr>';echo '<td>' . esc_html($code->code_title) . '</td>';echo '<td><code>' . esc_textarea($code->code_text) . '</code></td>';echo '<td><a href="?page=custom-code-management&delete_id=' . intval($code->id) . '" class="button button-secondary">削除</a></td>';echo '</tr>';}echo '</tbody></table>';}
echo '</div>';}
// 投稿画面にドロップダウンを追加function custom_code_editor_dropdown() {global $wpdb;$table_name = $wpdb->prefix . 'custom_codes';$codes = $wpdb->get_results("SELECT * FROM $table_name");
if ($codes) {echo '<script>jQuery(document).ready(function($) {$("#insert_custom_code").on("change", function() {const selectedCode = $(this).find(":selected").data("code");if (selectedCode) {if (typeof wp !== "undefined" && wp.data && wp.blocks) {wp.data.dispatch("core/block-editor").insertBlocks(wp.blocks.createBlock("core/paragraph", { content: selectedCode }));} else if (typeof tinyMCE !== "undefined" && tinyMCE.activeEditor) {tinyMCE.activeEditor.execCommand("mceInsertContent", false, selectedCode);} else {const textarea = $("#content");textarea.val(textarea.val() + selectedCode);}}});});</script>';echo '<select id="insert_custom_code" style="margin-top: 10px;"><option value="">コードを選択</option>';foreach ($codes as $code) {echo '<option data-code="' . esc_textarea($code->code_text) . '">' . esc_html($code->code_title) . '</option>';}echo '</select>';}}add_action('edit_form_after_title', 'custom_code_editor_dropdown');
function.phpに追記して問題なければ。左のツールバーに「カスタムコード」の項目が現れるはず。
これをクリックすると「カスタムコード管理」なる画面に遷移する。
ここにコードを登録し、投稿画面にあるドロップダウンリスト「コードを選択」をクリックすれば登録コードを選択できる。
選択した時点で挿入されるので、あとは内容書けば済む。
これはプラグインものでもそうだが、登録時点で仮の内容も書いておいて書き換える形が便利。
削除するときはテキストに変更して削除がベター。
テーマだけでなくWP設定（autopの扱いとか）などでも正常に使えなくなるが、投稿時何かボックスを用いることが多いサイトにはあると便利かも。