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.

HTMLで作ったサイトをWordPressに組み込んでみよう!

5,656 views

Published on

WordBench福岡201300628

  • Be the first to comment

HTMLで作ったサイトをWordPressに組み込んでみよう!

  1. 1. HTMLで作ったサイトを WordPressに組み込んでみよう!
  2. 2. 自己紹介
  3. 3. 写真は本人ではありません。 NAME 越水 大輔 Twitter @ksmzdsk Facebook Daisuke Koshimizu フリーのWEBデザイナー(最近はコーディング中心)
  4. 4. http://kirinblog.com ブログもやってます
  5. 5. 初参加したWordPressイベント 2011年7月 WordBench 東京 @マイクロソフト品川 WordPress 3.2のリリースパーティ 他の製作者との交流 その後
  6. 6. すぐ勉強会に参加 2011年8月 WordBench 川崎 当時のスキル HTML、CSSが書ける。 WordPressの入門書を1冊終えた程度
  7. 7. 全然ついていけなかった。。。 親テーマ? 子テーマ? Twenty Eleven? テンプレートタグ知らない。。。 PHP分からない。。。 カスタマイズ経験不足。。。 発表できる内容もないし。。。 話してる内容についていけてなくて、どう質問したらいいかわからない。。。 なので、
  8. 8. 今回の対象者 2年前の私
  9. 9. 今回の対象者 2年前の私 HTML、CSSは書ける。 WordPress? ブログ作ったりなんだか便利なんでしょ?
  10. 10. WordPress ● CMS コンテンツを管理するシステム ● カスタマイズの自由度が高い ● WEBサービス(会員制サイト)の 土台としても利用できる
  11. 11. WordPress ● CMS コンテンツを管理するシステム ● カスタマイズの自由度が高い ● WEBサービス(会員制サイト)の 土台としても利用できる まずは、ブログ。
  12. 12. WordPress 何が便利? コンテンツ管理
  13. 13. WordPress 何が便利? コンテンツ管理 タグ カテゴリー
  14. 14. WordPress 何が便利? コンテンツ管理 タグ カテゴリー 投稿ページ 固定ページ
  15. 15. WordPress 何が便利? コンテンツ管理 タグ カテゴリー 投稿ページ 時系列 固定ページ 独立したページ
  16. 16. WordPress 何が便利? コンテンツ管理 タグ カテゴリー 投稿ページ 時系列 固定ページ 独立したページ 管理画面
  17. 17. WordPress 何が便利? コンテンツ管理 タグ カテゴリー プラグイン 拡張機能 SEO SNS連携 コメント機能 投稿ページ 時系列 カスタムポストタイプ カスタムフィールド カスタムタクソノミー 固定ページ 独立したページ テンプレートタグ カスタマイズ テンプレート化 ユーザー権限 管理画面 テーマ マルチサイト機能 などなど
  18. 18. WordPress 何が便利? 投稿ページ 時系列 固定ページ 独立したページ まずはブログ。
  19. 19. 制作例 嫁のパンブログ yokkonopan.com
  20. 20. 定番のブログレイアウト header contents side footer <header> ..... </header> <section class="contents"> <article> ..... </article> </section> <section class="side"> ..... </section> <footer>
  21. 21. WordPressを使う前に まずはHTMLとCSSがしっかり書ければOK! HTML (文書構造) CSS (見た目)
  22. 22. WordPressのインストール ロリポップとかヘテムルの簡単インストールが便利
  23. 23. WordPressの表示 大きく分けて2種類 通常のサイト表示 管理画面 (ログイン後)
  24. 24. テーマの切り替え 管理画面 外観>テーマ 自由にテーマの切り 替えができます。
  25. 25. テーマをアップロードする 最低限のファイル index.php style.css サムネ画像 /* Theme Name: Yokkono-pan Description: WordPress theme. Theme URI: http://kirinblog.com/ Author: Daisuke Koshimizu Author URI: http://kirinblog.com/ Version: 1.0.1 License: GNU General Public License License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: white, right-sidebar, two-columns */
  26. 26. テーマをアップする場所
  27. 27. テーマの変更をしてみる。 画像などが表示されない場合。下記をチェック ● CSSのパスが通ってない。 ● imgのパスが通ってない。
  28. 28. テーマの変更をしてみる。 画像などが表示されない場合。下記をチェック ● CSSのパスが通ってない。 ● imgのパスが通ってない。 ここから実際にファイルを変更してみる。
  29. 29. index.phpの切り分け header.php → <?php get_header(); ?> sidebar.php → <?php get_sidebar(); ?> footer.php → <?php get_footer(); ?> メンテナンスの省力化 1つのファイルを修正すればOK!
  30. 30. WordPressのタグを使う <?php echo get_template_directory_uri(); ?> 使用テーマフォルダのURLを出力 imgのパスを通したりするときに使う。
  31. 31. WordPressのタグを使う <?php echo get_stylesheet_directory_uri(); ?> 使用テーマのスタイルシートへのパス
  32. 32. WordPressのタグを使う <?php bloginfo('name'); ?> 管理画面で設定したブログタイトルを出力。 <title><?php bloginfo('name'); ?></title> とかで使う。
  33. 33. WordPressのタグを使う <?php bloginfo('description'); ?> 管理画面で設定したキャッチフレーズを出力。 メタタグとかで使う。
  34. 34. WordPressのタグを使う <?php the_title(); ?> 記事タイトルを出力。 <h1><?php the_title(); ?></h1> とか
  35. 35. WordPressのタグを使う <?php the_content(); ?> 記事内容を出力。
  36. 36. WordPressの記事を読み込む <?php if(have_posts()): while(have_posts()): the_post(); ?> <?php endwhile; endif; ?> 記事をあるだけループして出力する。
  37. 37. 大事なポイント なにはともあれHTMLとCSSをしっかり書く! HTML (文書構造) CSS (見た目)
  38. 38. 大事なポイント なにはともあれHTMLとCSSをしっかり書く! HTML (文書構造) CSS (見た目) あとは少し記述をWordPressのタグに置き換える だけでいい。
  39. 39. ほら、もう怖くない
  40. 40. もう・・・怖くないぜ・・? (使いたかっただけ)
  41. 41. 入門学習におすすめのテーマ WordPressテーマ ”doshirouto” http://toyao. net/xoops/modules/wordpress/archives/5664 ● 非公式だけど超シンプル! ● 日本語での分かりやすいコメント盛りだくさん!
  42. 42. 書籍 なぞっていけばとりあえずサイトが作れる。 WordPressで出来ることの概要がつかめる。
  43. 43. 少しずつステップアップすればいい!
  44. 44. という2年前の自分へのメッセージ
  45. 45. ありがとうございました

×