wordpressの常識をくつがえす超簡単テーマ doshirouto2014...
DESCRIPTION
WordPressのデフォルトテーマTwenty Fourteenをカスタマイズした超簡単テーマdoshirouto2014を作りました。TRANSCRIPT
@uemera
2014.3.8 WordBench神戸 上村崇
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Photo by SalFalko
最近のオレ @uemera
uemura兵庫県西宮市在住。 フリーランスのシステムエンジニアです。 WordBench神戸でよく喋ってます。
phpでの開発WordPress
勉強会など
・FuelPHP ・Linuxサーバー系もやります
テーマを理解すればどういうメリットがあるの? ・自分のオリジナルテーマを作ることができます。
・WordPressへの苦手意識が無くなります。
・phpが少し分かるようになります。
!
このプレゼンでは WordPressのテーマのしくみを 初心者にも分かるように解説します。
2013年5月、Twenty Thirteenをベースにしたテーマ "doshirouto"を公開しました。
デフォルトテーマの変遷Twenty Ten 2010
Twenty Thirteenをベースにdoshiroutoを作成
Twenty Fourteen 2014
Twenty Thirteen 2013
Twenty Twelve 2012
Twenty Eleven 2011
Twenty Fourteenをベースにdoshirouto2014を作成
最新バージョンWordPress3.8.1に同梱されているデフォルトテーマ
Twenty Fourteenとぅえんてぃふぉーてぃーん
最新バージョンWordPress3.8.1に同梱されているデフォルトテーマ
Twenty Fourteenとぅえんてぃふぉーてぃーん
Twenty Fourteenの特徴： ・レスポンシブデザインを採用しています。
・Automattic社 入江隆さんによるマガジンスタイルなデザイン
・アイコンフォントGenericonsを採用して見た目が分かりやすくなりました。
・Twenty Fourteen短冊ウィジェットで、投稿の一覧が表示できます。
・フロントページにタイル状の画像やスライダーを設置できる「おすすめコンテンツ」
・3カラムにできます。
・Lato 欧文タイプフェイスの採用
マガジンスタイルとは 雑誌を読んでいる感覚を、Webサイトに応用したもの。
画像入りの記事がタイル上に並びます。
LATOフォント
しかし、バージョンアップにともなって、WordPressのデフォルトテーマはどんどん難しくなってきています。
例： スタイルシートファイルへのリンクがどこに書いてあるか分からない
<head><link rel="stylesheet" type="text/css" href="http://.../style.css"></head>
テーマのヘッダ部分にあたるheader.phpには当然下のようなcssファイルへのリンクがあるものと思ったけど… header.phpには見つかりません。
wp_enqueue_style( 'twentyfourteen-‐style', get_stylesheet_uri(), array( 'genericons' ) );
header.php
functions.php header.phpではなく、php処理ばかりが書かれているfunctions.phpというファイルに、関数呼び出しの形で書かれています。
これでは初心者はcssファイルを探せないし、編集することもままならない！
しかし実際は...
例：ページナビ部分の<h1>を削除したくても、 どのファイルを編集していいか分からない！
この<h1>タグを削除したい！
Twenty Fourteenのindex.phpを見ても <h1>タグなんて見当たらない！
実際は twentyfourteen/inc/template-‐tags.php の twentyfourteen_paging_nav()関数内という、 php満載の処理内にhtmlが書いてあります。
ステップ数
100000
132500
165000
197500
230000
バージョン3.0 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8
WordPressはイノベーションのジレンマに陥ってるのかも知れません。高機能化・複雑化が入門者の間口を狭めている可能性があります。
このままでは初心者の手に負えないツールになってしまう！
WordPressの各バージョンにおける 全ソースのphpステップ数(行数)
(themeファイルを除く)
「WordPressの常識をくつがえす」とは?
そこで WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作りました。
日本語しか理解できないオレたち。
doshirouto2014の特徴(1)
➔ 英語のサイトを開設する予定などさらさらないので、多言語化対応無し。
WordPressユーザーにIE使ってる人なんていないよね。
➔ 古いバージョンのIE対応なし(IE9以降はOK)。
Google先生に頼るばかりの人生でいいんですか？
➔ 競争社会とは無縁。SEOは無視。ブログは口コミで広めよう。
新しい機能なんて使いこなせない、マジ無理。
➔ カスタムヘッダー機能なんて使ってないし削除。 ➔ 読めればいいので、おしゃれなWebフォントなんて必要ない必要ない。➔ オレだけ(私だけ)が使えればいいので汎用性なし、拡張性なし。
過去はふりかえらない主義
➔ 古いバージョンのWordPressは対応せず。互換性の考慮なし。 (Version3.8以降)。
doshirouto2014の特徴(2)WordPressって言ったらCMSだろ！
➔ いいえブログです。原点に戻ってください。
デフォルトのテーマってなんであんなにファイルが多いの！？
➔ 必要最低限のファイルだけに絞りこみました。
テーマファイルの中身って、なんであんなに記号ばっかりなの？見ると目まいがするんだけど。
➔ 日本語のコメントをできるだけたくさん入れてコードを読みやすくしました。 WordPress用語(テンプレートタグ)についての解説を入れました。
では実際にdoshirouto2014を見ていただきましょう。→
doshirouto2014の外観
ファイル構成はどうなっている？➔
Twenty Fourteenをベースに作っています。cssはほとんどイジってません。
洗練されすぎたdoshirouto2014の世界
TwentyFourteen
ファイル数 62 doshirouto2014
ファイル数 6
デフォルトテーマTwenty Fourteenは、・ユーザのあらゆるニーズに対応できる利点があります。・WordPressが持つ機能をくまなくサポートしているので、 WordPressのポテンシャルを最大限に引き出せます。その反面、・一般のユーザーにとってはほとんど使わない機能が多くあります。・複雑なコードを分かりやすく階層化したり部品化した結果、ファイルの数が 多くなってしまっています。・WordPressは海外製のソフトウェアのため、日本語圏の人が使うためには 多言語化対応が必要になります。
なぜこんなにファイルを減らせるのか?Twenty Fourteenの現状
1. 多言語化対応なし言語関連ファイルを削除しました。また、コードを分かりやすくするためにテンプレートファイルに日本語を直接埋め込んでいます。
doshirouto2014は日本語のみ対応とし、 初心者は使わない(使えない)機能を削ぎ落としました。
comments_popup_link( 'コメントをどうぞ', '1件のコメント', '%件のコメント' );
comments_popup_link( __( 'Leave a comment', 'twentyfourteen' ),
__( '1 Comment', 'twentyfourteen' ),
__( '% Comments', 'twentyfourteen' ) );
日本語しか使わないので日本語を直接埋め込みました。
2. 古いバージョンのIE対応無しie.css、html5.js といった互換性維持用のファイルを削除しました。
削除
削除
3. SEO対策無しコードを簡単にするため、<head>内のタイトルなどを簡略化。情報を削ったり、サイトタイトルを静的な固定表示のまま出すようにしました。
<head> <title><?php wp_title( '|', true, 'right' ); ?></title> </head>
<head> <title>ヘッダのタイトル doshirouto2014</title> </head>
wp_title()でページのタイトル名を動的に表示していたところを、doshirouto2014ではタイトルを固定。どんなページもこの文字列になります。
4. カスタムヘッダー削除、カスタマイズ機能削除、おすすめコンテンツ機能削除これらはTwenty Fourteenが持つ拡張機能ですが、そんな機能はド素人には無縁なので、関連phpファイルを削除しました。
削除
削除
削除
5. Webフォント削除、Genericons削除ttfとかsvgとかのファイルを削除しました。
ガッツリ削除
style.cssも編集し、フォントの呼び出しやアイコンフォントの呼び出しをしないように しました。
その結果、アイコンフォントが使えなくなります。
Twenty Fourteen
doshirouto2014
6. Javascriptによるアニメーション効果を省きました。ていうかjsファイルは全部削除しました。
doshirouto2014では優雅なアニメーションは不要！
そしたら検索ボックスが出なくなった！／(^o^)＼
Twenty Fourteen
doshirouto2014クリックしても出ない
でも検索窓はもうひとつあるから大丈夫！
ムシメガネをクリックすると検索窓出現
7. 投稿フォーマットは1種類だけにしました。 Twenty Fourteenでは、標準の投稿のほかに「音声」や「動画」、「引用」などが使えますが、doshirouto2014では標準の投稿のみとしました。
投稿フォーマットを詳しく→
Twenty Fourteenでは、記事を書くときに投稿フォーマットを選べる。
テキストがメインの投稿(標準の投稿)以外に、例えば画像や動画などのメディアを投稿するときは別のデザインにすることができます。投稿の種類によって見せ方(=フォーマット)を替えられます。つまり投稿フォーマットごとにデザインを変えることができます。Twenty Fourteenでは以下の投稿フォーマット用のファイルが用意されています。
投稿フォーマットとは
画像 content-‐image.php
標準の投稿 content.php
リンクギャラリー
音声動画
ステータスチャット
アサイド
引用content-‐link.phpcontent-‐gallery.php
content-‐audio.phpcontent-‐video.php
content-‐status.phpcontent-‐chat.php
content-‐aside.php
content-‐quote.php
もう少し細かく見ていきます➔
おすすめコンテンツ content-‐featured-‐post.php New
廃止
廃止
「廃止」「New」はTwenty Thirteenからの比較
では、Twenty Fourteenはどうなっているでしょうか？→
Twenty Thirteenは、投稿フォーマットによっていろいろな外観が楽しめました。
標準
ギャラリー
ビデオ
ステータス チャット
引用
「標準」の投稿フォーマット
content.php
デフォルトの投稿フォーマットです。テキストメインの記事を掲載するときに使います。
Twenty Fourteen
「アサイド」の投稿フォーマット
content-‐aside.php記事投稿ほどではないけど、メモのような感覚で残せるもの。タイトルは表示されず、本文だけの表示になります。
Twenty Fourteen
「画像」の投稿フォーマット
content-‐image.php
画像記事を掲載するときに使います。
Twenty Fourteen
「動画」の投稿フォーマット
content-‐video.php
YouTube等から動画ファイルを埋め込むことができます。
YouTubeのURLを投稿するだけ で埋め込み記事になります。
パソコンからアップロードした動画を掲載することもできます。
!
Twenty Fourteen
「音声」の投稿フォーマット
content-‐audio.php
音声ファイルを埋め込むことができます。
Twenty Fourteen
「引用」の投稿フォーマット
content-‐quote.php
外部サイトの記事を引用して掲載したいときに使います。
アサイドと同様、タイトルは表示されません。
Twenty Fourteen
「リンク」の投稿フォーマット
content-‐link.phpリンクURLを貼ると自動的にリンクタグもついて掲載される… と思いましたが、自動的にはリンクされないようです。リンクされないURL文字列が掲載されます。タイトルは表示されません。
Twenty Fourteen
「ギャラリー」の投稿フォーマット
content-‐gallery.php
複数の画像ファイルを掲載するときに使います。
Twenty Fourteen
Twenty Fourteenは、どの投稿フォーマットにしてもほとんど同じデザイン！
標準
ギャラリー音声動画
アサイド 画像
標準
ギャラリー
ビデオ
ステータス チャット
引用
Twenty Thirteenはこんなにカラフルだったのに！
同じデザインなら1つの投稿フォーマット、 1つのテンプレートファイルでいいじゃん？
画像
アサイド
ギャラリー
標準
音声動画
リンク
引用
投稿フォーマットは「標準」の1つのみにする
投稿フォーマットではないが 「おすすめコンテンツ」content-‐featured-‐post.php
ピックアップ画像としてページ上部に固定表示できます。タイル表示の他に、スライダーとしての表示も可能です。
これ
doshirouto2014ではこんなオシャレな機能は必要無いのでカットしました。
doshirouto2014では これらのテンプレートを1つにまとめました。
content-***.php を1つに集約してindex.php内に記載することでファイル数を削減しました。
その秘密は「テンプレート階層」のしくみにあります。➔
さらなるファイル削減： doshirouto2014は、メインのテンプレートはindex.phpの一種類だけ！これってどういうこと?
カテゴリ毎表示
記事の並べ方はいろいろあります
タグ毎表示アーカイブ表示
最新の投稿順表示
(Twenty Fourteenの例)
新着順に並びます。 カテゴリAの記事だけを表示します。
2014年3月の記事だけ表示します。
タグZの記事だけを表示します。
Twenty Fourteenでは、記事を並べる方法ごとに専用のテンプレートファイルがあります。
カテゴリ毎ページ category.php
最新投稿順ページ
アーカイブ毎ページ
タグ毎ページ
1記事だけのページ
archive.php
index.php
tag.php
single.php
それぞれのページごとに違うデザインを見せることが出来る反面、テンプレートファイルの数は多くなってしまいます。
archive.phpcategory.php
index.php
single.phptag.php
doshirouto2014の記事表示テンプレートは index.phpだけ
Twenty Fourteen404.php 404(not found)ページ
author.php
category.php
image.php
page.php
index.php
search.php
single.php
tag.php
index.php
ユーザ一ページ
カテゴリーページ
添付画像ページ
固定ページ
検索結果ページ
個別投稿ページ
タグページ
ブログ投稿一覧ページ
doshirouto2014
archive.php アーカイブページindex.phpだけですべてのページ
を表示させる！
なぜindex.phpだけでも動くのか?
category.php
index.php
WordPressの仕様では、以下のように動作します。 カテゴリ毎ページの表示のとき、category.phpが無ければindex.phpを使います。 年月毎(アーカイブ)ページの表示のとき、archive.phpがなければindex.phpを使います。 タグ毎ページ表示のとき、tag.phpが無ければindex.phpを使います。
カテゴリ毎ページ
archive.php
tag.php
アーカイブページ
タグ毎ページ
専用のテンプレートファイルがなければ、index.phpを使用する仕様になっています。この優先順位を持った階層をテンプレート階層と言います。
http://toyao.net/doshirouto2014.zip
doshirouto2014のダウンロードは こちらから
では実際に、 doshirouto2014をインストールし
構成を見てみましょう。
doshirouto2014テーマは wordpress > wp-‐content > themes
の下に置きましょう。
ダウンロードしたファイルはどこに置いたらいいの?
管理画面でテーマを変更します。
doshirouto2014を 有効化
doshirouto2014が有効になりました！
doshirouto2014のファイル構成
footer.php フッタテンプレート
functions.php php関数の集まり(触らなくていい)
header.php ヘッダテンプレート
index.php メインテンプレート
sidebar.php サイドバーテンプレート
style.css cssファイル
doshirouto2014では、1つのページを作るのに複数のパーツが組み合わされています。
index.phpheader.php
sidebar.php
footer.php
この構成はTwenty Fourteenでも同じです。Twenty Fourteenの場合
index.phpheader.php
sidebar.php
footer.php
doshirouto2014のコードを 見てみましょう
その前に、phpの基礎知識WordPressはphpというプログラム言語で作られています。 テーマを理解するにはこの言語の使い方を少し知っておく必要があります。
!<?php if( $a == 1 ): ?> ! <h1>変数$aが1のときは、この部分を表示します</h1> !<?php else: ?> ! <h1>$aが1以外のときは、この部分を表示します</h1> !<?php endif; ?>
条件分岐 (if文)
繰り返し文は、新着の記事一覧のページなど、何件もの複数記事を1ページに表示させるときに使います。
!<?php while( $a == 1 ): ?> ! この部分が繰り返されます。 !<?php endwhile; ?>
繰り返し (while文)
以上をふまえて、doshirouto2014のソースコードを見てみます。→
中を簡単に解説します➔
日本語コメントがいっぱいの超親切設計！
<?php get_header(); ?> <?php if ( have_posts() ) : ?> <? while( have_posts() ) : the_post(); ?> <article id="post-‐<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-‐header"> <?php if ( is_single() ) : the_title( '<h1>', '</h1>' ); else : the_title('<h1><a href="'.esc_url(get_permalink()).'">', '</a></h1>'); endif; ?> <div class="entry-‐meta"> <?php if ( 'post' == get_post_type() ) twentyfourteen_posted_on(); ?> </div> </header><!-‐-‐ .entry-‐header -‐-‐> <div class="entry-‐content">
<?php the_content( '続きを読む→' ); ?> </div><!-‐-‐ .entry-‐content -‐-‐> </article><!-‐-‐ #post-‐## -‐-‐> <?php if ( is_single() || is_page() ) : if ( comments_open() || get_comments_number() ) : comments_template(); } endif; ?> <?php endwhile; ?> <?php twentyfourteen_paging_nav(); ?> <?php endif; ?> <?php get_sidebar(); get_footer();
doshirouto2014/index.php header.phpを読み込む
footer.phpを読み込む
while文によるループ処理
記事のタイトル
記事本文を表示する
コメント欄を表示する
sidebar.phpを読み込む
記事数分のループ
メインテンプレート
<html lang="ja"> <head> <meta charset="UTF-‐8"> <meta name="viewport" content="width=device-‐width"> <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri();?>"/> <title>ヘッダのタイトル doshirouto2014</title> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="hfeed site"> <header id="masthead" class="site-‐header" role="banner"> <div class="header-‐main"> <h1 class="site-‐title"> <a href="<?php echo home_url( '/' ); ?>">タイトル -‐ doshirouto2014</a> </h1> <div class="search-‐toggle"> <a href="#search-‐container" class="screen-‐reader-‐text">検索</a> </div> <nav id="primary-‐navigation" class="site-‐navigation primary-‐navigation"> <?php wp_nav_menu( array( 'menu_class' => 'nav-‐menu' ) ); ?> </nav> </div> <div id="search-‐container" class="search-‐box-‐wrapper hide"> <div class="search-‐box"> <?php get_search_form(); ?> </div> </div> </header><!-‐-‐ #masthead -‐-‐> ! <div id="main" class="site-‐main"> !
doshirouto/header.php
style.cssを読み込む
ナビゲーションメニュー
検索ボックス
ヘッダのタイトル
サイトタイトル
ヘッダテンプレート
<div id="secondary"> <?php $description = get_bloginfo( 'description', 'display' ); if ( ! empty ( $description ) ) : ?> <h2 class="site-‐description"><?php echo esc_html( $description ); ?></h2> <?php endif; ?> ! <?php if ( has_nav_menu( 'secondary' ) ) : ?> <nav role="navigation" class="navigation site-‐navigation secondary-‐navigation"> <?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?> </nav> <?php endif; ?> ! <?php if ( is_active_sidebar( 'sidebar-‐1' ) ) : ?> <div id="primary-‐sidebar" class="primary-‐sidebar widget-‐area"> <?php dynamic_sidebar( 'sidebar-‐1' ); ?> </div><!-‐-‐ #primary-‐sidebar -‐-‐> <?php endif; ?> </div><!-‐-‐ #secondary -‐-‐>
doshirouto2014/sidebar.php
ブログの説明
サイドバーテンプレート
! </div><!-‐-‐ #main -‐-‐> <footer id="colophon" class="site-‐footer" role="contentinfo"> <div class="site-‐info"> doshirouto2014 </div><!-‐-‐ .site-‐info -‐-‐> </footer><!-‐-‐ #colophon -‐-‐> </div><!-‐-‐ #page -‐-‐> ! <?php wp_footer(); ?> </body> </html>
doshirouto2014/footer.php
WordPressのフッタ処理
フッタテンプレート
まとめ・WordPressのテーマに触れたことが無い初心者の方は、まずdoshirouto2014で WordPressのテーマ構造を理解し、慣れてきたらTwenty Fourteenなどデフォル トテーマの中を解読してみるのがいいと思います。
・doshirouto2014に追加したい機能がある場合は、デフォルトテーマから自力で 必要なコードをコピーしてきましょう。
!
・doshirouto2014はWordPress公式のテーマではありませんし、素人まるだし なので、こんなテーマは早く卒業しましょう。
ありがとうございました。
@uemera uemura