WordPress

WordPressでCookpad(クックパッド)のレシピを表示したい

  • このエントリーをはてなブックマークに追加
クックパッドのレシピを表示したい!

クックパッド愛用者です。
メシマズではない(…はず!)ですが、メシウマでもない、という可哀想な料理スキルです。
毎日お世話になっているのですが、たくさんレシピがあるのでいつも悩んでいます。

「どれを作った…っけ?」
「あのレシピ…どこ行った…!」
「あー!これなんか失敗した理由ががあったはず!」

なので、そういうレシピを自分用にまとめたいと思いました。

file_get_contents()かな?」

なんて虫歯のポーズで考えたり、考えなかったり、考えてないです。
でも多分、「同じこと考えてる人いるんだろうなー」と思ってました。

いました…!

本当にありがたいです。
お世話になります。

丁寧なご説明だったでの、すごく分かりやすいです。
少しカスタマイズして、早速使わせていただくことにしました!

カスタマイズの概要

こんな感じで、すぐにクックパッドのレシピを表示できるようにします。

[cook id="640920"]簡単すぎるwww
洗い物全然ないしwww
安いし、いっぱい食べれるし、毎日食べてるわwww[/cook]
  1. functions.phpにソースを書く(貼り付ける)
  2. CSSでデザインを調整する

流れは以上です。
では、作業していきましょう!

functions.phpにソースを書く

少し書き換えています。
解説は後ほど。

/* クックパッド用 ショートコード(画像・タイトル・url) */
//ショートコードの設定
function bqFunc( $atts, $content = null ) {
    extract( shortcode_atts( array(
        'id' => 'default',
    ), $atts ) );

//ショートコードでidに入れた番号を基本urlにくっつける
$bq_url = 'http://cookpad.com/recipe/'.$id;
 
//レシピページのhtmlデータを格納
$html = file_get_contents($bq_url);
 
//文字コードをutf-8に指定
$html = mb_convert_encoding($html, mb_internal_encoding(), "UTF-8" );
 
//タイトル取得($bq_titleに格納)
preg_match( "/<h1 class='recipe-title fn clearfix'>(.*?)<\/h1>/s", $html, $bq_title);
 
//画像取得($bq_imgに格納)
preg_match( "/<img.*class=\".*large_photo_clickable\".*src\s*=\s*[\"|\'](.*?)[\"|\'].*>/i", $html, $bq_img); 
 
//ショートコードの出力タグ
return '<div class="cook_recipe">
    <blockquote>

		<div class="row">

			<div class="gr4">
		        <figure style="background: url(' . $bq_img[1] . ') no-repeat center;"></figure>
			</div>

			<div class="gr8">
		        <h2>' . $bq_title[1] . '</h2><cite><a href="" target="_blank">' . $bq_url . '</a></cite><p>' . $content . '</p>
			</div>

		</div>

    </blockquote>
</div>'; 
} 
 
add_shortcode('cook', 'bqFunc');

CSSでデザインを調整する

私は、WordPressのテンプレート「Xeory Base」に設定したので、普通は作らないとない存在しないクラスがあります。
そのため、CSSはコピペで使えないと思うんですが、特に解説はありません。

blockquoteタグは別な引用の時に使っているので、クックパッドのレシピを表示する時は別デザインになるように、blockquoteタグをdivで囲ってデザインを当てているだけです。

/*--------------------------------------------------------
 クックパッド レシピ
--------------------------------------------------------*/
body.color02 .post-content .cook_recipe blockquote {
	padding: 16px 16px 16px 0;
}
body.color02 .post-content .cook_recipe blockquote:before {
  content: "";
}
body.color02 .post-content .cook_recipe blockquote figure {
	margin: 0 auto;
	overflow: hidden;
	width: 200px;
	height: 140px;
}
body.color02 .post-content .cook_recipe blockquote figure img{
	width: 100%;
}

body.color02 .post-content .cook_recipe blockquote h2 {
	font-size: 16px;
	margin-bottom : 16px;
}
body.color02 .post-content .cook_recipe blockquote p {
	margin-bottom : 1.6em;
}
body.color02 .post-content blockquote cite:before {
       content: "引用元: " ;
} 

完成を確認

こんな感じになります。
うん、素敵。

WordPressでクックパッドのレシピを表示する

functions.phpの変更箇所

具体的には、下の吐き出すHTMLです。

//ショートコードの出力タグ
return '<div class="cook_recipe">
    <blockquote>

		<div class="row">

			<div class="gr4">
		        <figure style="background: url(' . $bq_img[1] . ') no-repeat center;"></figure>
			</div>

			<div class="gr8">
		        <h2>' . $bq_title[1] . '</h2><cite><a href="" target="_blank">' . $bq_url . '</a></cite><p>' . $content . '</p>
			</div>

		</div>

    </blockquote>
</div>'; 
} 

あまりCSS手を加えずに、レスポンシブにしたかったのです。
そこで、「Xeory Base」の既存クラスと使いつつ、汚さないように、と思って書き換えました。

まとめ

やっぱり同じこと考える人っていらっしゃいますよね!
お知恵を拝借して、クックパッドのレシピを表示させました。
本当にインターネットって素晴らしいです。

  • このエントリーをはてなブックマークに追加

PR

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください