WordPressのオリジナルテーマであるTwentyTwelveは、ブログに適したシンプルなテーマです。
ところどころ気になるところがあるので、個人的に最適化させました。人によって何が最適なのかはバラバラなので、あくまで個人的に。
実は、このブログでは元々TwentyTwelveを使っていて、似たような試みは既にやっていました。
そこからオリジナルテーマを作ってしばらく使っていたのですが、もう少しTwentyTwelveに学ぶことがあるだろうということで、このテーマに出戻りしましたテーマがアップデートされるとカスタマイズが全部パーなので、子テーマを使ってやりましょう。
同志の方がいらっしゃれば参考にしてみてください。
コンテンツ
TwentyTwelveの気になるところ
まずはTwentyTwelveの気になるところを列挙します。あとから全部解消させます。その後にコードも紹介します。
ホームでは記事が全文表示される
ホームでは記事の一覧が表示されますが、コンテンツが全文表示されます。
本文は抜粋を表示するようにしたいところ。
見出しがわかりにくい
コンテンツで使うのは見出し２〜４なのですが、大きさが違うだけでレベルがわかりにくいです。
サイドバーとアーカイブページの見出しが小さい
「月別アーカイブ： 2014年1月」やサイドバーの「最近の投稿」などの見出しがあまりに小さいです。
メニューの仕様が惜しい
メニューは文字にポイントを合わせないとクリックできません。
スマホ表示用のブレークポイントは600pxに設定されており、メニュー展開ボタンが中央に出てきます。
「メニュー」ってちょっとダサいですね。
メニューを展開したところ。あまり映えないですね。
アイキャッチ画像が冒頭に表示される
わかりにくいのですが、記事タイトルの上にアイキャッチ画像が出てきます。
記事によってはいいのですが、冒頭に登場させる画像をアイキャッチに設定すると、タイトルを挟んで同じ画像が２枚出てきてしまいます。
最適化した後
記事一覧の本文は抜粋のみ表示
ホームでは本文が全文表示されていたところを、抜粋のみを表示するようにしました。抜粋は基本的に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(); ?>
ってな感じでした。