Your SlideShare is downloading. ×
0
テーマ作成初心者向け
WordPressサイト構築のポイントと
便利なプラグイン
よつばデザイン 後藤賢司
2014.3.29 WordBench 東京 in GMO
自己紹介
よつばデザイン 後藤賢司
出版社∼デザイン会社∼Web制作会社∼企画会社∼独立
東京と大分の2拠点で活動中(月の半分ずつ)
Webサイトの企画・デザインやメディアサイトやってます
和菓子が好き
WP-D グリーン
CPIエバンジェリスト
ゼロから始めるWordPress勉強会(facebookグループ)
Webクリエイターのための情報交換所(facebookグループ)
すみだクリクラ
活動
COCOmag
子どもと一緒の毎日を

楽しく、可愛くする情報
(メディアサイト)
http://COCOmag.net
よろずサウンド
著作権フリーのBGM販売サイト
yorozusound.com
今日の内容
1. テーマ作成前に知っておきたい事
2. こんな事で困った
3. テンプレートの仕組みについて
4. プラグインの紹介
テーマ作成初心者が対象です。
WordPressのテーマを

作った事ありますか?
テーマを触るには
プログラムの知識が必要になる
テーマを
作成するようになった
きっかけ
イメージに一番近いテーマを

ひたすら探す日々
訴求ポイント重視すると

あてはまるテーマがない
PHPがわからないけど
ちょっとやってみよう…
既存テーマの

カスタマイズからスタート
CSSとかは何とかなるけど

PHP部分はさっぱり
1箇所変えては確認
すごい時間がかかりました
決まり事とかは
理解しておきたい
基礎知識
静的なHTMLと違うところ
PHP
WordPress独自のタグ
<?php get_header(); ?> 
!
<?php if (is_front_page()): ?>
トップページだけこの部分を表示します。
<?php else: ?>
トップページ以外はこの部分を表...
必要なものから覚えれば良い
データベース
データを置いてるところ
倉庫みたいなもの
「ループ」について
お知らせカテゴリーの記事の
最新5件を表示したい
データベースのイメージ
最新5件の記事を取得
個人的なイメージ
お医者さんで診察して
薬局で必要な薬を出してもらう
ような事が行われてる
テーマの仕組み
最低限必要なもの
!
index.php
style.css  ※テーマ名
index.php

header.php

sidebar.php

footer.php

style.css
良くあるテーマの構成
テンプレート名と対応順序
参照されるテンプレートには
優先順位があります
http://wpdocs.sourceforge.jp/テンプレート階層
固定ページの場合
優先順位
page-$slug.php (page-about.php、page-contact.php)

page-$id.php (page-23.php)

page.php

index.php
テンプレートに必要です。
</head>直前に記述
<?php wp_head(); ?>
!
</body>直前に記述
<?php wp_footer(); ?>
プラグインがちゃんと動いてく
れなかったり。

初めてテーマ自作する時に忘れ
...
今使用中のテーマで何のファイルを使ってるか知りたい場合は、この
プラグインを入れると確認できます。
http://wordpress.org/plugins/show-current-template/
デザインの落とし込み
お知らせ一覧
個別記事
トップページ
当社について 事業案内 アクセス お問合せ
事業案内1 事業案内2
トップページをしっかり作る
index.php front-page.php
投稿記事や
固定ページを表示
トップページ用
こういうのって

どこを見ればいいの?
Codexに詳しく書いてます
http://wpdocs.sourceforge.jp/テンプレート階層
固定ページの種類を増やしたい
見せ方を柔軟に対応したい
固定ページ用のテンプレートを作る
固定ページ用のテンプレートを作る。

指定は編集画面で出来ます。

テンプレートには名前をつける。



※テンプレートの最初に記述

<?php

/*

Template Name:wide

*/

?>
固定ページのテンプレート例
例:サイドバーを

表示させないテンプレート

page-wide.php。
色を変える等、個別でアレンジ

しやすくなる。
地図を大きく見せたり お問合せフォーム以外は
表示させずに
離脱率の低下を狙ったり
サイド...
サイドバーのバリエーションが欲しい
投稿記事 事業案内
sidebar.phpを複数作る
通常はこのように使う。

違うレイアウトのサイドバーを

使いたい…。
sidebar.phpを複数作る
sidebar-service.phpのように

別のサイドバーを用意する。

ハイフンの後に名前をつけると

このように読み込める。
<?php get_sidebar('service'); ?>
例:トップページだけいろいろ変えたい
front-page.php

header-top.php

sidebar-top.php

footer-top.php
front-page.phpに

全部記述してもOK
<?php get_fo...
バリエーション展開は簡単
ヘッダーを状況に応じて使い分けたり。
<?php get_footer(); ?>
<?php get_header(); ?>
<?php get_sidebar(); ?>
index.php
header.php...
ページ毎に作っても良い
<?php get_footer(); ?>
<?php get_header(); ?>
<?php get_sidebar(); ?>
index.php
header.php
footer.php
sidebar....
事業内容ページの例
事業内容ページの例
sidebar-service.phpを読み込んだ

固定ページテンプレート

page-service.phpを使用
page-service.php
事業内容ページの例
sidebar-service.phpを読み込んだ

固定ページテンプレート

page-service.phpを使用
page-service.php
page-wide.php
事業内容のトップは

サイドバー無しの

...
お知らせ一覧
index.php
個別記事

single.php
トップページ
front-page.php
当社について
page.php
事業案内
page-wide.php
アクセス
page-wide.php
お問合せ
page-wi...
カスタム投稿タイプは

プラグインや

ジェネレーターで対応
ジェネレーターサイトを使う
カスタム投稿
カスタムタクソノミー
カスタムメニュー
ウィジェットなど。
必要箇所をいれればコードを

生成してくれる。
http://generatewp.com/
index.php

header.php

sidebar.php

content.php

footer.php

style.css
条件分岐多めのテーマもあります
ループ部分が1ファイルに
まとめられたテーマもあります。
条件分岐を覚えれば

比較的簡単に出来ます。
アーカイブだったら?
<?php if (is_archive()): ?>
アーカイブだったら表示
<?php else: ?>
アーカイブ以外はこの部分を表示します。
<?php endif; ?>
!
「:」コロンに注意
スマホかタブレットだったら?
<?php if (wp_is_mobile()): ?>

スマホかタブレットならここを表示

<?php endif; ?>
ちょこっとずつ

やってれば慣れます。
ウィジェットやカスタムメニュー
を使えると幅が広がります。

Codex見てみましょう。
ウィジェットで更新しやすくしたり
PC苦手な人でもウィジェットなら更新できる…かもしれない。
テーマフォルダ内の画像を読み込む場合
テーマフォルダ内の画像を指定する
<img src="<?php echo get_template_directory_uri(); ?>/img/
logo.png" />
少しずつ覚えれば大丈夫
プラグイン紹介
高機能で便利な Jetpack
これでもかというほど高機能。

ウィジェットの表示条件を

指定できるようになったり、

ソーシャル連携出来たり、

シンプルなアクセス解析を

見る事が出来たり。

https://wordpress.org/...
記事を複製できる Duplicate Post
ほぼ同じ内容で日付だけ変えて

公開したいような場合に便利。
https://wordpress.org/plugins/duplicate-post/
共通で使う要素を管理する Buckets
共通パーツをまとめておける。
ショートコードで呼び出し。
営業日とか料金表とか複数のペー
ジで共通で使う場合など。

https://wordpress.org/
plugins/buckets/
ショ...
画像のトリミング指定が出来る Post Thumbnail Editor
画像のトリミング指定が出来る

プラグイン。

個別にトリミング出来るので

微調整したい場合などに便利。

https://wordpress.org/
plugins...
ウィジェットにバナーを貼れる Image Widget
HTMLの知識がなくても

ウィジェットエリアにバナーを

貼れるプラグイン。

タイトルを入力しなければ、

画像のみのバナーとして

利用できる。

http://wordpress....
アイキャッチ画像を自動で設定してくれる 

Auto Post Tumbnail
自動でアイキャッチ画像を設定し
てくれる。サムネイルの設定忘れ
などが無くなる。

クライアントワークの場合、説明
しなくても良い。

http://wordpr...
管理画面の権限を指定出来る Adminimize
管理画面のメニューの

表示権限を設定出来る。
https://wordpress.org/
plugins/adminimize/
画像を再生成してくれる Force Regenerate Thumbnails
テーマで定義されてる画像サイズ
を再生成してくれるプラグイン。

不要な画像サイズは削除してくれ
る。
https://wordpress.org/
plugins...
表側で編集が出来る WordPress Front-end Editor
フロント側で記事の編集ができる。プレビューして確認などの必要が
なくなる。いずれはデフォルトの機能になるかも。

https://wordpress.org/plugin...
シンプルにお知らせを表示する Notification-Box
シンプルにメッセージを出すための

ウィジェットプラグイン。
テキストウィジェットよりは

もうすこし目立たせたい場合などに。
!


https://github.com/ytbd...
設定値をいじれば

下の要素とくっつけたり、

連続で表示して簡易的な

デザインアクセントとしても

利用可能。



ありがとうございました
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン
Upcoming SlideShare
Loading in...5
×

テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン

1,936

Published on

2014.3.29 WordBench東京
WordBench東京3月: 春のデザイナー祭り!
「テーマ作成初心者向けWordPressサイト構築のポイントと便利なプラグイン」

Published in: Design

Transcript of "テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン"

  1. 1. テーマ作成初心者向け WordPressサイト構築のポイントと 便利なプラグイン よつばデザイン 後藤賢司 2014.3.29 WordBench 東京 in GMO
  2. 2. 自己紹介 よつばデザイン 後藤賢司 出版社∼デザイン会社∼Web制作会社∼企画会社∼独立 東京と大分の2拠点で活動中(月の半分ずつ) Webサイトの企画・デザインやメディアサイトやってます
  3. 3. 和菓子が好き
  4. 4. WP-D グリーン CPIエバンジェリスト ゼロから始めるWordPress勉強会(facebookグループ) Webクリエイターのための情報交換所(facebookグループ) すみだクリクラ 活動
  5. 5. COCOmag 子どもと一緒の毎日を
 楽しく、可愛くする情報 (メディアサイト) http://COCOmag.net
  6. 6. よろずサウンド 著作権フリーのBGM販売サイト yorozusound.com
  7. 7. 今日の内容 1. テーマ作成前に知っておきたい事 2. こんな事で困った 3. テンプレートの仕組みについて 4. プラグインの紹介
  8. 8. テーマ作成初心者が対象です。
  9. 9. WordPressのテーマを
 作った事ありますか?
  10. 10. テーマを触るには プログラムの知識が必要になる
  11. 11. テーマを 作成するようになった きっかけ
  12. 12. イメージに一番近いテーマを
 ひたすら探す日々
  13. 13. 訴求ポイント重視すると
 あてはまるテーマがない
  14. 14. PHPがわからないけど
  15. 15. ちょっとやってみよう…
  16. 16. 既存テーマの
 カスタマイズからスタート
  17. 17. CSSとかは何とかなるけど
 PHP部分はさっぱり
  18. 18. 1箇所変えては確認
  19. 19. すごい時間がかかりました
  20. 20. 決まり事とかは 理解しておきたい
  21. 21. 基礎知識
  22. 22. 静的なHTMLと違うところ
  23. 23. PHP
  24. 24. WordPress独自のタグ <?php get_header(); ?>  ! <?php if (is_front_page()): ?> トップページだけこの部分を表示します。 <?php else: ?> トップページ以外はこの部分を表示します。 <?php endif; ?>
  25. 25. 必要なものから覚えれば良い
  26. 26. データベース
  27. 27. データを置いてるところ 倉庫みたいなもの
  28. 28. 「ループ」について
  29. 29. お知らせカテゴリーの記事の 最新5件を表示したい
  30. 30. データベースのイメージ
  31. 31. 最新5件の記事を取得
  32. 32. 個人的なイメージ
  33. 33. お医者さんで診察して 薬局で必要な薬を出してもらう ような事が行われてる
  34. 34. テーマの仕組み
  35. 35. 最低限必要なもの ! index.php style.css  ※テーマ名
  36. 36. index.php
 header.php
 sidebar.php
 footer.php
 style.css 良くあるテーマの構成
  37. 37. テンプレート名と対応順序
  38. 38. 参照されるテンプレートには 優先順位があります
  39. 39. http://wpdocs.sourceforge.jp/テンプレート階層
  40. 40. 固定ページの場合 優先順位 page-$slug.php (page-about.php、page-contact.php)
 page-$id.php (page-23.php)
 page.php
 index.php
  41. 41. テンプレートに必要です。 </head>直前に記述 <?php wp_head(); ?> ! </body>直前に記述 <?php wp_footer(); ?> プラグインがちゃんと動いてく れなかったり。
 初めてテーマ自作する時に忘れ がちなので注意。
  42. 42. 今使用中のテーマで何のファイルを使ってるか知りたい場合は、この プラグインを入れると確認できます。 http://wordpress.org/plugins/show-current-template/
  43. 43. デザインの落とし込み
  44. 44. お知らせ一覧 個別記事 トップページ 当社について 事業案内 アクセス お問合せ 事業案内1 事業案内2
  45. 45. トップページをしっかり作る index.php front-page.php 投稿記事や 固定ページを表示 トップページ用
  46. 46. こういうのって
 どこを見ればいいの?
  47. 47. Codexに詳しく書いてます http://wpdocs.sourceforge.jp/テンプレート階層
  48. 48. 固定ページの種類を増やしたい 見せ方を柔軟に対応したい
  49. 49. 固定ページ用のテンプレートを作る 固定ページ用のテンプレートを作る。
 指定は編集画面で出来ます。
 テンプレートには名前をつける。
 
 ※テンプレートの最初に記述
 <?php
 /*
 Template Name:wide
 */
 ?>
  50. 50. 固定ページのテンプレート例 例:サイドバーを
 表示させないテンプレート
 page-wide.php。 色を変える等、個別でアレンジ
 しやすくなる。 地図を大きく見せたり お問合せフォーム以外は 表示させずに 離脱率の低下を狙ったり サイドバー無しテンプレート
  51. 51. サイドバーのバリエーションが欲しい 投稿記事 事業案内
  52. 52. sidebar.phpを複数作る 通常はこのように使う。
 違うレイアウトのサイドバーを
 使いたい…。
  53. 53. sidebar.phpを複数作る sidebar-service.phpのように
 別のサイドバーを用意する。
 ハイフンの後に名前をつけると
 このように読み込める。 <?php get_sidebar('service'); ?>
  54. 54. 例:トップページだけいろいろ変えたい front-page.php
 header-top.php
 sidebar-top.php
 footer-top.php front-page.phpに
 全部記述してもOK <?php get_footer( top ); ?> <?php get_header( top ); ?> <?php get_sidebar( top ); ?> front-page.php header-top.php footer-top.php sidebar-top.php
  55. 55. バリエーション展開は簡単 ヘッダーを状況に応じて使い分けたり。 <?php get_footer(); ?> <?php get_header(); ?> <?php get_sidebar(); ?> index.php header.php footer.php sidebar.php <?php get_footer( top ); ?> <?php get_header( top ); ?> <?php get_sidebar( top ); ?> front-page.php header-top.php footer-top.php sidebar-top.php
  56. 56. ページ毎に作っても良い <?php get_footer(); ?> <?php get_header(); ?> <?php get_sidebar(); ?> index.php header.php footer.php sidebar.php <?php get_footer( top ); ?> <?php get_header( top ); ?> <?php get_sidebar( top ); ?> front-page.php header-top.php footer-top.php sidebar-top.php <?php get_footer(); ?> <?php get_header(); ?> <?php get_sidebar(); ?> index.php header.php footer.php sidebar.php <?php get_footer( top ); ?> <?php get_header( top ); ?> <?php get_sidebar( top ); ?> front-page.php header-top.php footer-top.php sidebar-top.php <?php get_footer(); ?> <?php get_header(); ?> <?php get_sidebar(); ?> index.php header.php footer.php sidebar.php <?php get_footer( top ); ?> <?php get_header( top ); ?> <?php get_sidebar( top ); ?> front-page.php header-top.php footer-top.php sidebar-top.php <?php get_footer(); ?> <?php get_header(); ?> <?php get_sidebar(); ?> index.php header.php footer.php sidebar.php <?php get_footer( top ); ?> <?php get_header( top ); ?> <?php get_sidebar( top ); ?> front-page.php header-top.php footer-top.php sidebar-top.php <?php get_footer(); ?> <?php get_header(); ?> <?php get_sidebar(); ?> index.php header.php footer.php sidebar.php <?php get_footer( top ); ?> <?php get_header( top ); ?> <?php get_sidebar( top ); ?> front-page.php header-top.php footer-top.php sidebar-top.php <?php get_footer(); ?> <?php get_header(); ?> <?php get_sidebar(); ?> index.php header.php footer.php sidebar.php <?php get_footer( top ); ?> <?php get_header( top ); ?> <?php get_sidebar( top ); ?> front-page.php header-top.php footer-top.php sidebar-top.php <?php get_footer(); ?> <?php get_header(); ?> <?php get_sidebar(); ?> index.php header.php footer.php sidebar.php <?php get_footer( top ); ?> <?php get_header( top ); ?> <?php get_sidebar( top ); ?> front-page.php header-top.php footer-top.php sidebar-top.php <?php get_footer(); ?> <?php get_header(); ?> <?php get_sidebar(); ?> index.php header.php footer.php sidebar.php <?php get_footer( top ); ?> <?php get_header( top ); ?> <?php get_sidebar( top ); ?> front-page.php header-top.php footer-top.php sidebar-top.php <?php get_footer(); ?> <?php get_header(); ?> <?php get_sidebar(); ?> index.php header.php footer.php sidebar.php <?php get_footer( top ); ?> <?php get_header( top ); ?> <?php get_sidebar( top ); ?> front-page.php header-top.php footer-top.php sidebar-top.php
  57. 57. 事業内容ページの例
  58. 58. 事業内容ページの例 sidebar-service.phpを読み込んだ
 固定ページテンプレート
 page-service.phpを使用 page-service.php
  59. 59. 事業内容ページの例 sidebar-service.phpを読み込んだ
 固定ページテンプレート
 page-service.phpを使用 page-service.php page-wide.php 事業内容のトップは
 サイドバー無しの
 テンプレートを適用
  60. 60. お知らせ一覧 index.php 個別記事
 single.php トップページ front-page.php 当社について page.php 事業案内 page-wide.php アクセス page-wide.php お問合せ page-wide.php 事業案内1 page-service.php 事業案内2 page-service.php
  61. 61. カスタム投稿タイプは
 プラグインや
 ジェネレーターで対応
  62. 62. ジェネレーターサイトを使う カスタム投稿 カスタムタクソノミー カスタムメニュー ウィジェットなど。 必要箇所をいれればコードを
 生成してくれる。 http://generatewp.com/
  63. 63. index.php
 header.php
 sidebar.php
 content.php
 footer.php
 style.css 条件分岐多めのテーマもあります ループ部分が1ファイルに まとめられたテーマもあります。
  64. 64. 条件分岐を覚えれば
 比較的簡単に出来ます。
  65. 65. アーカイブだったら? <?php if (is_archive()): ?> アーカイブだったら表示 <?php else: ?> アーカイブ以外はこの部分を表示します。 <?php endif; ?> ! 「:」コロンに注意
  66. 66. スマホかタブレットだったら? <?php if (wp_is_mobile()): ?>
 スマホかタブレットならここを表示
 <?php endif; ?>
  67. 67. ちょこっとずつ
 やってれば慣れます。
  68. 68. ウィジェットやカスタムメニュー を使えると幅が広がります。
 Codex見てみましょう。
  69. 69. ウィジェットで更新しやすくしたり PC苦手な人でもウィジェットなら更新できる…かもしれない。
  70. 70. テーマフォルダ内の画像を読み込む場合 テーマフォルダ内の画像を指定する <img src="<?php echo get_template_directory_uri(); ?>/img/ logo.png" />
  71. 71. 少しずつ覚えれば大丈夫
  72. 72. プラグイン紹介
  73. 73. 高機能で便利な Jetpack これでもかというほど高機能。
 ウィジェットの表示条件を
 指定できるようになったり、
 ソーシャル連携出来たり、
 シンプルなアクセス解析を
 見る事が出来たり。
 https://wordpress.org/plugins/jetpack/
  74. 74. 記事を複製できる Duplicate Post ほぼ同じ内容で日付だけ変えて
 公開したいような場合に便利。 https://wordpress.org/plugins/duplicate-post/
  75. 75. 共通で使う要素を管理する Buckets 共通パーツをまとめておける。 ショートコードで呼び出し。 営業日とか料金表とか複数のペー ジで共通で使う場合など。
 https://wordpress.org/ plugins/buckets/ ショートコードで呼び出し
  76. 76. 画像のトリミング指定が出来る Post Thumbnail Editor 画像のトリミング指定が出来る
 プラグイン。
 個別にトリミング出来るので
 微調整したい場合などに便利。
 https://wordpress.org/ plugins/post-thumbnail-editor/
  77. 77. ウィジェットにバナーを貼れる Image Widget HTMLの知識がなくても
 ウィジェットエリアにバナーを
 貼れるプラグイン。
 タイトルを入力しなければ、
 画像のみのバナーとして
 利用できる。
 http://wordpress.org/plugins/image-widget/
  78. 78. アイキャッチ画像を自動で設定してくれる 
 Auto Post Tumbnail 自動でアイキャッチ画像を設定し てくれる。サムネイルの設定忘れ などが無くなる。
 クライアントワークの場合、説明 しなくても良い。
 http://wordpress.org/plugins/ auto-post-thumbnail/
  79. 79. 管理画面の権限を指定出来る Adminimize 管理画面のメニューの
 表示権限を設定出来る。 https://wordpress.org/ plugins/adminimize/
  80. 80. 画像を再生成してくれる Force Regenerate Thumbnails テーマで定義されてる画像サイズ を再生成してくれるプラグイン。
 不要な画像サイズは削除してくれ る。 https://wordpress.org/ plugins/force-regenerate- thumbnails/
  81. 81. 表側で編集が出来る WordPress Front-end Editor フロント側で記事の編集ができる。プレビューして確認などの必要が なくなる。いずれはデフォルトの機能になるかも。
 https://wordpress.org/plugins/wp-front-end-editor/
  82. 82. シンプルにお知らせを表示する Notification-Box シンプルにメッセージを出すための
 ウィジェットプラグイン。 テキストウィジェットよりは
 もうすこし目立たせたい場合などに。 ! 
 https://github.com/ytbdken/Notification-Box
  83. 83. 設定値をいじれば
 下の要素とくっつけたり、
 連続で表示して簡易的な
 デザインアクセントとしても
 利用可能。
 

  84. 84. ありがとうございました
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×