クックパッド愛用者です。
メシマズではない（…はず！）ですが、メシウマでもない、という可哀想な料理スキルです。
毎日お世話になっているのですが、たくさんレシピがあるのでいつも悩んでいます。
「どれを作った…っけ？」
「あのレシピ…どこ行った…！」
「あー！これなんか失敗した理由ががあったはず！」
なので、そういうレシピを自分用にまとめたいと思いました。
「file_get_contents()かな？」
なんて虫歯のポーズで考えたり、考えなかったり、考えてないです。
でも多分、「同じこと考えてる人いるんだろうなー」と思ってました。
いました…！
本当にありがたいです。
お世話になります。
丁寧なご説明だったでの、すごく分かりやすいです。
少しカスタマイズして、早速使わせていただくことにしました！
カスタマイズの概要
こんな感じで、すぐにクックパッドのレシピを表示できるようにします。
[cook id="640920"]簡単すぎるｗｗｗ
洗い物全然ないしｗｗｗ
安いし、いっぱい食べれるし、毎日食べてるわｗｗｗ[/cook]- functions.phpにソースを書く（貼り付ける）
- 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: "引用元: " ;
}
完成を確認
こんな感じになります。
うん、素敵。
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」の既存クラスと使いつつ、汚さないように、と思って書き換えました。
まとめ
やっぱり同じこと考える人っていらっしゃいますよね！
お知恵を拝借して、クックパッドのレシピを表示させました。
本当にインターネットって素晴らしいです。