Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web制作者のためのWordPress vol.2 ビジネスサイト構築に必要な実践的なカスタマイズを身につけよう

430 views

Published on

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

Published in: Technology
  • Be the first to comment

Web制作者のためのWordPress vol.2 ビジネスサイト構築に必要な実践的なカスタマイズを身につけよう

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

×