WordCamp Niigata 2019 発表資料

1. 1

2. 
本セッションは本当に初心者を対象として
振り切った内容で構成しています。
ここで言う「初心者」とはホームページ制作業務の初心者や
WordPress（ワードプレス）のカスタマイズなどの初心者ではなく、
一般ユーザーとしての初心者を指しています。
2

3. 石川栄和@kurudrive
株式会社ベクトル
代表/プログラマー
趣味:
スケボー/キャンプ/スプラトゥーン/将棋
自己紹介
3

4. 無料WordPressテーマLightning
外観>テーマ>新規追加画面でLightningで検索
4

5. https://lightning.nagoya/ja
ビジネスサイト向け汎用WordPressテーマ
5

6. 今日の内容
HTMLとブラウザ
レンタルサーバー
WordPressのしくみ
テーマ
プラグイン
WordPressでできること/できないこと
ウィジェットとブロックエディタ
6

7. ホームページが表示される仕組み
ホームページが表示されるしくみを考えてみよう。
7

8. みなさん、普段は
など、パソコンでファイルを作成して、見ていると思います。
Word
Excel
8

9. ホームページ用のファイルを作る
自分のパソコンでホームページ用のファイルを作って自分のパソコンに保存
する。
この時作るファイルはHTMLと呼ばれる形式で書きます。
|・ｗ・）.oO（HTML？）
9

10. HTML（HyperTextMarkupLanguage）とは
ホームページを表示するための言語
ハイパーテキスト
リンク指定した文字をクリックするとページ移動できる
10

11. マークアップ
文章の構造（後述）が記載されている
<h1>マークアップ</h1>
<p>文章の構造（後述）が記載されている</p>
表示する文字をタグと呼ばれる<>で括っています。
11

12. HTMLファイルを表示するには？
ブラウザと呼ばれるホームページを見るためのソフトを使います。
例）
Edge
InternetExplorer
Chrome
12

13. InternetExplorer
≠ インターネット
Edge
≠ インターネット
13

14. 実際のページのHTMLは...
14

15. ＿人人人人人人人人人人人人＿
＞ プロじゃないと無理 ＜
￣Y^Y^Y^Y^YY^Y^Y^Y^YY￣
15

16. HTMLをわかってなくても
WordPressを使えば
ホームページやブログが作れるようになった
※WordPress以外にもそういうツールは多数あります。
16

17. WordPressを使うための準備
17

18.  レンタルサーバーとは
インターネット上に置いてあるレンタルPC
ホームページ用のデータ置き場
お問い合わせフォーム送信処理など、プログラムを実行してくれる
ホームページを公開するにはサーバーは必要不可欠
html
プログラム
画像
データベース
18

19. レンタルサーバー
初プロが設定・調整したコンピューターを安価に借りられる
安定稼働
セキュリティー対策
高速化
ここにデータを置いて一般に公開できる



19

20. レンタルサーバー上に作ったホームページを表示する
レンタルサーバーには予めそのサーバーに紐付いた「初期ドメイン」が用
意・設定されているので...
|・ｗ・）.oO（初期ドメイン？）
20

21. ドメインとは？
URLの最初の部分
https://○○○○○.○○○/XXXX/XXXX/XXXX
例)
wordpress.com
vektor‑inc.co.jp
21

22. 初期ドメインを変えたい！
初期ドメイン
○○○.sakura.ne.jp
○○○.lolipop.jp
など
22

23. 好きなドメイン名を取得して
自分のサーバーに紐付ける
vektor.sakura.ne.jp

 レンタルサーバー
vektor‑inc.co.jp


23

24. こんな感じでホームページは見えています。
24

25. WordPressのしくみ
25

26. WordPressで表示されるしくみ
https://vektor­inc.co.jp/?p=12 データベース
テーマ
WordPress
WordCamp最高
WordCamp最高
WordCamp新潟に行っ
てきました。いろんな
事が勉強できてよかっ
たです。
[ 画像 ]
WordCamp新潟に行っ
てきました。いろんな
事が勉強できて
よかったです。
12番のデータ
ちょうだい
12
合体してHTMLをその場で作る 26

27. 文章などはデータベースに保存される
WordPressで作成するページの内容はデータベースと呼ばれる
保管場所に保存される
27

28.  データベース
WordPressにおいては、投稿の文字情報やホームページの基本情報、
各種設定情報を保存しておく場所。
ID post_title post_content
12 WordCamp最高 WordCamp新潟に行ってきました。いろんな事が勉強できてよかった
です。
13 リニューアルしまし
た 今後ともよろしくお願いいたします。
28

29. テーマ:ホームページの見た目のテンプレート
29

30. テーマのライセンス
100%GPLのライセンスのテーマを使おう
GPLとは
どんな目的に対しても使って良い自由
プログラムがどのように動作しているか研究し、改造する自由
コピーを再配布する自由
改変した版を他に配布する自由
30

31. 100%GPL
テーマファイルに含まれる全てのファイルにおいてGPL
＿人人人人人人人人人人＿
＞ 利用を制限しない ＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣
31

32. プラグイン
32

33. プラグインとは
テーマが見た目の部分だったのに対して、プラグインはホームページ運営者
が自由に追加する事ができる機能
例)
お問い合わせフォーム
アクセス解析機能
バックアップ機能
33

34. プラグインを組み合わせれば...
ネットショップ
会員制サイト
多言語サイト
予約システム
だがしかし...
34

35. プラグインは万能じゃない
WordPress公式サイトに登録されているプラグインは無料だけれど...
独自のカスタマイズは高度な知識（≒お金）が必要
プラグインにある機能を追加・改変したい場合、技術者があなたのためだけ
に手を動かすので安価にはできない事が多い。
35

36. 古いプラグインの利用は避ける
＿人人人人人人人人人人人人人人人人＿
＞ 更新がされてないと危ない ＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣
利用者が少ないプラグインも途中で更新が行われなくなる可能性が比較的高い。
36

37. テーマとプラグインの違い
テーマ
見た目を扱うテンプレート
一つのホームページで使えるのは基本的に一つだけ
プラグイン
機能を追加する
いくつでもインストール・有効化可能
37

38. テーマに機能を含んでしまうと、
テーマ（見た目）を変更したかったのに機能が消えてしまった
という事になるので、公式ディレクトリに登録されているテーマには機能を
含む事が許されていない。
38

39. WordPressで
できること/できないこと
39

40. できる事
ホームページの作成
文章の登録・公開
お問い合わせフォーム
各種検索機能
プラグインでいろんな機能の追加
40

41. できない（難しい）事
バナー画像やイラストの作成
動画の編集
検索結果に表示される文字などを完全にコントロールする
WordPress本体やテーマやプラグインが提供する機能が用意している仕
様以外のカスタマイズ
41

42. ウィジェットとブロックエディタ
42

43. ウィジェットとは
「新着記事一覧」や「バナー画像」など「ウィジェット」と呼ばれるパーツ
を決められた場所に配置する事ができる
ウィジェットの例
最新記事一覧
カテゴリー一覧
月別一覧
43

44. 外観>カスタマイズ>ウィジェット
44

45. 外観>ウィジェット
45

46. ウィジェットの留意事項
テーマによってウィジェットを配置出来る場所・数が違う
WordPressにもともとあるウィジェットと、テーマやプラグインによっ
て追加されたウィジェットがある
46

47. ブロックエディタ
WordPress5.0から実装された新しいエディタ
2018年末～
47

48. 48

49. クラシックエディタ（旧エディタ）
49

50. ブロックエディタによって...
様々なレイアウトが作りやすくなった
文字や画像だけじゃなくて、新着記事一覧など、ウィジェットにあったよ
うなモノも入れれるようになった。
50

51. 51

52. ウィジェットとブロックの違い
従来のウィジェットは決められた場所にしか配置できない
ブロックのウィジェットは記事中に表示できる
→WordPressの進化でウィジェットとブロックの垣根がなくなってきている
52

53. WordPressは常に進化しているので、
WordCampやWordPressMeetupなど
定期的に情報を収集しましょう。
53

54. 今日の内容
HTMLとブラウザ
レンタルサーバー
WordPressのしくみ
テーマ
プラグイン
WordPressでできること/できないこと
ウィジェットとブロックエディタ
54

55. ありがとうございました。
55

56. 質問タイム
56

57. 付録
（発表時間の都合上カットしたスライド）
57

58. 転送方法:FTP
ファイルを転送するにはFTPと呼ばれる転送規約があり、それを利用してサ
ーバーにアップロード（転送）できます。
58

59. FTPに使うソフト
FFFTPやWinSCP、FileZillaなどのソフトが有名で、いずれも無料で入手でき
ます。
[ FFFTP ][検索]
■さくらインターネットさんのFTP設定説明
https://help.sakura.ad.jp/hc/ja/articles/206207161‑FFFTPを利用する
■ロリポップさんのFTP設定説明
https://lolipop.jp/manual/hp/ftp‑set/
59

60. ※ FTPではなくFTPS、SFTP、SCPなど情報を暗号化するプロトコルが推奨さ
れていますが、最近のFTPソフトはそれらの通信に対応しています。
60

61. FTP等でサーバーに接続できるようになると
トラブルで管理画面に入れなくなった時に該当ファイルを直接削除できる
テーマやプラグイン、バックアップファイルなどを直接アップロード・ダ
ウンロードできる
普段使わない人もいざという時に役立ちます。
61

62. ドメインを紐付けるDNS
ドメイン名と実際のサーバーを紐付けてくれるのがDNS（ドメインネームサ
ーバー）
vektor.sakura.ne.jp

ns1.dns.ne.jp
ns2.dns.ne.jp

ns1.dns.ne.jp
ns2.dns.ne.jp
vektor.sakura.ne.jp
→123.456.789.123
DNS

123.456.789.123
レンサバ
62

63. WordPressのデータの種類
WordPressで作られたサイトには
基本的にHTMLファイルが存在しない
制御システム（WordPressのプログラム）
コンテンツ（タイトルや本文など）
コンテンツ（画像や動画など）
見た目（テーマ）
追加機能（プラグイン）
63

64. 動的ページ
アクセスがあった時にHTMLをプログラムがその場で生成して表示されるペ
ージ
静的ページ
最初の例のように予めindex.htmlなど、ファイルとして用意してあるページ
64

65. 表示されているページを修正したい場合
そのページのHTMLファイルが存在しているというわけではない。
※ 例外あり
65

66. 動的生成のデメリット
その場で作るから少し時間がかかる
一度生成したページを一定時間サーバーやブラウザに記憶させておいて高速
化を図ったりする。
66