風の羅針盤 | Destination of winds.

【WordPress】トップページで最新記事を大きく表示する方法

time 2016/07/07  所要時間:約 5

【WordPress】トップページで最新記事を大きく表示する方法

この記事は2015年12月10日に公開した記事を、2016年7月7日に修正・追記しています。

こんにちは。ちゃぼP(@chabo0429)です。

このサイトではNobuoさん制作の「マテリアル」をテーマとして使用しています。

ブログ用WordPressテーマ マテリアル
無料の割に高機能なブログ用WordPressテーマ マテリアルについての解説サイトです

こういうパネル調のデザインのテーマって、意外とないんですよね。

記事が上から下だけでなく、横にも整列していて、アイキャッチも見やすいんでとても優れているデザインだと思っています。個人的にはもっとたくさんの人に使ってほしいなと思います。

ところで、そのマテリアルですが、いろいろと素人ながらにカスタマイズをしていますが、今回はトップページに表示されている新着記事を、もっと目立たせて更新が行われたことをよりアピールすることにチャレンジしてみました。

 

いろいろなブログサイトを見ていると、有料無料のいろいろなテーマを使っている方がいて、更にテーマを自作されている方もいたりします。

Webデザイナーのお仕事をされている方もおられるでしょうけど、自作できる人ってスゲーな・・と思うことしきりです。せいぜい、私なんてカスタマイズ位が関の山ですから、、

スポンサーリンク

トップページの新着記事を目立たせる!

マテリアルのテーマカスタマイザー機能で、トップページに表示される記事数を設定することができます。

newpost1

この風の羅針盤では、最大の15件に設定しています。

 

そして、新着記事。公開したばかりの記事はできるだけ多くの人に見てもらいたいものです。それに、定期的に訪問してくれる人が、ぱっと見て更新されたかどうかを理解できるためのアイキャッチ的な役割も果たしてくれます。

マテリアルでは新着記事はすべて同じ大きさで表示されるので、これをもっと目立たせたいなと思っていました。

また、最近よく見かける透過レイヤーを用いた見出しをつけたいということもあったので、一緒に実装することを目標に作業にとりかかります。

モバイルとの条件分岐

PCでの表示では最新記事を大きくしますが、そのままモバイルでも同じ表示をしてしまったら、最新記事だけ横に長くなってしまって表示が崩れます。

なのでまず最初にモバイルでの表示はこれまで通りにするための、条件分岐を行います。

なお、phpファイルを直接修正する際は、必ずファイルのバックアップと、直接ファイルをコピーすることのできるFTPソフトを必ず用意した上で作業を実施してください。
修正時に誤ったコードを貼り付けたりすると、最悪管理画面からのアクセスもできなくなることがあるので要注意!!

また今回修正したファイル群はすべて子テーマにファイルをコピーした上で実施しています。

newpost2

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

  • function.php
  • home.php
  • loop.php
  • style.css

の4つのファイルです。まずはfunction.phpへモバイル条件分岐の定義を追記します。ついでにトップページのページネーション機能を使ってページ送りをする場合に、今表示しているのが何ページ中の何ページ目なのかを取得出来るようにもしてしまいましょう。

function.php

上記をfunction.phpに貼り付けて、保存です。

トップページやページ送り後の見出しを表示するコード

これは2ページ目以降、ページ上部にページネーションを表示するためのコードです。

home.php

トップページの新着記事を大きく表示するコード

次にいよいよトップページの表示部の記述を行います。ファイル名はloop.phpです。

loop.php

ここで何を具体的に行っているのか、簡単に説明してみましょう。

loop.phpというファイルは、その名の通り繰り返し(loop)処理を行うファイルです。記事を抽出して特定の数だけ表示するというのは、実は裏では1つずつ記事を抽出してそれを繰り返しています。

今回は表示数が15件なので、15回繰り返しています。

最後にスタイルを整えよう

さて、これで一応表示するためのプログラムは記述できましたが、スタイルシートを使って美しく見せるようにしましょう。

style.css

これをそのままstyle.cssに追記します。

続いて、モバイル表示用のコードを追記します。

 

どのように表示されるか試してみよう

さて、早速トップページを表示させてみましょう。うまくいくでしょうか。

New_auticle01

うまくいきました!!

アイキャッチ画像の下部分の上に透過スクリーンが乗って、その上に日付やタイトルが白抜き文字で表示されています。ちなみに左上のカテゴリをクリックすると、カテゴリ内記事一覧ページが表示されます。

念のため、モバイルの表示も見てみましょう。

New_auticle01

表示も問題無いですね。ちゃんと条件分岐されているようです。

2ページ目以降はどうなるかというと、

New_auticle01

ページネーションもきちんと表示されています。

これで思っていた通りの形でやりたいことができました。しかもとってもビューティフル~~!!

さいごに

最新記事を目立たせること自体は、実は色々な関数や構文が既にありますので、それほど難しくない印象でした。

私自身、phpやcssのプロフェッショナルじゃないので、完全に自己流^^; っていうか、まともに本とか買ってきて勉強したとか全く無いですからね。。必要なときに検索して調べるくらいなもので・・

それでもまあなんとかできますので多分皆さんでもできます!

ただ、一番苦労するのはスタイルシート。ホント、これは色々な要素が重なりあって影響しあう、まるで男女の仲のように複雑に絡みあうので(笑)、こんがらがります。

今回の作業の殆どをこの時間に費やしたと言ってもいいくらいです。

なので、もし必要であれば上のコードコピーしてお使いくださいませ。その際FeedlyやFacebookなどで定期購読いただけると非常に嬉しいです!

ぜひお試しあれ~~!

スポンサーリンク

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

シェアしてくれると、ちゃぼPめっちゃよろこびます^^v

コメント

  • 突然すみません。本記事のように最新記事を目立たせたいと思い、素人ながら「マテリアル」のテーマで記事の内容を頼りにPHPファイルを更新していったのですが、どうもloop.phpをコピー&ペーストで上書き保存するとメニューより下の項目が真っ白になってスクロールできなくなります。(記事の表示分、サイドバー、フッター部分が表示されなくなります)もし可能でありましたら対処方法を教えて頂くことは可能でしょうか?ちなみにサイト自体はまだ開設したばかりで何かPHPを本件以外で弄ったりはしておりません。

    by yuki €2017年1月13日 5:25 PM

    • こんにちは。おそらく、何かカッコやコロンなど、足りない文字があるか、もしくはタグが重複しているかだと思います。
      ファイルを見てみないと何とも言えませんが、余計な文字が入っていないか、もしくは足りないかを今一度確認してみてください。
      よろしくお願いします。

      by ちゃぼP €2017年1月16日 9:02 AM

down

コメントする





*

この記事の関連カテゴリ

関連記事



スポンサーリンク