Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
•Download as KEY, PDF•
1 like•1,086 views
2012年11月24日に行われたWordbench長野の資料です。
Recommended
Recommended
More Related Content
Featured
Featured (20)
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
- 1. WordPressの為の PHP入門 FirstElement 熊谷
- 2. 今日の目的と概要 • デザイナー、コーダー向け • PHP初心者 • っていうか、プログラム無理＞＜ • それでもWordPressを使う上で避けて 通れない • そんなPHPを少し理解しよう！
- 3. 了承事項 • PHPの講義では無いので、最低限もの 事もお話しできません。。。 • ものすごく端折ります。プログラマの方からは怒られるかも。。
- 4. そもそも私は誰？ • タクミンです！ • 京都コンピュータ学院でPHPとか勉強 してきました • 飯田市にあるFirstElementでプログラ マしてます。
- 6. <?php ?> 開始タグ 終了タグ <?php ?> <html> <?php ココはPHPの領域 下手に触ると・・・ ?> </html>
- 7. 変数 $hoge 「入れ物」です。 頭に＄が付くので見分けやすい 文字や数字や、、色々入ります。 $title = get_the_title( );
- 8. 変数 $hoge 「入れ物」です。 頭に＄が付くので見分けやすい 文字や数字や、、色々入ります。 $title = get_the_title( ); タイトルが入る
- 9. 関数 echo() 処理（仕事）をする 後ろに（）が付く どんな処理をするかは、Googleで 調べる☆（ゝω・） $title = get_the_title( );
- 10. 関数（）の中の物を表示する echo() 処理（仕事）をする 後ろに（）が付く どんな処理をするかは、Googleで 調べる☆（ゝω・） $title = get_the_title( ); タイトルを教えてくれる
- 11. 代入 $title = get_the_title( ); 等しい という意味ではないので注意！
- 12. 代入 右にある物を左の変数に突っ込む $title = get_the_title( ); 等しい という意味ではないので注意！
- 13. 軽くおさらい <html> <h1> <?php $title = get_the_title( ); echo($title); ?> </h1> </html>
- 14. 軽くおさらい <html> <h1> <?php <html> $title = get_the_title( ); <h1>タイトルー</h1> echo($title); </html> ?> </h1> </html>
- 15. ''（クオート）"" 数字 : 9 文字 : '字' シングルクオーテーション → ' ' ダブルクオーテーション → " "
- 16. ''（クオート）"" 数字 : 9 文字 : '字' シングルクオーテーション → ' ' ダブルクオーテーション → " " ←コレはエラーになる！
- 17. 算数 かけ算 引き算 3*2 3-2 割り算 足し算 3/2 3+2 割り算 余無し 3%2
- 18. 算数 かけ算 6 引き算 3*2 1 3-2 割り算 1.5 足し算 3/2 5 3+2 割り算 余無し 1 3%2
- 19. 連結 $title = get_the_title( ); $new_title = '【2ch】' . $title . '【的な】'; echo($new_title);
- 20. 連結 $title = get_the_title( ); $new_title = '【2ch】' . $title . '【的な】'; echo($new_title); 【2ch】タイトルー【的な】
- 22. 比較 2<3 3>2 2=<3 これが 等しい 3=>2 3==3
- 23. if if ( $title == 'タイトルー') : echo('変なタイトルw'); endif;
- 24. if if ( $title == 'タイトルー') : echo('変なタイトルw'); endif; ifの()の中が true(OKな状態) だったら endif; までの間を実行する
- 25. if・・・じゃない時 if ($title=='タイトルー') : echo('変なタイトルw'); else : echo('きっとまともなタイトル'); endif;
- 26. if・・・じゃない時 if ($title=='タイトルー') : echo('変なタイトルw'); else : じゃない時 echo('きっとまともなタイトル'); endif;
- 27. いろんなifの書き方 if ( $hoge == '?' ) : echo('さっきの奴∼'); endif; if ( $hoge == '?' ) { echo('波カッコで囲う'); } if ( $hoge == '?' ) echo('この一行だけ実行されます');
- 28. ループ While ( have_posts() ) : $title = get_the_title( ); echo($title); endwhile;
- 29. ループ While ( have_posts() ) : $title = get_the_title( ); echo($title); 条件に合う限り endwhile; endwhile; までの間を繰り替えす
- 30. いろんなループ • while( ) • for( ) • foreach( )
- 31. いろんなループ • while( ) テンプレートに出てくる • for( ) ので、今日はforだけ • foreach( )
- 32. whileの色んな書き方 発音 : w l while ( ) : echo('end何とかの奴∼'); endwhile; while ( ) { echo('やっぱり波カッコの奴∼'); }
- 34. 実践
- 35. の前に • ちゃんとした 道具を揃えましょう！ • 間違ってもWindowsの「メモ帳」は使 わないように！
- 36. エディターの絶対条件 • 変数や関数、クオート部分など色が変 わるもの • スペースやタブが可視化されるもの • ' ' を にかってになおさないもの • またその見分けが用意に付くもの・・
- 37. 無料のエディター(Win) • EmEditer Free • TeraPad
- 38. 無料のエディター(Win) • EmEditer Free • TeraPad 別途FTPソフトが必要
- 39. 無料のエディター(Win) • EmEditer Free • TeraPad 別途FTPソフトが必要 ごめんなさい、 Windowsあんまり使わなくって(^^;
- 41. お金があったら • Adobe Dreamweaver（Win/Mac) ￥47,500 • Coda（Mac） ¥6,500 コレだけで、ファイルのアップロードから ソースの編集まで全部できちゃいます！
- 42. 確認用ツール • Firefox • ブラウザー、Win/Mac • Firebug • Firefoxに入れる拡張機能 • CSSからJavascriptまで、コレが無 いとお仕事できません
- 43. いざ、実践(｀・ω・́)
- 44. いいね！ボタンを設置しよう • 標準テンプレートのTwentyEleven • 設置場所は本文の下、コメントより上 • ボタンコードの取得法は割愛 • PHP部分と干渉しない場所を見分け て、コードを貼付ける簡単な作業
- 45. いいね！ボタン コード取得ページ http://developers.facebook.com/docs/ reference/plugins/like/
- 46. single.php サンプルテキスト <?php /** * The Template for displaying all single posts. * * @package WordPress * @subpackage Twenty_Eleven * @since Twenty Eleven 1.0 */ get_header(); ?> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=150015455104429"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div id="primary"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <nav id="nav-single"> <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3> <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">←</span> Previous', 'twentyeleven' ) ); ?></span> <span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></span> </nav><!-- #nav-single --> <?php get_template_part( 'content', 'single' ); ?> <!-- いいね！ボタン --> <div class="fb-like" data-href="<?php echo( the_permalink() );?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div> <!-- いいね！ボタン終わり --> <?php comments_template( '', true ); ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary --> <?php get_footer(); ?>
- 47. jQuery
- 48. WordPressでjQueryを使う為に • wp_enqueue_script('jquery'); • <script type='text/javascript' src='jquery.min.js'></script> • jQuery(document).ready(function($ ){ $('#id').fadein(); });
- 49. wp_enqueue_script(); <?php wp_enqueue_script('jquery'); ?> jQueryを使いたいテンプレート、 あるいはheader.phpに書く事により、 jQueryを読み込んでくれる <script type='text/javascript' src='jquery.min.js'></script> を自動生成
- 50. jQueryの基本 操作したいHTMLの要素を指定する CSSと同じ表記で指定できる jQuery('#id').fadeIn(); どんな事をさせるか APIと呼ぶらしい・・
- 51. WordPressならではの注意点 いきなり$が使えない ここで、＄をローカル変数 としてセットする事により ＄が使えるようになる jQuery(document).ready(function($){ $('#id').fadeIn(); });
- 52. WordPressならではの注意点 難し事考えなくても jQuery('#id').fadeIn(); ＄の代わりにjQueryっ て書いてもOK！
- 55. フェードインさせたい要素 : class="post" 使うAPI : ready() ← 読み込完了を感知する fadeIn() ← フェドインさせる jQuery('.post').ready(function($){ $('.post').fadeIn(); });
- 56. <?php wp_enqueue_script('jquery'); ?> 一番上に書いておく <style> .post{ display: none; } </style> <script> jQuery('.post').ready(function($){ $('.post').fadeIn('slow'); }); </script>
- 57. いざ、実践(｀・ω・́)
- 58. single.php サンプルテキスト <?php wp_enqueue_script('jquery'); ?> <?php /** * The Template for displaying all single posts. * * @package WordPress * @subpackage Twenty_Eleven * @since Twenty Eleven 1.0 */ get_header(); ?> <style> .post{ display: none; } </style> <script> jQuery('.post').ready(function($){ $('.post').fadeIn(10000); }); </script> <div id="primary"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <nav id="nav-single"> <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3> <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">←</span> Previous', 'twentyeleven' ) ); ?></span> <span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></span> </nav><!-- #nav-single --> <?php get_template_part( 'content', 'single' ); ?> <?php comments_template( '', true ); ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary --> <?php get_footer(); ?>
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- <div id="fb-root"></div>\n<script>(function(d, s, id) {\n var js, fjs = d.getElementsByTagName(s)[0];\n if (d.getElementById(id)) return;\n js = d.createElement(s); js.id = id;\n js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=150015455104429";\n fjs.parentNode.insertBefore(js, fjs);\n}(document, 'script', 'facebook-jssdk'));</script>\n\n<div class="fb-like" data-href="http://172.16.45.128/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>\n\n<?php echo the_permalink();?>\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n