Upload
kenji-goto
View
1.868
Download
1
Embed Size (px)
DESCRIPTION
2014.3.29 WordBench東京 WordBench東京3月: 春のデザイナー祭り! 「テーマ作成初心者向けWordPressサイト構築のポイントと便利なプラグイン」
Citation preview
テーマ作成初心者向け WordPressサイト構築のポイントと
便利なプラグインよつばデザイン 後藤賢司
2014.3.29 WordBench 東京 in GMO
自己紹介よつばデザイン 後藤賢司
出版社~デザイン会社~Web制作会社~企画会社~独立
東京と大分の2拠点で活動中(月の半分ずつ)
Webサイトの企画・デザインやメディアサイトやってます
和菓子が好き
WP-D グリーン
CPIエバンジェリスト
ゼロから始めるWordPress勉強会(facebookグループ)
Webクリエイターのための情報交換所(facebookグループ)
すみだクリクラ
活動
今日の内容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
設定値をいじれば
下の要素とくっつけたり、
連続で表示して簡易的な
デザインアクセントとしても
利用可能。
ありがとうございました