web-dev-qa-db-ja.com

プラグインなしで投稿コンテンツのテーブルをフィルタリングする方法は？

私はこのリンクからW3schoolsにこの機能のフィルター/検索テーブルを見つけました

https://www.w3schools.com/howto/howto_js_filter_table.asp

私のwordpressページコンテンツで使用しようとしました。ここでの問題はonkeyup="myFunction()"がページエディタから消えることです。

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

なる

<input id="myInput" title="Type in a name" type="text" placeholder="Search for names.." />

誰かがそれを機能させるための解決策を持っていますか？よろしくお願いします。

functionsjavascript
1
shirley

WordPress StackExchange！へようこそ！Tom J Nowellが質問のコメントで述べたように、WordPress JavaScriptファイル。

これを行うには、3つの手順を完了する必要があります。

onkeyupを起動するイベントを使用してJSファイルを作成します：

(function (window, $) {

document.getElementById("myInput").addEventListener("keyup", myFunction);
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;

  input = this; //CHANGE THIS LINE. Assigning "this", which is your input, gives you access to the value, etc. 

  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}

})(window);

上の例では、両方ではなく、どちらか一方のソリューション（Vanilla JSまたはjQuery）を使用する必要があります。

テーマ内（例：wp-content/themes/twentytwenty/js/your-custom-file.js）にファイルを作成したら、_wp_enqueue_scriptを使用してテーマに追加する必要があります。

<?php
//Inside functions.php of your theme.
add_action('wp_enqueue_scripts', 'custom_enqueue_script');
function custom_enqueue_script(){
  wp_enqueue_script('custom-script', get_stylesheet_directory_uri().'/js/your-custom-file.js', array('jQuery'), false, true);
}

これにより、カスタムJSファイルがテーマに追加されます。 WordPressがJSファイルを処理する方法の詳細については、以下の追加リンクを参照することをお勧めしますが、上記で開始できます。

2
Tom