Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜

1,409 views

Published on

2012年11月24日に行われたWordbench長野の資料です。

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,409
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \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
  • Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜

    1. 1. WordPressの為の PHP入門 FirstElement 熊谷
    2. 2. 今日の目的と概要• デザイナー、コーダー向け• PHP初心者• っていうか、プログラム無理><• それでもWordPressを使う上で避けて 通れない• そんなPHPを少し理解しよう!
    3. 3. 了承事項• PHPの講義では無いので、最低限もの 事もお話しできません。。。• ものすごく端折ります。プログラマの方からは怒られるかも。。
    4. 4. そもそも私は誰?• タクミンです!• 京都コンピュータ学院でPHPとか勉強 してきました• 飯田市にあるFirstElementでプログラ マしてます。
    5. 5. PHPの基本的な事 軽く説明します
    6. 6. <?php ?>開始タグ 終了タグ <?php ?><html> <?php ココはPHPの領域 下手に触ると・・・ ?></html>
    7. 7. 変数 $hoge「入れ物」です。頭に$が付くので見分けやすい文字や数字や、、色々入ります。 $title = get_the_title( );
    8. 8. 変数 $hoge「入れ物」です。頭に$が付くので見分けやすい文字や数字や、、色々入ります。 $title = get_the_title( );タイトルが入る
    9. 9. 関数 echo()処理(仕事)をする後ろに()が付くどんな処理をするかは、Googleで調べる☆(ゝω・) $title = get_the_title( );
    10. 10. 関数()の中の物を表示する echo()処理(仕事)をする後ろに()が付くどんな処理をするかは、Googleで調べる☆(ゝω・) $title = get_the_title( ); タイトルを教えてくれる
    11. 11. 代入 $title = get_the_title( );等しい という意味ではないので注意!
    12. 12. 代入右にある物を左の変数に突っ込む $title = get_the_title( ); 等しい という意味ではないので注意!
    13. 13. 軽くおさらい<html> <h1> <?php $title = get_the_title( ); echo($title); ?> </h1></html>
    14. 14. 軽くおさらい<html> <h1> <?php <html> $title = get_the_title( ); <h1>タイトルー</h1> echo($title); </html> ?> </h1></html>
    15. 15. (クオート)"" 数字 : 9 文字 : 字シングルクオーテーション → ダブルクオーテーション → " "
    16. 16. (クオート)"" 数字 : 9 文字 : 字シングルクオーテーション → ダブルクオーテーション → " " ←コレはエラーになる!
    17. 17. 算数 かけ算引き算 3*2 3-2 割り算足し算 3/2 3+2 割り算 余無し 3%2
    18. 18. 算数 かけ算 6引き算 3*2 1 3-2 割り算 1.5足し算 3/2 5 3+2 割り算 余無し 1 3%2
    19. 19. 連結$title = get_the_title( );$new_title = 【2ch】 . $title . 【的な】;echo($new_title);
    20. 20. 連結$title = get_the_title( );$new_title = 【2ch】 . $title . 【的な】;echo($new_title); 【2ch】タイトルー【的な】
    21. 21. 比較 2<3 3>22=<33=>23==3
    22. 22. 比較 2<3 3>2 2=<3これが 等しい 3=>2 3==3
    23. 23. ifif ( $title == タイトルー) : echo(変なタイトルw);endif;
    24. 24. ifif ( $title == タイトルー) : echo(変なタイトルw);endif; ifの()の中が true(OKな状態) だったら endif; までの間を実行する
    25. 25. if・・・じゃない時if ($title==タイトルー) : echo(変なタイトルw);else : echo(きっとまともなタイトル);endif;
    26. 26. if・・・じゃない時if ($title==タイトルー) : echo(変なタイトルw);else : じゃない時 echo(きっとまともなタイトル);endif;
    27. 27. いろんなifの書き方if ( $hoge == ? ) : echo(さっきの奴∼);endif;if ( $hoge == ? ) { echo(波カッコで囲う);}if ( $hoge == ? ) echo(この一行だけ実行されます);
    28. 28. ループWhile ( have_posts() ) : $title = get_the_title( ); echo($title);endwhile;
    29. 29. ループWhile ( have_posts() ) : $title = get_the_title( ); echo($title); 条件に合う限りendwhile; endwhile; までの間を繰り替えす
    30. 30. いろんなループ• while( )• for( )• foreach( )
    31. 31. いろんなループ• while( ) テンプレートに出てくる• for( ) ので、今日はforだけ• foreach( )
    32. 32. whileの色んな書き方発音 : w l while ( ) : echo(end何とかの奴∼); endwhile; while ( ) { echo(やっぱり波カッコの奴∼); }
    33. 33. よく有る忘れ物•;•.• 全角文字、特に全角スペース• クオート、カッコの閉じ忘れ
    34. 34. 実践
    35. 35. の前に• ちゃんとした 道具を揃えましょう!• 間違ってもWindowsの「メモ帳」は使 わないように!
    36. 36. エディターの絶対条件• 変数や関数、クオート部分など色が変 わるもの• スペースやタブが可視化されるもの• を にかってになおさないもの• またその見分けが用意に付くもの・・
    37. 37. 無料のエディター(Win)• EmEditer Free• TeraPad
    38. 38. 無料のエディター(Win)• EmEditer Free• TeraPad 別途FTPソフトが必要
    39. 39. 無料のエディター(Win)• EmEditer Free• TeraPad 別途FTPソフトが必要 ごめんなさい、 Windowsあんまり使わなくって(^^;
    40. 40. MacとかLinux• EmacsとかVimとか使えたら使うと良 いかも・・・(悪い冗談です
    41. 41. お金があったら• Adobe Dreamweaver(Win/Mac) ¥47,500• Coda(Mac) ¥6,500コレだけで、ファイルのアップロードからソースの編集まで全部できちゃいます!
    42. 42. 確認用ツール• Firefox • ブラウザー、Win/Mac• Firebug • Firefoxに入れる拡張機能 • CSSからJavascriptまで、コレが無 いとお仕事できません
    43. 43. いざ、実践(`・ω・́)
    44. 44. いいね!ボタンを設置しよう • 標準テンプレートのTwentyEleven • 設置場所は本文の下、コメントより上 • ボタンコードの取得法は割愛 • PHP部分と干渉しない場所を見分け て、コードを貼付ける簡単な作業
    45. 45. いいね!ボタン コード取得ページhttp://developers.facebook.com/docs/ reference/plugins/like/
    46. 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">&larr;</span> Previous, twentyeleven ) ); ?></span> <span class="nav-next"><?php next_post_link( %link, __( Next <span class="meta-nav">&rarr;</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. 47. jQuery
    48. 48. WordPressでjQueryを使う為に • wp_enqueue_script(jquery); • <script type=text/javascript src=jquery.min.js></script> • jQuery(document).ready(function($ ){ $(#id).fadein(); });
    49. 49. wp_enqueue_script(); <?php wp_enqueue_script(jquery); ?> jQueryを使いたいテンプレート、 あるいはheader.phpに書く事により、 jQueryを読み込んでくれる <script type=text/javascript src=jquery.min.js></script> を自動生成
    50. 50. jQueryの基本操作したいHTMLの要素を指定する CSSと同じ表記で指定できる jQuery(#id).fadeIn(); どんな事をさせるか APIと呼ぶらしい・・
    51. 51. WordPressならではの注意点 いきなり$が使えない ここで、$をローカル変数 としてセットする事により $が使えるようになる jQuery(document).ready(function($){ $(#id).fadeIn(); });
    52. 52. WordPressならではの注意点 難し事考えなくても jQuery(#id).fadeIn(); $の代わりにjQueryっ て書いてもOK!
    53. 53. jQueryの機能は? jQuery日本語リファレンス http://semooh.jp/jquery/
    54. 54. いきなり実践あまり意味ないけどwページ開いたら本文をフェードインさせるスクリプト
    55. 55. フェードインさせたい要素 : class="post"使うAPI : ready() ← 読み込完了を感知する fadeIn() ← フェドインさせるjQuery(.post).ready(function($){ $(.post).fadeIn();});
    56. 56. <?php wp_enqueue_script(jquery); ?> 一番上に書いておく<style> .post{ display: none; }</style><script> jQuery(.post).ready(function($){ $(.post).fadeIn(slow); });</script>
    57. 57. いざ、実践(`・ω・́)
    58. 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">&larr;</span> Previous, twentyeleven ) ); ?></span> <span class="nav-next"><?php next_post_link( %link, __( Next <span class="meta-nav">&rarr;</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(); ?>

    ×