ビジネスサイトの構築に必要なWordPressの知識をハンズオン形式で学ぶセミナーです。

1. WordPressの教科書2×Windows Azure セミナー
プライム・ストラテジー株式会社
藤祐太郎
ビジネスサイト構築に必要な 実践的なカスタマイズを身につけよう
1

2. セミナー内容
1.初期設定
プラグインの有効化・設定、記事データ移行、メニュー、ウィジェット
2.WordPress実践カスタマイズ
SEO設定、スライドショー管理、エディタのカスタマイズ
2

3. サイト名.azurewebsites.net/wp-admin
ブラウザのアドレスバーに入力します。
管理画面のログイン方法
3

4. インストール時に設定した
ユーザ名とパスワードを入力します。
4

5. ログインをクリックします。
5

6. 管理画面が表示されます。
6

7. ブログ名をクリックするとWebサイトを表示する ことができます。
7

8. ブログ名をクリックすると管理画面に戻ることが できます。
8

9. サンプルサイトの構築
1.初期設定
プラグインの有効化・設定、記事データ移行、メニュー、ウィジェット
2.WordPressをカスタマイズしよう
SEO設定、スライドショー管理、エディタのカスタマイズ
9

10. プラグインの有効化
10

11. 11

12. 有効化をクリック
12

13. 有効化されました
13

14. WordPressの各種設定変更
14

15. キャッチフレーズの変更
15

16. 16

17. キャッチフレーズを変更します。
17

18. 変更を保存をクリックします。
18

19. パーマリンクの設定
19

20. 20

21. パーマリンク設定をクリックします。
21

22. 数字ベースをクリックします。
22

23. 変更を保存をクリックします。
23

24. サンプルページの削除
24

25. ゴミ箱をクリックする
投稿をクリックします。
25

26. カーソルを合わせ
ゴミ箱をクリックします。
26

27. カーソルを合わせ
ゴミ箱をクリックします。
固定ページをクリックします。
27

28. カーソルを合わせ
ゴミ箱をクリックします。
28

29. 記事データ移行
29

30. ツールをクリックします。
30

31. インポートをクリックします。
31

32. WordPressをクリックします。
32

33. ファイルを選択をクリックします。
33

34. resourceフォルダからxmlフォルダを
選択し、asia1.xmlを選択します。
34

35. ファイルをアップロードしてインポート をクリックします。
35

36. セレクトボックスから自分のユーザ名を選択します。
36

37. Download and import file attachmentsにチェックを いれます。
37

38. Submitをクリックします。
38

39. Have fun!が表示されたらインポート 成功です。
39

40. Have fun!が表示されたらインポート 成功です。
asia2.xml、asia3.xmlも同様の手順でアップロード します。
40

41. メニューの初期設定
41

42. 設定から表示設定をクリックします。
42

43. フロントページの表示を固定ページにします。
43

44. フロントページからトップページを選択します。
44

45. 変更を保存をクリックします。
45

46. 外観からメニューをクリックします。
46

47. グローバルナビを選択し、変更を保 存をクリックする。
位置の管理をクリックします。
47

48. 指定されたメニューをそれぞれ
図のように設定します。
48

49. 変更を保存をクリックします。
49

50. サイドバーにソーシャルウィジェットを表示する
50

51. 外観からウィジェットを選択します。
51

52. テキストをメインウィジェットエリアに
ドラッグアンドドロップします。
52

53. sidebar.txtの内容を
コピーします。
53

54. 保存をクリックします。
54

55. 初期設定は終わりです。 それではWebサイトを表示してみましょう
55

56. 56

57. 57

58. セミナー内容
1.初期設定
プラグインの有効化・設定、記事データ移行、メニュー、ウィジェット
2.WordPress実践カスタマイズ
SEO設定、スライドショー管理、エディタのカスタマイズ
58

59. WP-Site Managerを利用して各ページに メタディスクリプションを設定できるようにしましょう。
59

60. プラグインをクリックします。
60

61. WP SiteManager
を有効化します。
61

62. WP SiteManager
をクリックします。
62

63. SEO & SMO
をクリックします。
63

64. 共通キーワードと基本ディスクリプ
ションを上記のように入力します。
64

65. 変更を保存をクリックします。
65

66. サイト名をクリックしてサイトを表示させます。
66

67. トップページで右クリックからソースの表示を 選択します。
67

68. メタディスクリプションとメタキーワードが反映され
ていることを確認します。
68

69. 各ページごとにメタキーワードと メタディスクリプションを設定する
69

70. 固定ページ一覧から会社概要を クリックします。
70

71. メタキーワードとメタディスクリプションを入力します。
71

72. 更新をクリックし、保存します。
72

73. サイトを表示し、反映されているか確認します
73

74. 先ほどと同様に
トップページで右クリックからソースの表示を 選択します。
74

75. ブラウザの「ページのソースを表示」でトップページ のソースコードを開き、ディスクリプションが変更さ れていることを確認します。
75

76. ブラウザの「ページのソースを表示」で会社概要の ソースコードを開き、ディスクリプションが変更され ていることを確認します。
76

77. 会社概要ページだけでなく、事業紹介、沿革、
個人情報保護方針ページも適した文字列に変更し ます。
77

78. 社会貢献活動ページも適した文字列に変更します。
78

79. 同様に事業紹介と社会貢献活動が 表示されるようそれぞれ設定しましょう。
79

80. 管理画面上からスライドショーを 管理できるようにしよう
80

81. 静止画からアニメーションする
スライドショーへカスタマイズします。
81

82. Meteor Slidesを有効化します。
82

83. スライドをクリックし、設定を選択します。
83

84. 各項目を設定し、変更を保存を
クリックします。効果スタイルは好みの ものを選択して構いません。
84

85. 灰色で囲まれている箇所をテキストエ ディタにコピー、ペーストします。
85

86. タイトルを入力します
スライドリンクにaboutを入力します
スライドをクリックし、新規追加を
選択します。
86

87. タイトルを入力します
スライドリンクにaboutを入力します
87

88. アイキャッチ画像を設定をクリックします。
88

89. アイキャッチ画像を設定をクリックします。
ファイルをアップロードをクリックします。
89

90. ファイルを選択をクリックし、about.jpgを アップロードします。
90

91. アイキャッチ画像を設定をクリックします
91

92. 公開をクリックします。
92

93. 事業紹介ページを追加します。
93

94. 社会貢献活動ページを追加します。
94

95. Visual Studio Onlineを使って スライドショーを表示するためのタグを設定します
95

96. Microsoft Azureのポータルに戻ります。
96

97. 構成をクリックします。
97

98. 構成をクリックします。
VISUAL STUDIO ONLINEでの編集がオンに なっている事を確認します。
98

99. ダッシュボードをクリックし、
Visual Studio Onlineでの編集を選択します。
99

100. Visual Studio Onlineが起動しました。
100

101. 1.wp-content
2.themes
3.apt-pc
の順番でフォルダを展開します。
101

102. front-page.phpをクリックします。
102

103. 3行目を削除します。
103

104. エディタにコピーしたコードをペーストします。
104

105. サイト名をクリックし、Browse Web Site
を選択します。
105

106. スライドショーが表示されていることを
確認します。
106

107. ビジュアルエディタを使って htmlを書かないでテーブルを挿入しよう
107

108. デフォルトのエディタをカスタマイ ズしてより使いやすくします。
108

109. プラグインをクリックします。
109

110. TinyMCEAdvancedを有効化します。
110

111. 投稿一覧から「アジアこども写真展」を 開催します。を選択します。
111

112. 表示が変わっているのを確認します。
112

113. 最終行でエンターキーを2回押し、
リスト入力を終了します。
113

114. テーブルをクリックします。
114

115. テーブルを挿入から2×4になるようにテーブ ルを選択し、クリックします。
115

116. テーブルが挿入されました。
116

117. テーブルをクリックしマ ウスでテーブルの大きさ を調整します。
117

118. 各テーブルに必要な情報を入力します。
118

119. 各テーブルに必要な情報を入力します。
119

120. 必要のない項目を削除します。
120

121. 更新をクリックします。
121

122. 投稿を表示をクリックします。
122

123. 更新されていることを確認します。
123

124. 設定から
TinyMCEAdvancedを選択すると カスタマイズすることができます。
124

125. スタイルを赤枠の中にドラッグアンドドロップします。
125

126. Save Changes
をクリックします。
126

127. 固定ページから会社概要を開きます。
127

128. 設定したスタイルが表示されている事を確認します。
128

129. 見出しが自由に入力できるようになりました。
129

130. 各ページのカスタマイズの完了です。
130