2014.10.24 コワーキングスペース茅場町Co-Edo 第15回ゼロから始めるWordPress勉強会〜「テーマをカスタマイズしてみる！」＆懇親会〜


2. 自己紹介
Evangelist 04
よつばデザイン 後藤賢司
東京と大分の2拠点で活動中。
出版社～デザイン会社～Web制作会社～企画会社～独立。
根っこから考えるタイプのお仕事が得意。
ブランド立ち上げ、メディアサイトの企画・運営など。
企業Webサイトの企画・デザイン。

3. 活動
WP-D グリーン
CPIエバンジェリスト
ゼロから始めるWordPress勉強会 (facebookグループ）
Webクリエイターのための情報交換所 (facebookグループ）
Webクリエイターズニュース
すみだクリエイターズクラブ

4. COCOmag
子どもと一緒の毎日を
楽しく、可愛くする情報
（メディアサイト）
http://COCOmag.net

5. よろずサウンド
著作権フリーのBGM販売サイト
yorozusound.com

6. 著書

7. Webクリエイターズニュース
Web制作者に
役立つ情報を発信。
http://web-cre.info/

8. プログラムが出来ない人にとって
WordPressのカスタマイズは
難易度が高い…

9. 少しずつ覚えていく
全部理解出来なくても良い。
おさえておけば良いポイントを
覚えておくとこの先幸せ。

10. 見た目はHTMLかCSS、
機能はPHPの場合が多い。

11. テーマカスタマイズへのステップ
1．テーマとCSSを理解する
2．PHPの基礎を理解する
3．テンプレート構造を理解する
4．テンプレートタグを理解する

12. カスタマイズに関して
公式ディレクトリ掲載テーマは書き換えない。
コアファイルを書き換えない。（wp-content以外のファイル）
アップデートで消える。

13. テーマアップデートに注意

14. テンプレートを触らないカスタマイズ
WordPressのテンプレートはCSSをたくさん吐き出す。
CSSをカスタマイズして見た目を変える。

15. ブラウザでカスタマイズ
テンプレートファイルはいじらずに
CSSでなんとかする。

16. テンプレートタグ
WordPress独自のテンプレートタグには
CSSを出力するものもある。
!
例：<?php post_class(); ?>

17. テンプレートタグとCSS
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
↓
<article id="post-18" class="post-18 post type-post
status-publish format-standard hentry category-uncategorized”>
idやカテゴリーなどいろんなCSSが適用される。

18. 開発ツールでCSSカスタマイズ
CSSだけでカスタマイズしていく事が可能。

19. Jetpack
多機能なプラグイン。
CSS編集が出来るようになる。
https://wordpress.org/
plugins/jetpack/

20. カスタムCSS
カスタムCSSの機能を使う。
利用テーマに影響しないので
アップデートなどで
消える事がない。

21. ブラウザの開発ツールを使う
変化を確認しながら、
作業が出来る。
※リロードすると消えます。
変更したCSSをコピー。

22. CSS編集
変更したものを追加して
保存するだけ。

23. ボタンの色反映

24. テンプレートのカスタマイズ
wp-content/themes/（自分の使ってるテーマ名）
確認する方法
wp-content/themes/（自分の使ってるテーマ名）/style.cssに記述

25. style.css
Theme Name: テーマのタイトル
Theme URI: テーマのアドレス
Description: テーマの説明
Version: テーマのバージョン
Author: テーマ作成者
Author URI: テーマ作成者のアドレス
Tags: テーマのタグ

26. • /*
• Theme Name: Minamaze
• Theme URI: http://www.thinkupthemes.com/free/minamaze-free/
• Author: ThinkUpThemes
• Author URI: http://www.ThinkUpThemes.com
• Description: Minamaze the free version of the multi-purpose professional theme (Minamaze Pro) ideal for a business or
blog website. The theme has a responsive layout, HD retina ready and comes with a powerful theme options panel with
can be used to make awesome changes without touching any code. The theme also comes with a full width easy to use
slider. Easily add a logo to your site and create a beautiful homepage using the built-in homepage layout.
• Version: 1.0.6
• License: GNU General Public License
• License URI: /licenses/license.txt
• Tags: black, dark, red, one-column, two-columns, right-sidebar, left-sidebar, fixed-layout, responsive-layout, fluid-layout,
custom-header, custom-menu, full-width-template, theme-options, threaded-comments, editor-style, featured-images,
featured-image-header, post-formats, sticky-post, translation-ready, flexible-header, gray, light, white, custom-background
• */

27. テーマ Twenty Fourteen
404.php
archive.php
author.php
category.php
comments.php
content-aside.php
content-audio.php
content-featured-post.
php
content-gallery.php
content-image.php
content-link.php
content-none.php
content-page.php
content-quote.php
content-video.php
content.php
featured-content.php
footer.php
functions.php
header.php
image.php
index.php
page.php
rtl.css
screenshot.png
search.php
sidebar-content.php
sidebar-footer.php
sidebar.php
single.php
style.css
tag.php
taxonomy-post_
format.php

28. PHP
WordPressのカスタマイズはPHPの知識があると良い。

29. PHPの書き方
「<?php 」で始まり「？＞」で終わる
<?php bloginfo( 'name' ); ?>
!
編集するエディターに注意。

30. PHP
コメントアウトは1行の場合は 「// 」、
複数行の場合は 「/* */」
例：<?php //bloginfo( 'name' ); ?>
間違い→ <!̶ <?php bloginfo( 'name' ); ?> ̶>
※記号はすべて半角

31. if文
<?php if (wp_is_mobile()) :?>
スマホ＆タブレットだったらここを表示
<?php else: ?>
スマホ＆タブレットじゃなかったらここを表示
<?php endif; ?>

32. テンプレートの仕組み
何のファイルを使って表示されてるかを理解する必要がある。

33. どこで使われてるか？
テンプレートの参照順を理解すると良い。
▼固定ページ
page.php
▼投稿ページ（記事詳細）
single.php

34. 左側から優先で読み込まれる
!
!
http://wpdocs.sourceforge.jp/
テンプレート階層

36. テンプレート優先順位
category-slug.php -- 特定のカテゴリー用テンプレート
category-ID.php -- 特定のカテゴリー用テンプレート
category.php -- カテゴリーの汎用テンプレート
archive.php -- 汎用アーカイブテンプレート（タグ・日別アーカイブなどと共用）
index.php

37. Twenty Fourteen の場合
404.php
archive.php
author.php
category.php
comments.php
content-aside.php
content-audio.php
content-featured-post.
php
content-gallery.php
content-image.php
content-link.php
content-none.php
content-page.php
content-quote.php
content-video.php
content.php
featured-content.php
footer.php
functions.php
header.php
image.php
index.php
page.php
rtl.css
screenshot.png
search.php
sidebar-content.php
sidebar-footer.php
sidebar.php
single.php
style.css
tag.php
taxonomy-post_
format.php

38. footer.php フッター
front-page.php トップページ
functions.php テーマのための関数
header.php ヘッダー
/img 画像フォルダ
index.php 基準テンプレート
/js javascriptフォルダ
page-wide.php ページテンプレート サイドバー無しバージョン
page.php ページテンプレート
sidebar.php サイドバー
single.php 投稿詳細ページ
style.css スタイルシート
テーマの一例です。

39. テーマのカスタマイズ
single.phpなどのテンプレートファイルに書かれている場合と、
functions.phpなどに書かれている場合がある。
機能的なものはfunctions.phpに書かれる場合が多い。
カスタムメニュー、jQuery、CSS、カスタムヘッダー、
カスタム背景、ウィジェット等

40. どのテンプレートを使ってるか？
Show Current Template
wordpress.org/plugins/show-current-template/

41. テンプレートタグ
<?php the_content(); ?>
Codexなどを参照すると良い。

42. 読み方
<h1 class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" >
<?php bloginfo( 'name' ); ?></a>
</h1>

43. <body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php if ( get_header_image() ) : ?>
<div id="site-header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"
rel="home">
<img src="<?php header_image(); ?>" width="<?php
echo get_custom_header()->width; ?>" height="<?php echo
get_custom_header()->height; ?>" alt="">
</a>
</div>
<?php endif; ?>

44. ループ
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_title(); ?> ←記事のタイトル
<?php the_content(); ?> ←記事の内容
<?php endwhile; else: ?>
記事がありません
<?php endif; ?>

45. 続きは小林さん、中畑さんの
セッションで