WordPress ブラウザで始めるカスタマイズ＋ テーマの基礎的な知識

自己紹介Evangelist 04

よつばデザイン　後藤賢司

東京と大分の2拠点で活動中。

出版社～デザイン会社～Web制作会社～企画会社～独立。

根っこから考えるタイプのお仕事が得意。

ブランド立ち上げ、メディアサイトの企画・運営など。

企業Webサイトの企画・デザイン。

WP-D グリーン

CPIエバンジェリスト

ゼロから始めるWordPress勉強会 (facebookグループ）

Webクリエイターのための情報交換所 (facebookグループ）

Webクリエイターズニュース

すみだクリエイターズクラブ

活動

COCOmag

子どもと一緒の毎日を

楽しく、可愛くする情報

（メディアサイト）

http://COCOmag.net

よろずサウンド

著作権フリーのBGM販売サイト

yorozusound.com

著書

WebクリエイターズニュースWeb制作者に

役立つ情報を発信。

http://web-cre.info/

プログラムが出来ない人にとって

WordPressのカスタマイズは

難易度が高い…

少しずつ覚えていく全部理解出来なくても良い。

おさえておけば良いポイントを

覚えておくとこの先幸せ。

見た目はHTMLかCSS、

機能はPHPの場合が多い。

テーマカスタマイズへのステップ1．テーマとCSSを理解する

2．PHPの基礎を理解する

3．テンプレート構造を理解する

4．テンプレートタグを理解する

カスタマイズに関して公式ディレクトリ掲載テーマは書き換えない。

コアファイルを書き換えない。（wp-content以外のファイル）

アップデートで消える。

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

テンプレートを触らないカスタマイズWordPressのテンプレートはCSSをたくさん吐き出す。

CSSをカスタマイズして見た目を変える。

ブラウザでカスタマイズテンプレートファイルはいじらずに

CSSでなんとかする。

テンプレートタグWordPress独自のテンプレートタグには

CSSを出力するものもある。

!

例：<?php post_class(); ?>

テンプレートタグと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が適用される。

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

Jetpack多機能なプラグイン。

CSS編集が出来るようになる。

https://wordpress.org/

plugins/jetpack/

カスタムCSSカスタムCSSの機能を使う。

利用テーマに影響しないので

アップデートなどで

消える事がない。

ブラウザの開発ツールを使う変化を確認しながら、

作業が出来る。

※リロードすると消えます。

変更したCSSをコピー。

CSS編集変更したものを追加して

保存するだけ。

ボタンの色反映

テンプレートのカスタマイズwp-content/themes/（自分の使ってるテーマ名）

確認する方法

wp-content/themes/（自分の使ってるテーマ名）/style.cssに記述

style.cssTheme Name: テーマのタイトル

Theme URI: テーマのアドレス

Description: テーマの説明

Version: テーマのバージョン

Author: テーマ作成者

Author URI: テーマ作成者のアドレス

Tags: テーマのタグ

• /*

• 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

• */

テーマ　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

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

PHPの書き方「<?php 」で始まり「？＞」で終わる

<?php bloginfo( 'name' ); ?>

!

編集するエディターに注意。

PHPコメントアウトは1行の場合は 「// 」、

複数行の場合は 「/* */」

例：<?php //bloginfo( 'name' ); ?>

間違い→　<!̶ <?php bloginfo( 'name' ); ?> ̶>

※記号はすべて半角

if文<?php if (wp_is_mobile()) :?>

スマホ＆タブレットだったらここを表示

<?php else: ?>

スマホ＆タブレットじゃなかったらここを表示

<?php endif; ?>

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

どこで使われてるか？テンプレートの参照順を理解すると良い。

▼固定ページ

page.php

▼投稿ページ（記事詳細）

single.php

左側から優先で読み込まれる

!

!

http://wpdocs.sourceforge.jp/

テンプレート階層

テンプレート優先順位category-slug.php -- 特定のカテゴリー用テンプレート

category-ID.php -- 特定のカテゴリー用テンプレート

category.php -- カテゴリーの汎用テンプレート

archive.php -- 汎用アーカイブテンプレート（タグ・日別アーカイブなどと共用）

index.php

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

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　 スタイルシート

テーマの一例です。

テーマのカスタマイズsingle.phpなどのテンプレートファイルに書かれている場合と、

functions.phpなどに書かれている場合がある。

機能的なものはfunctions.phpに書かれる場合が多い。

カスタムメニュー、jQuery、CSS、カスタムヘッダー、

カスタム背景、ウィジェット等

どのテンプレートを使ってるか？Show Current Template

wordpress.org/plugins/show-current-template/

テンプレートタグ<?php the_content(); ?>

Codexなどを参照すると良い。

読み方<h1 class="site-title">

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" >

<?php bloginfo( 'name' ); ?></a>

</h1>

<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; ?>

ループ<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_title(); ?>　←記事のタイトル

<?php the_content(); ?>　←記事の内容

<?php endwhile; else: ?>

記事がありません

<?php endif; ?>

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