WordPressとDreamweaver CS5の連携       2010.12.10 Supreme Web Adobeセミナー Nagoya
Hello!
Hello!豊田 有@mighty_works世界を救うWebクリエイターWordPressが好き♥Dreamweaverも好き♥
CSS Nite in NAGOYA
WordCamp Nagoya
Talk Note
本日の流れ
本日の流れWordPressについてDreamweaver CS5との連携
WordPressについて
事例紹介
ブログTechCrunch
ブログ 百式
ブログmixi engineers_blog
企業サイト 株式会社ベクター
企業サイト クックパッド株式会社
コミュニティーサイト    loftwork.com
有名人Sylvester SALLONE
有名人 蓮舫
メリット世界標準である(トップクラスのシェア)国内外の情報が多いプラグインやテーマが豊富♪PHPを学べるライセンス料が不要(=無料で利用出来る)
かっこいい♥
基本機能
基本機能コンテンツの投稿方法外観(テーマ)プラグイン
WordPress とDreamweaver CS5 の      連携
テーマ制作の基礎知識
制作工程 デザイン作成 コーディングWordPress実装
必須ファイル  WordPressにテーマとして認識させるためには...index.phpstyle.cssstyle.cssにテーマの情報を記載する。   ここに記載するとWordPressは      テーマとして認識します。
style.cssへの記述例/*Theme Name: テーマの名前Theme Description: テーマの説明文Author: テーマの制作者Author URI: テーマの制作者のURIVersion: テーマのバージョン*/
WordPressテーマの構成
テンプレートファイル     デフォルトテーマ TwentyTen のファイル構成index.php            tag.phpheader.php           404.phpfooter.php           arch...
テンプレートファイルheader.php    index.php    functions.phpfooter.php    single.phpsidebar.php   page.php
テンプレートファイル
テンプレートファイル              パーツを表示するファイルファイル名          説明header.php     ヘッダーエリアを表示footer.php     フッターエリアを表示sidebar.php    サイドバ...
テンプレートファイル              各ページを出力するファイルファイル名              説明index.php          基本的にはTOPで表示single.php         投稿を個別で表示page.ph...
header.php  index.php  single.php                sidebar.php  page.php               footer.php
特殊テンプレートファイル                関数などを記載するファイルファイル名             説明functions.php     テーマで利用する関数などを記載する。ウィジェット、カスタムメニュー、カスタム背景、カス...
Dwの設定
ローカルサーバーの構築         or XAMMP        MAMP
テンプレートタグ
bloginfo タグ             WordPressの基本情報を表示するタグタグ                                     説明<?php bloginfo(name); ?>            ...
機能を表示するタグ                 便利な機能を呼び出すタグタグ                            説明<?php wp_nav_menu(); ?>       カスタムナビゲーションを表示<?php dy...
LOOP
LOOP                   くり返し処理<?php if (have_posts()) : ?>  <?php while (have_posts()) : the_post(); ?>     //記事のフォーマット  <?...
コンテンツを表示するタグ                        投稿内容を表示するタグタグ                           説明<?php the_permalink() ?>     URLを表示<?php the...
パーツテンプレートタグ                    パーツを表示するタグタグ                        説明<?php get_header(); ?>    header.php を表示<?php get_foo...
最後に
Lets get started.
さぁ始めよう!
I wish you a merry Christmas!
Thank you.website : http://mighty-works.com/ mail : toyoda@mighty-works.com     twitter : @mighty_works
Upcoming SlideShare
Loading in...5
×

101210 supreme web adobe seminar Nagoya

708

Published on

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
708
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

101210 supreme web adobe seminar Nagoya

  1. 1. WordPressとDreamweaver CS5の連携 2010.12.10 Supreme Web Adobeセミナー Nagoya
  2. 2. Hello!
  3. 3. Hello!豊田 有@mighty_works世界を救うWebクリエイターWordPressが好き♥Dreamweaverも好き♥
  4. 4. CSS Nite in NAGOYA
  5. 5. WordCamp Nagoya
  6. 6. Talk Note
  7. 7. 本日の流れ
  8. 8. 本日の流れWordPressについてDreamweaver CS5との連携
  9. 9. WordPressについて
  10. 10. 事例紹介
  11. 11. ブログTechCrunch
  12. 12. ブログ 百式
  13. 13. ブログmixi engineers_blog
  14. 14. 企業サイト 株式会社ベクター
  15. 15. 企業サイト クックパッド株式会社
  16. 16. コミュニティーサイト loftwork.com
  17. 17. 有名人Sylvester SALLONE
  18. 18. 有名人 蓮舫
  19. 19. メリット世界標準である(トップクラスのシェア)国内外の情報が多いプラグインやテーマが豊富♪PHPを学べるライセンス料が不要(=無料で利用出来る)
  20. 20. かっこいい♥
  21. 21. 基本機能
  22. 22. 基本機能コンテンツの投稿方法外観(テーマ)プラグイン
  23. 23. WordPress とDreamweaver CS5 の 連携
  24. 24. テーマ制作の基礎知識
  25. 25. 制作工程 デザイン作成 コーディングWordPress実装
  26. 26. 必須ファイル WordPressにテーマとして認識させるためには...index.phpstyle.cssstyle.cssにテーマの情報を記載する。 ここに記載するとWordPressは テーマとして認識します。
  27. 27. style.cssへの記述例/*Theme Name: テーマの名前Theme Description: テーマの説明文Author: テーマの制作者Author URI: テーマの制作者のURIVersion: テーマのバージョン*/
  28. 28. WordPressテーマの構成
  29. 29. テンプレートファイル デフォルトテーマ TwentyTen のファイル構成index.php tag.phpheader.php 404.phpfooter.php archive.phpsidebar.php attachment.phpsidebar-footer.php author.phpsingle.php category.phppage.php comments.phponecolumn-page.php loop.phpfunctions.php search.php
  30. 30. テンプレートファイルheader.php index.php functions.phpfooter.php single.phpsidebar.php page.php
  31. 31. テンプレートファイル
  32. 32. テンプレートファイル パーツを表示するファイルファイル名 説明header.php ヘッダーエリアを表示footer.php フッターエリアを表示sidebar.php サイドバーエリアを表示
  33. 33. テンプレートファイル 各ページを出力するファイルファイル名 説明index.php 基本的にはTOPで表示single.php 投稿を個別で表示page.php ページを表示※詳しくはテンプレート階層を参照
  34. 34. header.php  index.php  single.php sidebar.php  page.php footer.php
  35. 35. 特殊テンプレートファイル 関数などを記載するファイルファイル名 説明functions.php テーマで利用する関数などを記載する。ウィジェット、カスタムメニュー、カスタム背景、カスタムヘッダーを利用する場合もこのファイルに記述が必要。
  36. 36. Dwの設定
  37. 37. ローカルサーバーの構築 or XAMMP MAMP
  38. 38. テンプレートタグ
  39. 39. bloginfo タグ WordPressの基本情報を表示するタグタグ 説明<?php bloginfo(name); ?> サイトのタイトル<?php bloginfo(stylesheet_url); ?> メインCSSのURL<?php bloginfo(url); ?> サイトURL
  40. 40. 機能を表示するタグ 便利な機能を呼び出すタグタグ 説明<?php wp_nav_menu(); ?> カスタムナビゲーションを表示<?php dynamic_sidebar(); ?> ウィジェットを表示
  41. 41. LOOP
  42. 42. LOOP くり返し処理<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> //記事のフォーマット <?php endwhile; ?><?php else : ?> //コンテンツがない時の表示<?php endif; ?>
  43. 43. コンテンツを表示するタグ 投稿内容を表示するタグタグ 説明<?php the_permalink() ?> URLを表示<?php the_title(); ?> タイトルを表示<?php the_content(); ?> 本文を表示<?php the_time() ?> 公開時間を表示<?php the_category() ?> カテゴリを表示<?php the_tags(); ?> タグを表示
  44. 44. パーツテンプレートタグ パーツを表示するタグタグ 説明<?php get_header(); ?> header.php を表示<?php get_footer(); ?> footer.php を表示<?php get_sidebar(); ?> sidebar.php を表示
  45. 45. 最後に
  46. 46. Lets get started.
  47. 47. さぁ始めよう!
  48. 48. I wish you a merry Christmas!
  49. 49. Thank you.website : http://mighty-works.com/ mail : toyoda@mighty-works.com twitter : @mighty_works
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×