php conference hokkaido wordpress workshop

#phpcondo | PHP Conference Hokkaido | 04.21.2012

初めて作る WordPress オリジナルテーマ

http://atnd.org/events/27353

@ PHPカンファレンス北海道



直子 @naokomc

ひろまさ @hiromasa

コモモ @komomoaichi

ハム @h2ham

本日の講師紹介！


Hands-on Rules

✴ 分からないことは遠慮せず質問！

✴ 周りの人をヘルプしつつ、楽しむ

✴ 手を動かしてみましょう

✴ 気づきをブログ等に書いてくれると嬉しいです


まず、環境チェック


WordPress がちゃんと動いているか確認しよう

この画面が見えていますか？


デバッグモードを有効化


WP_DEBUG を true にする

wp-config.php で

define('WP_DEBUG', false);

を見つけ、

define('WP_DEBUG', true);

に書き換える。

デバッグメッセージの例


テストデータのインポート


テスト投稿やコメントなどをデータベースに入れよう

WordPress テストデータ日本語版

http://megumi-manuals.com/





http://megumi-manuals.com














新しいテーマのフォルダを作ろうテストテーマフォルダの作成


Twenty Eleven のファイルをコピー


index.php

header.php

footer.php

sidebar.php

page.php

functions.php

comments.php

style.css

mytheme

ファイルの一部を削除


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 の編集


/*

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

*/

http://wordpress.org/extend/themes/twentyeleven

http://wordpress.org/extend/themes/twentyeleven

http://wordpress.org

http://wordpress.org

footer.php の編集


</div>

<footer id="colophon" role="contentinfo">

<div id="site-generator">

</div>

</footer>

</div>

<?php wp_footer(); ?>

</body>

</html>

sidebar.php の編集


<div id="secondary" class="widget-area" role="complementary">

<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

<?php endif; // end sidebar widget area ?>

</div>

テスト投稿を表示してみよう投稿ループを作る


投稿ループの表示例


一巡目

二巡目

WordPress ループの解説


http://wpdocs.sourceforge.jp/The_Loop



ループを書いてみよう


<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php the_content(); ?>

<?php endwhile; else: ?>

<p>投稿はありません。</p>

<?php endif; ?>

固定ページ用にサイドバーのないレイアウトにする

固定ページテンプレートを作る


固定ページの例


テンプレート階層を利用


http://wpdocs.sourceforge.jp/テンプレート階層

http://wpdocs.sourceforge.jp/%25E3%2583%2586%25E3%2583%25B3%25E3%2583%2597%25E3%2583%25AC%25E3%2583%25BC%25E3%2583%2588%25E9%259A%258E%25E5%25B1%25A4





http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

サイドバーウィジェットを活用しよう

ウィジェットを利用可能にする


サイドバーウィジェット例


functions.php に記述


<?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で使えるスニペット


便利なテーマ機能の追加例

✴ ナビゲーションメニュー

✴ アイキャッチ画像対応

✴ カスタム背景対応


カスタム…何とか？

カスタムヘッダー

ナビゲーションメニュー

カスタム背景


関数リファレンス/add_theme_support


http://wpdocs.sourceforge.jp/関数リファレンス/add_theme_support

http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support





http://wpdocs.sourceforge.jp

http://wpdocs.sourceforge.jp

テーマ機能の追加


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 に記述

テーマのテスト


できたテーマをチェックするためのツール紹介

Theme-Check プラグイン


http://wordpress.org/extend/plugins/theme-check/



Theme-Check プラグイン


php conference hokkaido wordpress workshop

Technology