質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

1917閲覧

WordPress管理画面でjavascriptを適用する方法

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/03/06 12:07

編集2018/03/11 05:24

「1月1日」などのタームが366個あるのですけれど、その管理画面(投稿編集画面)の表示がうまくいきません。

下記のjavascriptだと、この図のようにターム選択のチェックボックスが消えてしまうのです。。(>_<)

イメージ説明

下記のjavascriptは、「1月1日」を「1/1」にしつつソートする。という機能です。
▼functions.php

javascript

1function admin_func() { 2?> 3<script> 4(function($){ 5$(function(){ 6 /* 置換 */ 7 $('li label').each(function(){ 8 $(this).text($(this).text().replace(/[0-9]/g,function(){ 9 return String.fromCharCode((arguments[0].charCodeAt(0)-65248)); 10 }).replace(/(\d+)月(\d+)日/,function(){ 11 return arguments[1]+"/"+arguments[2]; 12 })); 13 }); 14 /* ソート */ 15 $('li label').get().sort(function(x,y){ 16 var s=[x,y].map(function(z){ 17 return $(z).find('a').text().replace(/(\d+)/(\d+)/,function(){ 18 return ("0"+arguments[1]).substr(-2)+("0"+arguments[2]).substr(-2); 19 }); 20 }); 21 return s[0]>s[1]; 22 }).forEach(function(x){ 23 $(x).closest('.categorychecklist').append(x); 24 }); 25}); 26})(jQuery); 27 28</script> 29<?php 30} 31add_action('admin_head', 'admin_func');

おかしなところをご指摘いただければ幸いです。
どうぞよろしくお願い致します。

尚、上のjavascriptをかけない通常の管理画面(投稿編集画面)のHTMLは次のようになっています。

html

1<div id="daydiv" class="postbox "> 2<button type="button" class="handlediv" aria-expanded="true"><span class="screen-reader-text">パネルを閉じる: day</span><span class="toggle-indicator" aria-hidden="true"></span></button><h2 class="hndle ui-sortable-handle"><span>day</span></h2> 3<div class="inside"> 4 <div id="taxonomy-day" class="categorydiv"> 5 <ul id="day-tabs" class="category-tabs"> 6 <li class="tabs"><a href="#day-all">day 一覧</a></li> 7 <li class="hide-if-no-js"><a href="#day-pop">よく使うもの</a></li> 8 </ul> 9 10 <div id="day-pop" class="tabs-panel" style="display: none;"> 11 <ul id="daychecklist-pop" class="categorychecklist form-no-clear"> 12 13 <li id="popular-day-427" class="popular-category"> 14 <label class="selectit"> 15 <input id="in-popular-day-427" checked="checked" value="427" type="checkbox"> 16 1月1日</label> 17 </li> 18 19 <li id="popular-day-433" class="popular-category"> 20 <label class="selectit"> 21 <input id="in-popular-day-433" checked="checked" value="433" type="checkbox"> 22 1月2日</label> 23 </li> 24 25 </ul> 26 </div> 27 28 <div id="day-all" class="tabs-panel"> 29 <input name="tax_input[day][]" value="0" type="hidden"> <ul id="daychecklist" data-wp-lists="list:day" class="categorychecklist form-no-clear"> 30 31<li id="day-440" class="popular-category"><label class="selectit"><input value="440" name="tax_input[day][]" id="in-day-440" checked="checked" type="checkbox"> 1月10日</label></li> 32<li id="day-442" class="popular-category"><label class="selectit"><input value="442" name="tax_input[day][]" id="in-day-442" checked="checked" type="checkbox"> 1月12日</label></li> 33<li id="day-427" class="popular-category"><label class="selectit"><input value="427" name="tax_input[day][]" id="in-day-427" checked="checked" type="checkbox"> 1月1日</label></li> 34<li id="day-456" class="popular-category"><label class="selectit"><input value="456" name="tax_input[day][]" id="in-day-456" checked="checked" type="checkbox"> 1月26日</label></li> 35<li id="day-433" class="popular-category"><label class="selectit"><input value="433" name="tax_input[day][]" id="in-day-433" checked="checked" type="checkbox"> 1月3日</label></li> 36<li id="day-714"><label class="selectit"><input value="714" name="tax_input[day][]" id="in-day-714" type="checkbox"> 10月10日</label></li> 37<li id="day-715"><label class="selectit"><input value="715" name="tax_input[day][]" id="in-day-715" type="checkbox"> 10月11日</label></li> 38<li id="day-716"><label class="selectit"><input value="716" name="tax_input[day][]" id="in-day-716" type="checkbox"> 10月12日</label></li> 39<li id="day-717"><label class="selectit"><input value="717" name="tax_input[day][]" id="in-day-717" type="checkbox"> 10月13日</label></li> 40<li id="day-718"><label class="selectit"><input value="718" name="tax_input[day][]" id="in-day-718" type="checkbox"> 10月14日</label></li> 41<li id="day-719"><label class="selectit"><input value="719" name="tax_input[day][]" id="in-day-719" type="checkbox"> 10月15日</label></li> 42<li id="day-720"><label class="selectit"><input value="720" name="tax_input[day][]" id="in-day-720" type="checkbox"> 10月16日</label></li> 43<li id="day-721"><label class="selectit"><input value="721" name="tax_input[day][]" id="in-day-721" type="checkbox"> 10月17日</label></li> 44<li id="day-722"><label class="selectit"><input value="722" name="tax_input[day][]" id="in-day-722" type="checkbox"> 10月18日</label></li> 45<li id="day-723"><label class="selectit"><input value="723" name="tax_input[day][]" id="in-day-723" type="checkbox"> 10月19日</label></li> 46<li id="day-705"><label class="selectit"><input value="705" name="tax_input[day][]" id="in-day-705" type="checkbox"> 10月1日</label></li> 47<li id="day-724"><label class="selectit"><input value="724" name="tax_input[day][]" id="in-day-724" type="checkbox"> 10月20日</label></li> 48<li id="day-725"><label class="selectit"><input value="725" name="tax_input[day][]" id="in-day-725" type="checkbox"> 10月21日</label></li> 49<li id="day-726"><label class="selectit"><input value="726" name="tax_input[day][]" id="in-day-726" type="checkbox"> 10月22日</label></li> 50<li id="day-727"><label class="selectit"><input value="727" name="tax_input[day][]" id="in-day-727" type="checkbox"> 10月23日</label></li> 51<!-- 366個あるので省略 --> 52 53 </ul> 54 </div> 55 <div id="day-adder" class="wp-hidden-children"> 56 <a id="day-add-toggle" href="#day-add" class="hide-if-no-js taxonomy-add-new"> 57 + 新規 day を追加 </a> 58 <p id="day-add" class="category-add wp-hidden-child"> 59 <label class="screen-reader-text" for="newday">新規 day を追加</label> 60 <input name="newday" id="newday" class="form-required form-input-tip" value="新しい day の名前" aria-required="true" type="text"> 61 <label class="screen-reader-text" for="newday_parent"> 62 親 day: </label> 63 <select name="newday_parent" id="newday_parent" class="postform"> 64 <option value="-1">— 親 day —</option> 65 <option class="level-0" value="714">10月10日</option> 66 <option class="level-0" value="715">10月11日</option> 67 <option class="level-0" value="716">10月12日</option> 68 <option class="level-0" value="717">10月13日</option> 69 <option class="level-0" value="718">10月14日</option> 70 <option class="level-0" value="719">10月15日</option> 71 <option class="level-0" value="720">10月16日</option> 72 <option class="level-0" value="721">10月17日</option> 73 <option class="level-0" value="722">10月18日</option> 74 <option class="level-0" value="723">10月19日</option> 75 <option class="level-0" value="705">10月1日</option> 76 <option class="level-0" value="724">10月20日</option> 77 <option class="level-0" value="725">10月21日</option> 78 <option class="level-0" value="726">10月22日</option> 79 <option class="level-0" value="727">10月23日</option> 80 <!-- 366個あるので省略 --> 81</select> 82 <input id="day-add-submit" data-wp-lists="add:daychecklist:day-add" class="button category-add-submit" value="新規 day を追加" type="button"> 83 <input id="_ajax_nonce-add-day" name="_ajax_nonce-add-day" value="a0d6ad85c8" type="hidden"> <span id="day-ajax-response"></span> 84 </p> 85 </div> 86 </div> 87 </div> 88</div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

.text()メソッドは内部要素を差し替えますので、もともと中にあったinput要素も差し替えてしまいます。
テキストノードの取り扱いはなかなかやっかいです。↓ここが参考になるかもしれません。

JavaScript で TextNode を操作する

投稿2018/03/07 07:08

Lhankor_Mhy

総合スコア36104

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問