WordPress 4.7-jaアップデートが来ましたので、早速ここを2017年デフォルトテーマであるTwentySeventeenにしました。4.7にアップデートしてもテーマTwenty Seventeenは追加インストールが必要です。いままでTwenty Fifteenを利用していました。Twenty Sixteenは見送って、今回のテーマはライブプレビューをみて気に入ったので2年振りのテーマ刷新です。
この記事は、TwentySeventeenにしてカスタマイズした内容を追記していく予定です。全部出来上がってからアップしようと考えていたら、いつまでもテーマ変更できないと思うので、思い切って先に公開してから細かいところは追々設定していく予定です。まだざっくりと設定しただけですが2017年のデフォルトテーマ、カスタマイザーで設定するだけでかなりいい感じに出来上がっています。
WordPress.orgのテーマページはコチラ
このページの目次
子テーマ作成
まずは、子テーマを作成しました。WordPressデフォルトテーマなので頻繁にアップデートが配信されます。今回のテーマにはカスタマイザーに追加CSS機能があるので、CSSの変更だけなら子テーマ不要ですが、テーマファイルを直接カスタマイズした部分がテーマアップデートでリセットされてしまいます。
私は、パンくずリストや関連コンテンツなどを出すのにテーマファイルの変更を加えているので子テーマ必須です。子テーマの作り方は過去記事で紹介していますので、そちらをご覧ください。
ヘッダー動画にする
このテーマで一番目を引くと思うのが、ヘッダー動画でしょう。トップページのヘッダー画像をmp4動画やYoutube動画にすることができます。PCでの閲覧でトップページを開くと画面いっぱいにヘッダー動画が再生されます。ものすごいインパクトですね。しかしはたして、このブログにインパクトが必要でしょうか？
といっても、”トップページ”のヘッダーだけが動画になるだけで、記事ページのヘッダーは画像なので、それほど気にしなくて良いでしょうか。しかもPC閲覧時だけ動画のようです。（iPadではヘッダー画像が表示されています。）とりあえずネタにもなるので設定してみました。
動画は自前で用意しました。ウェアラブルカメラHX-A100で撮った天気の良い日に荒川を渡っている映像を使いました。テーマ推奨動画は、2000×1200ピクセルのMP4動画ということですが、HX-A100で撮ったままの1280×720ピクセル30fpsをぶった切っただけの7秒動画をアップロードしました。これで容量7.5MBです。
WordPressというかPHPのデフォルトがアップロード2MB上限だと思うので、推奨動画をアップするためには、上限を増やす必要ありです。
例として、当サイトのNginx WEBサーバーで変更する記事を書いています。
Youtubeの動画を指定することもできるので、そっちの方が簡単です。ヘッダー動画を設定する方法は、トップページを表示したままカスタマイザーを開き、ヘッダーメディアの項目で動画を指定します。
上部のサイトタイトルをクリックしてトップページを見ることができます。
サイトタイトルにロゴ
カスタムロゴ機能がテーマに組み込まれています。デフォルトテーマなので、みんな同じになりがちなところを、ロゴで個性を出すことができます。カスタマイザーを出して、サイト基本情報→ロゴ にロゴ画像をアップしました。
推奨画像サイズは250×250ピクセルです。サイトタイトルとキャッチフレーズの左側に配置されるのでロゴという感じになりました。WordPress4.5以降のTwentyFifteen、TwentySixteenでもカスタムロゴ機能がありましたが、タイトルの上に表示されてヘッダー幅を押し上げていたのと比べると、いい感じになっています。（モバイル幅ではタイトルの上に表示されます。）
トップページとアーカイブページを抜粋表示
ブログトップのページが、最近の投稿一覧で記事全文がずらずら続いているのを、抜粋表示に変更しました。
（2017/12/22追記）カスタマイズ方法を別記事にしました。
（2017/07/29追記）プラグインで簡単に抜粋表示にすることもできます。
content.phpはディレクトリ階層に注意
記事本文部分のテンプレートcontent.phpを子テーマにコピーして編集する際の注意点です。このサイトでは、パンくずリストプラグインBreadcrumb NavXTのコードや、Google関連コンテンツユニットのコードを貼り付けるカスタマイズでcontent.phpを編集しています。
twentyseventeen親テーマでは、/template-parts/post/content.phpというディレクトリ階層下にあります。このcontent.phpを子テーマに持ってくるときは、/template-parts/post/content.phpのディレクトリ階層（フォルダ構成）と同じ階層を作ってコピーしないと変更が反映されません。これでちょっとハマリました。
子テーマルートにcontent.phpを置く場合、その上位テンプレートであるsingle.phpも子テーマに持ってきて、‘template-parts/post/content’を‘content’に変更しても良いかもしれませんが、私は前者のディレクトリを作成してコピーしています。
フッターをCopyright表示に変更
フッターのProudly powered by WordPress表示をCopyright表示に変更しました。子テーマにコピーするテンプレートファイルは、上記と同じように /template-parts/footer/site-info.php をディレクトリ階層（フォルダ構成）そのまま子テーマにコピーして編集します。Copyright表示は、よくある単純なコードを利用しています。site-info.phpの13行目を下記に入れ替えています。
<a href=”<?php echo esc_url( __( ‘https://wordpress.org/’, ‘twentyseventeen’ ) ); ?>”><?php printf( __( ‘Proudly powered by %s’, ‘twentyseventeen’ ), ‘WordPress’ ); ?></a>
↓ ↓ ↓ ↓
<?php printf( __( ‘Copyright © %s All Rights Reserved.’, ‘twentyseventeen’ ), ‘<a href=”https://def-4.com/” >デフよん</a>’ ); ?>
フォントファミリー指定
style.cssデフォルトで、MacとiOSではヒラギノ角ゴシック、Windowsではメイリオ、その他はゴシック系のフォントファミリー指定がされています。とくにこだわりがなければ、何も変更する必要はないですが、変更する場合は子テーマにフォントファミリー部分をお好みで変更します。
/* Typography for Japanese Font */
html[lang="ja"] body,
html[lang="ja"] button,
html[lang="ja"] input,
html[lang="ja"] select,
html[lang="ja"] textarea {
font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}詳しくは別記事にしました。
グローバルナビメニュー
グローバルナビゲーションメニューを設置しました。twentyseventeenでは、作成したメニューの位置で「トップメニュー」のチェック欄にチェックを入れると、ヘッダー下部にグローバルナビメニューとして表示されます。
ページを下にスクロールしても、メニューが追従して常に上部に表示されているので、メニューを出すとユーザビリティアップしたような気がします。
アイコンフォントを出す
グローバルナビメニューやサイドバータイトルにFont Awesomeアイコンフォントを出しています。プラグイン「AGP Font Awesome Collection」をインストールして有効化すると、メニュー作成画面でアイコンフォントをプルダウンで選ぶことができるようになります。
さらにサイドバーのウィジェットタイトルは、CSSの擬似要素:beforeを使って表示させています。例としてウィジェットに追加したカテゴリーのタイトルにアイコンフォント (Unicode: f02c)を出す場合です。
.widget_categories h2.widget-title:before {
font-family: "FontAwesome";
content: "\f02c";
margin-right: 5px ;
}プラグイン「AGP Font Awesome Collection」は記事本文中にも簡単に出せるので便利です。過去記事で紹介しています。
ソーシャルリンク
テーマ標準のソーシャルリンクメニューがフッター左に出せますが、今回はコチラのプラグインを利用してサイドバーとフッターの両方にウィジェットで出しました。詳しくは別記事にしました。
リンクの下線を非表示に
(2017/02/01追記） 本文やウィジェットのリンク文字に、下線が出ているのを非表示にしました。詳しくは別記事にしています。
表の枠線が出なくなった
(2017/02/04追記）テーマをTwenty Seventeenに変更してから、過去記事で挿入していたテーブルの枠線が出なくなったのと、テーブルが均等幅にならなくなりました。style.cssのtable設定が、いままでのデフォルトテーマから今回ずいぶん変わったようです。詳しくはコチラの記事をご覧ください。
背景色をCSSでカスタマイズ
(2017/04/22追記）グローバルナビメニューやフッターの背景色を設定しました。詳しくはコチラの記事をご覧ください。
記事の横幅を1200pxに広げる
（2017/06/13追記） ワイド画面のパソコンで見ると、記事本文の幅が狭く感じていたので横幅を広くしてみました。詳しくはこちらの記事にしました。
アイキャッチ位置の違うテンプレートを作成
（2018/02/07追記） アイキャッチをタイトル下に出すテンプレートを作成して、投稿記事ごとにテンプレートを選択してアイキャッチの配置を変えられるようにしました。
とてもためになりました。ありがとうございます。
もし記事があったらすみません。
ヘッダーのでっかい画像のサイズの変更の仕方を教えてください。
あれこれ見ているのですがわからなくって。
あくあさん、style.cssの1683行目からヘッダー画像と動画のサイズの設定がありますが、
それでも画像サイズが小さくなるだけで、ヘッダーサイズは変わりません。
トップページの全画面ヘッダーはこのテーマの特徴なので、そこが気になるならテーマを変えたほうが良いと思います。
はじめまして。沢山読ませていただきました。
記事の中にお気軽にシェアしてください。でシェアボタン設置してありますがどのようにしたらよいのでしょうか。教えて下さい。
マリさん、
ここのシェアボタンはプラグインJetpackの共有ボタン機能を使っています。
こちらの過去記事を参考にしてください。
https://def-4.com/jetpack-share-button/
WPもHPも初心者のものです。たまたまテーマをこのTwenty Seventeenにしたのですが、最近テーマを変えようかと思っていたところたどり着きました。
こちらのサイトは見れば見るほどすごいです。しかもシンプル。ぜひいろいろ真似をさせてください。とても参考になりました。（何をどうすればいいのか、いまのところわかりませんが、ここの記事を参考に一つずつがんばります。）
ゆうすけさん、コメントありがとうございます。
私も学びながら備忘録的に記事にしています。
ぜひ参考にしてください。
もし記事にあったらすいません。メインビジュアル画像の下の方にある黒いグラデーションを消すことはできますでしょうか？
kojikaさん、
＞メインビジュアル画像の下の方にある黒いグラデーション
すみません、どこのことかよくわかりません。
ご返答ありがとうございます。
デフォルトのトップにあるサボテンの様な画像です。
下の方にTWENTY SEVENTEENと白い文字ではいいてますがそのあたりに
薄っすら透過されている黒いグラデーションがあるのですが
そこのことです。
kojikaさん、
どうしても私には黒いグラデーションがわかりません。
サボテンの画像内にあるなら、それは画像のグラデーションなので画像ごと変えるしかないと思います。
お役に立てなくてすみません。
ご連絡ありがとうございます。
スクロールした時に黒い影が動くので画像自体の影ではないのですがすいません説明下手で、もう少し頑張ってみます。
もしかしたら、Androidスマートフォンでご覧ではないでしょうか。
今日、量販店でどれかの機種をいじってたら、画像の枠のようなのが追従する機種が一機種だけありました。
他の機種では出ないので、もしかしたら機種によるものかもしれません。
こんにちは！
子テーマ作りたくてたどり着きました。
crayonが全て稼働していなかったようなので、是非こちら復旧して頂けると嬉しいです！
コンタさん、教えて頂きありがとうございます。
原因不明ですが、当ブログだけcrayonプラグインが機能しなくなっているようです。
設定リセット、プラグイン再インストールしても直らないのでプラグインを無効にしています。
とりあえず表示はされています。ご指摘頂けて助かりました。