*

WordPress スマホ画面のカスタマイズ〜リストページにサムネイルを付ける


ちわ、秋田@豊作(@housakuakita‎)です。

 

難易度:高(すんません。ちょっと難しいかもです・・・)

 

スマホ画面を形成するのに WPtouch Pro を使っています。

 

カスタマイズを行う際、秋田の場合 function.php には書かずにプラグインを作る事にしている。といってもファイル1つのプラグインなので、そんなに難しい話しではない。

 

プラグインにコードを書く事により、テーマを変更した場合でも、そのソースが使えるので便利である。

 

プラグインの作り方は、以前のエントリー「自作プラグインのススメ WordPress をより深く、安全にカスタマイズする為に」を参考にして頂けたらと思う。

 

今回やりたいのは、スマホ画面のリストページに、記事の1つ目の画像をサムネイルとして表示させたい。である。では早速。

 

WordPressの投稿記事内の画像の最初の1枚をサムネイルとして表示する方法こちらの「img srcの記述を拾って画像を取得し表示する」のソースを少しアレンジさせて頂き、my-pulug-in.php に記述する。

 

アレンジしたのは、引数に記事を配置し、記事データからイメージ画増の URL を導きだす形にした。

function catch_that_image($content) {
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content, $matches);
    $first_img = $matches [1] [0];

    if(empty($first_img)){ //Defines a default image
        $first_img = "/images/default.jpg";
    }
return $first_img;
}

この関数を WPtouch Pro のテーマファイル blog-loop.php で利用する。

 

get_the_content() 関数で投稿データを取得出来るので、catch_that_image(get_the_content())  にて最初にある画像のパスを取得出来る。

 

これを利用してタイトルが書いてある下あたりに THML を記述していく。

<center>
	<a href="<?php wptouch_the_permalink(); ?>">
	<img src="<?php echo catch_that_image(get_the_content());?>" width="120">
	</a>
</center>

 

image

こんな感じが

image_1

こんな感じになりました。だいぶ良くなったかな。

デザインあまり詳しくないので、今度デザイン担当のスタッフの時間が空いている時に見てもらおう。

関連記事

AWS EC2 Nagiosに監視されるWebサーバの Nginx インストール

ビットコイン下がってますねぇ〜。ちょっとあがったかな?と思ったのは間違...

記事を読む

WordPress にちょっと粋な味付けを!カバーページを表示する PHPスクリプト

土曜日に雪かきをしたのですが、右足を軸にスコップを振り回しまして・・・...

記事を読む

WordPress カスタマイズ開発初心者に!データーベースから安全に Like 検索する方法

photo credit: thatcanadiangirl ...

記事を読む

初心者エンジニア必見!MySQL で生年月日カラムから今日誕生日の人を抽出する

久しぶりに SQL 等を書いております。すっかり忘れちゃっ...

記事を読む

初心者プログラマー的!がび〜ん。数時間はまりました。PHP プログラミング trim() を使う癖付けましょう!

今日は台風が来るって事なので、自宅でぐったりとだらだら凄そうか...

記事を読む

新着記事

のんびりブログを再開してみます

気がつけばブログの最終更新日が「2019年03月08日」しかもネタ的に...

記事を読む

ボルボ板橋へ行こう!行こうシリーズ[159/100]

気がついたら今年も3月。毎回こんな書き出しですみません。1月2月っても...

記事を読む

沖縄へ行こう!行こうシリーズ[158/100]

2019年行こうシリーズの第一弾。だけど昨年12月15日に沖縄のガズレ...

記事を読む

新年明けましておめでとうございます。2019年

新年明けましておめでとうございます。 2018年が終わり、2019年...

記事を読む

自分の時間を売り渡し切った後の、擦り切れた時間で本当に楽しめるの?

秋田、起業したのが1995年〜なので、かれこれ23年スタッフやお客様に...

記事を読む

コメント/トラックバック

トラックバック用URL:

コメントフィード




管理人にのみ公開されます

*

のんびりブログを再開してみます

気がつけばブログの最終更新日が「2019年03月08日」しかもネタ的に...

ボルボ板橋へ行こう!行こうシリーズ[159/100]

気がついたら今年も3月。毎回こんな書き出しですみません。1月2月っても...

沖縄へ行こう!行こうシリーズ[158/100]

2019年行こうシリーズの第一弾。だけど昨年12月15日に沖縄のガズレ...

新年明けましておめでとうございます。2019年

新年明けましておめでとうございます。 2018年が終わり、2019年...

自分の時間を売り渡し切った後の、擦り切れた時間で本当に楽しめるの?

秋田、起業したのが1995年〜なので、かれこれ23年スタッフやお客様に...

→もっと見る

PAGE TOP ↑