[WordPress]トップページを新着記事のサムネイル表示にしてみた!

Pocket

こんにちは、ブログを始めてまだ1ヶ月の happyChappy(@happyChappy1115)です。

昔、無料で始められるWordPress.comをやってたことがあったんですが、プラグインが使えなくて、カスタマイズってやったことがなかったんですよね。

でも、WordPress.org(+ロリポップ)にしたので、カスタマイズ出来てイイですね。
色々やってみたくなっちゃいますね。
最近いくつかやって見たので、以下のエントリーもご覧下さい。

過去記事

最近思ってたこと

最近は、トップページに新着記事がダラダラと全文表示されるのが気になってました。

色んなブログを見てると、サムネイルが表示されてて、記事の説明文が抜粋されて表示されてるのがありますよね?
あれをやってみたいなって思い、ググって見ました。(^^;;

ブログ紹介

すると、いくつか見つかったんですが、例えば以下のサイト様。

こちらのサイトではプラグインを使わずにサムネイル表示して、しかも記事の抜粋は「All In One SEO Pack」のdescriptionを使うと言うものでした。

いい感じなんですが、モノグサな私は毎回descriptionを入力し続ける自信がなかったので断念しました。(^^;;

次に以下の2つのサイト様。
どちらのサイトもやってることは同じで、プラグインを使ってサムネイル表示と記事抜粋してました。

私がやりたいのはこれだ!と思い、やって見ました。
ただ、記事抜粋はphpファイルを弄ると言うのが、チョット引っ掛かってたんですよね・・・(^^;;

プラグイン導入

これは何の問題もなく、普通に管理画面>プラグイン>新規追加から「Thumbnail for Excerpts」を検索してインストールすればいいです。

▼プラグイン導入後のトップページ
IMG_4634.png
記事が全文?表示されてますが、サムネイル表示になりました。
ちなみにサムネイルはデフォルトの150×150です。

phpファイル書き換え

やはりと言うか、これが大変でした。(^^;;

最初のサイトLikeHack様では、「index.php等のファイルの中に〜」と書いてありました。

「等」ってことはindex.php以外にもあるってこと?
他はどのファイルを弄ればいいんだ〜!っと言う疑問を抱いたのと、そもそもindex.php自体が色んなフォルダにあるんですよ!

しかも、どれを見ても<?php the_content(); ?>なんて記述ないし・・・

挫折しかけました。
元々飽きっぽいし・・・(^^;;

でも、もう1つのサイト治療院HP.net様を見てみると、「管理画面>外観>テーマ編集でindex.phpやcategory.php、archive.phpを編集する」とありました!ホッ(^^)

ただ、見方はわかったんですが、これでも全く同じ記述はなかったんですよ。
近いのはあったんですが・・・

私はテーマがTwenty-Twelveなので、もしかしたらテーマが違うとこの辺の記述が違うのかなと思いました。

そこで、近い記述のあった「content.php」を弄って見ることにしました。

▼何故か矢印部分は最初からthe_excerptになってました。
下線部はthe_contentだったので、後半に余分なのが付いてるのが気にはなりましたが、下図のように書き換えて見ました。
IMG_4635.jpg

▼すると、記事が抜粋されました!
IMG_4636.png

▼でも、リンクに飛んでみると、個別記事まで抜粋されて(消されて)ました。
IMG_4637.png

▼なので、LikeHack様の記事を参考に、下図のようにcontent.phpを書き換えて見ました。
IMG_4638.png
赤下線部は追加部分、青枠は緑枠のコピーで赤下線部を変更してます。

▼それと、治療院HP.net様の記事を参考に以下の記述を追加して、「〜の続きを読む」を表示するようにしました。
IMG_4639.png

▼トップページはこんな感じになって、リンク先も消えずに表示されるようになりました!
IMG_4640.png

この状態だと、トップページの抜粋記事がデフォルトで110文字なんですが、ちょっと少ない感じだったので、治療院HP.net様の記事を参考に「wpmp-config-sample.php」をwp-content/にコピーして、ファイル名をwpmp-config.phpに書き換え、$wpmp_conf['excerpt_mblength']=150;にして見ました。

▼すると、こんな感じになりました!
IMG_4641.png

取り敢えず完成!

かなり見やすくなったんじゃないかな?
細かい所はおいおい直していくとしよう。(^^)

みなさんの参考になれば嬉しいです。
みなさんも是非やって見て下さい。(^^)

Twitterボタン
happyChappy(@happyChappy1115)でした。

Sponsored Link

Posted from するぷろ for iPhone.

Pocket

コメントを残す