Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DeathMarchWorkshop冬の陣

3,478 views

Published on

2011年12月12日に開催された、【WordPress超初心者ユーザーに身も心も捧ぐ、デスマワークショップ冬の陣】の資料です。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━
リンク集
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■電子書籍:半日でわかる!WordPressのお作法
  https://gihyo.jp/dp/ebook/2011/G11B04

■【動画】WordPress超初心者に身も心も捧ぐデスマワークショップ冬の陣
 ・http://www.youtube.com/watch?v=PqMm502-SmI (1/4)
 ・http://www.youtube.com/watch?v=oXHH6Y-9a_E (2/4)
 ・http://www.youtube.com/watch?v=wGeCC4GCY8s (3/4)
 ・http://www.youtube.com/watch?v=iskgM54G-vg (4/4)

■ワークショップで使用した開発環境
WebMatrixを使用してワークショップを行いました。
http://www.microsoft.com/web/webmatrix/

速攻ダウンロードして使いたい方はこちらからどうぞ。
http://bit.ly/WebMatrix_iine

Published in: Technology
  • ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    リンク集
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ■電子書籍:半日でわかる!WordPressのお作法
      https://gihyo.jp/dp/ebook/2011/G11B04

    ■【動画】WordPress超初心者に身も心も捧ぐデスマワークショップ冬の陣
     ・http://www.youtube.com/watch?v=PqMm502-SmI (1/4)
     ・http://www.youtube.com/watch?v=oXHH6Y-9a_E (2/4)
     ・http://www.youtube.com/watch?v=wGeCC4GCY8s (3/4)
     ・http://www.youtube.com/watch?v=iskgM54G-vg (4/4)

    ■ワークショップで使用した開発環境
     WebMatrixを使用してワークショップを行いました。
      http://www.microsoft.com/web/webmatrix/
      
      速攻ダウンロードして使いたい方はこちらからどうぞ。
       http://bit.ly/WebMatrix_iine
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

DeathMarchWorkshop冬の陣

  1. 1. 1
  2. 2. ワークショップで使用したファイルを以下からダウンロード頂けます。 http://onocom.net/wordbench/workshop_files.zip 壁紙のおまけ付です。 2
  3. 3. 一人で学ぶと心が折れるあなた。以下の資料もぜひ活用ください。【電子書籍】半日でわかる!WordPressのお作法 https://gihyo.jp/dp/ebook/2011/G11B04【動画】WordPress超初心者に身も心も捧ぐデスマワークショップ冬の陣 ・ http://www.youtube.com/watch?v=PqMm502-SmI (1/4) ・ http://www.youtube.com/watch?v=oXHH6Y-9a_E (2/4) ・ http://www.youtube.com/watch?v=wGeCC4GCY8s (3/4) ・ http://www.youtube.com/watch?v=iskgM54G-vg (4/4) 星野さん(@khoshino)撮影ありがとうございました。 3
  4. 4. 皆様にお願いオープンソースCMSの支援活動には皆様の「いいね(WebMatrix ダウンロード)」が必要です! ダウンロードだけでもご協力お願いします! bit.ly/WebMatrix_iineWebMatrix 気に入りましたら、ぜひともお試しください! http://www.microsoft.com/japan/web/webmatrix/wordpress/
  5. 5. 5
  6. 6. 6
  7. 7. 7
  8. 8. 教官LD LD LD LD 8
  9. 9. 自己紹介チーム名決定チームリーダ、オペレータ等役割分担 9
  10. 10. 動作環境説明インストール操作習得プラグインの導入・設置テーマ作成 10
  11. 11. 動作環境説明インストール操作習得プラグインの導入・設置 11
  12. 12. WordPress 3.2 日本語版PHP バージョン 5.2.4 以上MySQL バージョン 5.0 以上今回のワークショップでは、 WebMatrix http://www.microsoft.com/web/webmatrix/ DL直リンク( http://bit.ly/WebMatrix_iine ) を使用します。 12
  13. 13. インストールは以下のように行います。 DB準備 WordPressをダウンロード 設定ファイル(wp-config.php)の書き換 え WordPressをアップロード WEB上から設定 13
  14. 14. WordPressにログインすると、管理画面から色々できます。 管理画面を眺める 投稿を書く 固定ページを書く ウィジェットを配置する テーマを切り替える 14
  15. 15. プラグインを追加することで色々な機能を追加できます。試しに【お問い合わせフォーム】を設置してみましょう。 探す インストールする 有効化する 設置する 15
  16. 16. 16
  17. 17. テーマ概要説明制作 17
  18. 18. /wp-content/themes1フォルダ = 1テー マテーマフォルダ内には沢山のファイルが。。。 18
  19. 19. 必須 ファイル名 内容 テーマの情報およびウェブページの外観を制御するスタイルシー style.css ト index.php 記事一覧とかその他もろもろの表示を担当。テーマの親分! single.php 個別の投稿を担当 page.php 個別のページを担当 home.php トップページを担当 header.php ヘッダを担当(get_header()で読み込まれる) footer.php フッター担当(get_footer()で読み込まれる) sidebar.php サイドバー担当(get_sidebar()で読み込まれる) functions.php フックや自作の関数等を記載する 他にも沢山あるので興味のある方は以下のリンクをチェック http://wpdocs.sourceforge.jp/テーマの作成 19
  20. 20. 20
  21. 21. http://www.pref.aichi.jp/ header.php side Index.php side bar. (or home.php) bar. php php footer.php 21
  22. 22. http://www.pref.aichi.jp/ header.php single.php footer.php 22
  23. 23. 23
  24. 24. 既存のHTMLファイルを、WordPressのテーマとして認識させ、管理画面のテーマ一覧に表示されるようにしましょう! index.php index.html を index.phpにリネーム style.css テーマ情報を書き込み 24
  25. 25. style.cssにテーマ情報コメントを記述することで、WordPressにテーマを認識させます。【style.css】/*Theme Name: テーマの名前Theme URI: テーマのホームサイトの URIDescription: テーマの説明Author: 作者の名前Author URI: 作者の URI*/ 25
  26. 26. テーマが参照する画像などのパスを修正しないと正しく動作しません。index.phpに以下を挿入しましょう。【index.php】<?php bloginfo( ‘stylesheet_url’ ); ?> ・・・ style.css読み込み<?php bloginfo( ‘template_directory’ ); ?> ・・・ テーマディレクトリのURL表示 26
  27. 27. サイトタイトルと説明文を表示させてみましょう。【index.php】<?php bloginfo( ‘name’ ); ?> ・・・ サイトタイトル表示<?php bloginfo( ‘description’ ); ?> ・・・ 説明文表示 27
  28. 28. プラグインが自動で出力するスクリプトなどを読み込む為、以下のおまじないをindex.phpに追加します。【index.php】<?php wp_head(); ?> ・・・ </head>タグの直前に挿入<?php wp_footer(); ?> ・・・ </body>タグの直前に挿入 28
  29. 29. 先ほど書き込んだ投稿記事を表示させてみましょう。【index.php】<?php while (have_posts()) : the_post(); ?> <h2><a href=“<?php the_permalink(); ?>”><?php the_title(); ?></a></h2> <p><?php the_time(Y/m/d G:i); ?></p> <div><?php the_content(); ?></div><?php endwhile; ?> 29
  30. 30. トップページを表示する時、記事の抜粋を表示させましょう。<?php if ( is_home()) :?><?php the_excerpt();?><p class="more"><a href="<?php the_permalink(); ?>">続きを読む...</a></p><?php else: ?>・・・ the_content(); ・・・<?php endif; ?> 30
  31. 31. ページが見つからなかった時に、エラーメッセージを表示させましょう。<?php if (have_posts()) : ?>・・・<?php else: ?><p>ページが見つかりませんでした。</p><?php endif; ?> 31
  32. 32. 32
  33. 33. index.phpのヘッダ部分をheader.phpに、フッタ部分をfooter.phpに分割して汎用性を高めましょう。【header.php(新規作成)】 index.phpからヘッダ部分を持ってくる。【footer.php(新規作成)】 index.phpからフッタ部分を持ってくる。【index.php】 以下を適切な箇所に貼り付ける。 <?php get_header(); ?> <?php get_footer(); ?> 33
  34. 34. single.phpを作って個別記事ページを表示させましょう。チームで考えてやってみましょう!既存のテーマファイルにヒントが隠されているかも。 34
  35. 35. ○○○.phpを作って固定ページを表示させましょう。ロゴの隣にあるメニューから固定ページへリンクさせましょう。チームで考えてやってみましょう!既存のテーマファイルにヒントが隠されているかも。 35
  36. 36. 固定ページ用の表示を制御するにはpage.phpを作成します。固定ページへのリンクは以下のように行います。【header.php】固定ページへのリンク<?php bloginfo(‘url’); ?> ・・ ・ サイトURLを取得<?php bloginfo(‘url’); ?>?page_id=xxx ・・・ ページを表示他にも色々な表示方法があります。 36
  37. 37. 37

×