こんにちは。

前回なかなか梅雨が明けないといったら、一週間もしないで梅雨が明けたyasaiです!

みなさん甲子園見てましたか？

新潟県代表頑張りました！全国ベスト4ですよ、すごいですよね！

さて、最近はWPに触れる機会が多いです。

なかなか実戦で触る機会がなくて、勉強不足を痛感していたので、こういう機会に一気に覚えねば！

と目下、ええいっ！、もとい、鋭意勉強中です。

そんなわけで今回はWPのお話を、せずにSCSS関連のお話をw

こちらもずっと気になっていたものだったんですけど、ついに始めました！

おーCSSなのにネストできるーとか、まだまだ初歩的な部分で大喜びしてますが・・・

導入の障壁になっていたの一つに、僕の場合やっぱりあの黒い画面があったわけです。

あの黒い画面、なんか怖い・・・

そんな中であったのがPreprosというGUIコンパイラーでした！

インストールは簡単。

Preprosのサイトからインストーラーをダウンロードして実行。

Rubyなども同梱されているようなので、導入も簡単です！

そんなPreprosのよいところー

導入が容易
ドラッグ＆ドロップでファイル操作できる
メニューが英語だけど直観的に操作できる。
コンパイルに失敗したときのエラーがわかりやすい（画像はエラー）
フリーでダウンロードできる(有料版あり)

などなど。（画像はエラーです！といわれた画面です(汗)）

まだまだ使い始めたばかりなので、もっといろんなことができるんだと思いますが、

今回はご紹介までに。

今回参考にさせていただいたサイトです

ちょっと自己紹介

こんにちは？皆さんのところはもう夏ですか？？

僕の住む新潟はまだ梅雨明けしていないので、もう少ししたら夏が来るのだと思います。
新潟では夏になると色々なところで夏祭りがあって、花火が上がります。

有名なところだけでも長岡の花火や、片貝の花火、柏崎の花火も有名ですね！

さて、自己紹介が遅れましたが…

はじめまして、yasaiです。基本的にHTML書いたり、CSS書いたり、jQuery書いたりしてます。

ムズカシイことはできないので、日々勉強中です！(できるようになりたいのです)

ここでは日々ハマったことや、ちょっと気が付いたことを書いていこうと思います。

今日はWordpressのお話です。

記事の一覧に記事の最初の画像を表示する(アイキャッチではなくて)

トップページなんかで、カテゴリー記事の一覧を表示する、よくあるパターンです。

文字だけだとさみしいので画像も載せたいなと思ったので、調べてみました。

アイキャッチ画像使うと簡単なんでしょうが、クライアントワークだとアイキャッチの設定をしてもらうより、記事の一番最初の画像を表示してしまった方がよいことってありませんか？

まずはfunction.phpに以下を加えます。


function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
     $output = preg_match_all('/&lt;img.+src=['"]([^'"]+)['"].*&gt;/i', $post->post_content, $matches);

    $first_img = $matches [1][0];

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

function catch_that_image() {

global $post, $posts;

$first_img = '';

ob_start();

ob_end_clean();

$output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches);

$first_img = $matches [1][0];

if(empty($first_img)){ //Defines a default image

$first_img = "dummy.jpg";

}

return $first_img;

}

まず投稿内に画像があるかどうかを調べます。ある場合には$first_imgに最初の画像を格納します。

画像がなかった場合は、$first_imgにdummy.jpgを格納します。(※dummy.jpgは用意してください。)

これであとはcatch_that_imagedeで呼び出すことができました。


&lt;img src="&lt;?php echo catch_that_image(); ?&gt;" alt=""&gt;

参考にさせていただいたサイトです。

このように参考にさせていただいたものや、自分で思いついたことを備忘録のように書いていきます。これからもお付き合いください。よろしくお願いします！

投稿者: yasai

Prepros導入しました

記事の一覧に記事の最初の画像を表示する(アイキャッチではなくて)

ちょっと自己紹介

記事の一覧に記事の最初の画像を表示する(アイキャッチではなくて)