TablePressの検索ボックスで、プレースホルダーテキストを表示できてなく困っていませんか?
簡単にできると思っていたのですが、情報も少なくなかなかできない…。
なんだかんだいろいろ調べて実装できたのですが、わかっちゃえば5分で終わる作業でした(泣)
ということで今回は、TablePressの検索ボックスにプレースホルダーテキストを表示させる方法と、検索ボックスのデザインをカスタマイズする方法を紹介したいと思います!
プレースホルダーテキストを表示させる方法は、めちゃくちゃ簡単なのでぜひ試してみてください♪
目次
プレースホルダーテキストとは
プレースホルダーテキストとは、上の画像のように入力欄にあらかじめ薄い文字で、どんな風に入力すればいいのかをサポートしているテキストです。
ユーザーはこれを見ることによって、どんなことを入力すればいいのかわかります。
TablePressの検索ボックスでプレースホルダーテキストを表示する方法
実装すると上記の画像のように、好きな文字を入力欄に表示させることが可能となります。
プレースホルダーテキストを表示させる方法
STEP1:表示させたいテーブルの編集画面を開く
まず検索ボックスを使っていて、プレースホルダーテキストを表示させたいテーブルの編集画面にいきます。
STEP2:カスタムコマンドにコードを入力する
テーブルの編集画面下のほうに、設定項目があります。
「DataTablesを使用」と「検索/フィルター」にチェックを入れると検索ボックスが表示されるようになります。
そして「カスタムコマンド」に下記コードを入力してください。
"language": $.extend( {}, DataTables_language["ja"], { "searchPlaceholder": "ここに文字を入力してね♪" } )
これで保存すれば、プレースホルダーテキストが表示されるようになります。
めちゃくちゃ簡単ですね。
「ここに文字を入力してね♪」を変更すれば、好きなテキストを表示させることができます。
検索ボックスのデザインをカスタマイズ
- 検索ボックスの横にある「検索:」の文字を削除
- CSSでデザインの変更
検索の文字を消す方法
「検索:」の文字を消すには、「lang-ja.json」というファイルを編集します。
WordPressの管理画面からの編集方法とFTPソフトからの編集方法をそれぞれ紹介します。
WordPressの管理画面からの編集方法
WordPressの管理画面から「プラグインエディター」を選択します。
「編集するプラグインを選択:」で「TablePress」を選択します。
「i18n」を選択します。
「datatables」を選択します。
「datatables」を選択したあと、「lang-ja.json」を選択します。
このファイルが日本語の表示設定をしているファイルになります。
「lang-ja.json」を開くと、「検索:」という箇所があるので、ここを編集します。
空欄にすれば消えますし、違うテキストに変更することも可能です。
またタグで囲むこともできるので、classをつけて文字の色や大きさなど、デザインの変更をすることもできます。
<span class=”aaa”>検索:</span>みたいな感じです。
これで検索ボックス横にある「検索:」を変更することができます。
FTPソフトからの編集方法
FTPソフトで直接編集する方は、ファイルが入っているところは下記になります。
wp-content→plugins→tabllepress→i18n→datatables→lang-ja.json
lang-ja.jsonファイルを開いたら、検索:という箇所があるので変更しましょう!
CSSでデザインの変更
検索の文字が変更できたら、次にCSSでデザインの変更をしていきます。
というか下記コードをコピペしていただければ、参考画像と同じようなデザインにすることができるので、使ってください!
/*TablePress検索ボックスのカスタマイズ*/ .dataTables_filter { width: 100% !important; } .dataTables_filter input { width: 100% !important; max-width: 100% !important; margin: 5% 0 !important; background: url(images/icon-search.png) no-repeat top 50% left 10px; background-size: 30px; border: 1px solid #ccc !important; border-radius: 4px !important; box-shadow: 2px 3px 5px 1px rgba(0,0,0,0.18) inset; color: #333 !important; font-size: 16px !important; padding-left: 50px !important; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s !important; box-sizing: border-box !important; height: 50px; text-align: left; background-color: #fefad4 !important; } /* プレースホルダーに表示させるテキストのデザイン */ .dataTables_filter input::placeholder { color: #888 !important; /* プレースホルダーテキストの文字色 */ } /* 検索ボックスをクリックしたときのデザイン */ .dataTables_filter input:focus { border: 1px solid #ccc !important; /* 枠線の色 */ background-color: #fff !important; /* 背景色 */ outline: none !important; }
使っているテーマによって、デフォルトのCSSに違いがあるので、テーマに合わせて微調整してみてください。
ちなみに僕が使っているテーマは、スワローというテーマです。
まとめ
TablePressはとても便利なプラグインなので、よく使わせてもらってます。
ただ、ちょっとしたところの変更が難しいので、TablePressのカスタマイズにはけっこう時間をかけています…。
僕が何時間も悩んだことを、この記事を読んだあなたが瞬殺してくれたら嬉しいです♪
小さなことにこだわると仕事が進まないよー(泣)
WordPressで集客できるブログを作る方法まとめ
WordPressでブログを始めよう!
WordPressの設定
- WordPressをインストールしたら必ずやったほうがいい初期設定
- カンタンにWordPressのユーザー名を変更する方法!【セキュリティ対策】
- 不要なWordPressテーマを簡単に削除する方法【2分で解決】
- WordPressで失敗しないパーマリンクの設定方法!【ドメイン+postnameでOK】
- すぐできる!WordPressにYouTubeの動画を埋め込む方法
- WordPressにツイッターを埋め込む方法を画像付きでわかりやすく解説!
- スマホでWordPressのブログを投稿する方法!効率が悪いので工夫をしよう
- 【Atom設定】WordPressの下書きで大活躍するテキストエディタ!爆速!
- エックスサーバーで特定のカテゴリーにBasic認証を設定する方法【WordPress】
- 501エラーでWordPressの更新ができないときの対処方法【エックスサーバーWAF設定】
- WordPressエディターでPHPファイルを出力する方法【5分で完了】
- TablePressの検索ボックスにプレースホルダーテキストを表示させる方法
- 【コピペOK】コンタクトフォーム7の送信ボタンをカスタマイズをしよう!
WordPressのテーマについて
WordPressのプラグイン
- WordPressのプラグインとは?インストールの方法まで徹底解説
- オススメのWordPressプラグイン!SEO対策・ブログ運営・アフィリエイトで役立つ!
- Table of Contents Plusの設定方法!初心者でも簡単に目次が作れるプラグイン
- Cache Enablerの設定と使い方【キャッシュでブログの表示速度が上がる!】
- Autoptimizeの設定と使い方【ブログの表示速度を上げる!】
- Google XML Sitemapの設定・使い方を徹底解説
- サイトマップを自動生成してくれるPS Auto Sitemapの使い方と設定を解説
- Lazy Load-Optimize Imagesの設定【画像の遅延読み込みで表示速度UP!】
- EWWW Image Optimizer設定&使い方!画像を圧縮して表示速度UP
- 【TinyMCE Advanced】初心者でも簡単にブログの装飾ができるようになるプラグイン
- WordPress Popular Postsの設定方法【人気記事を簡単に表示】
- FancyBox for WordPressの設定と使い方!画像をポップアップ拡大表示できる
- AddQuicktagの設定&使い方【効率的にブログが書ける!】
- 【WP Dashboard Notes】WordPressダッシュボードにメモできるプラグイン
- WordPressのリンク切れを自動チェック!Broken Link Checkerがオススメ
- 【初心者】WordPressでお問い合わせフォームを簡単に作る方法
- Site Kit by Googleの設定方法!WordPressの管理画面でGoogleデータを全部チェック
- All In One SEO Pack一般設定の設定方法【初心者にわかりやすく解説】
- 【WordPress】カテゴリーの順番を簡単に変更できるプラグイン
- カテゴリーを一括で変更できるプラグイン【WordPress】
- スパムとさよなら!Akismetの設定方法をわかりやすく解説
TablePressの検索ボックスにプレースホルダーテキストを表示させたい!