この記事では下記の”サイト内に組み込む形でGoogleカスタム検索を設置する方法”という記事
を参考に、実際にWordPressテーマCocoonを使用している当ブログに導入してみたしたところ、直面した問題の解消方法を説明します。
上記の記事ではカスタム検索の結果ページをWordPressの固定ページに表示することになるのですが、Cocoonでは固定ページにおいてもSNSリンクや投稿日などが投稿ページと同様に表示されます。
しかし検索結果ページは当然、検索結果を表示するべきページであり、SNSシェアやフォローなどの要素はふさわしくないものです。
そんな不要な要素を簡単に非表示にできるCSSをこれから説明します。
何も対策していないと検索結果に余計な要素が表示される
不要な要素を非表示にするCSSを設定していないと、Cocoonでは検索結果ページがこのように表示されてしまいます。
検索機能に問題が起きるわけではないですが、SNS機能や投稿日などは検索結果ページとしては無駄な要素であり邪魔でしかありません。
このような無駄な要素は非表示にして検索という目的を果たすページとして最適化するべきです。
固定ページから不要な要素を非表示にするCSS
Cocoonの場合に追加設定する必要のあるCSSは下記のとおりです。
.page-id-xxxx .sns-share, /* SNSシェア */
.page-id-xxxx .sns-follow, /* SNSフォロー */
.page-id-xxxx .date-tags, /* 投稿日 */
.page-id-xxxx .author-info /*著者情報 */
{
display: none;
}「xxxx」と記載した部分を、ご自身のサイトの固定ページに指定されている記事IDに書き換えれば、あとはコピペするだけで利用できます。
もし4つの中で残しておきたい要素がある場合は、該当する一行をCSSから消してしまえば大丈夫です。
ただし一括指定しているので、カンマの位置には注意してください。
※IDの桁数はそれぞれのサイトによって異なります
※パーマリンクの文字列ではなく、記事IDが必要なので注意してください
追加CSSを設定する方法
記事IDの確認方法
WordPressの管理者メニューで固定ページ→固定ページ一覧 を表示します。
一覧ページの右側にIDという列があり、そこに表示されている数字が記事IDとなります。
この数字をメモしておき、上で説明したCSS「.page-id-xxxx」の「xxxx」の部分と書き換えましょう。
追加CSSを入力する場所
外観→カスタマイズ をクリックします。
※現在のテーマ Cocoon Child が表示されていることを念の為確認してください。
追加CSS をクリックします。
上で説明した「.page-id-」で始まるCSSを記載します。
CSSを入力したら上にある青い公開ボタンを押して追加CSSの設定を保存し、サイトに反映させます。
※外観→テーマエディター から編集しても同じように設定できると思いますが、関係ない部分を触ってしまうとエラーの原因になりそうなので極力避けています。
ここまで設定できたら、実際にご自身のサイトでカスタム検索の検索結果ページを表示してみてください。
無駄な要素が非表示となり、キレイになりましたよね。
お疲れさまでした。
おわりに
今回行ったカスタム検索の検索結果ページから不要な要素をCSSで非表示にする という作業工程自体は簡単であっという間にできるものでした。
サイト運営社としては、制御したい部分をピンポイントで制御する方法をまた一つ知ることができました。
このちょっとの手間を惜しまずケアしておくことで、わざわざ自分のサイトに訪れてくれたユーザの快適なサイト閲覧つながれば幸いです。
コメント