Successfully reported this slideshow.
Your SlideShare is downloading. ×

パーフェクトダッシュボード

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 346 Ad
Advertisement

More Related Content

Similar to パーフェクトダッシュボード (20)

Advertisement

パーフェクトダッシュボード

  1. 1. パーフェクトダッシュボード WordCamp Kobe 2013 2013/6/15 細谷 崇(@tkc49)
  2. 2. 2限目を担当させて頂きます。 細谷です。
  3. 3. 毎月WordPressの 個別相談会を開催しております。
  4. 4. 西宮・箕面・富田林
  5. 5. あとお酒を飲みながらWordPressネタを 話し合うWordBar堺!
  6. 6. 初心者の方を対象とした質問しやすい場つく りたいと思い開催をしています。
  7. 7. 今回の授業は、そんな初心者の質問の中から 出てきたもので、
  8. 8. そんな小難しいことしなくても・・・
  9. 9. 実はそれ管理画面で出来ますよ?
  10. 10. 全部で9つのチップスを用意しました
  11. 11. 基本的なことが多いのですが、
  12. 12. どれか1つくらい・・・ 参考になるものがあればと思います。
  13. 13. あとこの資料は後日ネットで公開をします。 Twitterで公開先のURLを連絡します。
  14. 14. では、宜しくお願いしますm(__)m
  15. 15. コーポレートサイト+Blogサイトの併用 其の 1
  16. 16. 架空のミュージシャンサイトを例に 説明をさせて頂きます
  17. 17. こんなことしてませんか?
  18. 18. カテゴリを使ってBlogページを作成
  19. 19. これでも実現はできます。
  20. 20. でも、更新担当者の方に・・・
  21. 21. 必ず「ブログ」カテゴリーに✔を入れてね!
  22. 22. でも、これには回避する方法があります。
  23. 23. カテゴリーの✔を忘れた場合、 必ず「ブログ」カテゴリーに✔が入ります。
  24. 24. これでひとまず安心・・・
  25. 25. と、思いきや・・・
  26. 26. 「ブログ」って表示されてカッコ悪い
  27. 27. テンプレートのコードを書き換えれば、 非表示にするのは可能
  28. 28. wp_list_categories( exclude=非表示にしたいカテゴリーのID );
  29. 29. ノンプログラマーはコードを書き換えるのは 気が引けますよね・・・
  30. 30. あとサイドバーはウィジェットの方が 機能追加や、並び替えが簡単に出きて便利
  31. 31. 特定のカテゴリーの非表示の設定が出来ない
  32. 32. 「ブログ」カテゴリを利用したBlogページ を作成するのは、大変です。
  33. 33. 実はそんなことしなくても、Blogページを 簡単に追加出来ます。
  34. 34. 「 フロントページの表示」の設定をしよう!
  35. 35. ①まず固定ページを作成
  36. 36. ②次に「 フロントページの表示」を設定
  37. 37. ③次にカスタムメニューに追加
  38. 38. ④最後にテンプレートの作成
  39. 39. サイトのトップページとBlogのトップページ とではレイアウトが異なる
  40. 40. ロゴ グローバルメニュー スライダー お知らせ バナー バナー バナー ロゴ グローバルメニュー 記事タイトル アイ キャッチ カテゴリー アーカイブ 月別 アーカイブ カレンダー 記事抜粋 アイ キャッチ アイ キャッチ アイ キャッチ アイ キャッチ 記事タイトル 記事抜粋 記事タイトル 記事抜粋 記事タイトル 記事抜粋 記事タイトル 記事抜粋
  41. 41. ロゴ グローバルメニュー スライダー お知らせ バナー バナー バナー ロゴ グローバルメニュー 記事タイトル アイ キャッチ カテゴリー アーカイブ 月別 アーカイブ カレンダー 記事抜粋 アイ キャッチ アイ キャッチ アイ キャッチ アイ キャッチ 記事タイトル 記事抜粋 記事タイトル 記事抜粋 記事タイトル 記事抜粋 記事タイトル 記事抜粋 トップページ ブログトップ
  42. 42. フロントページの表示が設定済で
  43. 43. かつ
  44. 44. <?php body_class(); ?>
  45. 45. ロゴ グローバルメニュー スライダー お知らせ バナー バナー バナー ロゴ グローバルメニュー 記事タイトル アイ キャッチ カテゴリー アーカイブ 月別 アーカイブ カレンダー 記事抜粋 アイ キャッチ アイ キャッチ アイ キャッチ アイ キャッチ 記事タイトル 記事抜粋 記事タイトル 記事抜粋 記事タイトル 記事抜粋 記事タイトル 記事抜粋 <body class="home page page- id-79 page-template-default logged-in admin-bar no-customize- support single-author"> <body class="blog logged-in admin- bar no-customize-support single-author"> トップページ ブログトップ
  46. 46. ロゴ グローバルメニュー スライダー お知らせ バナー バナー バナー ロゴ グローバルメニュー 記事タイトル アイ キャッチ カテゴリー アーカイブ 月別 アーカイブ カレンダー 記事抜粋 アイ キャッチ アイ キャッチ アイ キャッチ アイ キャッチ 記事タイトル 記事抜粋 記事タイトル 記事抜粋 記事タイトル 記事抜粋 記事タイトル 記事抜粋 <body class="home page page- id-79 page-template-default logged-in admin-bar no-customize- support single-author"> <body class="blog logged-in admin- bar no-customize-support single-author"> トップページ ブログトップ front-page.php home.php
  47. 47. ロゴ グローバルメニュー スライダー お知らせ バナー バナー バナー ロゴ グローバルメニュー 記事タイトル アイ キャッチ カテゴリー アーカイブ 月別 アーカイブ カレンダー 記事抜粋 アイ キャッチ アイ キャッチ アイ キャッチ アイ キャッチ 記事タイトル 記事抜粋 記事タイトル 記事抜粋 記事タイトル 記事抜粋 記事タイトル 記事抜粋 <body class="home page page- id-79 page-template-default logged-in admin-bar no-customize- support single-author"> <body class="blog logged-in admin- bar no-customize-support single-author"> トップページ ブログトップ front-page.php home.php page.phpを コピーして作ればOK index.phpを コピーして作ればOK
  48. 48. この様にすると「ブログ」カテゴリーみたい な余分なカテゴリー作成しなくて済みま す。
  49. 49. 余分なカテゴリーが表示されなく てスッキリ!
  50. 50. 余分なカテゴリーが表示されなく てスッキリ! 小難しいコードを書く必要なし (wp_list_categories)
  51. 51. 余分なカテゴリーが表示されなく てスッキリ! 小難しいコードを書く必要なし (wp_list_categories) レイアウトの変更もラクラク! (homeクラス、blogクラス、 front-page.php,home.php)
  52. 52. 固定ページ毎にレイアウトの変更 其の 2
  53. 53. 例えばこんな感じです。
  54. 54. あるページは横幅フルワイド
  55. 55. あるページはサイドバーあり
  56. 56. こんな時どうします???
  57. 57. こんなことしてませんか?
  58. 58. sidebar.phpに分岐処理
  59. 59. sidebar.phpのファイル
  60. 60. サイドバーにウィジェットを 表示
  61. 61. スラッグが「news」 「biography」「goods」の 場合、サイドバーを表示
  62. 62. でもこんなことしたら・・・
  63. 63. ユーザーが新しいページを作成する度 に・・・
  64. 64. 実はそんなことしなくても、固定ページ毎に レイアウトの変更は出来るんです!
  65. 65. ページテンプレートを作成しよう!
  66. 66. 固定ページにはテンプレートを選択できる 機能があります。
  67. 67. 初期設定では、「デフォルトテン プレート」が選択されている。
  68. 68. ここの設定でサイドバーなしの テンプレートを選べれるようにし ます!
  69. 69. ページテンプレートの作成は すごく簡単です
  70. 70. ①page.phpを複製し任意のファイル名にす る
  71. 71. ②no-sidebar.phpを ページテンプレート化する
  72. 72. 「Template Name: 任意の名前」 を書いてあげるだけで テンプレートページの完成 ※日本語もOK
  73. 73. サイドバーは必要ないので削除
  74. 74. サイドバーを表示しな いようにできる
  75. 75. メインコンテンツの横 幅がフルに広がってい ない
  76. 76. その時はbodyのクラスを確認する!
  77. 77. <body class="page page-id-83 page-template page-template-no- sidebar-php logged-in admin-bar no-customize-support single- author">
  78. 78. <body class="page page-id-83 page-template page-template- no-sidebar-php logged-in admin-bar no-customize-support single-author"> 選択したテンプレート名がクラスに追加される
  79. 79. body.page-template-no-sidebar-php #primary{ width: 100%; } CSSにこの様に書けばOK 注意:作成されたhtmlによって設定が異なる場合があります。
  80. 80. コメントの一括非表示 其の 3
  81. 81. こんな経験ありませんか?
  82. 82. 固定ページ全部作成した後にページを確認し たら・・・
  83. 83. 全ページにコメント欄 が・・・・
  84. 84. こんな時どうしてますか?
  85. 85. こんな事してないですか?
  86. 86. または
  87. 87. これだと1つ1つOFFにしていく必要があ る
  88. 88. そんな事しなくても一括で出来ますよ
  89. 89. 「一括操作」を使おう!
  90. 90. これだけでOK!
  91. 91. でも、「一括操作」が適用されるのは 表示されているページのみ
  92. 92. デフォルトでは20件
  93. 93. 21件以上のデータを一括で操作したい場合
  94. 94. メニューの画像化+新しいウィンドウで表示 其の 4
  95. 95. メニューの画像化というと・・・
  96. 96. グローバルメニューくらいは目立つ カッコイイボタンにしたい!
  97. 97. こんなことしてませんか?
  98. 98. メニューの直書き・・・
  99. 99. カスタムメニューを使わずに メニューのリストタグを直書き
  100. 100. 直書きしてしまうと・・・
  101. 101. メニューをページごとにカレント表示する のが小難しくなる・・・
  102. 102. カスタムメニューを使いましょう!
  103. 103. カスタムメニューの設定の仕方は 割愛させて頂きますm(__)m
  104. 104. カスタムメニュー設定済み
  105. 105. メニューの名前
  106. 106. リンクのtitle属性
  107. 107. これだけの設定だとテキストリンクのメニューに なってしまいます。
  108. 108. 画像化するには!
  109. 109. 同じ要領で全部にclassを設定する
  110. 110. <ul id="menu-global_navi" class="nav-menu"> <li id="menu-item-16" class="news menu-item menu-item-type- post_type menu-item-object-page menu-item-16"><a href="http:// localhost/bar/?page_id=2">NEWS</a></li> <li id="menu-item-94" class="discography menu-item menu-item- type-post_type menu-item-object-page menu-item-94"><a href="http://localhost/bar/?page_id=83">DISCOGRAPHY</a></li> <li id="menu-item-93" class="biography menu-item menu-item-type- post_type menu-item-object-page menu-item-93"><a href="http:// localhost/bar/?page_id=85">BIOGRAPHY</a></li>
  111. 111. <ul id="menu-global_navi" class="nav-menu"> <li id="menu-item-16" class="news menu-item menu-item-type- post_type menu-item-object-page menu-item-16"><a href="http:// localhost/bar/?page_id=2">NEWS</a></li> <li id="menu-item-94" class="discography menu-item menu-item- type-post_type menu-item-object-page menu-item-94"><a href="http://localhost/bar/?page_id=83">DISCOGRAPHY</a></li> <li id="menu-item-93" class="biography menu-item menu-item-type- post_type menu-item-object-page menu-item-93"><a href="http:// localhost/bar/?page_id=85">BIOGRAPHY</a></li>
  112. 112. <ul id="menu-global_navi" class="nav-menu"> <li id="menu-item-16" class="news menu-item menu-item-type- post_type menu-item-object-page menu-item-16"><a href="http:// localhost/bar/?page_id=2">NEWS</a></li> <li id="menu-item-94" class="discography menu-item menu- item-type-post_type menu-item-object-page menu-item-94"><a href="http://localhost/bar/?page_id=83">DISCOGRAPHY</a></li> <li id="menu-item-93" class="biography menu-item menu- item-type-post_type menu-item-object-page menu-item-93"><a href="http://localhost/bar/?page_id=85">BIOGRAPHY</a></li>
  113. 113. <ul id="menu-global_navi" class="nav-menu"> <li id="menu-item-16" class="news menu-item menu-item-type- post_type menu-item-object-page menu-item-16"><a href="http:// localhost/bar/?page_id=2">NEWS</a></li> <li id="menu-item-94" class="discography menu-item menu- item-type-post_type menu-item-object-page menu-item-94"><a href="http://localhost/bar/?page_id=83">DISCOGRAPHY</a></li> <li id="menu-item-93" class="biography menu-item menu- item-type-post_type menu-item-object-page menu-item-93"><a href="http://localhost/bar/?page_id=85">BIOGRAPHY</a></li> カスタムメニューで設定したクラス名がliのクラスに 設定されます。
  114. 114. liに付与されたclass名を元に background-imageで背景画像を 設定すればOK
  115. 115. メニューをページごとにカレント表示するに は
  116. 116. <ul id="menu-global_navi" class="nav-menu"><li id="menu-item-16" class="news menu-item menu-item-type-post_type menu-item- object-page menu-item-16"><a href="http://localhost/bar/? page_id=2">NEWS</a></li> <li id="menu-item-94" class="discography menu-item menu-item- type-post_type menu-item-object-page current-menu-item page_item page-item-83 current_page_item menu-item-94"><a href="http://localhost/bar/?page_id=83">DISCOGRAPHY</a></li> <li id="menu-item-93" class="biography menu-item menu-item-type- post_type menu-item-object-page menu-item-93"><a href="http:// localhost/bar/?page_id=85">BIOGRAPHY</a></li>
  117. 117. <ul id="menu-global_navi" class="nav-menu"><li id="menu-item-16" class="news menu-item menu-item-type-post_type menu-item- object-page menu-item-16"><a href="http://localhost/bar/? page_id=2">NEWS</a></li> <li id="menu-item-94" class="discography menu-item menu-item- type-post_type menu-item-object-page current-menu-item page_item page-item-83 current_page_item menu-item-94"><a href="http://localhost/bar/?page_id=83">DISCOGRAPHY</a></ li> <li id="menu-item-93" class="biography menu-item menu-item-type-
  118. 118. <ul id="menu-global_navi" class="nav-menu"><li id="menu-item-16" class="news menu-item menu-item-type-post_type menu-item- object-page menu-item-16"><a href="http://localhost/bar/? page_id=2">NEWS</a></li> <li id="menu-item-94" class="discography menu-item menu-item- type-post_type menu-item-object-page current-menu-item page_item page-item-83 current_page_item menu-item-94"><a href="http://localhost/bar/?page_id=83">DISCOGRAPHY</a></ li> <li id="menu-item-93" class="biography menu-item menu-item-type-
  119. 119. current-menu-itemを元に背景画像を 変更してあげればOK
  120. 120. メニューのリンクを新しいウィンドウで 表示するには
  121. 121. この設定だけでOKです!
  122. 122. 余談:先ほどの設定でメニューの画像化は出 来るのですが・・・
  123. 123. 実際プラグインを使った方が もっと簡単に出来ます・・・(-_-;)
  124. 124. サムネイル・中・大 画像サイズ変更 其の 5
  125. 125. 1ファイルアップするとサムネイル・中・大と 画像を生成してくれる。
  126. 126. フルサイズと合わせると4つのファイルサイズを選択し 記事に投稿することが出来ます。
  127. 127. サムネイル・中・大の画像サイズは 任意のサイズに変更が可能
  128. 128. メディア設定で画像サイズの変更する
  129. 129. メインコンテンツエリアの横幅に応じて 各画像サイズを決めると良いです
  130. 130. 注意: 画像をアップロードしたタイミングで サムネイル・中・大画像が生成されます。
  131. 131. なので、アップロード後にサイズ変更を しても反映されません。
  132. 132. アップロー後のファイルのリサイズを したい場合はこちらのプラグインを。
  133. 133. アップロード画像の編集 其の 6
  134. 134. 大きい画像を小さくしたり・・・
  135. 135. 反対向いちゃってたりするのを戻したり・・・
  136. 136. 左右反転させたり・・・
  137. 137. トリミングをしたり・・・
  138. 138. というような、画像編集が出来ます。
  139. 139. 少しデモします。
  140. 140. 記事・ページの分割 其の 7
  141. 141. 同じ記事でページを分割する
  142. 142. Macの場合 option+shift+p Windowsの場合 alt+shift+p
  143. 143. 注意:テンプレートに <?php wp_link_pages(); ?> が記載されている必要がる
  144. 144. ちなみに・・・
  145. 145. 日付けのフォーマットの変更 其の 8
  146. 146. 日付けの形式の変更を依頼がきたら・・・ 2013年6月15日→2013/06/15
  147. 147. 焦らなくていいです。 テンプレートファイルを触らなくても 管理画面で出来ます!
  148. 148. 曜日も簡単に出せます!
  149. 149. Y/m/d (l) って書きます。 ()←の中は小文字のエルです。
  150. 150. 2013/06/14(金曜日)
  151. 151. Y/m/d (D) って書きます。
  152. 152. 2013/06/14(金)
  153. 153. さくっと引用記事作成 其の 9
  154. 154. 皆さんは、記事の引用の手順って どうされてますか?
  155. 155. こんな感じ?
  156. 156. 良記事発見!
  157. 157. タイトルコピーして、 自分のブログにペースト
  158. 158. 文章をコピーして 自分のブログに引用文としてペースト
  159. 159. って、手間なことしてませんか?
  160. 160. 実はこの作業、1クリックで出来ます。
  161. 161. 「Press This」を使おう!
  162. 162. ドラッグ&ドロップ
  163. 163. あとは気に行った記事で「Press This」を クリックするだけ!
  164. 164. 引用したい文書は事前に 選択しておきましょう
  165. 165. これで引用完了!
  166. 166. 実はテキストだけじゃなく、画像・動画も 簡単に引用出来ます。
  167. 167. デモします。
  168. 168. WordPress   周年おめでと∼! 其の 10 10
  169. 169. ご清聴ありがとうございました tkc49

×