Your SlideShare is downloading. ×
0
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Wordbench長野〜WordPress初心者の為のPHP入門とjQuery話〜
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,147

Published on

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

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

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

No Downloads
Views
Total Views
1,147
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. WordPressの為の PHP入門 FirstElement 熊谷
    • 2. 今日の目的と概要• デザイナー、コーダー向け• PHP初心者• っていうか、プログラム無理><• それでもWordPressを使う上で避けて 通れない• そんなPHPを少し理解しよう!
    • 3. 了承事項• PHPの講義では無いので、最低限もの 事もお話しできません。。。• ものすごく端折ります。プログラマの方からは怒られるかも。。
    • 4. そもそも私は誰?• タクミンです!• 京都コンピュータ学院でPHPとか勉強 してきました• 飯田市にあるFirstElementでプログラ マしてます。
    • 5. PHPの基本的な事 軽く説明します
    • 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】タイトルー【的な】
    • 21. 比較 2<3 3>22=<33=>23==3
    • 22. 比較 2<3 3>2 2=<3これが 等しい 3=>2 3==3
    • 23. ifif ( $title == タイトルー) : echo(変なタイトルw);endif;
    • 24. ifif ( $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(やっぱり波カッコの奴∼); }
    • 33. よく有る忘れ物•;•.• 全角文字、特に全角スペース• クオート、カッコの閉じ忘れ
    • 34. 実践
    • 35. の前に• ちゃんとした 道具を揃えましょう!• 間違ってもWindowsの「メモ帳」は使 わないように!
    • 36. エディターの絶対条件• 変数や関数、クオート部分など色が変 わるもの• スペースやタブが可視化されるもの• を にかってになおさないもの• またその見分けが用意に付くもの・・
    • 37. 無料のエディター(Win)• EmEditer Free• TeraPad
    • 38. 無料のエディター(Win)• EmEditer Free• TeraPad 別途FTPソフトが必要
    • 39. 無料のエディター(Win)• EmEditer Free• TeraPad 別途FTPソフトが必要 ごめんなさい、 Windowsあんまり使わなくって(^^;
    • 40. MacとかLinux• EmacsとかVimとか使えたら使うと良 いかも・・・(悪い冗談です
    • 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">&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. 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!
    • 53. jQueryの機能は? jQuery日本語リファレンス http://semooh.jp/jquery/
    • 54. いきなり実践あまり意味ないけどwページ開いたら本文をフェードインさせるスクリプト
    • 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">&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(); ?>

    ×