WordBeachDeathMarchWorkshop

2,075 views

Published on

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

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

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,075
On SlideShare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×