WordPressサイト管理講座

Size: px

Start display at page:

Download "WordPressサイト管理講座"

たかとしとこたに
5 years ago
Views:

1 P.1 WordPress サイト管理講座西沢直木

2 P.2 この資料の内容サイト管理 (P.3~) URLの管理 (P.13~) 編集画面の使い方 (P.19~) SEOを意識した編集画面の使い方 (P.25~) 画像表組み箇条書きの追加方法 (P.29~) ページの作成オプション (P.42~) メニュー管理 (P.48~) テーマについて (P.55~) サイト内の広告戦略 (P.78~) PHPについて (P.82~)

3 サイト管理 P.3

4 P.4 サイトのバックアップバックアップ対象 --- ファイルとデータベースがあるファイルコンテンツ --- wp-contentフォルダ ( 画像テーマプラグイン ) システム --- wp-adminフォルダ wp-includesフォルダなどデータベース --- コンテンツ ( 投稿固定ページメニューなど ) 小さいバックアップ --- 投稿や固定ページのみをバックアップ (XMLファイルにエクスポート) ツールエクスポートメニュー --- コンテンツをバックアップ ( 手動 ) 大きいバックアップ --- すべてバックアップ ( 場合によってはシステムを含めて ) BackWPupプラグイン --- ファイル一式 +コンテンツをバックアップ ( 手動自動 ) 参考復元 --- データベース ( テーブル ) 作成古いパスの書き換えファイル一式の転送

寄稿者 --- 投稿がレビュー待ちになるユーザー購読者 --- ブログコメント用のユーザーなどに最適参考 http://www.nishi2002.com/5421.

5 P.5 ユーザー管理 ( 複数ユーザーでサイトを管理する場合 ) 複数ユーザーでサイトを管理する場合 --- ユーザー新規追加からユーザーを追加全員が管理者だと不都合が --- 追加するユーザーの権限を設定 --- (1) 管理者 --- フル権限 (1) 新規追加ユーザーの権限設定編集者 --- サイト設定ができないユーザー投稿者 --- 投稿できるだけのユーザー寄稿者 --- 投稿がレビュー待ちになるユーザー購読者 --- ブログコメント用のユーザーなどに最適参考 (2) 権限ごとに表示項目を設定権限ごとの設定に役立つプラグイン権限設定のカスタマイズ --- User Role Editorプラグイン権限ごとに表示内容を変える --- Adminimizeプラグイン --- (2)

6 P.6 メンテナンス中画面の表示一時的に非公開にしたい --- メンテナンス中画面を表示プラグイン WP Maintenance Mode プラグイン --- (1)(2) Maintenance プラグイン (1) WP Maintenance Mode プラグインの設定プラグインインストール済みプラグイン (2) メンテナンス中画面はいにするとメンテナンス中に

7 P.7 sitemap.xml の自動作成 ( サイト内 URL を検索エンジンに通知 ) sitemap.xml --- 検索エンジンにサイト内のURLを伝えるためのXMLファイル通常は手動で --- ホームページ作成 sitemap.xml 作成検索エンジンに更新通知 Google XML Sitemapsプラグイン sitemap.xmlを自動作成 ( 投稿したタイミングで ) 検索エンジンに自動で更新通知 --- 最新のsitemap.xmlを収集してもらう投稿だけすれば良く手動の sitemap.xml 作成は必要なし

8 P.8 投稿した時点で Twitter や Facebook に書き込みたい Jetpack プラグイン ( パブリサイズ共有 ) 投稿を Twitter Facebook にも自動で投稿 Jetpack プラグイン ( パブリサイズ共有 ) Jetpack プラグインを使うには wordpress.com と連携する必要がある ( 要ユーザー登録 ) Twitter と連携連携後に投稿すると自動で Twitter にも書き込まれる

9 P.9 アクセス解析をしたいアクセス統計 (Jetpack プラグイン ) Jetpackプラグイン ( 統計情報 ) 期間別のアクセス数検索キーワード移動先のページ ( 広告など ) アクセス解析系のstatpressプラグインなどとの違い Jetpack --- 外部にデータ記録パフォーマンス面で有利 statpress --- 内部にデータ記録 DB 速度などの問題も

10 P.10 パフォーマンスについて WordPressサイトを運用していると動作が遅くなることもパフォーマンス対策パフォーマンス対策速くするよりも遅くしている原因を取り除く速くする方法は各自の発展学習のテーマに( 定番はサーバーキャッシュ ) WordPressが遅くなる原因 --- WordPressの動作基板の技術が原因になる WordPressの動作基盤 --- Webサーバー PHPスクリプトデータベースそれぞれの処理に時間がかかると動作が遅く感じる

11 P.11 WordPress が遅くなる原因 Webサーバー --- ユーザーからの要求に応じてブラウザにHTMLページを送信する共有サーバー再販可能サーバーなどは遅くなる原因に PHPスクリプト --- WordPress 本体やプラグインを作成するプログラミング言語 ( サーバーで実行 ) プラグイン (PHPスクリプト) の読み込みや実行速度がネックになる場合も Plugin Performance Profilerプラグイン --- ネックになっているプラグインをチェック参考データベース --- WordPressで使うデータを格納表示 ( データの読み書き ) 書き込みを伴う処理がパフォーマンス低下の原因になる場合も ( ロックがかかるため ) アクセス解析系のプラグイン --- WordPressデータベースにログを保存注意が必要

12 P.12 レンタルサーバーで WordPress サイトを運用するときの注意再販可能サーバー --- 動作が遅く感じる? PHP 設定で動作が制限されている場合もあるファイルアップロードサイズ (2Mなど) --- 画像アップロードがうまくいかない PHPスクリプト最大実行時間 (30 秒など ) --- コンテンツインポートがうまくいかない php.iniの設定変更が必要になる場合もメニューからPHPの設定を変更 --- php.ini 設定 PHP 設定の編集などからデータベースパスワードの変更が簡単 --- 安易に変更してはいけないデータベースパスワード --- WordPressの設定ファイル (wp-config.php) と連動しているメニューから変更するとWordPressが動作しなくなる ( データベース接続確立エラー )

P.13 URL を変更した場合の対策サイトのアドレスを変更した ( 例 :http://hp555.net/ をhttp://example.com/ に ).htaccessで301リダイレクト --- ページの (SEO) 評価も引き継がれる (Redirect permanent / http://example.

13 P.13 URL を変更した場合の対策サイトのアドレスを変更した ( 例 : をに ).htaccessで301リダイレクト --- ページの (SEO) 評価も引き継がれる (Redirect permanent / 個別ページのURLが変わった場合 --- ( 例 :yoyaku.htmlをbooking.htmlに変更した) Redirectionプラグイン --- ページAへのアクセスをページBに転送 --- (1) 参考 (1) ページAをページBに転送

14 P.14 固定ページの URL に.html を付加したい会社概要のURLを /company ではなく /company.html にしたいパーマリンク設定を /%post_id%.html にしてもうまくいかない投稿のパーマリンクのみ固定ページの編集画面でパーマリンクに company.html と入力してもうまくいかない.html on PAGESプラグインインストールすると固定ページのURLに.html が付加される( 例 :company.html)

P.15 ページの URL が日本語になってしまうときの対策会社概要ページのアドレスが http://example.

15 P.15 ページの URL が日本語になってしまうときの対策会社概要ページのアドレスが会社概要になっていないか --- (1) ページのスラッグ ( パーマリンク ) にアルファベットのアドレス ( 例 :company) を入力 --- (2) (1) アドレスが日本語になっている (2) アルファベットでスラッグを入力 ( 編集またはクイック編集メニュー ) (3) ページのアドレスが company に

P.16 スラッグの重複によるプラグインの誤作動スラッグ --- パーマリンクを構成するページのニックネーム ( 例 :http://example.

company-3 のように番号が付くゴミ箱に捨てたページとも重複できない --- 固定のスラッグを使うプラグインが動かない原因にゴミ箱に予約フォームがある

16 P.16 スラッグの重複によるプラグインの誤作動スラッグ --- パーマリンクを構成するページのニックネーム ( 例 : 同じスラッグのページは作成できない --- company は1ページだけ同じスラッグを付けると自動で company-2 company-3 のように番号が付くゴミ箱に捨てたページとも重複できない --- 固定のスラッグを使うプラグインが動かない原因にゴミ箱に予約フォームがある ( スラッグ :booking-form) 新たに作成した予約フォームのスラッグは booking-form-2 になってしまう予約システムが機能しない ( スラッグが固定のため )

17 P.17 ゴミ箱の動作投稿や固定ページの一覧表示から使えるメニュー --- 編集クイック編集ゴミ箱表示ゴミ箱に捨てた投稿や固定ページは復元できる ( 完全に削除もできる ) ゴミ箱 ( 削除 ) は30 日で完全に削除される日数は (wp-config.phpに define( EMPTY_TRASH_DAYS, 30); のように記述して設定可能) ゴミ箱に残った固定ページはプラグインが動かないの原因になるので注意

SiteManager --- パンくずリストキャッシュサイトマップなどをサイトに組み込み可能 (1) SitePush

18 P.18 その他サイト管理に役立つプラグイン SitePush --- 開発サーバーからワンクリックで本番サーバーを更新 --- (1) Simple Login Lockdown --- パスワード入力の試行回数を制限 ( 不正アクセスの防御 ) --- (2) WP SiteManager --- パンくずリストキャッシュサイトマップなどをサイトに組み込み可能 (1) SitePush プラグインの設定開発サーバーと本番サーバーのコンテンツを同期 (2) Simple Login Lockdown パスワードを 5 回間違えると 60 分試行できない

19 P.19 編集画面の使い方ビジュアルエディタ ( ビジュアル ) --- レイアウトを確認しながら本文を入力できるエディタテキストエディタ ( テキスト ) --- HTML タグを直接入力できるエディタ編集画面でビジュアルエディタを使用中の状態

20 P.20 投稿に追加できるものの例 ( 投稿 - 新規追加メニューから ) 文字列 ( テキスト ) --- ビジュアルまたは HTML 画像本文に挿入 --- 左寄せなど可アイキャッチ画像アップロード済みの画像 --- メディアライブラリから選択動画音声 --- アップロードして埋め込みプレイヤーで再生可能リンク任意のページサイト内のページ HTML タグ --- 入力またはメニューから選択 more タグ --- 続きを読むの区切りショートコード --- [shortcode] 形式でメールフォームなどが追加される簡単引用 --- 設定 - 投稿設定メニューの Press This カテゴリ --- カテゴリメニューで編集投稿時に選択

21 P.21 ビジュアルエディタのツールバーボタンクリックで文字の装飾などを行う --- 簡易表示すべて表示の切り替えメニューボタンを増やしたい --- TinyMCE Advanced プラグイン --- (1) ツールバー ( 簡易表示 ) (1) フォントサイズメニューの追加後ツールバー ( すべて表示 ) すべて表示

22 P.22 編集画面のエディタにボタンを追加するには? 編集画面のエディタにボタンを追加したい --- AddQuicktagプラグイン独自タグの追加 --- オリジナルスタイルのためのボタン ( 例 :<div class="waku">) よく使うタグ --- h2タグなどよく使うタグをボタン化する参考テキストエディタに h2 タグを追加

23 P.23 ビジュアルエディタのツールバーのボタン画像を追加太字斜体打ち消し線箇条書き番号付きリスト引用を示す ( 枠線など ) 文章を左右中央に選択した文字にリンクを追加削除ここから先が続きを読むに (moreタグ) 入力枠が全画面表示に ( 執筆集中 ) ツールバーを全て表示簡易表示文章を段落見出しなどに設定下線文字の均等割付 (IEのみ) 文字の色ペースト形式 ( テキストのみスタイル保持 ) スタイル解除特殊文字の追加インデントインデント解除編集の取り消しやり直し

24 P.24 ボタンの使用結果の例引用箇条書き番号付きリスト more タグ more タグの前まで表示される

その検索キーワードを組み合わせて投稿や固定ページのタイトルに含めるその検索キーワードを本文にも散らす

25 P.25 SEO を意識した編集画面の使い方ページのタイトルなどに検索キーワードを含める現実的な SEO の基本戦略投稿固定ページで検索されたい検索キーワードを 2 つか 3 つ決めるその検索キーワードを組み合わせて投稿や固定ページのタイトルに含めるその検索キーワードを本文にも散らす効果的な検索キーワードは google で探す WordPress 不動産物件検索システムを組み合わせてタイトルを入力した投稿うまくいけば狙ったキーワードで上位表示される

26 P.26 リンクは文字が重要! こちらをクリックでは SEO 効果半減リンクのSEO 価値 --- リンク先にポイントを渡す効果 Excel 講座というリンク --- リンク先が Excel 講座に関連するページだと認識されるここをクリックというリンク --- リンク先がここをクリックに関するページだと認識される内部リンク ( 自サイトのページ価値を上げる ) の場合はリンク文字にキーワードを含めるリンク文字はSEO 的な価値があるので注意! ただし一字一句同じ文字のリンクが大量にあると不自然なリンク (= 過剰な SEO) だと見なされる ( ペナルティを受ける ) 場合があるので注意しましょう

27 P.27 見出しは文字の大きさを表現する要素ではなくそのページの重要なキーワードを示す SEO 要素ビジュアルエディタ --- 見出し1 見出し2 見出し3 ボタンで文字の大きさを変更できるが見出し1 見出し2 見出し3 は文字の大きさを設定する項目ではない検索エンジンでは見出し1 見出し2 見出し3 はページの中で重要な要素だと認識される SEOの戦略として見出し1 見出し2 見出し3 には検索キーワードを含める長い文章は見出し文章見出し文章で構造的に仕上げる通常はページのタイトルが見出し1なので本文の見出しは見出し2から始める見出し1 見出し2 見出し3 の順に使う ( 大見出し中見出し小見出しの役割 )

28 P.28 設定した見出しの見え方 ( ブラウザ表示と HTML ソース ) 固定ページの編集画面自動で見出し 1(h1 タグ ) になるブラウザの表示結果 HTML ソース <h1>access 入門講座 </h1> 略 <h2>excel からのステップアップで </h2> 略 <h2>access 入門講座の概要 </h2> 見出し 2(h2 タグ )

29 画像表組み箇条書きの追加方法 P.29

画像を中央にレイアウトします ( 文章と横並びにしない ) リンク先 --- 画像クリック時の動作カスタムURL --- 指定 URLに移動 ( 広告画像などに ) メディアファイル ---

30 P.30 本文に追加する画像の表示設定 ( 配置リンク先サイズ ) 投稿または固定ページの編集画面メディアを追加ボタン --- 追加する画像の表示設定配置 --- 画像と文章を横並びにするかどうかの設定画像の表示設定左または右 --- 画像を文章の左または右にレイアウトなし --- 画像と文章を横並びにせず上下にレイアウト中央 --- 画像を中央にレイアウトします ( 文章と横並びにしない ) リンク先 --- 画像クリック時の動作カスタムURL --- 指定 URLに移動 ( 広告画像などに ) メディアファイル --- この画像を ( 拡大 ) 表示添付ファイルの URL --- この画像のページに移動固定ページ本文の画像なし --- 画像にリンクを設定しないサイズ --- サムネイル中サイズ大サイズフルサイズサイズ別の画像がサーバーに作成されている

31 P.31 画像の表示設定の設定パターン広告画像を追加したい表示設定のリンク先をカスタムURL に設定して広告ページのURLを指定ブログ記事に画像を追加したい表示設定のリンク先をメディアファイルに設定クリックすると拡大表示されるポップアップ表示 --- FancyBox for WordPressプラグイン ( 次ページを参照 ) 表示設定のリンク先をなしに設定クリックできない ( 拡大表示が不要の画像に ) 画像と文章を左右にレイアウトしたい表示設定の配置を左または右に設定画像が文章の左または右に並ぶ

32 P.32 クリックした画像をポップアップ表示 FancyBox for WordPress プラグインクリックした画像がポップアップされて拡大表示複数画像はスライドのように表示クリックした画像がポップアップ

33 P.33 ケーススタディ広告サイトを別ウィンドウで開く広告画像広告画像を追加した場合 --- 広告サイトを別ウィンドウで開きたい (1) 画像を本文に追加 ( リンク先は広告サイトに設定 ) (2) 画像の編集ボタンをクリック (3) 上級者向け設定から新ウィンドウで開く設定にして更新 (4) クリックすると別ウィンドウで広告サイトが開くようになる

34 P.34 ケーススタディ画像と文章の横並びレイアウト表示設定の左または右で画像と文章を左右にレイアウトできるが画像文章がいつまでも右 ( または左 ) にレイアウトされてしまう --- (1) 画像を左文章を右の後に回り込みの解除が必要回り込みを解除する方法テキストエディタで <div style= clear:both; ></div> を入力 TinyMCE Clearプラグインを使う --- (2) (1) 次の画像も右に並んでしまうので (2) 回り込みを解除する回り込みの解除結果

P.35 メディアを追加から画像をアップロードすると画像の保存先は --- wp-content uploads 2014

フォルダの画像も削除される uploads フォルダに FTP でアップロードした画像をメディアライブラリに追加したい場合

35 P.35 メディアを追加から画像をアップロードすると画像の保存先は --- wp-content uploads フォルダ ( は年月を示す ) サイズ別の画像が何枚か作成される --- サムネイル中大フルサイズ + テーマ固有サイズテーマによって枚数が増える場合も --- functions.php に add_image_size 関数で指定されているメディアライブラリから削除すると --- フォルダの画像も削除される uploads フォルダに FTP でアップロードした画像をメディアライブラリに追加したい場合 Wordpress Flash Uploader プラグイン画像をアップロードするとサイズ別の画像が作成される (uploads フォルダ ) メディアライブラリに追加される ( 編集画面から選択可能に )

36 P.36 アイキャッチ画像の一括設定アイキャッチ画像 --- 投稿や固定ページの見出し画像シンプルテーマでは使わない --- 投稿にアイキャッチ画像がない場合もアイキャッチ画像を登録せずに記事を作成した場合 --- 後で1つずつ登録するのが面倒 Auto Post Thumbnailプラグイン --- 本文画像からアイキャッチ画像を一括登録アイキャッチ画像の例アイキャッチ画像が未登録 Auto Post Thumbnail プラグインで本文画像から一括設定できる

37 P.37 ヘッダー画像の変更方法 ( 外観 - ヘッダーメニューからできない場合 ) ヘッダー画像をサポートしていないテーマもある --- 外観 - ヘッダーメニューが使えない外観 - ヘッダーメニューでヘッダー画像を入れ替えられない画像パスを調べてFTP 経由で入れ替える画像は一般的にテーマフォルダのimageフォルダなどにあるヘッダー画像のパスを調べる入れ替える画像を特定するこのテーマはヘッダー画像をサポートしていますサポートしていない場合はどうするかの紹介です

38 P.38 表組みの追加方法料金表などの追加に --- tableタグの表を追加する表組みを追加するプラグイン TablePressプラグイン --- メニューで作成した表のショートコードをペーストする TinyMCE Advancedプラグイン --- ビジュアルエディタで表を追加できるより簡単な方法 --- Wordで作成した表をビジュアルエディタにCtrl+Vキーでペースト Word で表を作成してコピービジュアルエディタにペースト表示結果 PowerPoint で作成した表を図として保存して画像として追加する方法もあります

39 P.39 表の幅が反映されないとき Word からペーストした表に幅 ( width= 232 など ) が入っていても反映されない場合もある --- (1) テーマの style.css で #content table { width: 100%; } などとサイズが指定されているため子テーマの style.css などで #content table { width:auto; height:auto; } として修正 --- (2) 幅の狭い表を入力しても (1) 画面いっぱいに広がってしまう場合が (2) CSS を指定し直せば良い

40 P.40 箇条書きの追加方法ビジュアルエディタの箇条書き番号付きリストボタン箇条書き項目を入力項目を選択箇条書きボタンをクリック表示結果

41 P.41 文章の改行 1 行を空けるか空けないか文章の改行行を入力した後に Enter キーを押すと行空く (p タグによる段落になる ) Shift+Enter キーを押すと行空かない (br タグによる改行になる ) 1 行目を入力 Enter キーを押すと行が空く HTML タグのイメージ (2 つの段落 ) <p> こんにちは </p> <p> 西沢です </p> Shift+Enter キーでは行が空かない HTMLタグのイメージ (1つの段落で改行) <p> こんにちは <br /> 西沢です </p>

42 ページの作成オプション P.42

43 P.43 投稿の公開パターン (1) 下書きプレビュー公開公開ボタンの周辺 ( 公開下書きプレビュー ) 公開しない場合やメモ書きは下書きとして保存をクリック公開前に確認する場合はプレビューをクリック完成したら公開をクリック公開後は更新

44 P.44 投稿の公開パターン (2) ( 公開済みから下書きレビュー待ちに ) 公開済み投稿の公開ステータスの編集公開ステータスの設定 ( 下書きまたはレビュー待ちに ) 下書きまたはレビュー待ちを選択して OK ボタンをクリック後下書きまたはレビュー待ちとして保存

45 P.45 投稿の公開パターン (3) 投稿のパスワード保護非公開公開状態の編集公開状態の設定 ( パスワード保護または非公開に ) パスワード保護の選択時はパスワードを入力 OK ボタンをクリックして公開または更新をクリック

46 P.46 投稿の公開パターン (4) 予定投稿 ( 期日指定 ) 公開日時の編集公開日時の設定公開開始日時を設定して OK ボタンをクリック後公開をクリック

リビジョンの増加 = データ数の増加になるのでリビジョン数の制限 --- WP Total Hacks

47 P.47 昔のページの保存内容に戻すリビジョン管理リビジョン --- 投稿や固定ページの古いバージョン --- (1) リビジョンを選択して昔のページに戻すことができる (1) 固定ページのリビジョンリビジョンの増加 = データ数の増加になるのでリビジョン数の制限 --- WP Total Hacks プラグインリビジョンの削除 --- Better Delete Revision プラグイン (2) (2) リビジョンの削除

48 メニュー管理 P.48

49 P.49 メニューの整理 ( 親子メニュー ) メインメニュー行に収めるのは限界がある親子関係の設定メニューの親子関係 ( 外観 - メニュー ) メニューの表示結果

50 P.50 メニューの整理 ( 親子ページ ) 親ページをクリック親子メニュー --- 親ページクリック時に子ページを一覧表示したいテーマ BizVektor の場合親ページのテンプレートを子ページインデックスに設定子ページの親で親ページを選択通常のテーマの場合子ページが一覧表示される Child Pages Shortcode プラグインをインストール親ページにショートコード [child_pages] を入力子ページの親で親ページを選択

51 P.51 メニューにリンクを追加する方法メインメニューなどに固定ページではなく任意のリンクを追加したい --- (1) (2) 外観 - メニューでリンクを追加外観 - メニューのリンクから追加 --- (2) 新たなウィンドウで開くリンク表示オプションでリンクターゲットをチェックしてリンク項目の新ウィンドウで開くをチェック --- (3) (3) リンク先を新たなウィンドウで開く場合 (1) メニューのイメージ固定ページのリンク外部サイトへのリンク

52 P.52 外観 - メニューでメニューを修正できない場合 ( 無料テーマなどで ) 画面に表示されるメニュー --- 通常は外観 - メニューで変更可能テーマの位置のチェックボックスがない場合もある --- 作成したメニューを表示できない外観 - テーマ編集メニューでheader.phpなどを直接編集する必要があるメインメニューが普通に見えてもテーマ編集でHTMLタグを修正するテーマの位置がないテーマもあるそのようなテーマでは

53 P.53 メニューをサイドバーに表示 (1) カテゴリーを一覧表示 ( 外観 - ウィジェット ) WordPress 基本機能のカテゴリーウィジェットで表示 jquery Categories List Widget プラグインで表示 ( クリックで開閉 ) 並べ替え後のカテゴリー Category Order プラグインによる並べ替えも可能

54 P.54 メニューをサイドバーに表示 (2) カスタムメニューを一覧表示 ( 外観 - ウィジェット ) 作成したカスタムメニュー WordPress 基本機能のカスタムメニューウィジェットで表示 jquery Vertical Accordion Menu プラグインで表示 ( 自動で開閉 )

55 テーマについて P.55

56 P.56 WordPress のテーマとは何かテーマ --- サイトのデザインなどを決めるテンプレートデフォルトのテーマ (Twenty Fourteen) テーマの役割レイアウトの定義 --- ヘッダーフッターデザインの定義 --- 色フォントサイズ機能の定義 --- 使用可能な機能 ( メニューなど ) テーマのインストールビジネスサイト用テーマ (BizVektor) 外観 - テーマメニューから

57 P.57 シンプルなテーマと実用的なテーマの違いテーマの違いデザインだけでなく機能も違うシンプルなテーマ (Twenty Twelve) 実用的なテーマ (BizVektor) どちらも HTML CSS PHP で作成されているので自力で全く同じ機能に直すこともできますが初期状態ではこれくらい違いますテーマオプションメニューなし有りヘッダー画像画像のみスライドショー対応メニューヘッダーのみヘッダーフッターに 3 箇所特殊ページなしサイトマップ親子ページリストを自動作成カスタム投稿なし Information を使用可能

58 P.58 カスタマイズの考え方の違いテーマオプションが使用可能ならば初心者でもカスタマイズしやすい構成の解析が簡単ならばシンプルなテーマ (Twenty Twelve) 実用的なテーマ (BizVektor) PHP スクリプトや CSS を修正しやすい基本デザインの変更テーマ編集から CSS を変更テーマオプションから設定可能テンプレート構成シンプル ( わかりやすい ) 複雑 ( わかりづらい )

59 P.59 テーマの構成一般的なテーマの構成ファイル --- シンプルなテーマの場合レイアウトを決めるテンプレート --- header.php footer.php sidebar.php デザインを決めるスタイルシート (style.css) 機能を決める functions.php テーマの格納場所テーマ構成ファイルの格納イメージ (wp-content themes twentytwelve) wp-content themes テーマ名フォルダ

P.60 テーマの構成ファイル (1) テンプレートファイル (1) 特定ページのテンプレート特定のページに使われるテンプレート page.php --- 固定ページ single.php --- 投稿たとえば固定ページ会社概要が表示されているときテンプレートファイル page.php の内容が表示されている archive.

60 P.60 テーマの構成ファイル (1) テンプレートファイル (1) 特定ページのテンプレート特定のページに使われるテンプレート page.php --- 固定ページ single.php --- 投稿たとえば固定ページ会社概要が表示されているときテンプレートファイル page.php の内容が表示されている archive.php --- アーカイブページ ( 年月別などの投稿一覧 ) category.php --- カテゴリーページ ( カテゴリーの投稿一覧 ) front-page.php --- トップページ ( トップページが固定ページの場合 ) URL:contact.html テンプレート :page.php home.php --- トップページ ( トップページが投稿の場合 ) index.php --- すべてのページのデフォルト ( 上記の各テンプレートがない場合に代用される ) テンプレートの優先順位 ( 後述 ) に注意

61 P.61 ページテンプレートのコード記述例 (1) 一覧表示ページ表示結果投稿の一覧表示 (index.php の例 ) <?php get_header();?> <?php if ( have_posts() ) :?> <?php while ( have_posts() ) : the_post();?> <a href="<?php the_permalink();?>"> <?php the_title();?></a> <div style=""> <?php the_post_thumbnail(array(100, 100));?> <?php the_excerpt();?> <hr /> </div> <?php endwhile;?> <?php else :?> <?php endif;?> <?php get_sidebar();?> <?php get_footer();?> 1 件の投稿の項目タイトルアイキャッチ画像抜粋使用している主な命令の例 get_header --- ヘッダーを表示 while~endwhile --- 投稿を一覧表示 the_title --- 投稿のタイトルを表示 the_post_thumbnail --- 投稿の見出し画像を表示 the_excerpt --- 投稿の抜粋を表示 get_sidebar --- サイドバーを表示 get_footer --- フッターを表示

62 P.62 ページテンプレートのコード記述例 (2) 個別ページ表示結果個別ページの表示 ( 投稿テンプレート single.php の例 ) <?php get_header();?> <?php if ( have_posts() ) :?> <?php while ( have_posts() ) : the_post();?> <a href="<?php the_permalink();?>"> <?php the_title();?></a> <?php the_content();?> <hr /> <?php endwhile;?> <?php else :?> <?php endif;?> <?php get_sidebar();?> <?php get_footer();?> 使用している主な命令の例 get_header --- ヘッダーを表示 the_permalink --- 投稿のURLを出力 the_title --- 投稿のタイトルを表示 the_ content --- 投稿の本文 ( 全文 ) を表示 get_sidebar --- サイドバーを表示 get_footer --- フッターを表示

63 P.63 テーマの構成ファイル (1) テンプレートファイル (2) ページの部品になるテンプレート各テンプレートの使用イメージ各ページの部品に使われるテンプレート header.php --- ヘッダー footer.php --- フッター sidebar.php --- サイドバー content.php --- コンテンツ ( ページのタイトルと本文 )

64 P.64 テンプレートファイルの優先順位テンプレートの優先順位 --- テンプレートのファイル名によって優先表示される例 :page-company.phpはスラッグがcompanyのページではpage.phpより優先される固定ページテンプレートの優先順位 :page-スラッグ.php > page.php > index.php テンプレートの優先順位の用途 --- 特定の固定ページや投稿で独自処理をしたいときに例 : 会社概要 ( スラッグcompany) では独自のデザインにしたい (page-company.php) 例 : 問い合わせにメールフォームのPHPスクリプトを作成したい(page-contact.php) 参考 wpdocs テンプレート階層でgoogle 検索

65 P.65 テーマの構成ファイル (2) スタイルシート画面部品のデザインを定義するファイル --- style.css(cssが記述されている ) style.cssはテーマに必須のファイル ( テーマ情報の定義のため ) 記述内容テーマ情報 --- テーマ名などを指定 ( 例 :Theme Name: Twenty Twelve) スタイル --- フォントサイズ (font-size) 色(color) 余白(margin) などデバイス対応 --- メディアクエリ (@media (min-width: 600px) など )

66 P.66 テーマの構成ファイル (3) functions.php 用途 (1) テーマの基本機能の定義 functions.phpの役割 --- テーマの機能の定義カスタムヘッダー画像のサポート --- 外観 - ヘッダーメニューが使用可能に add_theme_support( 'custom-header', ); カスタム背景のサポート --- 外観 - 背景メニューが使用可能に add_theme_support( 'custom-background', ); アイキャッチ画像のサポート --- 投稿や固定ページにアイキャッチ画像を追加可能に add_theme_support( 'post-thumbnails' ); カスタムメニューの設定 --- 外観 - メニューメニューでテーマの位置を使用可能に register_nav_menu( 'primary', ); サイドバーのサポート --- 外観 - ウィジェットメニューでサイドバーを使用可能に register_sidebar( 'Main Sidebar );

67 P.67 テーマの構成ファイル (3) functions.php 用途 (2) オリジナル機能の追加オリジナル機能の例カスタム投稿タイプ --- 第 2の投稿 ( 例 :BizVektorの Information など) register_post_type( 'info', ); ショートコード --- 投稿や固定ページに定型文などを追加可能に add_shortcode('hello', 'func_hello'); フック --- WordPressの基本動作を変更する仕組み add_filter( 'wp_title', 'twentytwelve_wp_title');

68 P.68 テーマカスタマイズの考え方テーマファイルの変更方法親テーマを直接修正する --- テーマアップデート時に修正内容が消える子テーマを修正する --- 親テーマがアップデートされても修正内容は消えない修正ファイルの特定テーマの基本構成を参考に --- 固定ページはpage.php 投稿はsingle.phpなど実用的テーマの複雑な構成に注意 --- style.cssが空っぽ?

P.69 子テーマとは子テーマ --- 親テーマを継承したテーマ必須ファイルは style.css --- 親テーマを指定子テーマの構成例 (wp-content themes child フォルダ ) 子テーマの style.css の記述例 /* Theme Name: child Theme URI: http: //example.

69 P.69 子テーマとは子テーマ --- 親テーマを継承したテーマ必須ファイルは style.css --- 親テーマを指定子テーマの構成例 (wp-content themes child フォルダ ) 子テーマの style.css の記述例 /* Theme Name: child Theme URI: http: //example.com/ Description: Child theme Author: nishi Author URI: Template: twentytwelve Version: url('../twentytwelve/style.css'); 参考 wpdocs 子テーマで検索

70 P.70 子テーマによるテーマのカスタマイズスタイルの変更子テーマのstyle.cssに親テーマと同じスタイルを定義 --- 子テーマのスタイルが優先されるレイアウトの変更親テーマのテンプレートを子テーマのフォルダにコピーして変更 --- 子テーマが優先される機能の変更子テーマの functions.php に記述子テーマの構成例 ( ヘッダーとフッターをカスタマイズする例 ) 関数の 2 重定義に注意

P.71 子テーマのスタイル変更例スタイル (BizVektor の style.css に ) 参考 BizVektor の子テーマ http://bizvektor.

71 P.71 子テーマのスタイル変更例スタイル (BizVektor の style.css に ) 参考 BizVektor の子テーマ BizVektor の連絡先 ( 変更前 ) 連絡先のスタイル変更 ( 子テーマの style.css に記述 ) #header #headcontact #headcontacttel { font-size:36px; } 変更後の連絡先スタイルの指定時は CSS セレクタの優先順位に注意 #headcontacttel { font-size:36px; } では反映されない場合も

72 P.72 CSS セレクタの優先順位とはスタイル指定が反映されないことも前述の例では #headcontacttel { font-size:36px; } と記述しても反映されない CSSセレクタの優先順位基本的には後から指定したスタイルが優先されるがどのスタイルを修正するか ( セレクタ ) を詳細指定した方が優先される #headcontacttel { } より #header #headcontact #headcontacttel { } が優先される BizVektorではbiz-vektor bizvektor_themes plain plain.cssに上記の指定がある CSS 指定が反映されない場合は既存のstyle.cssに詳細指定されたセレクタがないか調べる

73 P.73 テンプレートカスタマイズの考え方修正対象ファイルを見極めるヘッダー画像の表示方法を変更したい --- header.phpを編集すべての固定ページの本文下に広告を表示したい --- page.phpまたはcontent.php 投稿のカテゴリーによってサイドバーを切り替えたい --- single.phpまたはsidebar.php 修正箇所の編集 PHPスクリプト HTMLのロジックを読み取って編集すぐにオリジナルに戻せるようにバックアップを確保してから編集外観 - テーマ編集メニューではなくFTP+テキストエディタでの編集が安全 functions.phpは入力ミスをするとダッシュボードにログインできなくなる

P.74 テンプレートファイルのカスタマイズ例トップページの表示内容を変更したい事例 BizVektorのトップページで Information を非表示にしたいどのテンプレートを修正? --- トップページのテンプレートfront-page.php どこを修正? --- Information( カスタム投稿 info ) の表示部分どのように修正?

74 P.74 テンプレートファイルのカスタマイズ例トップページの表示内容を変更したい事例 BizVektorのトップページで Information を非表示にしたいどのテンプレートを修正? --- トップページのテンプレートfront-page.php どこを修正? --- Information( カスタム投稿 info ) の表示部分どのように修正? --- カスタム投稿 infoを表示しないようにphpスクリプトを変更変更前 (Blog の上に Information) 変更前 (Informationの表示判定部品) <?php if ($loop->have_posts()) :?> 変更後 (Information が消える ) 変更後 (Informationを非表示に) <?php if (1==2 && $loop->have_posts()) :?>

$php に記述するコード ( ショートコードを登録 ) 投稿にショートコードを入力記事に定型文が表示される function ad_book() { return " PHP プログラミングの教科書もよろしく!$

75 P.75 functions.php のカスタマイズ例オリジナルのショートコードを使いたい事例 [ad] というショートコードで定型文を表示したいショートコードを登録するコード --- functions.php に追加する functions.php に記述するコード ( ショートコードを登録 ) 投稿にショートコードを入力記事に定型文が表示される function ad_book() { return " PHP プログラミングの教科書もよろしく! "; } add_shortcode('ad', 'ad_book'); ad というショートコードで実行する ad_book 関数を登録 ad というショートコードで定型文が表示される

76 P.76 テーマ編集の必携ツール FTPソフト --- FFFTP WinSCP FileZillaなどサーバーからテンプレートファイルなどをダウンロードアップロードするツールテキストエディタ --- 秀丸エディタサクラエディタ TeraPadなどテンプレートファイル ( テキストファイル ) を開いて編集するツールアウトラインエディタ --- IdeaTree アウトラインエディタ --- IdeaTreeなどカスタマイズに役立つコードなどのメモをツリー形式で管理できるツール

77 P.77 演習 BizVektor の連絡先を画像に BizVektorの子テーマをインストール BizVektor 電話番号で検索 --- コードを参考にダミーの固定ページで画像タグを作成 --- <img src= 略 tel.png" /> 作成したタグをfunctions.phpにペースト入力ミスした場合 --- FTPツールテキストエディタを駆使して修正 BizVektor の連絡先 ( 現在 ) 連絡先を画像に ( 変更後 )

78 サイト内の広告戦略 P.78

79 P.79 サイドバーに広告画像を追加する Image Widget の設定 ( 外観 - ウィジェット ) Image Widgetプラグイン --- サイドバーに画像を追加できる外観 - ウィジェットメニューから設定画像を選択 --- 追加する画像を選択タイトル --- 画像のタイトル ( 省略可 ) 代替テキスト --- 画像のalt 属性 ( 画像の説明 ) リンク --- 画像クリック時のリンク先 ( 広告ページなど ) サイズ --- フルサイズ ( サイズ選択できるが切り取られる ) 配置 --- なし

80 P.80 すべての投稿に自動で広告を追加する方法投稿や固定ページに広告を追加 1ページずつ編集画面で追加 --- 原始的な方法すべてのページに追加 --- テンプレートを修正すべての投稿に --- single.phpまたはcontent.phpを編集すべての固定ページに --- page.phpまたはcontent.php content-page.phpを編集 single.php の構造 ( 抜粋 ) <?php the_title();?> 略 <?php the_content();?> ここに広告タグを入力投稿や固定ページのタイトル投稿や固定ページの本文その下に広告を追加すれば全ページの本文の下に広告が表示される

81 P.81 特定のページカテゴリーのみに広告を表示する方法条件を満たす場合のみに広告を表示 --- if 文を使う特定のページかどうか判断する関数 is_single( 投稿か ) is_page( 固定ページか ) is_front_page( トップページか ) in_category( 特定カテゴリーの投稿か ) is_category( 特定カテゴリーのアーカイブか ) コース紹介 ( スラッグ :course) ページかどうかで広告を切り替える (page.php または content.php に記述 ) <?php if(is_page('course')) :?> コース紹介ページで表示する広告 <?php else :?> コース紹介ページ以外で表示する広告 <?php endif?> イベント ( スラッグ :event) カテゴリーかどうかで広告を切り替える (single.php または content.php に記述 ) <?php if(in_category('event')) :?> イベントカテゴリーで表示する広告 <?php else :?> イベントカテゴリー以外で表示する広告 <?php endif?>

82 PHP について P.82

83 P.83 PHP とは Webアプリケーション開発が得意なプログラミング言語 WordPressもPHP(+MySQLデータベース ) で開発されている一般的な学習項目の概要基本構文 --- 変数配列条件分岐ループ PHP 関数ユーザー定義関数などフォーム --- メールフォームなどフォーム入力値のハンドリングデータベース --- MySQLデータベースの読み書きフォームとの連携など応用 --- フレームワークパフォーマンスチューニングオブジェクト指向 WordPressユーザーとしてのPHP 入門 --- 基本構文のみで相当に役立つ

84 P.84 目的に応じた PHP の学習レベル WordPressでPHPを編集する場合初歩的なテンプレートのカスタマイズ --- WordPress 関数 if whileの理解で大丈夫本格的なテンプレートカスタマイズ --- 変数配列 functionなど基本構文の理解が必要初歩的なプラグイン作成 --- PHPの基本構文の理解だけでも作成可能本格的なプラグイン作成 --- データベース処理フォームハンドリングなどの理解が必要用途に合わせて3つのステップのマスターが必要基本構文 --- 簡単なテンプレートカスタマイズに取り組みたい場合フォーム --- 画面遷移を伴うプラグインの開発が必要な場合データベース --- カスタム投稿やオプションデータの読み書きが必要な場合

85 P.85 カスタマイズ事例から学ぶテンプレートカスタマイズに必要な PHP の知識ページごとにサイドバーを切り替えたいどのようにテーマ ( テンプレート ) をカスタマイズすれば良いか

86 P.86 ページごとにサイドバーを切り替えたいの考え方 ( 何を理解すれば作業できるようになるのか ) どのテンプレートをカスタマイズすれば良いか --- sidebar.phpなのかsingle.php page.phpなのかテーマのファイル構成テンプレートの役割の理解が必要どの部分をカスタマイズすれば良いか --- サイドバーを表示している命令は? テンプレートに記述されたWordPress 関数の吟味修正する部分の特定が必要どのようにカスタマイズすれば良いか --- ごとにを切り替えるをPHPスクリプトで表現すると? PHPの基本構文 (if 文 ) の理解が必要結果として記述するコードのイメージを固める single.phpを修正する get_sidebar(); の部分を修正する if 文を使ってカテゴリー Aの場合はの条件分岐を記述するカテゴリーごとにサイドバーを切り替える <?php if(in_category('sendagi')) : get_sidebar('sendagi'); elseif(in_category('yanaka')) : get_sidebar('yanaka'); else : get_sidebar(); endif?>

87 P.87 テンプレートカスタマイズに必要な知識のまとめテンプレートファイルの構成役割の理解 --- ページパーツ functions.php 基本的な WordPress 関数 PHP 関数の用途の理解 --- インターネットなどで調べる PHP の基本構文の理解 --- 学習が必要 (if 文 while 文 function 構文 )

88 P.88 本日はありがとうございましたまた何かありましたらよろしくお願いします西沢直木

WPセミナー見本サイト構築手順概要v1.1

WPセミナー見本サイト構築手順概要v1.1 WordPress セミナー本サイト構築順 1. 基本の設定 1-1 テーマの変更 [ 外観 ] [ テーマ ] テーマを追加画にてLightningを検索 Lightningをインストールする [ 有効化 ] ボタンをクリックし有効化する Lightning 推奨プラグイン VK All in One Expansion Unit をインストールするプラグイン覧にて VK All in