WordPressの公式テーマであるTwenty Twelveはブログに適したシンプルな２カラムテーマです。
そのままでも使いやすいものの、インデックスページや見出しのフォントサイズなど微妙に気になるところがあります。
そこで自分好みにカスタマイズしました。子テーマとして作成しているので、Twenty TwelveをインストールしているWordPressで使用できます。
成果物はこちらからダウンロードしてください。
カスタマイズしたポイント
ヘッダー
メニューのリンクはテキスト部分にしか判定がなかったのですが、リストのブロック範囲でクリックできるようにしました。
あとパンくずがなかったのでメニュー下に追加しました。
スマホやタブレットではメニューを展開するボタンが表示されます。
サイドバーは下に回り込み、右側のSIDEBARボタンをタップするとサイドバーまでジャンプできます。
展開するとこんな感じ。
サイドバー
サイドバーの見出しがかなり小さかったので大きくして目立つようにしています。
スマホ表示だと最下部にTOPボタンがあり、これをタップするとページ最上部へジャンプします。
メインカラム
max-widthが960pxだったのを1200pxにして、メインカラムの横幅を広げています。
アーカイブの表示は、元は全文表示ですが抜粋のみを表示します。
サムネイルがある場合は左側に表示します。
アーカイブページの見出しが小さかったので大きくしました。
よく使う見出し2～4に装飾をつけてレベルをわかりやすくしました。
Gutenbergエディタ
変更した見出しのデザインがGutenbergでも表示されます。
ファビコン
ファビコンを設定しています。image/favicon.icoを入れ替えたら変わります。
コード
style.css
Twenty Twelveを親テーマとして使う場合、CSSの冒頭コメントのTempleteに親テーマのディレクトリを正確に入力する必要があります。
Twenty Twelveの場合は「twentytwleve」というディレクトリ名なのでその通り記述します。
そうすることで親テーマのstyle.cssを読み込んだ後に、子テーマのstyle.cssを読み込んでくれます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 |
/* 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
<?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>></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' ); } // 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
@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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<?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">→</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">→</span>', 'twentytwelve' ), get_the_author() ); ?> </a> </div><!-- .author-link --> </div><!-- .author-description --> </div><!-- .author-info --> <?php endif; ?> </footer><!-- .entry-meta --> </article><!-- #post --> |
header.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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; }); }); |
コメント