twentyseventeen覚書

WordPressテーマのtwentyseventeenについてメモするところがほしくて自分用覚書エントリ。増えたり減ったり。

Twenty Seventeenテーマ配布先

Twenty Seventeen

WordPress version 4.7以上。
（Twenty Seventeen requires at least WordPress version 4.7. You are running version 今使っているWPのバージョン. Please upgrade and try again.　とか表示されるので先に本体をアップデートしておく。）

functions.php

load_theme_textdomain

テーマ翻訳ファイルを読み込む
関数リファレンス/load theme textdomain

add_theme_support

テーマやプラグインが特定のテーマ機能をサポートすることを許可する。

• post-formats（投稿フォーマット）
• post-thumbnails（投稿サムネイル）
• custom-background（カスタム背景）
• custom-header（カスタムヘッダー）
• automatic-feed-links（フィードリンク）
• html5（HTML5）
• title-tag（Title タグ）

関数リファレンス/add theme support

カスタムロゴ

	add_theme_support(
		'custom-logo',
		array(
			'width'      => 250,
			'height'     => 250,
			'flex-width' => true,
		)
	);

flex-widthだと「切り抜かない」が表示されないので、推奨サイズ以外のロゴを設置する場合は取ってしまったほうが早い。

register_nav_menus

ナビゲーションメニュー機能を使う

	register_nav_menus( array(
		'top'    => __( 'Top Menu', 'twentyseventeen' ),
		'social' => __( 'Social Links Menu', 'twentyseventeen' ),
	) );

関数リファレンス/register nav menus

実際にナビゲーションメニューを表示したい箇所には

	<?php wp_nav_menu( array(
		'theme_location' => 'top',
		'menu_id'        => 'top-menu',
	) ); ?>

menu_idでid属性を付与できるけど、menu_classも使えたのでクラス属性がほしい場合はmenu_classを使用するメモ。
複数のclassが必要な場合は半角スペースで間をあける（文字列として出力されるので）

'menu_class'        => 'nav text-center',

他にもいろいろある。
container_classに入れたい値がなぜかmenu_classの方に反映されてしまう症状に遭ったんだけど、
'menu'=> '',　←このパラメータで表示したいメニュー指定したら改善されたので併せてメモ。

wp_enqueue_style

CSSスタイルファイルを読み込ませる

	wp_enqueue_style( 'twentyseventeen-ie8', get_theme_file_uri( '/assets/css/ie8.css' ), array( 'twentyseventeen-style' ), '1.0' );
	wp_style_add_data( 'twentyseventeen-ie8', 'conditional', 'lt IE 9' );

関数リファレンス/wp enqueue style

フロントページのセクション数を増やす

フロントページのセクション数をfunctions.phpから4つから6つに増やす

function childtheme_front_page_sections() {
    return 6;
}
add_filter( 'twentyseventeen_front_page_sections', 'childtheme_front_page_sections' );

参考：https://make.wordpress.org/core/2016/11/29/theming-with-twenty-seventeen/

ブックマーク

New Functions, Hooks, and Behaviour for Theme Developers in WordPress 4.7
Theming with Twenty Seventeen
Twenty Seventeen: Merge Proposal for 4.7

Twenty Seventeen SVG 50 iconにphoneアイコン追加

電話アイコン欲しくないですか？私はほしい。
assets/images/svg-icons.svgファイルに他のアイコンを参考に追加する。

<symbol id="icon-phone" viewBox="0 0 32 32">
<path d="M11.748 5.773S11.418 5 10.914 5c-.496 0-.754.229-.926.387S6.938 7.91 6.938 7.91s-.837.731-.773 2.106c.054 1.375.323 3.332 1.719 6.058 1.386 2.72 4.855 6.876 7.047 8.337 0 0 2.031 1.558 3.921 2.191.549.173 1.647.398 1.903.398.26 0 .719 0 1.246-.385.536-.389 3.543-2.807 3.543-2.807s.736-.665-.119-1.438c-.859-.773-3.467-2.492-4.025-2.944-.559-.459-1.355-.257-1.699.054-.343.313-.956.828-1.031.893-.112.086-.419.365-.763.226-.438-.173-2.234-1.148-3.899-3.426-1.655-2.276-1.837-3.02-2.084-3.824a.56.56 0 0 1 .225-.657c.248-.172 1.161-.933 1.161-.933s.591-.583.344-1.27-1.906-4.716-1.906-4.716z"/>
</symbol>

アイコンソース参考：Flexicon