Más contenido relacionado La actualidad más candente (20) Similar a WordPress公式テーマ登録のための5ステップ (20) WordPress公式テーマ登録のための5ステップ10. 申請する前の準備
1
2
テーマの作成
ガイドライン
国際化(英語)
テーマユニットテスト
デバッグモード
構文チェック
Theme-Check
3
4
5
6
7
11. 申請する前の準備
1
2
テーマの作成
ガイドライン
国際化(英語)
テーマユニットテスト
デバッグモード
構文チェック
Theme-Check
3
4
5
6
7
16. 申請する前の準備
1
2
テーマの作成
ガイドライン
国際化(英語)
テーマユニットテスト
デバッグモード
構文チェック
Theme-Check
3
4
5
6
7
17. 2 ガイドライン
・テーマレビュー
http://codex.wordpress.org/Theme_Review
・テーマレビューガイドライン
http://tinyurl.com/nzxbkld
ガイドラインは更新が
早いので英語版で確認します
19. Required 必須
ライセンス
・ GPLライセンスの表記
必須ファイル
・ index.php
・ comments.php
・ style.css
・ screenshot.png(推奨サイズ:880 × 660px)
子テーマの場合は
これより少なくてもOK
20. Required 必須
テンプレートタグ・フック
・ wp_title()
・ body_class()
・ post_class()
・ $content_width(メインコンテンツの最大幅の定義)
・ 前後のページへのリンク
・ wp_head()
・ wp_footer()
・ wp_link_pages()
posts_nav_link() または paginate_links() または
previous_posts_link()/next_posts_link()
21. Required 必須
コメント
・ comments_template()
・ wp_list_comments()
・ comment_form()
・ wp_enqueue_script( 'comment-reply' )
・ comment_class()
(wp_list_comments()のコールバックを利用する場合)
・ 前後のコメントページへのリンク
paginate_comments_links() または
previous_comments_link() / next_comments_link()
22. Required 必須
CSSクラス
・ WordPressに定義されたクラスのスタイル
.aligncenter、.wp-caption、.sticky、.bypostauthor など
必須ではないけど必要なもの
・ readme.txt
テーマの使い方や更新履歴など
・ potファイル
翻訳用のテンプレートファイル
23. 申請する前の準備
1
2
テーマの作成
ガイドライン
国際化(英語)
テーマユニットテスト
デバッグモード
構文チェック
Theme-Check
3
4
5
6
7
25. 国際化する場合
・翻訳のためのテンプレートタグを使用
<h2>メッセージ</h2>
<h2><?php _e( ‘Message’, ‘text_domain’ ); ?></h2>
I18n(国際化)http://codex.wordpress.org/I18n_for_WordPress_Developers
日本語版 http://wpdocs.sourceforge.jp/I18n_for_WordPress_Developers
27. 国際化する場合
・POTファイルの作成
空のPOTファイルのダウンロード
https://github.com/fxbenard/Blank-WordPress-Pot
Poedit(無料版)
を使うと簡単!
WordPressプラグイン・テーマ翻訳:Poedit無料版で
新規POTファイルを作成する http://tinyurl.com/og7h6nd
28. 申請する前の準備
1
2
テーマの作成
ガイドライン
国際化(英語)
テーマユニットテスト
デバッグモード
構文チェック
Theme-Check
3
4
5
6
7
29. 4 テーマユニットテスト
1 テストデータをインストール
Test
インストールData
https://wpcom-themes.svn.automattic.com/
demo/theme-unit-test-data.xml
テーマユニットテスト http://codex.wordpress.org/Theme_Unit_Test
31. 3 すべてのページが正しく表示されるか確認
アーカイブページ
2014/08/30
タイトル
投稿ページへのリンク
投稿ページへのリンク
2014/08/31 投稿ページへのリンク
リンク切れ
がないか
チェック
タイトルと投稿日にそれぞれ投稿ページへのリンクがあれば
タイトルが無くても投稿ページを表示できる
32. 申請する前の準備
1
2
テーマの作成
ガイドライン
国際化(英語)
テーマユニットテスト
デバッグモード
構文チェック
Theme-Check
3
4
5
6
7
33. 5 デバッグモード
wp-config.php
define('WP_DEBUG', true);
エラーが出ないか確認
WordPress初心者におすすめ!
デバッグモードの使い方
http://mignonstyle.com/debug-mode/
デバッグ http://codex.wordpress.org/Debugging_in_WordPress
34. 申請する前の準備
1
2
テーマの作成
ガイドライン
国際化(英語)
テーマユニットテスト
デバッグモード
構文チェック
Theme-Check
3
4
5
6
7
35. 6 構文チェック
・HTMLの構文チェック(W3C XHTML Validator)
http://validator.w3.org/
・CSSの構文チェック(W3C CSS Validator)
http://jigsaw.w3.org/css-validator/
・JavaScriptのエラーチェック
各ブラウザのチェックツール
(IEの「F12 開発者ツール」など)
36. 申請する前の準備
1
2
テーマの作成
ガイドライン
国際化(英語)
テーマユニットテスト
デバッグモード
構文チェック
Theme-Check
3
4
5
6
7
51. セキュリティ
クレジット
P l u g i n
Te r r i t o r y
オプション
サニタイズ
エスケープ
バリデーション
A P I
O p t- i n
リセットボタン
P r e f i x
o v e r f l o w
w o r d
w r a p
H a r d
c o d i n g
スタイリング
ライセンス
56. callbacks
functions.phpにコードを直書き
functions.php and
register_sidebar( array(
'name' => _ _( 'Sidebar Widget', 'text_domain' ),
'before_title' => '<h3>',
'after_title' => '</h3>',
) );
hooked
add_theme_support( 'custom-background' );
ズ
57. 自作の関数・変数にはユニークな接頭辞をつける
functions.php
function themeslug_widgets_init() {
register_sidebar( array(
'name' => _ _( 'Sidebar Widget', 'text_domain' ),
'before_title' => '<h3>',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'themeslug_widgets_init' );
適切なアクションにフックする
58. header.php
<head>
〜
スタイルシートのリンクをheader.phpに記述
<link rel="stylesheet"
href="<?php echo get_stylesheet_uri(); ?>">
<link rel="stylesheet"
href="http://fonts.googleapis.com/css?family=Quicksand">
<?php wp_head(); ?>
</head>
59. header.php
<head>
〜
スタイルシートのリンクをheader.phpに記述
Hard
coding
<link rel="stylesheet"
href="<?php echo get_stylesheet_uri(); ?>">
<link rel="stylesheet"
href="http://fonts.googleapis.com/css?family=Quicksand">
<?php wp_head(); ?>
</head>
60. wp_enqueue_scriptsフックを使う
functions.php
function themeslug_enqueue_styles() {
wp_enqueue_style( 'themeslug-style',
get_stylesheet_uri() );
wp_enqueue_style( 'themeslug-quicksand',
'//fonts.googleapis.com/css?family=Quicksand' );
}
add_action( 'wp_enqueue_scripts',
'themeslug_enqueue_styles' ); 「http:」は
省略
61. スクリプトのリンクをheader.phpやfooter.phpに記述
footer.php
<body>
</body>
</html> 〜
<?php wp_footer();?>
<script src="http://ajax.googleapis.com/
ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="<?php echo
get_template_directory_uri(); ?>/js/slider.js"></script>
62. スクリプトのリンクをheader.phpやfooter.phpに記述
Hard
coding
footer.php
<body>
</body>
</html> 〜
<?php wp_footer();?>
<script src="http://ajax.googleapis.com/
ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="<?php echo
get_template_directory_uri(); ?>/js/slider.js"></script>
63. wp_enqueue_scriptsフックを使う
functions.php
function themeslug_enqueue_scripts() {
〜
wp_enqueue_script( 'themeslug-slider',
get_template_directory_uri() . '/js/slider.js',
array( 'jquery' ), null, true );
}
add_action( 'wp_enqueue_scripts',
'themeslug_enqueue_scripts' );
WordPressに
デフォルトで
入っている
jQueryを使用