WordPressテーマのtwentyseventeenについてメモするところがほしくて自分用覚書エントリ。増えたり減ったり。
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( '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' ), ) );
実際にナビゲーションメニューを表示したい箇所には
<?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' );
フロントページのセクション数を増やす
フロントページのセクション数を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
