php conference hokkaido wordpress workshop
TRANSCRIPT
#phpcondo | PHP Conference Hokkaido | 04.21.2012
初めて作る WordPress オリジナルテーマ
http://atnd.org/events/27353
@ PHPカンファレンス北海道
直子 @naokomc
ひろまさ @hiromasa
コモモ @komomoaichi
ハム @h2ham
本日の講師紹介!
#phpcondo | PHP Conference Hokkaido | 04.21.2012
Hands-on Rules
✴ 分からないことは遠慮せず質問!
✴ 周りの人をヘルプしつつ、楽しむ
✴ 手を動かしてみましょう
✴ 気づきをブログ等に書いてくれると嬉しいです
#phpcondo | PHP Conference Hokkaido | 04.21.2012
まず、環境チェック
#phpcondo | PHP Conference Hokkaido | 04.21.2012
WordPress がちゃんと動いているか確認しよう
この画面が見えていますか?
#phpcondo | PHP Conference Hokkaido | 04.21.2012
デバッグモードを有効化
#phpcondo | PHP Conference Hokkaido | 04.21.2012
WP_DEBUG を true にする
wp-config.php で
define('WP_DEBUG', false);
を見つけ、
define('WP_DEBUG', true);
に書き換える。
デバッグメッセージの例
#phpcondo | PHP Conference Hokkaido | 04.21.2012
テストデータのインポート
#phpcondo | PHP Conference Hokkaido | 04.21.2012
テスト投稿やコメントなどをデータベースに入れよう
WordPress テストデータ日本語版
http://megumi-manuals.com/
#phpcondo | PHP Conference Hokkaido | 04.21.2012
新しいテーマのフォルダを作ろうテストテーマフォルダの作成
#phpcondo | PHP Conference Hokkaido | 04.21.2012
Twenty Eleven のファイルをコピー
#phpcondo | PHP Conference Hokkaido | 04.21.2012
index.php
header.php
footer.php
sidebar.php
page.php
functions.php
comments.php
style.css
mytheme
ファイルの一部を削除
#phpcondo | PHP Conference Hokkaido | 04.21.2012
index.php, page.php
<?php get_header(); ?>, <?php get_sidebar(); ?>, <?php get_footer(); ?> のみを書く
functions.php
コードをすべて削除する
comments.php
<?php // You can start editing here… の行まで残して削除
header.php
そのまま
footer.php, sidebar.php, style.css
style.css の編集
#phpcondo | PHP Conference Hokkaido | 04.21.2012
/*
Theme Name: テストテーマTheme URI: http://wordpress.org/extend/themes/twentyeleven
Author: PHPCONDO
Author URI: http://wordpress.org/
Description: デモ用テーマVersion: 1.0
License: GNU General Public License
License URI: license.txt
Template: twentyeleven
Tags: white
*/
footer.php の編集
#phpcondo | PHP Conference Hokkaido | 04.21.2012
</div><!-- #main -->
<footer id="colophon" role="contentinfo">
<div id="site-generator">
</div>
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
sidebar.php の編集
#phpcondo | PHP Conference Hokkaido | 04.21.2012
<div id="secondary" class="widget-area" role="complementary">
<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>
<?php endif; // end sidebar widget area ?>
</div><!-- #secondary .widget-area -->
テスト投稿を表示してみよう投稿ループを作る
#phpcondo | PHP Conference Hokkaido | 04.21.2012
投稿ループの表示例
#phpcondo | PHP Conference Hokkaido | 04.21.2012
一巡目
二巡目
WordPress ループの解説
#phpcondo | PHP Conference Hokkaido | 04.21.2012
http://wpdocs.sourceforge.jp/The_Loop
ループを書いてみよう
#phpcondo | PHP Conference Hokkaido | 04.21.2012
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p>投稿はありません。</p>
<?php endif; ?>
固定ページ用にサイドバーのないレイアウトにする
固定ページテンプレートを作る
#phpcondo | PHP Conference Hokkaido | 04.21.2012
固定ページの例
#phpcondo | PHP Conference Hokkaido | 04.21.2012
テンプレート階層を利用
#phpcondo | PHP Conference Hokkaido | 04.21.2012
http://wpdocs.sourceforge.jp/テンプレート階層
サイドバーウィジェットを活用しよう
ウィジェットを利用可能にする
#phpcondo | PHP Conference Hokkaido | 04.21.2012
サイドバーウィジェット例
#phpcondo | PHP Conference Hokkaido | 04.21.2012
functions.php に記述
#phpcondo | PHP Conference Hokkaido | 04.21.2012
<?php
register_sidebar( array(
'name' => __( 'Main Sidebar', 'twentyeleven' ),
'id' => 'sidebar-1',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => "</aside>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>'
) );
テーマに機能を追加できます
functions.phpで使えるスニペット
#phpcondo | PHP Conference Hokkaido | 04.21.2012
便利なテーマ機能の追加例
✴ ナビゲーションメニュー
✴ アイキャッチ画像対応
✴ カスタム背景対応
#phpcondo | PHP Conference Hokkaido | 04.21.2012
カスタム…何とか?
カスタムヘッダー
ナビゲーションメニュー
カスタム背景
#phpcondo | PHP Conference Hokkaido | 04.21.2012
関数リファレンス/add_theme_support
#phpcondo | PHP Conference Hokkaido | 04.21.2012
http://wpdocs.sourceforge.jp/関数リファレンス/add_theme_support
テーマ機能の追加
#phpcondo | PHP Conference Hokkaido | 04.21.2012
register_nav_menu( 'primary', __( 'Primary Menu', 'twentyeleven' ) );
add_theme_support( 'post-formats', array( 'aside', 'link', 'gallery', 'status', 'quote', 'image' ) );
add_custom_background();
※ 表示側のコードは Twenty Eleven の header.php を参照
functions.php に記述
テーマのテスト
#phpcondo | PHP Conference Hokkaido | 04.21.2012
できたテーマをチェックするためのツール紹介
Theme-Check プラグイン
#phpcondo | PHP Conference Hokkaido | 04.21.2012
Theme-Check プラグイン
#phpcondo | PHP Conference Hokkaido | 04.21.2012