wordpressのテーマ作り

WordPressの検索窓に予測機能をつける~typeahead

投稿日:

Twitter BootstrapのJavascriptプラグインには検索フォームに予測機能をつけるtypeaheadというプラグインがあるので導入できるか試してみた。

1 searchform.phpを作成する

WordPressでは <?php get_search_form(); ?> とソースに記入すれば自動でサーチフォームを設置してくれるが、searchform.phpというテンプレートを作成しておけばテンプレートに従ったサーチフォームを設置できる。もっともしんぷるなのは次のようなものだろう。

参考

2 typeaheadを導入する

プラグインの導入はつぎのとおり

予測変換用のデータはダミー

参考

#28 入力時に候補を表示する @ドットインストール

 

ところが、typeaheadの予測変換とブラウザの予測変換が重なって表示されてしまう。FirefoxでもChromeでもそうだった。おそらくGoogleなどの検索でもname=”s”が使われているからではないかと思われる。

このあと、phpでタグ一覧をデータに吐き出して予測検索用のデータを出そうと思ったのだが、UIがかっこ良くならないのでテンションが上がらずあきらめた。

-wordpressのテーマ作り
-

執筆者:

関連記事

Stinger5でWordPressブログのテーマを変更した

By: Mikhail Kamarov – CC BY 2.0 目次1 Stinger52 子テーマをつくる3 ヘッダー画像4 ファビコン変更5 日本語URLを使えるように6 適当に色など …

WordPressのテーマ変更したら軽くなった~自作テーマ

ブログがいつの間にか遅くなっていた。気づいたら3秒台。 もろもろ考えたあげく勉強も兼ねて簡単なWordpressのテーマを作ってみることにした。 参考 テーマの作成方針 テーマをつくるための方針はつぎ …

Stinger3でWordPressのテーマつくった

By: The National Guard – CC BY 2.0 目次1 Stinger3ってどんなテーマ?2 子テーマをつくる3 ヘッダー画像を変える4 トップページを変える5 h2 …

WordPressにページ内ナビゲーションをつけた~jQuery

      MediaWikiとかTwitterBootstrap2.1.0に新しくついたやつとかそんなイメージ 仕組みとしては投稿の<h2>要素を集めてきて …

div要素全体をクリッカブルにしてリンクする~CSS

By: James Lee   WordPressのテーマを少しいじった ブロック要素の全体をリンク領域に設定する なにか別のもっと簡単な方法がCSS3であった気もするけど、とりあえず動いて …