Wordpress研修　～ブログ構築編～ 2016年7月 杉本　啓太.

Presentation on theme: "Wordpress研修　～ブログ構築編～ 2016年7月 杉本　啓太."— Presentation transcript:

1 Wordpress研修　～ブログ構築編～ 2016年7月 杉本　啓太

2 Wordpress研修～ブログ構築編～ 目次
1.　はじめに 本研修の目的・対象 注意点 2.　Wordpressが動く仕組み システム構成全体像 HTML/CSSとは テーマ/プラグインとは 3.　実際に作ってみよう サーバレンタル ドメインの取得 ワードプレスのインストール テーマ選択 カスタマイズ メニュー/ウィジェットを使用してみる SNSボタンを付けてみる 特定の場所の文字の大きさと色を変えてみる グリッド型に変えてみる その他、自由なカスタマイズ相談 4.　最後に より複雑なカスタマイズの紹介 カスタマイズの引出しを増やすには

3 1. はじめに 2. Wordpressが動く仕組み 3.実際に作ってみよう 4. 最後に

4 1. はじめに －本研修の目的・対象－ 本研修の対象者 本研修の目的
1. はじめに　－本研修の目的・対象－ 本研修は、簡単なブログ作成を行う「カスタマイズ基礎力」を身に着けるものである 本研修の対象者 ワードプレスで自分のブログを作りたい人 カスタマイズ基礎力を身に着けたい人 見た目レベルのカスタマイズ、簡単な機能追加を自分で実施できる 難易度の高いカスタマイズを勉強していくための素地を身に着ける 本研修の目的 サーバレンタル～ブログ構築、HTML/スタイルシート編集＆プラグイン使用までできるようになる 市販の本や情報サイトを見て理解できるようになり、大規模カスタマイズ実施のスタート地点に立つ

5 1. はじめに －注意点－ Wordpressが全てではない 本研修の内容が全てではない
1. はじめに　－注意点－ 「Wordpressを使うこと」「Wordpressにおいて本研修で学ぶこと」はあくまで一例であり、それをベースに自ら学び続けることが重要 本研修における注意点 Wordpressが全てではない 管理人がWordpressを使用する理由は「オープンソースでありアップデートが容易」「比較的カスタマイズ性が高い」「そもそも全てのブログ構築方法を極めるのは不可能」等の理由である ブログ構築においてWordpressが唯一絶対の方法ではないことをご了承頂きたい 本研修の内容が全てではない Wordpressにおけるプラグインやその他カスタマイズ方法は無数に存在するため、「全て把握し尽くす」というのは不可能 同じ機能や見た目を実施するのにおいても、複数の方法が存在するため、「あくまで一例」という視点で理解頂きたい 結局のところ、カスタマイズに慣れていくに従い、「これはできるのでは」「これは難しいのでは」という仮説を立てられるようになること肝要 何か実現したいことがあれば、随時質問して頂きながら進めていきたい

6 1. はじめに 2. Wordpressが動く仕組み 3.実際に作ってみよう 4. 最後に

7 2. Wordpressが動く仕組み －システム構成全体像－
Wordpressとは、PHP+ MySQL（データベース）で作られているブログエンジン 結局、やっていることは「HTMLを吐き出す」こと システム構成全体像 HTML サーバ Wordpress テーマ プラグインA プラグインB プラグインC ・ 見る HTMLを 吐き出す MySQL PHPという言語でできている

8 2. Wordpressが動く仕組み －HTML/CSSとは－
Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的な言語 ブラウザソフト（GoogleChromeやIE）を介して表示することを想定されたファイル スタイルシート（CSS）により、色やサイズなどのレイアウトを指定することが可能 【演習1】 ①sample.txtをHTMLファイル化しよう ②ブラウザから開いてみよう ③スタイルシートで見た目を変えてみよう

9 2. Wordpressが動く仕組み －テーマ/プラグインとは－
「プラグイン」とは、機能追加や変更するための「装備」のようなもの。基本的には幾つでも追加可能（FF7のマテリアと思っていただければ） 何れも、種類は無数にあり、全世界の開発者が開発してくれている テーマ例 プラグイン例 名称 概要 All In One SEO Pack SEO対策の強化 Contact Form 7 問い合わせフォームの 自動作成 Tweet, Like, Google +1 and Share 各種SNSの シェアボタン追加

10 1. はじめに 2. Wordpressが動く仕組み 3.実際に作ってみよう 4. 最後に

11 3. 実際に作ってみよう －サーバレンタル－ まずは、Wordpressが動く「サーバ」を用意する必要がある
3. 実際に作ってみよう　－サーバレンタル－ まずは、Wordpressが動く「サーバ」を用意する必要がある 今は、レンタルサーバも豊富であり、「Wordpressインストール機能」の付いているところであればどこでも大丈夫（個人的にはXServerがおすすめ） 併せて、Web上の住所にあたる「ドメイン」を取得する必要がある（インターネット、およびドメインの仕組みについては省略。必要なら口頭で説明） HTML サーバ 見る HTMLを 吐き出す Wordpress プラグインA プラグインB プラグインC テーマ 個別の ページ HTML HTML MySQL ここの準備 ※詳細は口頭で

12 3. 実際に作ってみよう －Wordpressインストール－
MySQL（データベース）は自動生成される。テーマ・プラグインはデフォルトが入っており、これを変更・追加・編集してゆく サーバ HTML HTMLを 吐き出す Wordpress 見る プラグインA プラグインB プラグインC テーマ 個別の ページ HTML HTML MySQL ここの準備 ※詳細は口頭で

13 3. 実際に作ってみよう －テーマの選択－ 次に、「テーマ（テンプレートのようなもの）」を選択
3. 実際に作ってみよう　－テーマの選択－ 次に、「テーマ（テンプレートのようなもの）」を選択 各々、見た目・機能に特徴があるため、ググりながら自分の理想に近いものを選ぶ 「見た目」「SEO対策」等、幾つかの条件から、「あとで自分がカスタマイズできなさそうなもの」を満たしたテーマを選ぶのが良い（おすすめ： サーバ HTML HTMLを 吐き出す Wordpress 見る 個別の ページ プラグインA HTML プラグインB プラグインC テーマ HTML MySQL ここの準備 ※詳細は口頭で

14 3. 実際に作ってみよう －カスタマイズ－ カスタマイズには大きく分けて以下の4種類ある
3. 実際に作ってみよう　－カスタマイズ－ カスタマイズには大きく分けて以下の4種類ある 後ろに行くに従って難易度は上がる。可能な限り手前の方法で実現するのがおすすめ Wordpress自体の 機能の使用 プラグインでのカスタマイズ HTML/スタイルシートを弄る PHPで プログラミング （今回範囲外）

15 3. 実際に作ってみよう －カスタマイズ－ 【演習2】 メニュー機能/ウィジェット機能の使用 プラグインの追加 開発ツールへの慣れ
3. 実際に作ってみよう　－カスタマイズ－ テーマを選んだあとは、見た目のカスタマイズを各々行っていく 個人的には、GoogleChromeの開発ツールが非常に便利なため、それを利用するのがおすすめ（特にツールの準備は必要なく、 GoogleChromeさえあれば使用可能） 【演習2】 やりたいこと ポイント ①メニュー/ウィジェット を使用してみる メニュー機能/ウィジェット機能の使用 ②SNSボタンを付けてみる プラグインの追加 ③特定の場所の 文字の大きさと色を変えてみる 開発ツールへの慣れ スタイルシートの修正への慣れ ④グリッド型に変えてみる （他に要望あればそっち優先） 複雑なレイアウト変更

16 1. はじめに 2. Wordpressが動く仕組み 3.実際に作ってみよう 4. 最後に

17 4. 最後に －より複雑なカスタマイズの紹介－ カスタマイズ例 その他、複雑なカスタマイズを紹介
4. 最後に　－より複雑なカスタマイズの紹介－ その他、複雑なカスタマイズを紹介 何かやりたいことがあれば、個別にご相談ください カスタマイズ例 ホバー機能（カーソルを当てると動く） PV数や人気記事の表示 プロフィールの設置

18 4. 最後に －カスタマイズの引き出しを増やすためには－
4. 最後に　－カスタマイズの引き出しを増やすためには－ カスタマイズの引き出しを増やすためには、とにかく「これが作りたい」という欲望を持つことが大事 同じような欲望は、全世界の誰かしらが持っているので、ググればたいてい解決策は出てきます（IT系の現場ではよくある話） やりたいことの実現方法模索手順（例） こんな機能を つけたいな Wordpressの機能に無いかな？ テーマの機能に無いかな？ そういうプラグインは 無いかな？ 同じようなことを頑張って実装した人はいないかな？ （ソースのコピペ） 独自に 実装！！