Twenty Twelveを最適化するカスタマイズ子テーマ

WordPressのオリジナルテーマであるTwentyTwelveは、ブログに適したシンプルなテーマです。

ところどころ気になるところがあるので、個人的に最適化させました。人によって何が最適なのかはバラバラなので、あくまで個人的に。

カスタマイズしたポイント

ヘッダー

メニューのリンクはテキスト部分にしか判定がなかったのですが、リストのブロック範囲でクリックできるようにしました。

あとパンくずがなかったのでメニュー下に追加しました。

スマホやタブレットではメニューを展開するボタンが表示されます。

サイドバーは下に回り込み、右側のSIDEBARボタンをタップするとサイドバーまでジャンプできます。

展開するとこんな感じ。

サイドバー

サイドバーの見出しがかなり小さかったので大きくして目立つようにしています。

スマホ表示だと最下部にTOPボタンがあり、これをタップするとページ最上部へジャンプします。

メインカラム

max-widthが960pxだったのを1200pxにして、メインカラムの横幅を広げています。

アーカイブの表示は、元は全文表示ですが抜粋のみを表示します。

サムネイルがある場合は左側に表示します。

アーカイブページの見出しが小さかったので大きくしました。

よく使う見出し2～4に装飾をつけてレベルをわかりやすくしました。

Gutenbergエディタ

変更した見出しのデザインがGutenbergでも表示されます。

ファビコン

ファビコンを設定しています。image/favicon.icoを入れ替えたら変わります。

コード

親テーマをインストールした状態で、子テーマとしてこちらの子テーマをインストールしてください。

https://www.iehohs.com/ftp/twentytwelve-child.zip

style.css

Twenty Twelveを親テーマとして使う場合、CSSの冒頭コメントのTempleteに親テーマのディレクトリを正確に入力する必要があります。

Twenty Twelveの場合は「twentytwleve」というディレクトリ名なのでその通り記述します。

そうすることで親テーマのstyle.cssを読み込んだ後に、子テーマのstyle.cssを読み込んでくれます。

/*
Theme Name:Twenty Twelve (Child)
Theme URI:
Description:WordPressテーマ「Twenty Twelve」の自作子テーマです。
Template:twentytwelve
Author:iEhohs.com
Author URI:https://www.iehohs.com/
Version:3.0
*/

/* =Basic structure
-------------------------------------------------------------- */

/* Body, links, basics */
body {
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	color: #333;
}
body.custom-font-enabled {
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}

/* Page structure */
.site {
	padding: 0 10px;
}
.site-header h1,
.site-header h2 {
	text-align: left;
}

/* Navigation Menu */
.main-navigation li {
	margin-top: 0;
}
.main-navigation  ul {
	background: #fafafa;
	text-align: left;
}
.main-navigation li a {
	display: block;
	padding: 1em 1.2em;
	line-height: 2;
	text-decoration: none;
 }
.main-navigation li a:hover {
	background: #efefef;
}
.main-navigation ul.nav-menu.toggled-on {
	width: 100%;
}
.menu-toggle {
	float: left;
}

/* Breadcrmb */
.breadcrumb {
	font-size: 90%;
	margin-bottom: 5px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	clear: both;
}
.breadcrumb li {
	float: left;
	margin-right: .5em;
}
.archive-title, 
.page-title, 
.widget-title {
	font-size: 1.2em;
}

/* Sidebar */
.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget {
	font-size: 14px;
}

/* Buttons */
.sidebar-btn,
.top-btn {
	float: right;
	padding: 6px 10px;
	padding: 0.428571429rem 0.714285714rem;
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 1.428571429;
	font-weight: normal;
	color: #7c7c7c;
	background-color: #e6e6e6;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: linear-gradient(to bottom, #f4f4f4, #e6e6e6);
	border: 1px solid #d2d2d2;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
	cursor: pointer;
}
.sidebar-btn:hover,
.sidebar-btn:focus,
.top-btn:hover,
.top-btn:focus{
	color: #5e5e5e;
	background-color: #ebebeb;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: linear-gradient(to bottom, #f9f9f9, #ebebeb);
}
.sidebar-btn:active,
.top-btn:active {
	color: #757575;
	background-color: #e1e1e1;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: linear-gradient(to bottom, #ebebeb, #e1e1e1);
	box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
	border-color: transparent;
}

/* =Main content and comment content
-------------------------------------------------------------- */
.entry-header .entry-title {
	font-size: 1.5em;
	font-weight: bold;
}
.entry-content h1,
.comment-content h1,
.entry-content h2,
.comment-content h2,
.entry-content h3,
.comment-content h3,
.entry-content h4,
.comment-content h4 {
	font-size: 1.2em;
	font-weight: bold;
}
.entry-content h2,
.comment-content h2 {
	padding: 0.5em;
	border-left: 2px solid #333;
	background: #fafafa;
}
.entry-content h3,
.comment-content h3 {
    border-bottom: 5px solid #fafafa;
}
.entry-thumb {
	float: left;
	margin-right: 10px;
}

/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
	.site-content {
		float: left;
		width: 70.833333333%;
	}
	.widget-area {
		max-width: 250px;
	}
	.main-navigation  ul {
		background: none;
		text-align: center;
	}
	.sidebar-btn,
	.top-btn {
		display: none;
	}
	.main-navigation li,
	.main-navigation li a {
		margin-right: 0;
		float: left;
		border-top: 0;
	}
	.entry-content h1,
	.comment-content h1,
	.entry-content h2,
	.comment-content h2 {
		font-size: 1.4em;
	}
	.entry-content h3,
	.comment-content h3 {
		font-size: 1.3em;
	}
}

/* Minimum width of 960pixels. */
@media screen and (min-width: 960px) {
	body {
		font-size: 16px;
	}
	body .site {
		padding: 0 30px;
	}
}

/* Minimum width of 1200pixels. */
@media screen and (min-width: 1200px) {
	.site,
	footer[role="contentinfo"] {
		max-width: 1200px;
	}
	.site-content {
		width: 76.666666666%;
	}
}

/* Clearfix */
.main-navigation:after,
.breadcrumb:after {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: " ";
	font-size: 0;
}

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
// サイドバーボタン
wp_enqueue_script( 'scroll', get_stylesheet_directory_uri() . '/js/scroll.js', array( 'jquery' ), null, true );

// パンくず
function breadcrumb() {
	global $post;
 	$str = '';
 	if (!is_home() && !is_admin()){
 		$str .= '<div class="breadcrumb">';
		$str .= '<ul>';
		$str .= '<li><a href="'. home_url('/') .'/">ホーム</a></li>';
 		$str .= '<li>&gt;</li>'; 
	  
		if (is_search()){
			$str .= '<li>「'. get_search_query() .'」で検索した結果</li>';
		} elseif (is_tag()){
			$str .= '<li>タグ：'. single_tag_title('', false). '</li>';
		} elseif (is_404()){
			$str .= '<li>404 Not found</li>';
		} elseif (is_date()){
			if(is_day()){
				$str .= '<li><a href="'. get_year_link(get_query_var('year')) .'">'. get_query_var('year') .'年</a></li>';
				$str .= '<li>&gt;</li>';
				$str .= '<li><a href="'. get_month_link(get_query_var('year'), get_query_var('monthnum')). '">'. get_query_var('monthnum') .'月</a></li>';
				$str .= '<li>&gt;</li>';
				$str .= '<li>'. get_query_var('day'). '日</li>';
			} elseif(is_month()){
				$str .='<li><a href="'. get_year_link(get_query_var('year')) .'">'. get_query_var('year') .'年</a></li>';
				$str .='<li>&gt;</li>';
				$str .='<li>'. get_query_var('monthnum') . '月</li>';
			} else {
				$str .='<li>'. get_query_var('year') .'年</li>';
			}
		} elseif (is_category()){
			$cat = get_queried_object();
			if ($cat -> parent != 0){
				$ancestors = array_reverse(get_ancestors($cat -> cat_ID, 'category' ));
				foreach ($ancestors as $ancestor){
					$str .='<li><a href="'. get_category_link($ancestor) .'">'. get_cat_name($ancestor) .'</a></li>';
					$str .='<li>&gt;</li>';
				}
			}
			$str .='<li>'. $cat -> name .'</li>';
		} elseif (is_author()){
			$str .= '<li>投稿者：'. get_the_author_meta('display_name', get_query_var('author')). '</li>';
		} elseif (is_page()){
			if ($post -> post_parent != 0){
				$ancestors = array_reverse(get_post_ancestors($post -> ID));
				foreach ($ancestors as $ancestor){
					$str .= '<li><a href="'. get_permalink($ancestor). '">'. get_the_title($ancestor) .'</a></li>';
					$str .= '<li>&gt;</li>';
				}
			}
		$str .= '<li>'. $post -> post_title .'</li>';
		} elseif (is_attachment()){
			$str .= '<li>'. $post -> post_title .'</li>';
		} elseif (is_single()){
			$categories = get_the_category($post->ID);
			$cat = $categories[0];
			if ($cat -> parent != 0){
				$ancestors = array_reverse(get_ancestors($cat -> cat_ID, 'category'));
				foreach ($ancestors as $ancestor){
					$str .= '<li><a href="'. get_category_link($ancestor) .'">'. get_cat_name($ancestor). '</a></li>';
					$str .= '<li>&gt;</li>';
				}
			}
			$str .= '<li><a href="'. get_category_link($cat -> term_id). '">'. $cat -> cat_name .'</a></li>';
			$str .= '<li>&gt;</li>';
			$str .= '<li>'. $post -> post_title .'</li>';
		} else {
			$str .= '<li>'. wp_title('', true) .'</li>';
		}
		$str .= '</ul>';
		$str .= '</div>';
 	}
	echo $str;
}

// Gutenberg
add_action( 'after_setup_theme', 'nxw_setup_theme' );
function nxw_setup_theme() {
  add_theme_support( 'editor-styles' );
  add_editor_style( 'editor-style.css' );
}

// Favicon
add_action(
    'wp_head', function() {
        echo '<link rel="shortcut icon" href="' . get_stylesheet_directory_uri() . '/image/favicon.ico"/>';
    }
);

// head内にカスタム用のコードを追加する
function meta_headcustomtags() {
$headcustomtag = <<<EOM

<!-- headに表示させたいコードはここに記述 -->

EOM;
echo $headcustomtag;
}
add_action( 'wp_head', 'meta_headcustomtags', 99);
// head内カスタム用のコードここまで
?>

editor-style.css

@charset "utf-8";
.editor-post-title__input,
.wp-block {
	max-width: 920px;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	color: #333;
	line-height: 1.5;
}
.editor-post-title__input {
	font-size: 1.5em;
	font-weight: bold;
}
h2,
h3,
h4 {
	font-weight: bold;
}
h2 {
	padding: 0.5em;
	border-left: 2px solid #333;
	background: #fafafa;
	font-size: 1.4em;
}
h3 {
	border-bottom: 5px solid #fafafa;
	font-size: 1.3em;
}

content.php

<?php
/**
 * The default template for displaying content
 *
 * Used for both single and index/archive/search.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?>

	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
		<div class="featured-post">
			<?php _e( 'Featured post', 'twentytwelve' ); ?>
		</div>
		<?php endif; ?>
		<header class="entry-header">

			<?php if ( is_single() ) : ?>
			<h1 class="entry-title"><?php the_title(); ?></h1>
			<?php else : ?>
			<h1 class="entry-title">
				<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
			</h1>
			<?php endif; // is_single() ?>
			
		</header><!-- .entry-header -->

		<?php if ( is_single() ) : // Only display thumbnail and excerpts for single. ?>
		<div class="entry-content">
			<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>
			<?php
			wp_link_pages(
				array(
					'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ),
					'after'  => '</div>',
				)
			);
			?>
		</div><!-- .entry-content -->
			<?php else : ?>
			<div class="entry-summary">
				<div class="entry-thumb">
				  <?php
				  if (has_post_thumbnail()): ?>
					<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_post_thumbnail("thumbnail"); ?></a>
				  <?php endif; ?>
				</div>
				<?php the_excerpt(); ?>
			</div><!-- .entry-summary -->
		<?php endif; ?>

		<footer class="entry-meta">
			<?php twentytwelve_entry_meta(); ?>
			<?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
			<?php
			// If a user has filled out their description and this is a multi-author blog, show a bio on their entries.
			if ( is_singular() && get_the_author_meta( 'description' ) && is_multi_author() ) :
				?>
				<div class="author-info">
					<div class="author-avatar">
						<?php
						/** This filter is documented in author.php */
						$author_bio_avatar_size = apply_filters( 'twentytwelve_author_bio_avatar_size', 68 );
						echo get_avatar( get_the_author_meta( 'user_email' ), $author_bio_avatar_size );
						?>
					</div><!-- .author-avatar -->
					<div class="author-description">
						<h2>
						<?php
						/* translators: %s: Author display name. */
						printf( __( 'About %s', 'twentytwelve' ), get_the_author() );
						?>
						</h2>
						<p><?php the_author_meta( 'description' ); ?></p>
						<div class="author-link">
							<a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
							<?php
							/* translators: %s: Author display name. */
							printf( __( 'View all posts by %s <span class="meta-nav">&rarr;</span>', 'twentytwelve' ), get_the_author() );
							?>
							</a>
						</div><!-- .author-link	-->
					</div><!-- .author-description -->
				</div><!-- .author-info -->
			<?php endif; ?>
		</footer><!-- .entry-meta -->
	</article><!-- #post -->

header.php

<?php
/**
 * The Header template for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php echo esc_url( get_bloginfo( 'pingback_url' ) ); ?>">
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js?ver=3.7.0" type="text/javascript"></script>
<![endif]-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

		<nav id="site-navigation" class="main-navigation" role="navigation">
			<!-- メニューボタン -->
			<button class="menu-toggle"> <i class="fas fa-bars"></i> MENU</button>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php
			wp_nav_menu(
				array(
					'theme_location' => 'primary',
					'menu_class'     => 'nav-menu',
				)
			);
			?>
		<!-- サイドバーボタン -->
		<button class="sidebar-btn"><i class="fas fa-angle-double-down"></i> SIDEBAR</button>
		</nav><!-- #site-navigation -->
		
		<?php if ( get_header_image() ) : ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /></a>
		<?php endif; ?>
		
	</header><!-- #masthead -->

	<div id="main" class="wrapper">
		<!-- パンくず -->
		<?php breadcrumb(); ?>

index.php

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * For example, it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" role="main">
		<?php if ( have_posts() ) : ?>

			<?php
			// Start the Loop.
			while ( have_posts() ) :
				the_post();
				?>
				<?php get_template_part( 'content', get_post_format() ); ?>
			<?php endwhile; ?>

			<?php twentytwelve_content_nav( 'nav-below' ); ?>

		<?php else : ?>

			<article id="post-0" class="post no-results not-found">

			<?php
			if ( current_user_can( 'edit_posts' ) ) :
				// Show a different message to a logged-in user who can add posts.
				?>
				<header class="entry-header">
					<h1 class="entry-title"><?php _e( 'No posts to display', 'twentytwelve' ); ?></h1>
				</header>

				<div class="entry-content">
					<p>
					<?php
					/* translators: %s: Post editor URL. */
					printf( __( 'Ready to publish your first post? <a href="%s">Get started here</a>.', 'twentytwelve' ), admin_url( 'post-new.php' ) );
					?>
					</p>
				</div><!-- .entry-content -->

				<?php
			else :
				// Show the default message to everyone else.
				?>
				<header class="entry-header">
					<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentytwelve' ); ?></h1>
				</header>

				<div class="entry-content">
					<p><?php _e( 'Apologies, but no results were found. Perhaps searching will help find a related post.', 'twentytwelve' ); ?></p>
					<?php get_search_form(); ?>
				</div><!-- .entry-content -->
			<?php endif; // End current_user_can() check. ?>

			</article><!-- #post-0 -->

		<?php endif; // End have_posts() check. ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

sidebar.php

<?php
/**
 * The sidebar containing the main widget area
 *
 * If no active widgets are in the sidebar, hide it completely.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?>

	<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
		<div id="secondary" class="widget-area" role="complementary">
			<?php dynamic_sidebar( 'sidebar-1' ); ?>
			<!-- トップボタン -->
			<button class="top-btn"><i class="fas fa-angle-double-up"></i> TOP</button>
		</div><!-- #secondary -->
	<?php endif; ?>

js/scroll.js

jQuery(function() {
    jQuery(".sidebar-btn").click(function () {
        var i = jQuery(".sidebar-btn").index(this);
        var p = jQuery("#secondary").eq(i).offset().top;
        jQuery('html,body').animate({ scrollTop: p }, '1000');
        return false;
    });
	
	jQuery(".top-btn").click(function () {
        jQuery('html,body').animate({ scrollTop: 0 }, '1000');
        return false;
    });
});