テーマ作成初心者向け 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: ?>

トップページ以外はこの部分を表示します。

<?php endif; ?>

必要なものから覚えれば良い

データベース

データを置いてるところ

倉庫みたいなもの

「ループ」について

お知らせカテゴリーの記事の

最新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_footer(’top’); ?>

<?php get_header(’top’); ?>

<?php get_sidebar(’top’); ?>

front-page.phpheader-top.php

footer-top.php

sidebar-top.php

バリエーション展開は簡単ヘッダーを状況に応じて使い分けたり。

<?php get_footer(); ?>

<?php get_header(); ?>

<?php get_sidebar(); ?>

index.phpheader.php

footer.php

sidebar.php

<?php get_footer(’top’); ?>

<?php get_header(’top’); ?>

<?php get_sidebar(’top’); ?>

front-page.phpheader-top.php

footer-top.php

sidebar-top.php

ページ毎に作っても良い

<?php get_footer(); ?>

<?php get_header(); ?>

<?php get_sidebar(); ?>

index.phpheader.php

footer.php

sidebar.php

<?php get_footer(’top’); ?>

<?php get_header(’top’); ?>

<?php get_sidebar(’top’); ?>

front-page.phpheader-top.php

footer-top.php

sidebar-top.php

<?php get_footer(); ?>

<?php get_header(); ?>

<?php get_sidebar(); ?>

index.phpheader.php

footer.php

sidebar.php

<?php get_footer(’top’); ?>

<?php get_header(’top’); ?>

<?php get_sidebar(’top’); ?>

front-page.phpheader-top.php

footer-top.php

sidebar-top.php

<?php get_footer(); ?>

<?php get_header(); ?>

<?php get_sidebar(); ?>

index.phpheader.php

footer.php

sidebar.php

<?php get_footer(’top’); ?>

<?php get_header(’top’); ?>

<?php get_sidebar(’top’); ?>

front-page.phpheader-top.php

footer-top.php

sidebar-top.php

<?php get_footer(); ?>

<?php get_header(); ?>

<?php get_sidebar(); ?>

index.phpheader.php

footer.php

sidebar.php

<?php get_footer(’top’); ?>

<?php get_header(’top’); ?>

<?php get_sidebar(’top’); ?>

front-page.phpheader-top.php

footer-top.php

sidebar-top.php

<?php get_footer(); ?>

<?php get_header(); ?>

<?php get_sidebar(); ?>

index.phpheader.php

footer.php

sidebar.php

<?php get_footer(’top’); ?>

<?php get_header(’top’); ?>

<?php get_sidebar(’top’); ?>

front-page.phpheader-top.php

footer-top.php

sidebar-top.php

<?php get_footer(); ?>

<?php get_header(); ?>

<?php get_sidebar(); ?>

index.phpheader.php

footer.php

sidebar.php

<?php get_footer(’top’); ?>

<?php get_header(’top’); ?>

<?php get_sidebar(’top’); ?>

front-page.phpheader-top.php

footer-top.php

sidebar-top.php

<?php get_footer(); ?>

<?php get_header(); ?>

<?php get_sidebar(); ?>

index.phpheader.php

footer.php

sidebar.php

<?php get_footer(’top’); ?>

<?php get_header(’top’); ?>

<?php get_sidebar(’top’); ?>

front-page.phpheader-top.php

footer-top.php

sidebar-top.php

<?php get_footer(); ?>

<?php get_header(); ?>

<?php get_sidebar(); ?>

index.phpheader.php

footer.php

sidebar.php

<?php get_footer(’top’); ?>

<?php get_header(’top’); ?>

<?php get_sidebar(’top’); ?>

front-page.phpheader-top.php

footer-top.php

sidebar-top.php

<?php get_footer(); ?>

<?php get_header(); ?>

<?php get_sidebar(); ?>

index.phpheader.php

footer.php

sidebar.php

<?php get_footer(’top’); ?>

<?php get_header(’top’); ?>

<?php get_sidebar(’top’); ?>

front-page.phpheader-top.php

footer-top.php

sidebar-top.php

事業内容ページの例

事業内容ページの例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-wide.php

事業案内1 page-service.php

事業案内2 page-service.php

カスタム投稿タイプは

プラグインや

ジェネレーターで対応

ジェネレーターサイトを使うカスタム投稿

カスタムタクソノミー

カスタムメニュー

ウィジェットなど。

必要箇所をいれればコードを生成してくれる。

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/plugins/jetpack/

記事を複製できる Duplicate Postほぼ同じ内容で日付だけ変えて

公開したいような場合に便利。

https://wordpress.org/plugins/duplicate-post/

共通で使う要素を管理する Buckets共通パーツをまとめておける。

ショートコードで呼び出し。

営業日とか料金表とか複数のペー

ジで共通で使う場合など。

https://wordpress.org/

plugins/buckets/ショートコードで呼び出し

画像のトリミング指定が出来る Post Thumbnail Editor

画像のトリミング指定が出来る

プラグイン。

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

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

https://wordpress.org/

plugins/post-thumbnail-editor/

ウィジェットにバナーを貼れる Image Widget

HTMLの知識がなくても

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

貼れるプラグイン。

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

画像のみのバナーとして

利用できる。

http://wordpress.org/plugins/image-widget/

アイキャッチ画像を自動で設定してくれる

Auto Post Tumbnail

自動でアイキャッチ画像を設定し

てくれる。サムネイルの設定忘れ

などが無くなる。

クライアントワークの場合、説明

しなくても良い。

http://wordpress.org/plugins/

auto-post-thumbnail/

管理画面の権限を指定出来る Adminimize管理画面のメニューの

表示権限を設定出来る。

https://wordpress.org/

plugins/adminimize/

画像を再生成してくれる Force Regenerate Thumbnails

テーマで定義されてる画像サイズ

を再生成してくれるプラグイン。

不要な画像サイズは削除してくれ

る。

https://wordpress.org/

plugins/force-regenerate-

thumbnails/

表側で編集が出来る WordPress Front-end Editor

フロント側で記事の編集ができる。プレビューして確認などの必要が

なくなる。いずれはデフォルトの機能になるかも。

https://wordpress.org/plugins/wp-front-end-editor/

シンプルにお知らせを表示する Notification-Box

シンプルにメッセージを出すための

ウィジェットプラグイン。

テキストウィジェットよりは

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

!

https://github.com/ytbdken/Notification-Box

設定値をいじれば

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

連続で表示して簡易的な

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

利用可能。

ありがとうございました