web制作者のためのwordpress vol.2...
TRANSCRIPT
WordPressの教科書2×Windows Azure セミナー
プライム・ストラテジー株式会社
藤祐太郎
ビジネスサイト構築に必要な実践的なカスタマイズを身につけよう
1
セミナー内容
1.初期設定プラグインの有効化・設定、記事データ移行、メニュー、ウィジェット
2.WordPress実践カスタマイズSEO設定、スライドショー管理、エディタのカスタマイズ
2
サイト名.azurewebsites.net/wp-admin
ブラウザのアドレスバーに入力します。
管理画面のログイン方法
3
インストール時に設定したユーザ名とパスワードを入力します。
4
ログインをクリックします。
5
管理画面が表示されます。
6
ブログ名をクリックするとWebサイトを表示することができます。
7
ブログ名をクリックすると管理画面に戻ることができます。
8
サンプルサイトの構築
1.初期設定プラグインの有効化・設定、記事データ移行、メニュー、ウィジェット
2.WordPressをカスタマイズしようSEO設定、スライドショー管理、エディタのカスタマイズ
9
プラグインの有効化
10
11
有効化をクリック
12
有効化されました
13
WordPressの各種設定変更
14
キャッチフレーズの変更
15
16
キャッチフレーズを変更します。
17
変更を保存をクリックします。
18
パーマリンクの設定
19
20
パーマリンク設定をクリックします。
21
数字ベースをクリックします。
22
変更を保存をクリックします。
23
サンプルページの削除
24
ゴミ箱をクリックする
投稿をクリックします。
25
カーソルを合わせゴミ箱をクリックします。
26
カーソルを合わせゴミ箱をクリックします。
固定ページをクリックします。
27
カーソルを合わせゴミ箱をクリックします。
28
記事データ移行
29
ツールをクリックします。
30
インポートをクリックします。
31
WordPressをクリックします。
32
ファイルを選択をクリックします。
33
resourceフォルダからxmlフォルダを選択し、asia1.xmlを選択します。
34
ファイルをアップロードしてインポートをクリックします。
35
セレクトボックスから自分のユーザ名を選択します。
36
Download and import file attachmentsにチェックをいれます。
37
Submitをクリックします。
38
Have fun!が表示されたらインポート成功です。
39
Have fun!が表示されたらインポート成功です。asia2.xml、asia3.xmlも同様の手順でアップロードします。
40
メニューの初期設定
41
設定から表示設定をクリックします。
42
フロントページの表示を固定ページにします。
43
フロントページからトップページを選択します。
44
変更を保存をクリックします。
45
外観からメニューをクリックします。
46
グローバルナビを選択し、変更を保存をクリックする。
位置の管理をクリックします。
47
指定されたメニューをそれぞれ図のように設定します。
48
変更を保存をクリックします。
49
サイドバーにソーシャルウィジェットを表示する
50
外観からウィジェットを選択します。
51
テキストをメインウィジェットエリアにドラッグアンドドロップします。
52
sidebar.txtの内容をコピーします。
53
保存をクリックします。
54
初期設定は終わりです。それではWebサイトを表示してみましょう
55
56
57
セミナー内容
1.初期設定プラグインの有効化・設定、記事データ移行、メニュー、ウィジェット
2.WordPress実践カスタマイズSEO設定、スライドショー管理、エディタのカスタマイズ
58
WP-Site Managerを利用して各ページにメタディスクリプションを設定できるようにしましょう。
59
プラグインをクリックします。
60
WP SiteManagerを有効化します。
61
WP SiteManagerをクリックします。
62
SEO & SMOをクリックします。
63
共通キーワードと基本ディスクリプションを上記のように入力します。
64
変更を保存をクリックします。
65
サイト名をクリックしてサイトを表示させます。
66
トップページで右クリックからソースの表示を選択します。
67
メタディスクリプションとメタキーワードが反映されていることを確認します。
68
各ページごとにメタキーワードとメタディスクリプションを設定する
69
固定ページ一覧から会社概要をクリックします。
70
メタキーワードとメタディスクリプションを入力します。
71
更新をクリックし、保存します。
72
サイトを表示し、反映されているか確認します
73
先ほどと同様に
トップページで右クリックからソースの表示を選択します。
74
ブラウザの「ページのソースを表示」でトップページのソースコードを開き、ディスクリプションが変更されていることを確認します。
75
ブラウザの「ページのソースを表示」で会社概要のソースコードを開き、ディスクリプションが変更されていることを確認します。
76
会社概要ページだけでなく、事業紹介、沿革、
個人情報保護方針ページも適した文字列に変更します。
77
社会貢献活動ページも適した文字列に変更します。
78
同様に事業紹介と社会貢献活動が表示されるようそれぞれ設定しましょう。
79
管理画面上からスライドショーを管理できるようにしよう
80
静止画からアニメーションするスライドショーへカスタマイズします。
81
Meteor Slidesを有効化します。
82
スライドをクリックし、設定を選択します。
83
各項目を設定し、変更を保存を
クリックします。効果スタイルは好みのものを選択して構いません。
84
灰色で囲まれている箇所をテキストエディタにコピー、ペーストします。
85
タイトルを入力します
スライドリンクにaboutを入力します
スライドをクリックし、新規追加を選択します。
86
タイトルを入力します
スライドリンクにaboutを入力します
87
アイキャッチ画像を設定をクリックします。
88
アイキャッチ画像を設定をクリックします。
ファイルをアップロードをクリックします。
89
ファイルを選択をクリックし、about.jpgをアップロードします。
90
アイキャッチ画像を設定をクリックします
91
公開をクリックします。
92
事業紹介ページを追加します。
93
社会貢献活動ページを追加します。
94
Visual Studio Onlineを使ってスライドショーを表示するためのタグを設定します
95
Microsoft Azureのポータルに戻ります。
96
構成をクリックします。
97
構成をクリックします。
VISUAL STUDIO ONLINEでの編集がオンになっている事を確認します。
98
ダッシュボードをクリックし、Visual Studio Onlineでの編集を選択します。
99
Visual Studio Onlineが起動しました。
100
1.wp-content2.themes3.apt-pcの順番でフォルダを展開します。
101
front-page.phpをクリックします。
102
3行目を削除します。
103
エディタにコピーしたコードをペーストします。
104
サイト名をクリックし、Browse Web Siteを選択します。
105
スライドショーが表示されていることを確認します。
106
ビジュアルエディタを使ってhtmlを書かないでテーブルを挿入しよう
107
デフォルトのエディタをカスタマイズしてより使いやすくします。
108
プラグインをクリックします。
109
TinyMCE Advancedを有効化します。110
投稿一覧から「アジアこども写真展」を開催します。を選択します。
111
表示が変わっているのを確認します。
112
最終行でエンターキーを2回押し、リスト入力を終了します。
113
テーブルをクリックします。
114
テーブルを挿入から2×4になるようにテーブルを選択し、クリックします。
115
テーブルが挿入されました。
116
テーブルをクリックしマウスでテーブルの大きさを調整します。
117
各テーブルに必要な情報を入力します。118
各テーブルに必要な情報を入力します。119
必要のない項目を削除します。
120
更新をクリックします。
121
投稿を表示をクリックします。
122
更新されていることを確認します。
123
設定からTinyMCE Advancedを選択するとカスタマイズすることができます。
124
スタイルを赤枠の中にドラッグアンドドロップします。
125
Save Changesをクリックします。
126
固定ページから会社概要を開きます。
127
設定したスタイルが表示されている事を確認します。
128
見出しが自由に入力できるようになりました。
129
各ページのカスタマイズの完了です。
130