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.
WordBeach 実行委員 小野隆士(@onocom)                               1
2
ワークショップで使用するファイルは以下に配置しておきました(壁紙のおまけ付)。ダウンロードして使ってください。   http://onocom.net/wordbeach/workshop_files.zipWebMatrixのインストールは、...
動作環境説明インストール操作習得プラグインの導入・設置テーマ作成              4
動作環境説明インストール操作習得プラグインの導入・設置              5
WordPress 3.2 日本語版PHP バージョン 5.2.4 以上MySQL バージョン 5.0 以上今回のワークショップでは、        WebMatrix        http://www.microsoft.com/web...
インストールは以下のように行います。 DB準備 WordPressをダウンロード 設定ファイル(wp-config.php)の書き換え WordPressをアップロード WEB上から設定                       7
WordPressにログインすると、管理画面から色々できます。  管理画面を眺める  投稿を書く  固定ページを書く  テーマを切り替える  ウィジェットを配置する                           8
プラグインを追加することで色々な機能を追加できます。試しに【お問い合わせフォーム】を設置してみましょう。 探す インストールする 有効化する 設置する                       9
10
テーマ概要説明制作          11
/wp-content/themes1フォルダ = 1テーマテーマフォルダ内には沢山のファイルが。。。                     12
必須      ファイル名                            内容        style.css    テーマの情報およびウェブページの外観を制御するスタイルシート       index.php     記事一覧とかそ...
http://www.pref.aichi.jp/                             header.php               side           Index.php     side          ...
http://www.pref.aichi.jp/                            header.php                            single.php                     ...
既存のHTMLファイルを、WordPressのテーマとして認識させ、管理画面のテーマ一覧に表示されるようにしましょう!  index.php  index.html をコピーして index.phpにリネーム  style.css  テーマ情報...
style.cssにテーマ情報コメントを記述することで、WordPressにテーマを認識させます。【style.css】@charset "utf-8";/*Theme Name: テーマの名前Theme URI: テーマのホームサイトの UR...
テーマが参照する画像などのパスを修正しないと正しく動作しません。index.phpに以下を挿入しましょう。【index.php】<?php bloginfo( ‘stylesheet_url’ ); ?>   ・・・ style.css読み込み...
プラグインが自動で出力するスクリプトなどを読み込む為、以下のおまじないを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(); ?>"><?...
index.phpのヘッダ部分をheader.phpに、フッタ部分をfooter.phpに分割して汎用性を高めましょう。【header.php(新規作成)】 index.phpからヘッダ部分を持ってくる。【footer.php(新規作成)】 i...
single.phpを作って個別記事ページを表示させましょう。index.phpでは記事の抜粋を表示させましょう。チームで考えてやってみましょう!既存のテーマファイルにヒントが隠されているかも。                         ...
抜粋は以下の関数を呼び出すことで表示されます。【index.php】 抜粋表示               <?php the_content(); ?>                         ↓              <?php...
○○○.phpを作って固定ページを表示させましょう。ロゴの隣にあるメニューから固定ページへリンクさせましょう。チームで考えてやってみましょう!既存のテーマファイルにヒントが隠されているかも。                        24
固定ページ用の表示を制御するにはpage.phpを作成します。固定ページへのリンクは以下のように行います。【header.php】固定ページへのリンク<?php bloginfo(‘url’); ?>               ・・ ・ ルー...
タイトルに【記事タイトル | サイト名】を表示するようにしてください!個別記事ページに次の記事・前の記事へのリンクを掲載してください!トップページを表示する時にだけ、「ようこそ」と表示してください!                 26
27
Upcoming SlideShare
Loading in …5
×

WordBeachDeathMarchWorkshop

2,339 views

Published on

WordBeach で行ったデスマワークショップのスライド。

ワードプレスのインストール→操作説明→プラグイン導入→テーマ作成を行っています。

参加いただいた方ありがとうございます。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WordBeachDeathMarchWorkshop

  1. 1. WordBeach 実行委員 小野隆士(@onocom) 1
  2. 2. 2
  3. 3. ワークショップで使用するファイルは以下に配置しておきました(壁紙のおまけ付)。ダウンロードして使ってください。 http://onocom.net/wordbeach/workshop_files.zipWebMatrixのインストールは、IKEDA Yuriko氏が作成した資料が分かりやすいです。 http://www.yuriko.net/wp- content/uploads/2011/08/webmatrix-wp.pdf 3
  4. 4. 動作環境説明インストール操作習得プラグインの導入・設置テーマ作成 4
  5. 5. 動作環境説明インストール操作習得プラグインの導入・設置 5
  6. 6. WordPress 3.2 日本語版PHP バージョン 5.2.4 以上MySQL バージョン 5.0 以上今回のワークショップでは、 WebMatrix http://www.microsoft.com/web/webmatrix/ を使用します。 6
  7. 7. インストールは以下のように行います。 DB準備 WordPressをダウンロード 設定ファイル(wp-config.php)の書き換え WordPressをアップロード WEB上から設定 7
  8. 8. WordPressにログインすると、管理画面から色々できます。 管理画面を眺める 投稿を書く 固定ページを書く テーマを切り替える ウィジェットを配置する 8
  9. 9. プラグインを追加することで色々な機能を追加できます。試しに【お問い合わせフォーム】を設置してみましょう。 探す インストールする 有効化する 設置する 9
  10. 10. 10
  11. 11. テーマ概要説明制作 11
  12. 12. /wp-content/themes1フォルダ = 1テーマテーマフォルダ内には沢山のファイルが。。。 12
  13. 13. 必須 ファイル名 内容 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/テーマの作成 13
  14. 14. http://www.pref.aichi.jp/ header.php side Index.php side bar. (or home.php) bar. php php footer.php 14
  15. 15. http://www.pref.aichi.jp/ header.php single.php footer.php 15
  16. 16. 既存のHTMLファイルを、WordPressのテーマとして認識させ、管理画面のテーマ一覧に表示されるようにしましょう! index.php index.html をコピーして index.phpにリネーム style.css テーマ情報を書き込み 16
  17. 17. style.cssにテーマ情報コメントを記述することで、WordPressにテーマを認識させます。【style.css】@charset "utf-8";/*Theme Name: テーマの名前Theme URI: テーマのホームサイトの URIDescription: テーマの説明Author: 作者の名前Author URI: 作者の URI*/ 17
  18. 18. テーマが参照する画像などのパスを修正しないと正しく動作しません。index.phpに以下を挿入しましょう。【index.php】<?php bloginfo( ‘stylesheet_url’ ); ?> ・・・ style.css読み込み<?php echo get_template_directory_uri(); ?> ・・・ テーマディレクトリのURL取得Javascriptの読み込みには以下を使用するのが望ましい。今回は説明省略。<?php wp_enquee_script(); ?> ・・・ Javascript読み込み指定 18
  19. 19. プラグインが自動で出力するスクリプトなどを読み込む為、以下のおまじないをindex.phpに追加します。【index.php】<?php wp_head(); ?> ・・・ </head>タグの直前に挿入<?php wp_footer(); ?> ・・・ </body>タグの直前に挿入 19
  20. 20. 先ほど書き込んだ投稿記事を表示させてみましょう。【index.php】<?php while (have_posts()) : the_post(); ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div><?php the_content(); ?></div><?php endwhile; ?> 20
  21. 21. index.phpのヘッダ部分をheader.phpに、フッタ部分をfooter.phpに分割して汎用性を高めましょう。【header.php(新規作成)】 index.phpからヘッダ部分を持ってくる。【footer.php(新規作成)】 index.phpからフッタ部分を持ってくる。【index.php】 以下を適切な箇所に貼り付ける。 <?php get_header(); ?> <?php get_footer(); ?> 21
  22. 22. single.phpを作って個別記事ページを表示させましょう。index.phpでは記事の抜粋を表示させましょう。チームで考えてやってみましょう!既存のテーマファイルにヒントが隠されているかも。 22
  23. 23. 抜粋は以下の関数を呼び出すことで表示されます。【index.php】 抜粋表示 <?php the_content(); ?> ↓ <?php the_excerpt(); ?> 23
  24. 24. ○○○.phpを作って固定ページを表示させましょう。ロゴの隣にあるメニューから固定ページへリンクさせましょう。チームで考えてやってみましょう!既存のテーマファイルにヒントが隠されているかも。 24
  25. 25. 固定ページ用の表示を制御するにはpage.phpを作成します。固定ページへのリンクは以下のように行います。【header.php】固定ページへのリンク<?php bloginfo(‘url’); ?> ・・ ・ ルートURLを取得<?php bloginfo(‘url’); ?>?page_id=xxx ・・・ ページを表示他にも色々な表示方法があります。 25
  26. 26. タイトルに【記事タイトル | サイト名】を表示するようにしてください!個別記事ページに次の記事・前の記事へのリンクを掲載してください!トップページを表示する時にだけ、「ようこそ」と表示してください! 26
  27. 27. 27

×