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

DeathMarchWorkshop冬の陣

3 234 vues

Publié le

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

Publié dans : Technologie
1 commentaire
3 j’aime
Statistiques
Remarques
  • ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    リンク集
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ■電子書籍:半日でわかる!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
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
Aucun téléchargement
Vues
Nombre de vues
3 234
Sur SlideShare
0
Issues des intégrations
0
Intégrations
972
Actions
Partages
0
Téléchargements
16
Commentaires
1
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×