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

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

on

  • 1,373 views

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

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

Statistics

Views

Total Views
1,373
Views on SlideShare
1,373
Embed Views
0

Actions

Likes
1
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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
  • \n\n\n\n\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

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

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