WordPress 記事一覧インクリメンタル検索

wp-content/themes/xxx
の中に適当な名前(ここではpage2.php)を付け下記を貼付け。
固定ページでテンプレートからTESTを選択。

<?php

function footer_article_search(){

echo <<<HTML
  <script>
  jQuery(window).on('load', function() {
    jQuery("#pattern").val('');
    let raw_titles = jQuery("#titles").children();
    jQuery("#pattern").on("keyup",function(){
      jQuery("#titles").empty();
      let pattern = jQuery("#pattern").val();
      if (pattern == "") {
        jQuery("#titles").append(raw_titles);
      } else {
        raw_titles.each(function(){
          let target = jQuery(this).text();
          if (target.toLowerCase().indexOf(pattern) != -1) {
            jQuery("#titles").append(jQuery(this));
          }
        });
      }
    });
  });
  </script>
HTML;
}

function header_article_search(){

echo <<<HTML
  <style>

  li{
    list-style: none;
  }

  .tag, .tag a{
    color: grey;
    font-size: 0.9em;
  }

  #pattern {
    font-size: 16px;
    width: 300px;
  }

  #search input[type="submit"] {
    display: none;
  }

  </style>
HTML;
}

add_action( 'wp_head', 'header_article_search', 1);
add_action( 'wp_footer', 'footer_article_search', 1);

/* Template Name: TEST */

get_header();

?>

<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">

<?php
if (strpos(get_pagenum_link(), "checked")){
  echo '<a href="' . $post->guid . '">投稿日順</a>　';
  echo '[タイトル順]';
} else {
  echo '[投稿日順]　';
  echo '<a href="' . $post->guid . '&checked">タイトル順</a>';
}
?>

<form action="https://www.google.com/search" target="_blank" id="search">
  <input type="text" id="pattern" name="q" placeholder="リスト検索 / サイト内検索"/>
  <input type="hidden" name="hl" value="ja" />
  <input type="hidden" value="https://appbay.org/" name="as_sitesearch" />
  <input type="submit" name="btnG" value="" />
</form>

<?php

if (strpos(get_pagenum_link(), "checked")){
  $args = array(
    'posts_per_page' => -1,
    'post_type' => 'post',
    'orderby' => 'title',
    'order'   => 'asc',
  );
} else {
  $args = array(
    'posts_per_page' => -1,
    'post_type' => 'post',
  );
}

$myposts = get_posts( $args );

echo "<ul id=titles>";
foreach ($myposts as $post) : setup_postdata($post);
  echo "<li>";
  echo "<a target='_blank' href='";
  the_permalink();
  echo "'>";
  the_time('Y-m-d');
  echo "　";
  the_title();
  echo "</a>";
  echo "　";
  echo "<span class='tag'>";
  the_tags("");
  echo "</span>";
echo "</li>";
endforeach; 
echo "</ul>";

wp_reset_postdata();
echo get_the_content();
echo "</main></div></div>";
get_footer();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

<?php

function footer_article_search(){

echo <<<HTML

jQuery(window).on('load', function() {

jQuery("#pattern").val('');

let raw_titles = jQuery("#titles").children();

jQuery("#pattern").on("keyup",function(){

jQuery("#titles").empty();

let pattern = jQuery("#pattern").val();

if (pattern == "") {

jQuery("#titles").append(raw_titles);

} else {

raw_titles.each(function(){

let target = jQuery(this).text();

if (target.toLowerCase().indexOf(pattern) != -1) {

jQuery("#titles").append(jQuery(this));

}

});

}

});

</script>

HTML;

}

function header_article_search(){

echo <<<HTML

<style>

li{

list-style: none;

}

.tag, .tag a{

color: grey;

font-size: 0.9em;

}

#pattern {

font-size: 16px;

width: 300px;

}

#search input[type="submit"] {

display: none;

}

</style>

HTML;

}

add_action( 'wp_head', 'header_article_search', 1);

add_action( 'wp_footer', 'footer_article_search', 1);

/* Template Name: TEST */

get_header();

<?php

if (strpos(get_pagenum_link(), "checked")){

echo '<a href="' . $post->guid . '">投稿日順</a>　';

echo '[タイトル順]';

} else {

echo '[投稿日順]　';

echo '<a href="' . $post->guid . '&checked">タイトル順</a>';

}

</form>

<?php

if (strpos(get_pagenum_link(), "checked")){

$args = array(

'posts_per_page' => -1,

'post_type' => 'post',

'orderby' => 'title',

'order' => 'asc',

);

} else {

$args = array(

'posts_per_page' => -1,

'post_type' => 'post',

);

}

$myposts = get_posts( $args );

echo "<ul id=titles>";

foreach ($myposts as $post) : setup_postdata($post);

echo "<li>";

echo "<a target='_blank' href='";

the_permalink();

echo "'>";

the_time('Y-m-d');

echo "　";

the_title();

echo "</a>";

echo "　";

echo "<span class='tag'>";

the_tags("");

echo "</span>";

echo "</li>";

endforeach;

echo "</ul>";

wp_reset_postdata();

echo get_the_content();

echo "</main></div></div>";

get_footer();

これで、Enterを押せばGoogleのサイト内検索が実行され、文字を入力するだけならリスト検索(インクリメンタルサーチ)が実行される。

ブログをメモ代わりにしているので過去の記事を探すことも多い。今まではGoogleのサイト内検索だけだったが、タイトルだけ検索できれば十分という場合も多いのでこちらのほうが便利。

記事一覧