カテゴリー
WordPress

【WordPress】TwentySixteen の子テーマ作り記録♪

完成した TwentySixteen 子テーマ

TwentySixteen テーマは WordPress 4.4 以上が必要だそうですの。

2015年12月7日21時37分現在、まだ WordPress 4.4 はリリースされておりません。

ですけれども、TwentySixteen の子テーマをささやかながら作成し、未完成ではありますが一段落つきました。

そこでカスタマイズ内容を残しておきますの♪

全体の参考

-1. 準備

-1-1.親テーマインストール

テーマ > 新規追加 > 「Twenty Sixteen」で検索 > インストール

0. 必要最低限の子テーマを作成

0-1.ディレクトリの作成・設定

テーマを作成するディレクトリ wp-content/themes へ移動

ディレクトリ、ファイル作成、所有者設定

mkdir oki2a24com-twentysixteen-child
touch oki2a24com-twentysixteen-child/style.css
touch oki2a24com-twentysixteen-child/functions.php
chown -R nginx:nginx oki2a24com-twentysixteen-child/

子テーマへ移動

cd oki2a24com-twentysixteen-child/

0-2. style.css 編集

vim style.css

最低限の CSS を記述

/*
 Theme Name:   oki2a24.com, Twenty Sixteen Child
 Theme URI:    https://oki2a24.com/
 Description:  Twenty Sixteen テーマを基にした子テーマです。
 Author:       oki2a24.com
 Author URI:   https://oki2a24.com/
 Template:     twentysixteen
 Version:      1.0
*/

0-3. functions.php 編集

vim functions.php

/**
 * JavaScript や CSS を読み込みます。
 */
function enqueue_theme_scripts() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ,array(), '20151128' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_theme_scripts' );

0-4. テーマのテスト環境設定プラグイン

ログインしている時だけ、新しいテーマが適用されるようにいたします。

  1. プラグイン > 新規追加 > 「Theme Test Drive」で検索 > インストール > 有効化
  2. 外観 > Theme Test Drive、へ進み、On、テストテーマとなる子テーマを選択して「Enable Theme Drive」

これで環境が整いました♪

  • 最低限の子テーマの作成
  • ログインした管理者は子テーマを表示、ログインしない普通の訪問者は現在のテーマを表示

それでは、子テーマをいじって開発を進めてまいりましょう♪

カスタマイズ 1. more タグで URL 末端に付く #more-xxxx を削除

/**
 * more タグで URL 末端に付く #more-xxxx を削除します。
 */
function remove_more_link_scroll( $link ) {
        $link = preg_replace( '|#more-[0-9]+|', '', $link );
        return $link;
}
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );

カスタマイズ 2. Proudly powered by WordPress を消して著作権（コピーライト）を表示

「oki2a24 / Proudly powered by WordPress」 → 「©2015 oki2a24」と表示を変更いたします。

親テーマの footer.php を子テーマディレクトリにコピー

cp -a ../twentysixteen/footer.php footer.php

コピーした footer.php を編集

<span class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentysixteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentysixteen' ), 'WordPress' ); ?></a>

↓

&copy;<?php echo date( 'Y' ); ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php echo bloginfo( 'name' ); ?></a>

カスタマイズ 3. ナビゲーションメニューに検索フォームを追加

Twenty Sixteen の検索フォームをサイドメニューの一番上に表示するようにしてみました。

スマホで表示した時、Twenty Sixteen はサイドメニューをコンテンツの下に表示いたします。検索フォームも残念ながらページの一番下です＞＜。

わたくしたちは検索フォームをよく使います。これがページの一番下に表示されてしまうと検索するのが大変おっくうですの＞＜。

一番上に表示したいですわ！

そこで、上部メニューを表示させ、そこに検索フォームを追加いたします。

  • そもそもメニューをテーマに追加させる必要がある。これはプログラミング不要で管理メニューから設定できる。
    1. 外観 > メニュー
    2. なければ「メニューを編集」から新規メニュー作成
    3. 「位置の管理」で Primary Menu に先ほどのメニューを指定して「変更を保存」
  • コードを反映すると、自動的にメニューに追加される。場所はメニューの一番右。スマホではメニューの一番下。
  • そのため、検索フォームの位置を変更することはできない。
  • WordPress – ナビゲーションメニューに検索フォームを追加
/**
 * メニューに検索フォームを追加します。
 */
function add_search_box_to_menu( $items, $args ) {
    if( $args->theme_location == 'primary' ){
        return $items . '<li>' . get_search_form(false) . '</li>';
    }
}
add_filter( 'wp_nav_menu_items', 'add_search_box_to_menu', 10, 2);

カスタマイズ 4. フォントの変更

Twenty Sixteen テーマのフォントは日本語に対応しておりません＞＜。

そこで、全体のフォントに Noto Sans Japanese を指定し、それでも反映されない投稿タイトルと投稿本体をさらに指定するようにいたしました。

サイドメニューなど、反映されない部分は残っておりますけれども、それはそのままといたしました。

4-1. フォントの読み込み

/**
 * JavaScript や CSS を読み込みます。
 */
function enqueue_theme_scripts() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ,array(), '20151128' );
    wp_enqueue_style( 'twentysixteen-child-fonts', '//fonts.googleapis.com/earlyaccess/notosansjapanese.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_theme_scripts' );

4-2. CSS でフォントの指定

  • 親テーマの CSS でフォント全体を規定している部分を上書きする形で Noto Sans Japanese を指定
  • 新フォントが適用されず、変更したい部分は個別に font-family: inherit; を書くことで上書きして指定
/**
 * 1.0 - Normalize
 *
 * Normalizing styles have been helped along thanks to the fine work of
 * Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
 */

html {
	font-family: 'Noto Sans Japanese', sans-serif;
}

/**
 * 3.0 - Typography
 */

body,
button,
input,
select,
textarea {
	font-family: inherit;
}

/**
 * 11.2 - Posts and pages
 */

.entry-title {
	font-family: inherit;
}

カスタマイズ 5. 投稿本文内の h2、h3 の装飾を含めた、見出しの調整

/**
 * 投稿の h2 ~ h6
 */
.entry-content h2, h3, h4, h5, h6 {
    margin: 1.35em 0 .7em;
}

.entry-content h2 + ol, .entry-content h2 + p, .entry-content h2 + ul,
.entry-content h3 + ol, .entry-content h3 + p, .entry-content h3 + ul,
.entry-content h4 + ol, .entry-content h4 + p, .entry-content h4 + ul,
.entry-content h5 + ol, .entry-content h5 + p, .entry-content h5 + ul,
.entry-content h6 + ol, .entry-content h6 + p, .entry-content h6 + ul {
    margin-top: 0;
}

.entry-content h2 {
  border-bottom: solid 3px #eee;
  line-height: 1.2;
  margin-bottom: 12px;
  margin-top: 64px;
  padding-bottom: 8px;
}

.entry-content h2 + h3 {
    margin-top: 24px;
}

.entry-content h3 {
  border-bottom: solid 1px #eee;
  line-height: 1.225;
  margin-bottom: 12px;
  margin-top: 64px;
  padding-bottom: 8px;
}

.entry-content h4 {
    margin-top: 1.3em;
    text-transform: none;
}

.entry-content h5 {
    margin-top: 1.5em;
}

.entry-content h6 {
    margin-top: 1.5em;
    color: #777;
}

カスタマイズ 6. ヘッダー画像の設置（1枚だけの例）

6-1. ヘッダー画像を images/headers/ にアップロード

ディレクトリを作成

mkdir -p images/
mkdir -p images/headers/

ヘッダー画像を images/headers/ にアップロードし、所有者を設定

chown -R nginx:nginx images/

6-2. functions.php への追加コード

次を追加

/**
 * 親テーマのセットアップに追加する処理を定義します。
 */
function oki2a24_twentysixteen_child_setup() {
        // デフォルトヘッダー画像を設定
        register_default_headers( array(
            'P1010303' => array(
                'url' => '%2$s/images/headers/P1010303.jpg',
                'thumbnail_url' => '%2$s/images/headers/P1010303-thumbnail.jpg',
                'description' => 'P1010303'
            )
        ) );
}
add_action( 'after_setup_theme', 'oki2a24_twentysixteen_child_setup' );

カスタマイズ 7. 投稿日だけでなく、更新日を表示

投稿ウェブページには投稿ページが表示されております。更新日も表示してメンテナンスされている投稿かどうか分かるようにしたいですの♪

ウェブページの HTML ソースをを見てみますと、更新日時はすでに書かれておりました。ただ、これを CSS であえて見えないようにしてあります。

どのような意図かしら？わかりませんけれども、気にせずカスタマイズを進めますの♪

  • 更新日時を表示させると、投稿日とくっついており見辛い。よって、さらなるカスタマイズが必要
    • 投稿日と更新日の前にアイコンを表示することで、意味付けと、視認性を向上させる。
    • 検索ボタンはアイコンフォントの Genericons を使用しているため、合わせる。
    • TwentyFifteen の投稿日HTML <span class="posted-on"> に対する CSS は次。これを候補のひとつにするのが良さそう。 
      .posted-on:before {
	content: "\f307";
}
    • TwentyFourteen は \f303 。こちらのほうがよいか？これも候補に。
    • 更新日時は \f420 が良さそう。
  • CSS で更新日時を非表示している部分を表示に変更する。
  • HTML ソースをカスタマイズする必要なしだった。もし修正するなら、functions.php に inc/template-tags.php の twentysixteen_entry_date 関数を定義してやれば良い。

7-1. style.css

/**
 * 2.0 - Genericons
 */

.menu-item-has-children a:after,
.social-navigation a:before,
.dropdown-toggle:after,
.bypostauthor > article .fn:after,
.comment-reply-title small a:before,
.pagination .prev:before,
.pagination .next:before,
.pagination .nav-links:before,
.pagination .nav-links:after,
.search-submit:before,
.published:before,
.updated:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-family: "Genericons";
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 1;
	speak: none;
	text-align: center;
	text-decoration: inherit;
	text-transform: none;
	vertical-align: top;
}

/**
 * 投稿日時アイコン、更新日時アイコン
 */
.published:before {
    content: "\f303";
    font-size: 19px;
    margin-right: 1px;
    position: relative;
    top: 1px;
}
/**
 * IE8 and earlier will drop any block with CSS3 selectors.
 * Do not combine these styles with the next block.
 */
.updated:not(.published) {
    display: inherit;
}
.updated:before {
    content: "\f420";
    margin-right: 1px;
    position: relative;
    top: 1px;
}

カスタマイズ 8. 子テーマのサムネイルを追加 (2015年12月11日追加)

  1. 880 x 660 px の png 画像をテーマのサムネイルとして用意
  2. ファイルを子テーマのルートディレクトリに置く
  3. テーマ > 外観、から子テーマのサムネイルが表示されていることを確認

詳細な手順はこちら。

完成！その姿と子テーマコードまとめ

完成した TwentySixteen 子テーマ

ディレクトリ、ファイル構成ですの。headers ディレクトリにはこれからさらにヘッダー画像を増やしていく予定ですわ♪

# tree oki2a24com-twentysixteen-child/
oki2a24com-twentysixteen-child/
|-- footer.php
|-- functions.php
|-- images
|   `-- headers
|       |-- P1010303-thumbnail.jpg
|       |-- P1010303.jpg
|       |-- P1083464-thumbnail.jpg
|       |-- P1083464.jpg
|       |-- PC312989-thumbnail.jpg
|       |-- PC312989.jpg
|       |-- R0013152-thumbnail.jpg
|       `-- R0013152.jpg
|-- screenshot.png
`-- style.css

2 directories, 12 files
#

footer.php はほとんど親テーマのままで、最下部のクレジット部分のみ、変更しております。

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the #content div and all content after
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */
?>

		</div><!-- .site-content -->

		<footer id="colophon" class="site-footer" role="contentinfo">
			<?php if ( has_nav_menu( 'primary' ) ) : ?>
				<nav class="main-navigation" role="navigation" aria-label="<?php _e( 'Footer Primary Menu', 'twentysixteen' ); ?>">
					<?php
						wp_nav_menu( array(
							'theme_location' => 'primary',
							'menu_class'     => 'primary-menu',
						 ) );
					?>
				</nav><!-- .main-navigation -->
			<?php endif; ?>

			<?php if ( has_nav_menu( 'social' ) ) : ?>
				<nav class="social-navigation" role="navigation" aria-label="<?php _e( 'Footer Social Links Menu', 'twentysixteen' ); ?>">
					<?php
						wp_nav_menu( array(
							'theme_location' => 'social',
							'menu_class'     => 'social-links-menu',
							'depth'          => 1,
							'link_before'    => '<span class="screen-reader-text">',
							'link_after'     => '</span>',
						) );
					?>
				</nav><!-- .social-navigation -->
			<?php endif; ?>

			<div class="site-info">
				<?php
					/**
					 * Fires before the twentysixteen footer text for footer customization.
					 *
					 * @since Twenty Sixteen 1.0
					 */
					do_action( 'twentysixteen_credits' );
				?>
				&copy;<?php echo date( 'Y' ); ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
			</div><!-- .site-info -->
		</footer><!-- .site-footer -->
	</div><!-- .site-inner -->
</div><!-- .site -->

<?php wp_footer(); ?>
</body>
</html>

functions.php は //add_action( 'after_setup_theme', 'oki2a24_twentysixteen_child_setup' ); を有効にするとヘッダーより下が表示されませんためコメントにしております。WordPress 4.4 がリリースされましたらコメントを取ってみる予定ですわ♪

2015年12月9日追記: WordPress 4.4 へアップデートして add_action コメントを取り除いても正常に動きました♪

<?php
/**
 * JavaScript や CSS を読み込みます。
 */
function enqueue_theme_scripts() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ,array(), '20151207' );
    wp_enqueue_style( 'twentysixteen-child-fonts', '//fonts.googleapis.com/earlyaccess/notosansjapanese.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_theme_scripts' );

/**
 * more タグで URL 末端に付く #more-xxxx を削除します。
 */
function remove_more_link_scroll( $link ) {
    $link = preg_replace( '|#more-[0-9]+|', '', $link );
    return $link;
}
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );

/**
 * メニューに検索フォームを追加します。
 */
function add_search_box_to_menu( $items, $args ) {
    if( $args->theme_location == 'primary' ){
        return $items . '<li>' . get_search_form(false) . '</li>';
    }
}
add_filter( 'wp_nav_menu_items', 'add_search_box_to_menu', 10, 2);

/**
 * 親テーマのセットアップに追加する処理を定義します。
 */
function oki2a24_twentysixteen_child_setup() {
    // デフォルトヘッダー画像を設定
    register_default_headers( array(
        'P1010303' => array(
            'url' => '%2$s/images/headers/P1010303.jpg',
            'thumbnail_url' => '%2$s/images/headers/P1010303-thumbnail.jpg',
            'description' => 'P1010303'
        ),
        'PC312989' => array(
            'url' => '%2$s/images/headers/PC312989.jpg',
            'thumbnail_url' => '%2$s/images/headers/PC312989-thumbnail.jpg',
            'description' => 'PC312989'
        ),
        'P1083464' => array(
            'url' => '%2$s/images/headers/P1083464.jpg',
            'thumbnail_url' => '%2$s/images/headers/P1083464-thumbnail.jpg',
            'description' => 'P1083464'
        ),
        'R0013152' => array(
            'url' => '%2$s/images/headers/R0013152.jpg',
            'thumbnail_url' => '%2$s/images/headers/R0013152-thumbnail.jpg',
            'description' => 'R0013152'
        )
    ) );
}
add_action( 'after_setup_theme', 'oki2a24_twentysixteen_child_setup' );

style.css は親テーマの順番を意識して、並べています。

/*
 Theme Name:   oki2a24.com, Twenty Sixteen Child
 Theme URI:    https://oki2a24.com/
 Description:  Twenty Sixteen テーマを基にした子テーマです。
 Author:       oki2a24.com
 Author URI:   https://oki2a24.com/
 Template:     twentysixteen
 Version:      1.0
*/


/**
 * 1.0 - Normalize
 *
 * Normalizing styles have been helped along thanks to the fine work of
 * Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
 */

html {
	font-family: 'Noto Sans Japanese', sans-serif;
}


/**
 * 2.0 - Genericons
 */

.menu-item-has-children a:after,
.social-navigation a:before,
.dropdown-toggle:after,
.bypostauthor > article .fn:after,
.comment-reply-title small a:before,
.pagination .prev:before,
.pagination .next:before,
.pagination .nav-links:before,
.pagination .nav-links:after,
.search-submit:before,
.published:before,
.updated:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-family: "Genericons";
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 1;
	speak: none;
	text-align: center;
	text-decoration: inherit;
	text-transform: none;
	vertical-align: top;
}


/**
 * 3.0 - Typography
 */

body,
button,
input,
select,
textarea {
	font-family: inherit;
}


/**
 * 11.2 - Posts and pages
 */

.entry-title {
	font-family: inherit;
}

/**
 * 投稿の h2 ~ h6
 */
.entry-content h2, h3, h4, h5, h6 {
    margin: 1.35em 0 .7em;
}

.entry-content h2 + ol, .entry-content h2 + p, .entry-content h2 + ul,
.entry-content h3 + ol, .entry-content h3 + p, .entry-content h3 + ul,
.entry-content h4 + ol, .entry-content h4 + p, .entry-content h4 + ul,
.entry-content h5 + ol, .entry-content h5 + p, .entry-content h5 + ul,
.entry-content h6 + ol, .entry-content h6 + p, .entry-content h6 + ul {
    margin-top: 0;
}

.entry-content h2 {
  border-bottom: solid 3px #eee;
  line-height: 1.2;
  margin-bottom: 12px;
  margin-top: 64px;
  padding-bottom: 8px;
}

.entry-content h2 + h3 {
    margin-top: 24px;
}

.entry-content h3 {
  border-bottom: solid 1px #eee;
  line-height: 1.225;
  margin-bottom: 12px;
  margin-top: 64px;
  padding-bottom: 8px;
}

.entry-content h4 {
    margin-top: 1.3em;
    text-transform: none;
}

.entry-content h5 {
    margin-top: 1.5em;
}

.entry-content h6 {
    margin-top: 1.5em;
    color: #777;
}

/**
 * 投稿日時アイコン、更新日時アイコン
 */
.published:before {
    content: "\f303";
    font-size: 19px;
    margin-right: 1px;
    position: relative;
    top: 1px;
}

/**
 * IE8 and earlier will drop any block with CSS3 selectors.
 * Do not combine these styles with the next block.
 */
.updated:not(.published) {
    display: inherit;
}

.updated:before {
    content: "\f420";
    margin-right: 1px;
    position: relative;
    top: 1px;
}

2015年12月9日追記。TwentySixteen 子テーマへの切り替え。

  1. WordPress 4.4 へアップデートする。
  2. Theme Test Drive を停止する。
  3. 子テーマの oki2a24.com, Twenty Sixteen Child を有効にする。
  4. 外観 > ヘッダー > 「おすすめヘッダーをランダム表示」 > 保存して公開

以上の手順で作成した TwentySixteen 子テーマへと切り替え完了いたしました♪

補足 1. ログインユーザーだけに開発中のテーマを表示するようにするプラグイン選定！

なお、Theme Test Drive プラグインは一時期公式プラグインから無くなっておりました。そこで、WP Theme Test を使うのがよいかしら？日本語ですしと思いましたの。

WP Theme Test プラグインの使い方

  1. プラグイン > 新規追加 > 「WP Theme Test」で検索 > インストール > 有効化
  2. 外観 > WP Theme Test、へ進み、On、テストテーマを選択して「変更を保存」

ところが、WP Theme Test プラグインは子テーマを有効にできません＞＜。

そのようなわけで、すでにインストールしてあった Theme Test Drive プラグインを引き続き使用しておりましたら公式プラグインにしれっと復活しておりましわ！こんなことってあるのですね。。。

補足 2. Twenty Sixteen の対応 WordPress バージョンについて

Twenty Sixteen は WordPress のバージョン 4.4 からの対応となっております。

ですので、ただ切り替えるだけでは使用できません。次のページが表示されてしまいます＞＜。

Twenty Sixteen requires at least WordPress version 4.4. You are running version 4.3.1. Please upgrade and try again.

また、公開済み投稿ならば正常に表示されますけれども、下書きの投稿をプレビュー表示させようとしますと上記のエラーとなってしまいます。

これは、URL からプレビューのパラメータを削除することで表示可能となりました！例えば、「https://oki2a24.com/?p=8411&preview=true」→「https://oki2a24.com/?p=8411」としてアクセスすればよろしいですわ♪

今回、たまたま Theme Test Drive プラグインが Twenty Sixteen の子テーマ表示に対応しているため、先行してのテーマカスタマイズが可能となりました♪

おわりに

今回は、Twenty Sixteen が使える WordPress 4.4 がリリースされる前に、カスタマイズを進めておりました。

4.4 がリリースされたらすぐに切り替えたいと思っておりましたのでちょうどよい締め切り設定となりました♪

2015年12月7日(月)午前に、TwentySixteen 0.1.20151205 から 1.0 に更新されましたの♪あとは、WordPress が 4.4 になるのを待つばかり (一部カスタマイズ終わっておりませんけれども＞＜) ですわ。

以上です。

コメントを残す