1日でマスターするWordpress講座
- 1. 1日でマスター！ WordPressサイト構築講座 SKILLHUB Ordermade Learning 1
- 2. SKILLHUB 自己紹介 2 株式会社スキルハブ代表 吉田 光利 Skillhubの制作者 http://skillhub.jp スキルセット RubyとRailsプログラミング UI/UX, Webデザイン HTML/CSSマークアップ Webマーケティング 教育関連 民間ITスクール Web講座企画・開発・講師 企業用Web講座企画・開発・講師 担当した企業は1000社以上 教えた生徒数は10000人以上
- 3. SKILLHUB 講座のコンセプト WordPressのなんたるかを理解する 必要最小限のスキルを最短距離でマスターする WordPressで本格的サイト制作ができるようになる 3
- 4. SKILLHUB 今日の流れ 1.WordPress環境構築 2. Apache, MySQL, PHPの基礎知識 3. テーマについて 4. 【実習】シンプルなWordPressサイト制作 5. UI（ユーザー・インターフェース）制作 6. プラグインについて 7. 【実習】本格サイト完成 4
- 5.
- 6. SKILLHUB 必要素材をダウンロードする 1.http://skillhub.jp/sozai.zip 2. Zipファイルがダウンロードされる 3. 解凍して適切なフォルダに置く （デスクトップやドキュメントを保存しているフォルダなど） 6
- 7.
- 8.
- 9. SKILLHUB WordPress環境構築 1.XAMPP（Windows）、MAMP（Mac）のインストール 2. データベースの作成 3. WordPressのダウンロード 4. WordPressのインストール 5. 記事を3つ作成する 9
- 10. SKILLHUB 何をするのか？ 10 Apache MySQL 1. インストール WordPress 2. インストール XAMPP/MAMP 3. 通信できるようにする
- 11.
- 12. SKILLHUB アプリケーション/MAMP 12 ダブルクリックして MAMP起動
- 13. スタートページ を開く SKILLHUB MAMPサーバー開始 13 クリックして サーバー起動 http://localhost:8888/MAMP/?language=Japanese
- 14. SKILLHUB PHPMyAdminでDB作成 14 データベースが作成された zooloppa zooloppa
- 15.
- 16. SKILLHUB WordPressのダウンロード 16 http://ja.wordpress.org/ クリックして ダウンロード開始
- 17. SKILLHUB アプリケーション/MAMP 17 公開用 ディレクトリ”htdocs” ダブルクリックで開く zooloppa その中に「wp」ディレクトリを作成 し、その中に「zooloppa」ディレク トリを作成する
- 18.
- 19. SKILLHUB データベースへのアクセス設定 19 このように設定して 送信ボタンをクリック zooloppa
- 20. SKILLHUB インストール実行！ 20 インストール実行ボタンを クリック
- 21. SKILLHUB WPに必要な情報を記入 21 ユーザー名：admin パスワード：skillhub zooloppa
- 22. SKILLHUB これで以下が実現した！ 22 Apache MySQL 1. インストール WordPress 2. インストール XAMPP/MAMP 3. 通信できるようにする
- 23. SKILLHUB ログインする 23 ユーザー名：admin パスワード：skillhub
- 24.
- 25.
- 26.
- 27.
- 28. SKILLHUB ユーザー設定 28 ユーザー名：masa localhost パスワード：skillhub 同名の～にチェックするとユーザ名とパスワードが 同じデータベースが作成される データベース名：masa ユーザ名：masa パスワード：skillhub すべてチェックする をクリック 実行ボタンをクリック
- 29.
- 30.
- 31. 新規にWordPressサイトを作成する 1. PHPMyAdminで「zooloppa」という名前のデータベースを作成する 2. WordPressをダウンロードして解凍 3. それをhtdocs/wpに入れる 4. WordPressのインストール 5. 3つの記事を作成する SKILLHUB 31
- 32.
- 33. トップページキャンプ募集赤ちゃんくま SKILLHUB 3ページ作成します 33 index.html camp.html bear.html
- 34. SKILLHUB トップページ作成 34 #wrapper
- 35. SKILLHUB トップページのコード 35 HTML CSS
- 36. #wrapper SKILLHUB キャンプ募集 36 #content #sidebar
- 37. SKILLHUB キャンプページのコード 37 HTML CSS
- 38. SKILLHUB リンクする 38 index.html camp.html
- 39.
- 40.
- 41. SKILLHUB 赤ちゃんくまのページを増やす 3.追加 41 index.html camp.html bear.html 2. 追加 1. 作成 新たにこのページを 作成。それに伴い トップページとキャ ンプページのリンク 箇所を作成する 画像とリンク
- 42.
- 43. WordPressの基本はブログである SKILLHUB 43 ブログそのものを作成、そして記事を作成する わたしのブログ 記事１ 記事2 記事3 わたしのブログ 記事１ コメント
- 44.
- 45. 例えば、下のような複数ページを作って行く場合 SKILLHUB できます、でも大変！ 45 わたしのブログ 記事１ 記事2 記事3 1. それぞれHTMLを作成し、 トップページにリンクを張る 2. このページのHTMLを編集し作 成したHTMLにリンクを張る。 3. さらに、出来上がったらサー バーにアップする！！
- 46.
- 47. SKILLHUB 便利！ 管理画面で記事を作成、自動でリンク作成 管理画面 47 タイトル 本文 作成 記事１ 今日はこんな事が ありました！ HTMLを一切使わずに記事を生成、 サーバーへのアップも必要なし。
- 48. SKILLHUB たいへん便利！ 管理画面で記事を作成、自動でリンク作成 48 わたしのブログ 記事１ 記事2 記事3 記事一覧へもリンクを自動生成してくれて、 相互リンクを自動で実現
- 49.
- 50. テーマとは「データを表示する器」 データベースからデータを受け取り、ページとして表示する データとして送信されDBに保存される title: 記事１ body: 今日は～ SKILLHUB <?php the_title( ) ?> 50 リクエストされたデータを送信 わたしのブログ 記事１ コメント 管理画面 タイトル 本文 作成 記事１ 今日はこんな事が ありました！ http://localhost/wordpress/?p=20 <?php the_content( ) ?>
- 51.
- 52.
- 53. 必要なフォルダとファイルを用意する SKILLHUB 53 WordPressの大元フォルダ テーマ index.php style.css my_theme
- 54. index.php, style.cssを作成・保存 SKILLHUB Sublime Textで開き index.php style.css 54
- 55. 以下を記述すると管理画面からテーマを選べるようになる SKILLHUB style.cssに情報を記述する /* Theme Name: テーマの名前 Description: このテーマの説明 Author: 作者の名前 */ 55
- 56. SKILLHUB テーマを有効化する 56 有効化をクリック ※別ウインドウでサイトを表示すると便利
- 57.
- 58.
- 59.
- 60.
- 61. SKILLHUB 記事1 記事2 記事3 記事の一覧 61
- 62. SKILLHUB 記事にコンテンツを表示する 62 記事1 記事2 記事3 コンテンツ部分1 コンテンツ部分1 コンテンツ部分1
- 63. SKILLHUB タイトルにリンクを張る 63 記事1 コンテンツ部分1 コンテンツ部分1 記事2 記事3 コンテンツ部分1
- 64. SKILLHUB CSSを適用する 64 記事1 記事2 記事3 index.php style.css
- 65. SKILLHUB 画像を表示する 65 記事1 記事2 記事3 index.php wp-content
- 66.
- 67. 今までは記事の個別ページはindex.php 記事1 記事2 記事3 SKILLHUB 記事1 記事2 記事の個別ページには index.phpがテンプレートとして 使用される 記事の個別ページ
- 68. 個別ページではデザインを変えたい SKILLHUB 68 記事1 記事2 記事3 記事1 記事2 ビッグイメージを無くし 背景色を青っぽくしたい 記事の個別ページ 講師吉田のブログ 講師吉田のブログ
- 69.
- 70. それぞれのテンプレートを変更できる index.php single.php SKILLHUB 70 記事1 記事2 記事3 講師吉田のブログ 記事1 講師吉田のブログ 記事2 講師吉田のブログ トップページの テンプレート 個別ページの テンプレート トップページ個別ページ
- 71.
- 72. 先ほど作成したサイトをWordPressで作成 SKILLHUB 72 記事投稿 記事の繰り返し index.php
- 73. 必要なフォルダとファイルを用意する SKILLHUB 73 WordPressの大元フォルダ テーマ index.php style.css zooloppa
- 74. SKILLHUB 手順 •index.phpを作成する（中身は空で良い） • style.cssを作成する （テーマ名：Zooloppa、概要：架空の動物園） • テーマとして「有効化」する • それぞれの中身を作成する • single.phpを作成する 74
- 75.
- 76. やりたいこと：カテゴリー別に最新記事２つ表示 SKILLHUB 「サムネール」や「記事の要約文」 などのも表示できるようにします 76
- 77. SKILLHUB functions.php WordPressに様々な機能を追加することが できます。上の例はサムネールが使えるよ うにしてサイズを200pxにしています。 77 新規にfunctions.phpを作成し以下のように記述します
- 78. SKILLHUB カテゴリーを追加する 78 投稿の中の「カテゴリー」で 追加と削除ができる
- 79. サムネール＆カテゴリー付きの記事作成 SKILLHUB 79 カテゴリーを指定 サムネール（アイキャッチ画像） を指定する
- 80. SKILLHUB category.phpを作成 80 category.php カテゴリーページのテンプレートである category.phpを作成する 動物、ブログカテゴリー
- 81. トップページ動物、ブログカテゴリー index.php category.php SKILLHUB 今のところのテンプレート 81 記事の個別ページ single.php
- 82. SKILLHUB ループ部分を作成する 82 index.php query_posts()は簡単にカテゴリーや 記事の件数を指定することができます。 the_post_thumbnail();でサムネールを 表示することができます the_excerpt()は記事の概要を 表示することができます
- 83.
- 84. SKILLHUB 新しいカテゴリーを作成する •新たなカテゴリー「園長ブログ」を作成して加えてみましょう • それをトップページに2件表示してみましょう 84
- 85.
- 86.
- 87.
- 88. SKILLHUB 固定ページを追加する ブログの記事と同じように固定 ページを作成することができる 88
- 89. SKILLHUB 子供ページを作成する 「ズーロッパとは」を親として、 子供にあたる「園長よりみなさ まへ」「沿革」などを作成する ことができる 89 親 子 子
- 90. SKILLHUB page.phpを作成 固定ページpage.php 90 固定ページのテンプレートである page.phpを作成する
- 91. トップページ動物、ブログカテゴリー SKILLHUB 今のところのテンプレート 91 index.php category.php 記事の個別ページ single.php 固定ページ page.php
- 92.
- 93. SKILLHUB 新しい固定ページを作成する •新たなカテゴリー「園長ブログ」を作成して加えてみましょう • それをトップページに2件表示してみましょう 93
- 94.
- 95. やりたいこと：ナビゲーションをつくりたい SKILLHUB グローバルナビゲーション 親子関係を定義したサイドメニュー を作成したい 95 ローカルナビゲーション
- 96.
- 97. SKILLHUB functions.php 97 functions.phpに以下を追加する add_theme_supportで管理画面 からメニューを使えるようにす る。 register_nav_menusでナビゲー ションを作成する。
- 98. 管理画面「メニュー」でグローバルナビ作成 SKILLHUB グローバルナビに入れたい項目を チェックして「メニュー追加」ボ タンを押すと追加される。最後に 「メニューを保存」で完了 98
- 99. SKILLHUB テンプレートに記述する 99 それぞれのテンプレートのヘッダー 部分に加える index.php, single.php, category.php, page.php
- 100.
- 101. SKILLHUB functions.php 101 functions.phpに以下を追加する このコードで3つの再度ウィ ジェットを作成できる
- 102. 管理画面「メニュー」でグローバルナビ作成 SKILLHUB 利用できるウィジェットから右の ウィジェットにドラッグ＆ドロッ プする。 102
- 103. テンプレートに記述する（page.php） SKILLHUB 103 テンプレートのサイド部分に加える。 固定ページにはサイドウィジェット１ を加える
- 104. テンプレートに記述する（category.php) SKILLHUB 104 テンプレートのサイド部分に加える。 固定ページにはサイドウィジェット２ を加える
- 105. テンプレートごとにローカルナビを変更できる SKILLHUB 105 page.php category.php
- 106.
- 107. やりたいこと：お問い合わせページをつくる SKILLHUB フォームによる問い合せがあれば メールで知らせてくれるシステム 107
- 108.
- 109.
- 110. SKILLHUB インストール いますぐインストールをクリック してインストール＆有効化 ※失敗する場合は次ページを参照 110
- 111. SKILLHUB コピペするだけ 固定ページを作成して、その中に コードをコピペするだけ 111
- 112.
- 113. 1. プラグインがインストール出来ない場合 1.wp-config.phpに以下を追加する define('FS_METHOD', 'direct'); 2. パーミッションを変更する chmod -R 777 /Library/WebServer/Documents/wordpress/wp-content SKILLHUB 113
- 114. SKILLHUB 2. メールが飛ばない場合 1. WP Mail SMTPプラグインを使用 する 2. SMTPサーバ（メールサーバ）に Gmailを使うと上手くいく 3. 以下のページが詳しいのでそち らを参照する http://www.adminweb.jp/wordpress-plugin/ list/index12.html 4. 設定は以下のようにする 114
- 115.
- 116. SKILLHUB Category PostsWidget 1. 最近の投稿をカテゴリー別に表示 できる 2. インストールするとウィジェット の項目に加わる 3. かんたん！ 116
- 117. トップページブログ一覧ブログ詳細 SKILLHUB テンプレートファイル 117 index.php category.php page.php Zooloppaについて category.php
- 118.