WordPress Snippet

ワードプレスをカスタマイズしよう

Twenty Eleven からTwenty Twelve へ

tenman

変更点のメモ:間違いがあるかもしれませんので、ご注意ください

head line


メディアクエリ

Twentytwelveでは、以下のメディアクエリが使用される

@media print {
	
}
@media screen and (min-width: 960px) {
	
}
@media screen and (min-width: 600px) {
	
}

Twentyeleven

@media print {
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
}
@media (max-width: 450px) {

}
@media (max-width: 650px) {

}
@media (max-width: 800px) {

}

Child

チャイルドテーマでは、サブディレクトリに置くページテンプレートは、親テーマと同じディレクトリの中に置くか、テーマルートにおく必要がある。
異なるディレクトリ名は使えない

style

Twenty　シリーズのstyle.cssの行数

  • twenty ten 1359
  • twenty eleven 2694
  • twenty twelve 1646

画像サイズのオーバーフローを防ぐルールとして
width:auto;
が利用される

html

空クラスがあるど

<div class="color5 pad-m">
<li id="wp-admin-bar-about" class="">

タブインデックス　同じ値？

<a class="ab-item" tabindex="10" href="http://127.0.0.1/local-wp/wp-admin/themes.php?page=custom-header">Header</a> ....
<a class="ab-item" tabindex="10" href="http://127.0.0.1/local-wp/wp-admin/edit-comments.php" title="0 comments awaiting moderation"><span class="ab-icon"></span><span id="ab-awaiting-mod" class="ab-label awaiting-mod pending-count count-0">0</span></a>

tabindex マイナスだよ　0〜32767

<li id="wp-admin-bar-search" class=" admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1">...</li>

ディレクトリ　includes　が作られ、functions.phpのコードが整理される。

// Load up our theme options page and related code.
require( get_template_directory() . '/includes/theme-options.php' );
$twentytwelve_options= new Twenty_Twelve_Options();
require( get_template_directory() . '/includes/custom-header.php' );

投稿フォーマットのサポートの変更

post-formats

  • twentyeleven
    • array( ‘aside’, ‘link’, ‘gallery’, ‘status’, ‘quote’, ‘image’ )
  • twentytwelve
    • array( ‘aside’, ‘image’, ‘link’, ‘quote’ )

アイキャッチ画像サイズ

アイキャッチ画像サイズは、固定比率で表示されていましたが、アップロードしたサイズで表示されるように変更されました。

// Add custom image size for featured image use, displayed on &quot;standard&quot; posts.
	add_theme_support( 'post-thumbnails' );
	set_post_thumbnail_size( 624, 9999 ); // Unlimited height, soft crop

ウィジェットエリアが、削減されました

  • twenty twelve
    • Main Sidebar
    • Homepage Widgets
  • 削除されたウィジェットエリア
    • Showcase Sidebar
    • Footer Area One
    • Footer Area Two
    • Footer Area Three

posted on , posted inが　entry metaに整理されました

この変更で、一般に、タイトル下に表示されていた投稿日、投稿者のリンクが、投稿の後方にカテゴリ等と、一緒に表示されるようになりました。

その他

/**
 * Get our wp_nav_menu() fallback, wp_page_menu(), to show a home link.
 *
 * @since Twenty Twelve 1.0
 */
function twentytwelve_page_menu_args( $args ) {
	$args['show_home']= true;
	return $args;
}
add_filter( 'wp_page_menu_args', 'twentytwelve_page_menu_args' );

add
/**　$content_widthを部分的に変更する
 * Adjust $content width for full-width and single image attachment templates.
 */
function twentytwelve_content_width() {
	if ( is_page_template( 'full-width-page.php' ) | | is_attachment() ) {
		global $content_width;
		$content_width= 960;
	}
}
add_action( 'template_redirect', 'twentytwelve_content_width' );

以下の機能は、Twenty Twelveに引き継がれていないかもしれません

/**
 * Adds a pretty "Continue Reading" link to custom post excerpts.
 *
 * To override this link in a child theme, remove the filter and add your own
 * function tied to the get_the_excerpt filter hook.
 */
function twentyeleven_custom_excerpt_more( $output ) {
	if ( has_excerpt() && ! is_attachment() ) {
		$output .= twentyeleven_continue_reading_link();
	}
	return $output;
}
add_filter( 'get_the_excerpt', 'twentyeleven_custom_excerpt_more' );

/**
 * Get our wp_nav_menu() fallback, wp_page_menu(), to show a home link.
 */
function twentyeleven_page_menu_args( $args ) {
	$args['show_home']= true;
	return $args;
}
add_filter( 'wp_page_menu_args', 'twentyeleven_page_menu_args' );

/**
 * Returns a "Continue Reading" link for excerpts
 */
function twentyeleven_continue_reading_link() {
	return ' <a href="'. esc_url( get_permalink() ) . '">' . __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) . '</a>';
}

/**
 * Replaces "[...]" (appended to automatically generated excerpts) with an ellipsis and twentyeleven_continue_reading_link().
 *
 * To override this in a child theme, remove the filter and add your own
 * function tied to the excerpt_more filter hook.
 */
function twentyeleven_auto_excerpt_more( $more ) {
	return ' &hellip;' . twentyeleven_continue_reading_link();
}
add_filter( 'excerpt_more', 'twentyeleven_auto_excerpt_more' );

/**
 * Sets the post excerpt length to 40 words.
 *
 * To override this length in a child theme, remove the filter and add your own
 * function tied to the excerpt_length filter hook.
 */
function twentyeleven_excerpt_length( $length ) {
	return 40;
}
add_filter( 'excerpt_length', 'twentyeleven_excerpt_length' );

ドキュメントのサイズなどについて

Quick Specs (all measurements in pixels)

  1. The main column width is 625 except in the full-width layout where it’s 960; sidebar width is 250.
  2. Featured image width is 624 (height is flexible)—these images are displayed on displayed on “standard” posts; posts without a specific format such as image, aside, link, or quote.
  3. The suggested header image dimensions are 960 by 250 (width, height). However, both are flexible so you can upload a smaller cropped image if you wish. The width is limited to 2000.
  • http://themes.trac.wordpress.org/ticket/9199(Twenty Twelve ticket)

[emulsion_relate_posts]