WordPressの基本的な項目について説明

1. 2016/5/13 Ver.1.0
Hirotaka Ichimura
1
のきほん

2.  CMSを使う理由
 WordPressとは
 導入方法
 管理画面の説明
 プラグイン
 テーマの作り方
2
アジェンダ

3. 00 今日の目的
3

4. 4
WordPressの
基本的な構築方法を学ぼう!!

5. 01 CMSを使う理由
5

6. 上下階層の
リンクは
共通項目は
全部変更
6
01 CMSを使う理由
WebサイトをHTMLで
1,000ページ作る
HTMLファイル
コピペでも大変

7. 7
01 CMSを使う理由
ヘッダーなどの
共通箇所
登録情報の管理
一般の人が
操作するには
データ消失
などのトラブル
詰まりそうな
ところを
挙げてみた

8. 8
01 CMSを使う理由
ヘッダーなどの共通箇所
ヘッダー
ナビゲーション
ジャンボトロン
サイドカラム
フッター
分離して
部品化
ファイルに
格納

9. 9
01 CMSを使う理由
登録情報の管理
番号 日付 題名 記事内容 カテゴリー
1 2016/05/01 おはよう ゆうて お知らせ
2 2016/05/02 こんにちは いみや 新着
3 2016/05/03 さようなら おうきむ うじとり
4 2016/05/04 こんばんは こうほ やまあ
5 2016/05/05 おやすみ りいゆ きらぺ
DBに格納
必要なもの
だけ取得

10. 10
01 CMSを使う理由
一般の人が操作するには
管理画面から
HTMLに
自動成形

11. 11
01 CMSを使う理由
データ消失などのトラブル
CMSの
バックアップ
機能で対応

12. 12
01 CMSを使う理由
共通箇所を
プログラム共有
情報はDBで管理
一般の人でも
管理しやすい
データ消失
に対応
効率よく
運営
できそう

13. 13
01 CMSを使う理由
Webサイト運営・保守を
考えるとメリットが多い
といって
費用が下がる
わけではない

14. 02 WordPressとは
14

15. 15
02 WordPressとは
WordPressはCMSのひとつ
CMS世界シェア
WordPress Joomula Drupal TYPO3 DotNetNuke その他
世界シェアの
68%を占有する
No.1のCMS
http://www.opensourcecms.com/general/cms-marketshare.php

16. 16
02 WordPressとは
現在CMSは1,000以上あります
Drupal
Jimdo
Joomla
Movable Type
Concrete5

17. 17
02 WordPressとは
WordPressを選択するメリット
ネット、書籍の
情報が多い
日本語情報が
充実
テーマ、
プラグインが豊富
レンタル
サーバー対応
カスタマイズ
しやすい
インストールが
簡単

18. 18
02 WordPressとは
WordPressのデメリット
最新情報は
英語
テーマの中身が
複雑化
PHPを習得する
必要あり
セキュリティ
対策が必須
プラグインの
更新終了

19. 19
02 WordPressとは
CMSの機能は
どれも似たようなものに
なってきていますが
よい機能はすぐパクられる

20. 20
02 WordPressとは
しばらくはWordPressの
天下が続くだろう
他CMSも
覚えてこその
エンジニア

21. 03 導入方法
21

22. 22
03 導入方法
 ローカルの開発環境を構築
 DBの作成
 WordPress本体の設置
 WordPressのインストール

23. 23
03 導入方法
ローカルの開発環境を構築
XAMPPをDLして
インストール
WordPressに必要な
・Webサーバー：Apache
・PHP
・DB：MariaDB（MySQL）
が簡単に導入可能

24. 24
03 導入方法
DBの作成
XAMPPの
コントロール
パネルから
phpMyAdminを
起動して作成
作成時の照合順序は
utf8_general_ciを使いましょう

25. 25
03 導入方法
WordPress本体の設置
WordPress最新版を
DLして解凍
XAMPP配下のディ
レクトリに設置
htdocsディレクトリに
任意のディレクトリを
作るといいです

26. 26
03 導入方法
WordPressのインストール
ApacheとMySQLを
起動して
ブラウザから
インストール
http://localhost/任意の
ディレクトリ/wp-admin

27. 04 管理画面の説明
27

28. 28
04 管理画面の説明
いろいろ項目あるけど
抜粋して説明
外観 プラグイン 設定

29. 29
04 管理画面の説明
外観
 テーマ
 メニュー
オリジナルテーマ作成時に確認
外部テーマをインストール可能
メニュー系を管理するための機能
デフォルトでは使えない

30. 30
04 管理画面の説明
プラグイン
安全なプラグインを
インストールできる
必要な拡張機能をインストール
停止や更新も可能

31. 31
04 管理画面の説明
設定
 表示設定
 パーマリンク設定
フロントページを管理画面から
修正するかどうか選択
URLの表示方法を選択

32. 05 プラグイン
32

33. 33
05 プラグイン
プラグインはCMSの機能を
拡張するための外部プログラム
プラグインは
入れすぎない
被る機能は
１つに絞る

34.  Akismet
 Jetpack by WordPress.com
 SiteGuard WP Plugin
 WP Multibyte Patch
絶対に
入れて
ください
34
05 プラグイン
必須プラグイン

35. 35
05 プラグイン
 Breadcrumb NavXT
 Duplicate Post
 Category Order and Taxonomy Terms Order
 FV Top Level Categories
 Limit Login Attempts
 TinyMCE Advanced
 WP SiteManager
推奨プラグイン
入れると
かなり
便利

36. 36
05 プラグイン
 BackWPup
 Broken Link Checker
 Google XML Sitemaps
 Head Cleaner
 Redirection
 Yoast SEO
 WP Social Bookmarking Light
SEO系・サイト全体の動作
サイト構築の
強い味方

37. 37
05 プラグイン
 AntiVirus
 Acunetix WP Security
 SI CAPTCHA Anti-Spam
 Theme Authenticity Checker
セキュリティ系
セキュリティ
対策は重要

38. 38
05 プラグイン
 Advanced Custom Fields
 Custom Post Type UI
カスタマイズ系
フル
スクラッチ
には定番

39. 39
05 プラグイン
 MW WP Form
 User Role Editor
 Simple Tags
 WP-PageNavi
 WP-Total Hacks
その他便利系
案件に
よっては
使えます

40. 06 テーマの作り方
40

41. テーマ最小限構成ファイルを設置
41
06 テーマの作り方
完成したコーディングファイルを用意
基本構成ファイルを構築
細かい部分をカスタマイズ

42. 作成したデータ一式を
インストールしたWordPressの
テーマディレクトリに移動
42
06 テーマの作り方
コーディングファイル
wp-content/themes/ディレクトリ

43.  index.php
 style.css
 画像など スライスした画像
コメントに情報を記述
43
06 テーマの作り方
テーマ最小限構成ファイル
index.htmlをリネーム

44. 44
06 テーマの作り方
テーマ最小限構成ファイル
 index.php
テンプレートファイル 表示したい
ページの
基本ファイル

45. 45
06 テーマの作り方
テーマ最小限構成ファイル
 wp_head()
 wp_footer()
 bloginfo()
 wp_title()
テンプレートタグ
WordPressで管理されている
情報などを表示する命令

46. 46
06 テーマの作り方
テーマ最小限構成ファイル
 body_class()
 home_url()
テンプレートタグ
WordPressで管理されている
情報などを表示する命令

47. 47
06 テーマの作り方
テーマ最小限構成ファイル
 get_stylesheet_uri()
 get_template_directory_uri()
WordPress関数
WordPressで
用意されている命令

48. 48
06 テーマの作り方
基本構成ファイル
index.php
の一部を
header.php
footer.php
sidebar.php
に分割

49. 49
06 テーマの作り方
基本構成ファイル
 header.php
 footer.php
 sidebar.php
テンプレートパーツ 共通項目を
分離して
共通化
プログラム
で呼び出す

50. 50
06 テーマの作り方
基本構成ファイル
 header.php
 footer.php
 sidebar.php
テンプレートパーツ
 get_header()
 get_footer()
 get_sidebar()
インクルードタグ

51. 51
06 テーマの作り方
 インクルードタグ
 テンプレートタグ
 条件分岐タグ
 WordPress関数
基本構成ファイル
WPで
用意されている
専用の命令の
種類

52. 52
06 テーマの作り方
基本構成ファイル
 is_front_page()
 is_single()
 is_page()
 is_category()
条件分岐タグ
該当するページかどうか
判定する

53. 53
06 テーマの作り方
基本構成ファイル
https://wpdocs.osdn.jp/テンプレート階層
各ファイルには
優先順位が
あります

54. if ( have_posts() ) : while ( have_posts() ) :
the_post();
endwhile; else :
endif;
54
06 テーマの作り方
基本構成ファイル
現在表示されているページから情報があれば表示する
情報がない場合の文字を表示する
ループ終了
ループ開始

55. 55
06 テーマの作り方
基本構成ファイル
 page.php
 single.php
 category.php
 search.php
 404.php
テンプレートファイル
固定ページ
投稿
カテゴリー
検索一覧
見つからないページ

56. 56
06 テーマの作り方
カスタマイズ
カスタムメニュー
グローバルナビゲーションをはじめとする
ナビゲーションを管理画面から
コントロールする機能

57. 57
06 テーマの作り方
 functions.php
関数専用ファイル デフォルトで使えない機能や
オリジナルプログラムを
格納するファイル
カスタマイズ

58. AP 参考サイト、書籍
58

59. 59
AP 参考サイト、書籍
一歩先にいくWordPressの
カスタマイズがわかる本
WordPress 仕事の現場で
サッと使える！
デザイン教科書

60. 60
AP 参考サイト、書籍
 WordPress Codex 日本語版
 WordPress.org フォーラム
 Webデザインレシピ
 Simple Colors
 TechAcademy
 ドットインストール

61. 61
AP 参考サイト、書籍
 Habakiri
 Lightning
 KUSANAGI

62. 62
以上!!