書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

【AFFINGER4-カスタマイズ】検索窓と検索結果の表示形式を変更する

 
  2018/06/24
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

本日も、『AFFINGER』のカスタマイズについて備忘録を残します。

今回の内容は検索窓と検索結果画面のカスタマイズです。

検索を実行した際に

‘**の一覧’

とか

‘**’の検索結果一覧

のように大きく表示されるのが嫌いだったので、修正しました。

また、ホーム画面の記事一覧デザインを修正しているのであれば、検索結果の記事一覧デザインも修正する必要があります。

カスタマイズするファイル

今回、修正するファイルは

  • archive.php
  • category.php
  • search.php
  • searchform.php

の4ファイルです。

それぞれの役割は

archive.php

タグ・日付のアーカイブ検索結果を表示する

category.php

カテゴリアーカイブの検索結果を表示する

search.php

検索窓にて検索した結果を表示する

searchform.php

検索窓の表示と遷移先(移行先)を指定する

かきてぃー
なんで、「archive.php」にカテゴリがないんじゃー!?

という疑問は、テンプレート階層を理解しておくと納得できます。

ページの種類 優先順位1 優先順位2 優先順位3
トップページ home.php index.php
カテゴリー別
アーカイブページ
category.php archive.php index.php
タグ別
アーカイブページ
tag.php archive.php index.php
投稿日別
アーカイブページ
date.php archive.php index.php
検索結果 search.php index.php
投稿ページ single.php index.php
固定ページ page.php index.php
404ページ 404.php index.php

仮に親テーマor子テーマに「tag.php」や「date.php」があれば、そっちが優先されるわけですね。

『AFFINGER4』には「category.php」があるので、「archive.php」より優先されているわけなのです。

今回、やりたいこと

  1. 検索窓の表示を変更
  2. 検索結果の表示文字列を変更
  3. 検索結果の記事一覧をホーム画面と同じに

の3つです。

1つ目の検索窓とは…

のこと。

デフォルトでは「検索するテキストを入力」となっています。

この微妙にグレーかかっている文字をプレースホルダーといい、placeholder属性を設定するだけで変更できるので非常に簡単です。

※プレースホルダ―とは…「実際のものに代わって現れるもの」という意味で日本では「ダミーテキスト」とも呼ばれています。

2つ目の検索結果の文字列とは…

のこと。

検索窓に文字を入力して、検索すると結果画面に遷移し、入力した文字列に対して検索した事が分かるように35pxのフォントサイズで出力されていますね。

あんまり気にしなくてもいいのかもしれませんが、全ての画面に足してオリジナリティを出したかったので修正します。

完成系のイメージは…Goo○leのようなデザイン。

かきてぃー
見せたいのはあくまでも検索結果の記事なので、ここは目立たせたくないので、これが良い感じ♪

3つ目は、

検索結果で表示される記事一覧デザインです。

  • archive.php
  • category.php
  • search.php

どれも、投稿一覧である「itiran.php」を読み込んでいるのでオリジナルの投稿一覧を作成している方はここも直す必要があります。

「itiran.php」を子テーマに置いて修正しているのであれば、問題ないです。

実際にカスタマイズしてみる

※カスタマイズはテンプレート(*****.php)を子テーマに置いて編集することを推奨します

1つ目の検索窓からやりましょう。

編集するのは「searchform.php」です。

修正するのは、前述でご説明した通り、「placeholder」の部分です。

placeholder=”検索するテキストを入力

赤字部分を任意の文字に変更するだけなので、超絶簡単です。

placeholder=”検索し放題

なんて設定すれば、

になります。

かきてぃー
本当に、超簡単ですw

2つ目の検索結果の文字列については「archive.php」「category.php」を編集します。

まず、「archive.php」から。

編集するのは90行目あたりの

の部分。

<h1 class=”entry-title”>

って。<h1>タグで表示していれば、そりゃ大きなフォントサイズで表示されますよね…。

こんな感じに変更!

<h1>タグを<p>タグに変更して、classも“entry-title”から”seach_ans”に変更しました。

反映後は…

こんな感じで、かなり目立たなく出来ました♪

cssの設定は…

カラーをグレー+フォントサイズを小さくしてます。

「category.php」にも同じような編集を加えます。

54と94行目あたりの

を編集します。

class属性と文字列を変更出来れば、OKです。

最後に3つ目の検索結果、投稿一覧の修正。

  • archive.php
  • category.php
  • search.php

の3つには

のような投稿一覧とページナビを呼び出している箇所があるはず。

この二つは検索結果の

-投稿一覧-

-ページナビ-

を表しています。

ここをオリジナルのテーマに変更しているのであれば、合わせる必要があります。

私の場合、モバイルとPCで表示形式を分けているので

となります。

かきてぃー
ページナビはモバイルも一緒で、cssをレスポンシブとしている為、ifの外に書いています。

ページナビも分けているのであれば、

となるわけです。

かきてぃー
いかかでしたでしょうか?無事に検索窓や検索結果は変更出来ましたか?
CSSを変えればオリジナルのデザインになりますし、tag.phpやdate.phpを子テーマに格納すればそれぞれ別の検索結果画面を表示することも可能です。
自分の好きなデザインにカスタマイズしてみてはどうでしょうか!
かきてぃー
では、お疲れ様でした!
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











コメントはこちらです

Copyright© 書きタレ , 2013 ~ 2017 All Rights Reserved.