wordpress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識
DESCRIPTION
2014.10.24 コワーキングスペース茅場町Co-Edo 第15回ゼロから始めるWordPress勉強会〜「テーマをカスタマイズしてみる!」&懇親会〜TRANSCRIPT
![Page 1: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/1.jpg)
![Page 2: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/2.jpg)
自己紹介Evangelist 04
よつばデザイン 後藤賢司
東京と大分の2拠点で活動中。
出版社~デザイン会社~Web制作会社~企画会社~独立。
根っこから考えるタイプのお仕事が得意。
ブランド立ち上げ、メディアサイトの企画・運営など。
企業Webサイトの企画・デザイン。
![Page 3: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/3.jpg)
WP-D グリーン
CPIエバンジェリスト
ゼロから始めるWordPress勉強会 (facebookグループ)
Webクリエイターのための情報交換所 (facebookグループ)
Webクリエイターズニュース
すみだクリエイターズクラブ
活動
![Page 6: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/6.jpg)
著書
![Page 8: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/8.jpg)
プログラムが出来ない人にとって
WordPressのカスタマイズは
難易度が高い…
![Page 9: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/9.jpg)
少しずつ覚えていく全部理解出来なくても良い。
おさえておけば良いポイントを
覚えておくとこの先幸せ。
![Page 10: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/10.jpg)
見た目はHTMLかCSS、
機能はPHPの場合が多い。
![Page 11: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/11.jpg)
テーマカスタマイズへのステップ1.テーマとCSSを理解する
2.PHPの基礎を理解する
3.テンプレート構造を理解する
4.テンプレートタグを理解する
![Page 12: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/12.jpg)
カスタマイズに関して公式ディレクトリ掲載テーマは書き換えない。
コアファイルを書き換えない。(wp-content以外のファイル)
アップデートで消える。
![Page 13: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/13.jpg)
テーマアップデートに注意
![Page 14: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/14.jpg)
テンプレートを触らないカスタマイズWordPressのテンプレートはCSSをたくさん吐き出す。
CSSをカスタマイズして見た目を変える。
![Page 15: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/15.jpg)
ブラウザでカスタマイズテンプレートファイルはいじらずに
CSSでなんとかする。
![Page 16: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/16.jpg)
テンプレートタグWordPress独自のテンプレートタグには
CSSを出力するものもある。
!
例:<?php post_class(); ?>
![Page 17: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/17.jpg)
テンプレートタグと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が適用される。
![Page 18: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/18.jpg)
開発ツールでCSSカスタマイズCSSだけでカスタマイズしていく事が可能。
![Page 19: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/19.jpg)
Jetpack多機能なプラグイン。
CSS編集が出来るようになる。
https://wordpress.org/
plugins/jetpack/
![Page 20: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/20.jpg)
カスタムCSSカスタムCSSの機能を使う。
利用テーマに影響しないので
アップデートなどで
消える事がない。
![Page 21: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/21.jpg)
ブラウザの開発ツールを使う変化を確認しながら、
作業が出来る。
※リロードすると消えます。
変更したCSSをコピー。
![Page 22: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/22.jpg)
CSS編集変更したものを追加して
保存するだけ。
![Page 23: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/23.jpg)
ボタンの色反映
![Page 24: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/24.jpg)
テンプレートのカスタマイズwp-content/themes/(自分の使ってるテーマ名)
確認する方法
wp-content/themes/(自分の使ってるテーマ名)/style.cssに記述
![Page 25: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/25.jpg)
style.cssTheme Name: テーマのタイトル
Theme URI: テーマのアドレス
Description: テーマの説明
Version: テーマのバージョン
Author: テーマ作成者
Author URI: テーマ作成者のアドレス
Tags: テーマのタグ
![Page 26: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/26.jpg)
• /*
• 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
• */
![Page 27: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/27.jpg)
テーマ 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
![Page 28: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/28.jpg)
PHPWordPressのカスタマイズはPHPの知識があると良い。
![Page 29: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/29.jpg)
PHPの書き方「<?php 」で始まり「?>」で終わる
<?php bloginfo( 'name' ); ?>
!
編集するエディターに注意。
![Page 30: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/30.jpg)
PHPコメントアウトは1行の場合は 「// 」、
複数行の場合は 「/* */」
例:<?php //bloginfo( 'name' ); ?>
間違い→ <!̶ <?php bloginfo( 'name' ); ?> ̶>
※記号はすべて半角
![Page 31: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/31.jpg)
if文<?php if (wp_is_mobile()) :?>
スマホ&タブレットだったらここを表示
<?php else: ?>
スマホ&タブレットじゃなかったらここを表示
<?php endif; ?>
![Page 32: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/32.jpg)
テンプレートの仕組み何のファイルを使って表示されてるかを理解する必要がある。
![Page 33: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/33.jpg)
どこで使われてるか?テンプレートの参照順を理解すると良い。
▼固定ページ
page.php
▼投稿ページ(記事詳細)
single.php
![Page 34: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/34.jpg)
左側から優先で読み込まれる
!
!
http://wpdocs.sourceforge.jp/
テンプレート階層
![Page 35: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/35.jpg)
![Page 36: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/36.jpg)
テンプレート優先順位category-slug.php -- 特定のカテゴリー用テンプレート
category-ID.php -- 特定のカテゴリー用テンプレート
category.php -- カテゴリーの汎用テンプレート
archive.php -- 汎用アーカイブテンプレート(タグ・日別アーカイブなどと共用)
index.php
![Page 37: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/37.jpg)
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
![Page 38: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/38.jpg)
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 スタイルシート
テーマの一例です。
![Page 39: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/39.jpg)
テーマのカスタマイズsingle.phpなどのテンプレートファイルに書かれている場合と、
functions.phpなどに書かれている場合がある。
機能的なものはfunctions.phpに書かれる場合が多い。
カスタムメニュー、jQuery、CSS、カスタムヘッダー、
カスタム背景、ウィジェット等
![Page 40: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/40.jpg)
どのテンプレートを使ってるか?Show Current Template
wordpress.org/plugins/show-current-template/
![Page 41: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/41.jpg)
テンプレートタグ<?php the_content(); ?>
Codexなどを参照すると良い。
![Page 42: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/42.jpg)
読み方<h1 class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" >
<?php bloginfo( 'name' ); ?></a>
</h1>
![Page 43: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/43.jpg)
<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; ?>
![Page 44: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/44.jpg)
ループ<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_title(); ?> ←記事のタイトル
<?php the_content(); ?> ←記事の内容
<?php endwhile; else: ?>
記事がありません
<?php endif; ?>
![Page 45: WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識](https://reader034.vdocuments.site/reader034/viewer/2022052209/557b63fdd8b42a0d578b46c5/html5/thumbnails/45.jpg)
続きは小林さん、中畑さんのセッションで