TwentyTwelveを(個人的に)最適化するカスタマイズ

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

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

実は、このブログでは元々TwentyTwelveを使っていて、似たような試みは既にやっていました。

そこからオリジナルテーマを作ってしばらく使っていたのですが、もう少しTwentyTwelveに学ぶことがあるだろうということで、このテーマに出戻りしましたテーマがアップデートされるとカスタマイズが全部パーなので、子テーマを使ってやりましょう。

同志の方がいらっしゃれば参考にしてみてください。

TwentyTwelveの気になるところ

まずはTwentyTwelveの気になるところを列挙します。あとから全部解消させます。その後にコードも紹介します。

ホームでは記事が全文表示される

ホームでは記事の一覧が表示されますが、コンテンツが全文表示されます。

本文は抜粋を表示するようにしたいところ。

見出しがわかりにくい

コンテンツで使うのは見出し2〜4なのですが、大きさが違うだけでレベルがわかりにくいです。

サイドバーとアーカイブページの見出しが小さい

「月別アーカイブ: 2014年1月」やサイドバーの「最近の投稿」などの見出しがあまりに小さいです。

メニューの仕様が惜しい

メニューは文字にポイントを合わせないとクリックできません。

スマホ表示用のブレークポイントは600pxに設定されており、メニュー展開ボタンが中央に出てきます。

「メニュー」ってちょっとダサいですね。

メニューを展開したところ。あまり映えないですね。

アイキャッチ画像が冒頭に表示される

わかりにくいのですが、記事タイトルの上にアイキャッチ画像が出てきます。

記事によってはいいのですが、冒頭に登場させる画像をアイキャッチに設定すると、タイトルを挟んで同じ画像が2枚出てきてしまいます。

最適化した後

記事一覧の本文は抜粋のみ表示

ホームでは本文が全文表示されていたところを、抜粋のみを表示するようにしました。抜粋は基本的に110文字表示されたと思います。

アイキャッチ画像があればこのように左端に表示させます。サイズは設定次第で変わると思います。

レイアウトとフォントについて

ついでにレイアウトとフォントについても変更があります。

950pxが横幅マックスだったのを1200pxにしました。これで掲載したコードが読みやすくなりますね。ちなみにサイドバーは250pxのまま。十分ですしね。

あとフォントをWinとMac共通で使える游ゴシックにし、本文の文字色を#444から#333に、フォントサイズを14pxから16px(スマホ表示では14pxのまま)に変更しました。

見出し

見出しはこんな感じ。#fafafaのカラーコードで主張し過ぎない程度に色を付けています。

Gutenbergにも反映

Gutenbergにも見出しや横幅、フォントの変更を反映させました。

サイドバーとアーカイブページの見出し

サイドバーとアーカイブの見出しも大きくしました。

あとアーカイブはカテゴリーなんかだと説明を表示できたと思いますが、その仕様には多分なってないですね。次の課題に。

パンくずを追加

TwentyTwelveは意外なことにパンくずがないんですよね。ってことで画像のようにパンくずを表示するようにしました。

メニューの改良

メニューはliをブロックで指定し、リンクの範囲を広げました。あとポイントした時に背景がハイライトするように変更。

スマホ表示の時のメニュー展開ボタンは左寄せにして、Font Awesomeを使った記号を添えて。

展開したらこんな感じ。

本当はメニューボタンは常時右下に表示させて、jQueryを使って上からメニューが降りてくる仕様にしたかったのですが、メニュー数が多すぎると、画面内に収まらない分は非表示になって不都合なんですよね。ある程度ページ構成が決まっていないとできませんね。

代わりにトップに戻るボタンとサイドバーまで飛ぶボタンを設置したいと目論んでいます。

冒頭のアイキャッチを非表示に

冒頭にアイキャッチが表示されないようにしました。

コード

ってなわけで以上の変更をまとめたコードです。

テーマ本体をカスタマイズしても良いのですが、アップデートされるとカスタマイズした分が全部消えてしまいます。

そこで子テーマを使ってカスタマイズを独立させてやりましょう。

cssは本体の追加分として、phpは本体にある分を無視して読み込みます。

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;
}

/* =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;
	}
	.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'));
}

// パンくず
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>></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>></li>';
				$str .= '<li><a href="'. get_month_link(get_query_var('year'), get_query_var('monthnum')). '">'. get_query_var('monthnum') .'月</a></li>';
				$str .= '<li>></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>></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>></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>></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>></li>';
				}
			}
			$str .= '<li><a href="'. get_category_link($cat -> term_id). '">'. $cat -> cat_name .'</a></li>';
			$str .= '<li>></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' );
}

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

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

EOM;
echo $headcustomtag;
}
add_action( 'wp_head', 'meta_headcustomtags', 99);

?>

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() ?>
			<?php if ( comments_open() ) : ?>
				<div class="comments-link">
					<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
				</div><!-- .comments-link -->
			<?php endif; // comments_open() ?>
		</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">→</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()):
					the_post_thumbnail("thumbnail");
				  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">→</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',
				)
			);
			?>
		</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(); ?>

ってな感じでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です