WordPress＋Stinger3　のトップリスト化

まず、トップページのカスタマイズは、ｉｎｄｅｘ．ｐｈｐではなくｈｏｍｅ．ｐｈｐをカスタマイズします。

わたしは、indexテンプレートをカスタマイズして、まったく反映されず、しばらくドツボにはまりました。

でも、ソースをよくよく見ると、indexテンプレートにはない記述が見られ、どこにあるのか探したら、homeテンプレートにありました。

homeテンプレートを子テーマにまるっとコピー

わたしは子テーマを使っているので、下準備として、FTPソフトでhomeテンプレートの空テンプレートをまず作成。

管理画面に入って、stinger3の元のhomeテンプレートをまるっとコピーして、子テーマのhomeテンプレートにコピーします。

ちなみに、homeテンプレートの空テンプレートを作った段階でやめると、トップページが真っ白けになっちゃうので、少なくとも元テンプレをコピペして保存するところまではやってくださいね。

スマホ対応に注意

stinger3をカスタマイズする時に、ネックになっていたのが、スマホ対応時の表示です。

わたしはCSSはからきしダメなので、とりあえず、今あるものを活用することにしました。

具体的には、トップページにループで表示されているエントリー部分のテンプレートをそのまま使っちゃおう！ということです。

そのループ部分からワードプレスのタグとかをぬいて、シンプルにして、ちょっとタイトルタグとかカスタマイズしたコードがこちら。

このコードに、自分で以下の項目を設定し、

【まとめタイトル】
【アイキャッチアイコン画像URL】
【アイキャッチアイコン用キーワード】・・・altとtitleの2カ所
【ここにまとめとか】

まるっとコピペして作った子テーマのhomeテンプレートの上2行分に

という部分があるので、このあとに、設定したコードをまるっとコピーすると、このサイトのトップページの用に、まとめが出現します。

で、これだけだと、下の新着記事一覧と区別がつかなくなるので、

という部分の上に、

をコピペします。

なんか付け加えたかったら、新着記事の前に言葉を付け加えてください。

さらにh3をh2にカスタマイズ

さらに、ここからはある程度CSSが自分でどうにかできる人用のカスタマイズです。

コピペした部分のhタグはh3で、ソースを見ると、h3はたくさんあるけど、h2がありません。さらに、新着記事内のタイトルタグがそれぞれh3なので、その上のhタグはh2の方が望ましいような気もします。

そこで、先ほどコピーした部分の

と、

のhタグは、h3ですが、これをh2に変更してclassを削除したり変更したりして、CSSをお好みでカスタマイズします。

わたしは、記事内でh3タグは使わないので、stinger3のデフォルトのh3タグのcssをカスタマイズして、h2タグのcssとして表示させています。SEO的にはどうなのかわかりませんけど。

そのカスタマイズをすると、トップページがこんな感じになります。

実際にカスタマイズしたサイトはこちら。

　アトピー用基礎化粧品突撃レポート

これで、iphoneで見ても、対応した表示になっているはずです。アンドロイドはもってないので、めんどくさいから確認してないです。あしからず。

2014/02/24追記＜＜重要＞＞

この方法だと、ｈｏｍｅ．ｐｈｐで出力される全てのページにカスタマイズした項目が表示されることに気がつきました。

トップページのみに、カスタマイズ項目を表示させたい場合は、さらに、こちらのカスタマイズが必要です。

　【stinger3カスタマイズ】WordPressでカスタマイズした項目をトップページのみに表示させたい場合　#Stinger-WP